質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

Rails5 でBootstrapテンプレートを表示させたいが、画像等読み込まれない

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,199

tamagosushii

score 4

前提・実現したいこと

Ruby on Rails 5(5.1.6.1)を使用し、Bootstrapのテンプレートを表示させたいです。

テンプレートはこちらからDLしました。http://www.designstub.com/projects/auro-bootstrap-agency-template/

発生している問題・エラーメッセージ

テンプレートを配置してアクションとルーティングの設定を行い、テンプレートのHTMLにアクセスしたのですが

下記のようなエラーメッセージが表示され、JavaScript部分やCSS、画像が表示されません。

単純な文字なら表示されるので、HTMLへのアクセス自体は出来ていますが、JQueryやapp配下のファイルの読み込みができていないようです。

エラーメッセージ

Uncaught Error: Bootstrap's JavaScript requires jQuery

Uncaught ReferenceError: jQuery is not defined

GET http://localhost:3000/assets/stylesheets/bootstrap.min.css 404 (Not Found)

GET http://localhost:3000/assets/javascripts/bootstrap.min.js net::ERR_ABORTED 404 (Not Found)

GET http://localhost:3000/assets/stylesheets/flexslider.css net::ERR_ABORTED 404 (Not Found)

GET http://localhost:3000/assets/stylesheets/animate.min.css net::ERR_ABORTED 404 (Not Found)

GET http://localhost:3000/assets/javascripts/retina.min.js

…

試したこと、補足情報

◇セキュリティ面について

■フォルダのアクセス権については誰でもアクセスできるように設定しました。

■ファイアウォールもすべて無効にしています。

◇テンプレートの修正について

■HTMLに記述しているassets配下のパスが間違っていないかどうかも確認しています。

■HTMLはすべて.html→.html.erbの拡張子に直しています。

■試しに.erbを外してRailsサーバを経由せずに直接HTMLファイルを開いてみたところ、画像等きちんと表示されました。

◇フレームワークについて

■JQueryはインストール済で、単体では動くことを確認しています(jquery-rails 4.3.3)。

(こちらの方法で確認    https://qiita.com/ngron/items/95846bd630a723e00038)

■BootStrapもインストール済です(bootstrap-sass 3.3.7)。

■Bundle update も実施済です。

◇設定ファイル・ソースについて

■config/environments/production.rbの下記プロパティはTrueに設定しました。

config.public_file_server.enabled = true

■application.html.erbのbody部をcontainerにしました。

<div class="container">

<%= yield %>

</div>

■assets\javascripts\application.jsに以下追記しました。

//= require jquery

//= require jquery_ujs

//= require bootstrap-sprockets

■assets\stylesheets\application.css → application.scss に拡張子変更しました。

■上記事項を試すたびにRailsサーバーの再起動も行いました。

◇他

■使用ブラウザはChromeです。

■使用OSはWindows Sever 2016 DataCenter です。

RailsとJQueryはProgateで学んだ程度で、BootStrapは初めて使用します。

ド初心者で申し訳ありませんが、可能でしたらどうしたらRailsサーバーが諸々読み込んでくれそうか、ヒントをいただけたら幸いです。。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

view/layouts/application.html.erbのhead部に<%= javascript_include_tag 'jquery.min' %>を追加してみるとどうでしょうか?jquery.min.js/app/assets/javascripts/にあることが前提ですが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/12 19:46

    回答いただき誠にありがとうございます。返信遅くなり申し訳ありません。

    はい、/app/assets/javascripts/にjquery.min.jsは配置しています。
    <%= javascript_include_tag 'jquery.min' %>を追記してみたのですが、変わらず上手くいきませんでした。。下記エラーが表示されてしまいます。

    Asset was not declared to be precompiled in production.
    Add `Rails.application.config.assets.precompile += %w( jquery.min.js )` to `config/initializers/assets.rb` and restart your server

    assets.rbのプリコンパイル設定をしてみたりもしたのですが上手く行かず
    下記URLの通り試してみたら、JQueryのエラーが取れました。javascript_include_tagの前にスクリプトを読み込むようにすると良いみたいです。この記事にあるようにWeb上のソースを読み込むようにしました。
    https://qiita.com/keiy121/items/d1880ff2d0de444458c7

    同じ要領でstylesheet_link_tagの前に以下のように書いてみましたがこちらは変わらずエラー…ローカルにあるファイルが読めないということなのかどうかわからないですが。。
    <link rel="stylesheet" href="../../assets/stylesheets/animate.min.css">

    もう少し調べてみます。回答いただいて大変ありがたかったです。

    キャンセル

  • 2019/02/14 06:07

    ご紹介いただいた方法だと、外部(http://ajax.googleapis.com/)サイト上のjsを参照しており、/app/assets/javascripts/jquery.min.jsは参照されていないかと思います。その方法でCSSも参照させるのであれば、相対パスではなくこちらも外部サイトを直接参照することになります。

    assets.rbの設定内容を記載いただいてもよろしいでしょうか。また、修正後にRailsサーバを再起動させる必要がありますが、それは実行されましたでしょうか。

    キャンセル

  • 2019/02/15 19:05

    再度ご回答いただきありがとうございます…!
    そうですよね、このやり方だと外部サイトにないCSSなど参照できなくなってしまうのでちゃんとした解決法にはなりません。。

    assets.rb は以下の通りです。使用するJSとCSSを全て書いている状態です。
    Railsサーバの再起動は都度行っております。
    -------------------------------------------------------------------------
    # Be sure to restart your server when you modify this file.

    # Version of your assets, change this if you want to expire all your assets.
    Rails.application.config.assets.version = '1.0'

    # Add additional assets to the asset load path.
    # Rails.application.config.assets.paths << Emoji.images_path
    # Add Yarn node_modules folder to the asset load path.

    # Precompile additional assets.
    # application.js, application.css, and all non-JS/CSS in the app/assets
    # folder are already added.
    # Rails.application.config.assets.precompile += %w( admin.js admin.css )
    Rails.application.config.assets.precompile += %w( jquery.min.js bootstrap.min.js cable.js jquery.flexslider-min.js jquery.localscroll-1.2.7-min.js main.js modernizr.js retina.min.js)
    Rails.application.config.assets.precompile += %w( animate.min.css bootstrap.min.css flexslider.css main.css responsive.css)

    キャンセル

  • 2019/02/16 00:56

    以下のように、jsファイルごとにそれぞれ記載してみていただけますか?CSSも同様ですね。
    Rails.application.config.assets.precompile += %w( jquery.min.js )
    Rails.application.config.assets.precompile += %w( bootstrap.min.js )
    Rails.application.config.assets.precompile += %w( cable.js )
    Rails.application.config.assets.precompile += %w( jquery.flexslider-min.js )
    Rails.application.config.assets.precompile += %w( jquery.localscroll-1.2.7-min.js )
    Rails.application.config.assets.precompile += %w( main.js )
    Rails.application.config.assets.precompile += %w( modernizr.js )
    Rails.application.config.assets.precompile += %w( retina.min.js )

    それと、私の環境だと以下の構文も入っていました。
    Rails.application.config.assets.paths << Rails.root.join('node_modules')

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる