RailsにBootstrapテンプレートが適用できない

前提・実現したいこと

Railsで以下テンプレートを仕様してWebサイトを作成しています。
https://startbootstrap.com/templates/sb-admin/

サンプルページのように動くページを作成したいのですが、ハンバーガーメニューが正しく機能せず、以下のように表示されてしまいます。
![

サイドバーに加え、チャートやページネーションなども機能していないです。

補足情報（FW/ツールのバージョンなど）

Ruby2.6.5
Rails5.2.4.1
Bootstrap4.4.1

maisumakun

2020/01/28 01:39

Bootstrapの導入はどのように行っていますか？ JavaScript、CSSをどのように用意したかの詳細をお願いします。

Noir

2020/01/28 01:51 編集

Bootstrapの導入はGemfileにgem 'bootstrap'を記述した後、bundle installで導入しました。 Javascriptはportal\app\assets\javascriptsにscripts.jsを貼り付けた後、Application.html.erbに<script src="javascripts/scripts.js"></script>を記述してます。 CSSもportal\app\assets\stylesheetsにstyles.cssを貼り付けてApplication.html.erbに<link rel="stylesheet" href="../stylesheets/styles.css">と記述しています。

maisumakun

2020/01/28 01:52

Bootstrap自体のJavaScript/CSSや、jQuery、popper.jsなどは準備しましたか？ https://getbootstrap.com/docs/4.0/getting-started/javascript/#dependencies

Noir

2020/01/28 02:07 編集

BootstrapCDN(https://www.bootstrapcdn.com/)やその他サイトを参考に以下をapplication.html.erbに記載しています。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="js/bootstrap.js"></script> これとは別に用意するものがあるという事でしょうか？

maisumakun

2020/01/28 02:09

> これとは別に用意するものがあるという事でしょうか？いえ、何も書かれていなかったので、「必要なものの導入が抜けている」可能性を疑っただけです。

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

回答1件

ベストアンサー

Javascriptはportal\app\assets\javascriptsにscripts.jsを貼り付けた後、Application.html.erbに<script src="javascripts/scripts.js"></script>を記述してます。

こちらは正常に読み込めていますでしょうか。assets/以下なので、設定次第ではそのまま参照できない可能性があります。

投稿2020/01/28 02:09

maisumakun

総合スコア146641

Noir

2020/01/28 02:15

ページのソースから確認したらRooting Errorでアクセスできませんでした。この場合正常に読み込まれていないという事でしょうか？またどのようにしたら読み込めるのかもご教授頂きたく思います。

maisumakun

2020/01/28 02:17

> この場合正常に読み込まれていないという事でしょうか？そのとおりです。 > またどのようにしたら読み込めるのかもご教授頂きたく思います。他のJavaScriptはSprockets（app/assets/）で書いていますか？Webpacker（app/javascript/）ですか？

Noir

2020/01/28 02:28

> そのとおりです。なるほど、ありがとうございます。 > 他のJavaScriptはSprockets（app/assets/）で書いていますか？Webpacker（app/javascript/）ですか？他のJavascriptは、app/assets/に書いています。 application.jsに //= require jquery //= require bootstrap-sprockets //= require_tree . と書いていますが、これは関係ありますか？

maisumakun

2020/01/28 02:32 編集

> application.jsに（中略）と書いていますがはい、当該のscripts.jsをapp/assets/javascripts/以下に置けば、「require_tree .」が読み込むはずです（サーバの再起動などは必要かもしれませんが）。

Noir

2020/01/28 02:51 編集

サーバを再起動したところ、scripts.jsが正常に読み込まれソースから参照することができました、ありがとうございます。（チャートやページネーションも正常に機能するようになりました。）ただ、ハンバーガーメニューはまだ使えず、中のメニューが飛び出してしまう状態です。

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