Rails3.2でJavaScriptやCSSおよび画像を組込む

デザイナーが、トップページのHTML、CSSおよび、Javascriptを持ってきた。
早速Rails3.2のアプリに実装したいのだが...

Rails3.2は、アセットパイプラインって機能があって、なにものかよくわかっていない。
さらに、CoffeeScriptやら、SCSSなんていわれても..

とりあえず、この２者はおいておいて..

いただいた、HTML、CSS、JavaScript、画像を設置してみる。


■HTML設置
これは、erb形式に変換すればいいだけだから問題ないでしょう。
ただし、はじめて知ったことがあったのでメモ。

それは、グローバルナビゲーションのコーディングで..

   ↓↓ HTML は以下のようになっていた。
    <ul class="gnavi">
       <li><a href=#><img src="gn1.jpg" height="47" class="swap" /></a></li><!--
       --><li><a href=#><img src="gn2.jpg" height="47" class="swap" /></a></li><!--
       --><li><a href=#><img src="gn3.jpg" height="47" class="swap" /></a></li><!--
       --><li><a href=#><img src="gn4.jpg" height="47" class="swap" /></a></li><!--
       --><li><a href=#><img src="gn5.jpg" height="47" class="swap" /></a></li><!--
       --><li><a href=#><img src="gn6.jpg" height="47" class="swap" /></a></li>
    </ul>

 これを、

   ↓↓下のように実装すると．．．画像と画像の間に隙間ができる。

    <ul class="gnavi">
       <li><a href=#><img src="gn1.jpg" height="47" class="swap" /></a></li>
       <li><a href=#><img src="gn2.jpg" height="47" class="swap" /></a></li>
       <li><a href=#><img src="gn3.jpg" height="47" class="swap" /></a></li>
       <li><a href=#><img src="gn4.jpg" height="47" class="swap" /></a></li>
       <li><a href=#><img src="gn5.jpg" height="47" class="swap" /></a></li>
       <li><a href=#><img src="gn6.jpg" height="47" class="swap" /></a></li>
    </ul>

デザイナーに問い合わせた。 

• リストのメンバーとメンバー間に、内容なしのコメント<!-- -->を入れ、更に、コメント内で改行する（赤字の部分）ことで画像間を詰めて表示できる。
• ただし、<li>～</li>の途中で改行すると、うまくいかなかった。

らしいので、そのとおりに実装し、正常表示を確認できた。

なお、実装は、erbなので、link_toや、image_tagを用いていることは言うまでも無いデス！

■画像の設置

ページ内の画像はどこに置くか？

Rails3.2では、publicディレクトリ配下に、magesディレクトリはない。  では、どこ？

• 画像置き場は、app/assets/images  。
• HTMLからの参照は、上記直下なら、画像名だけでよい。
    例） image_tag "image.jpg", :alt=>"test"

■CSSの設置

CSSはどこに？ ..そう、やっぱ、app/assets 配下の stylesheetsディレクトリ。

今回は、いただいた CSSをそのまま置いてみた。

ところが、CSSに直接指定する画像は、どのように記述すればいいの？

ってことで、下記。

• まず、拡張子を〝erb〟にする。
  つまり、ルビーコードが埋め込めるってこと。
• そんで、画像の参照は、asset_path() 関数を用いる。
     → background: url(<%= asset_path('image_bg.jpg') %>)
• 最後に、HTMLでのLINKは、デフォルトのまま。
     → <%= stylesheet_link_tag    "application", :media => "all" %>  

■JavaScriptの設置

なんか、下のとおり、いっぱい書いてあったけど、どうすればいいの？

    <script type="text/javascript" src="./js/jquery.js"></script>

    <script type="text/javascript">

       jQuery.noConflict();

       var j$ = jQuery;

    </script>

    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>

            ：

     （以下省略）

とりあえず、いただいたデザインで、JavaScriptが必要なのは、グローバルナビゲーションをオンマウスで変化させることだけなので、その部分だけ設置することにする。

いろいろググってみたり、app/assets/stylesheets 配下に ｊｓファイルを置いてみたり．．．

んで、うまくできたのが、以下。

• 必要なのは、
• jquery.js
• jquery_ujs.js
• rollover.js
• jquery.js と、 jquery_ujs.js はデフォルトで展開される。
• rollover.js は、他者が作ったスクリプトなので、以下へ配置する。
• vendor/assets/javascripts/ 
• html.erbへの記述は、デフォルトのまま。
•  <%= javascript_include_tag "application" %>

でも、このままではダメで、その原因は、次のコードが未実装だから。
       <script type="text/javascript">

          jQuery.noConflict();

          var j$ = jQuery;

        </script>

でも、こいつは、rollover.jsの前、jquery～の後におかなければならないらしい。
なぜなら、〝$〟関数（?）を〝j$〟に置き換えていて、それをrollover.jsが使っているから。

view への記述は、

   <%= javascript_include_tag "application" %>

そんで、展開されるのは、

    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>

    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>

    <script src="/assets/rollover.js?body=1" type="text/javascript"></script>

    <script src="/assets/pc/top.js?body=1" type="text/javascript"></script>

    <script src="/assets/application.js?body=1" type="text/javascript"></script>

これでは、前述の未実装コードを所定の位置に書くことができない。

なので、

• rollover.js の〝j$〟を〝jQuery〟に変更する。

         ....無事できました。