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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

1回答

436閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/02/08 11:20

前提・実現したいこと

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サーバーが諸々読み込んでくれそうか、ヒントをいただけたら幸いです。。

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

投稿2019/02/10 05:59

psuke

総合スコア202

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/02/12 10: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"> もう少し調べてみます。回答いただいて大変ありがたかったです。
psuke

2019/02/13 21:07

ご紹介いただいた方法だと、外部(http://ajax.googleapis.com/)サイト上のjsを参照しており、/app/assets/javascripts/jquery.min.jsは参照されていないかと思います。その方法でCSSも参照させるのであれば、相対パスではなくこちらも外部サイトを直接参照することになります。 assets.rbの設定内容を記載いただいてもよろしいでしょうか。また、修正後にRailsサーバを再起動させる必要がありますが、それは実行されましたでしょうか。
退会済みユーザー

退会済みユーザー

2019/02/15 10: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)
psuke

2019/02/15 15: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')
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問