質問: ruby on rails初心者です。 Rails 5.0.1 レスポンシブメニューを使いたくRailsに以下を導入しようとしました。 Horizontal Drop-Down Menu 上記は、JavaScript、Font、Css から構成されています。 導入に手順は、以下を参考にしました。 RailsのAsset Pipelineの理解とgemで管理しないJavaScriptライブラリの配置 JavaScriptは、venderの中に配置 vendor\assets\HorizontalDropDownMenu\js app\assets\javascriptsのapplication.jsに以下を追加 ``` //= require js/HorizontalDropDownMenu ``` ところが、見つからないというエラーになりました ``` couldn't find file 'js/HorizontalDropDownMenu' with type 'application/javascript' Checked in these paths: ``` それから、CSSも方は参考ページと違って配置すら出来ていません。 参考ページは、 app/assets/stylesheets/application.css に *= require 'css/ベンダーCSS名' と記載するようにありますが、私の環境では application.cssは、 application.scss でした。 これはRailsのバージョンが違うためでしょうか? scssの場合は、 以下のようにすればよろしいでしょうか? @import "css/HorizontalDropDownMenu"; 最後にFontフォルダはどこに配置すべきでしょうか? 宜しくお願い致します。
回答: pecchan様 rails5から、Sprocketsが利用されるようになっております Rails 4まではconfig/initializers/assets.rbでどのアセットをプリコンパイルするか指定していましたが、Rails 5ではapp/assets/config/ディレクトリ内のmanifest.jsで指定します。 //= link_tree ../images //= link_directory ../javascripts .js //= link_directory ../stylesheets .css もしrails4と同じようにしたいならで、ここに //= link_directory ../../../vendor を追記してください。(時代遅れですが...) ※そもそもvendorに置くのはrails3ぐらいまでの手法だった気がします。 また、scssはcssを完全後方互換しているので、特にきにすることはありません。 ところで、一般論ですが レスポンシブルデザインはweb系では非常に導入しやすくなっております。 しかし、いろいろな手法が乱立していて、どれも一長一短がございます。 しかし、Horizontal Drop-Down Menuのようなものを一つ一つ入れていくより レスポンシブなフレームワークを導入して開発していくのが楽だと思います。 最新CSSフレームワークまとめ デザインにどのくらい人員が裂けるかはプロジェクトによりますが少人数で開発する場合、私はbootstrapをお勧めします。bootstrapを入れた上でHorizontal Drop-Down Menuみたいなことができる拡張を探す方がいいと思います。 理由は、導入と編集が一番楽、簡単にレスポンシブデザインになり、非エンジニアでもちょっとの手間で見てくれがかなり改善されるということです。 また、js等のプラグインを導入する場合 rails-assetsという便利なものがあります。 ``` source 'https://rails-assets.org' do gem 'rails-assets-bootstrap' gem 'rails-assets-bootstrap-timepicker' gem 'rails-assets-bootstrap-html5sortable' gem 'rails-assets-bootstrap-fileinput' gem 'rails-assets-bootstrap-tagsinput' end ``` こんな感じで、jqueryプラグインを簡単に導入できます。bowerを利用しているjs限定ですが いちいちbootstrap-railsなどを導入する必要がないのでおすすめです。 application.js,application.scss に追記は必要ですが