【ruby on rails】サードパーティ製のCSS、JavaScriptなど一式を導入したい

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に以下を追加

JavaScript
1//= require js/HorizontalDropDownMenu

ところが、見つからないというエラーになりました

html
1couldn't find file 'js/HorizontalDropDownMenu' with type 'application/javascript'
2Checked in these paths:

それから、CSSも方は参考ページと違って配置すら出来ていません。
参考ページは、
app/assets/stylesheets/application.css
に
*= require 'css/ベンダーCSS名'
と記載するようにありますが、私の環境では
application.cssは、
application.scss
でした。

これはRailsのバージョンが違うためでしょうか？
scssの場合は、
以下のようにすればよろしいでしょうか？
@import "css/HorizontalDropDownMenu";

最後にFontフォルダはどこに配置すべきでしょうか？

宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

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という便利なものがあります。

ruby
1source 'https://rails-assets.org' do
2gem 'rails-assets-bootstrap'
3gem 'rails-assets-bootstrap-timepicker'
4gem 'rails-assets-bootstrap-html5sortable'
5gem 'rails-assets-bootstrap-fileinput'
6gem 'rails-assets-bootstrap-tagsinput'
7end