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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1896閲覧

BxSliderを.html.erb形式のページ上で動作させたい

hikaru923

総合スコア27

Ruby on Rails

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/11/16 09:05

編集2016/11/16 09:15

###前提・実現したいこと
ruby on railsを用い(この表現も正確か分かりません)自分でwebページを作ってみたいと思っております。
0から作るのではなく、
Ruby on Rails チュートリアルを全行程終わらせた成果物をブラッシュアップしていく、という形です。
手始めに、色々なサイトによくあるスライドショーのようなものを表示させたいと思い
「bxslider(こちらのサイトを参考にさせていただきました。)」を用いて実現しようと考えております。
###発生している問題・エラーメッセージ
スライダーが表示されません…。
最初は参考にさせていただいたサイトそのままの操作/記述で挑んだのですが全くダメでした。
私がChromeでブラウジングしているので、Chromeデベロッパーツールのエラーメッセージを元に
どうやら必要な各ファイルが読み込めてない?という事を読み取り
必要なJavascriptはapp/assets/javascripts/jquery.bxslider.min.js
必要なCSSはapp/assets/stylesheets/jquery.bxslider.css
に配置し、一括でjsもcssも読み込めるようにしました。(ここまででさえ長かったです…仕様をよく分かっておらず…)

それでもエラーが残ってしまい、どうにも立ち行かなくなったので質問させていただきます。
当該エラーメッセージはこちらです。

Uncaught TypeError: $(...).bxSlider is not a function(…) (index):43 (anonymous function) @ (index):43 k @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 D @ jquery.min.js:2

この質問を参考にさせていただいたのですが
回答に

HTMLからみて../jquery.bxslider.min.jsに対象のファイルは存在しますか?

ソース的には問題なさそうに見えるので、恐らくそのファイルの場所か
ファイル名が違うんじゃないかと思います。

とありましたが、私の場合一括読み込みなので読み込めている=ファイル名も場所も正しいという認識です。
本当に読み込めていないのか、それともhtmlとhtml.erbの仕様の違いで全く別の記述法にしなければならないのか…
どうすればよろしいのでしょうか…どなたかご教示頂けますと幸いです。
###該当のソースコード

app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> <%= render 'layouts/shim' %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ //この部分がツール上でエラーになっている部分です。 auto: true, }); }); </script> </head> <body> <%= render 'layouts/header' %> <div class="container"> <% flash.each do |message_type, message| %> <%= content_tag(:div, message, class: "alert alert-#{message_type}") %> <% end %> <%= yield %> <%= render 'layouts/footer' %> <%= debug(params) if Rails.env.development? %> </div> </body> </html>

###試したこと
何をしたらいいのかも分からず途方に暮れております。

###謝辞
問題解決にあたり、何か必要な情報などありましたら遠慮なくお申し付けください。
長文になりましたが、ここまで目を通していただき誠にありがとうございました。
何卒、お力添えをよろしくお願い申し上げます。

###追記
kei344さん、早速閲覧ありがとうございます!
以下HTML記載させていただきます。

HTML

1 2<!DOCTYPE html> 3<html> 4<head> 5 <title>Ruby on Rails Tutorial Sample App</title> 6 <link rel="stylesheet" media="all" href="/assets/account_activations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" /> 7<link rel="stylesheet" media="all" href="/assets/custom.self-81bbf562ca335a709ee83c010d4cc658bf6a3a6648bcd73f5ee7fcbf1d6a2e89.css?body=1" data-turbolinks-track="true" /> 8<link rel="stylesheet" media="all" href="/assets/jquery.bxslider.self-bbab3ad0b58b6f86426ad37ea56ad041af6d4ec186f6bceed95572414dee8e9f.css?body=1" data-turbolinks-track="true" /> 9<link rel="stylesheet" media="all" href="/assets/microposts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" /> 10<link rel="stylesheet" media="all" href="/assets/password_resets.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" /> 11<link rel="stylesheet" media="all" href="/assets/relationships.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" /> 12<link rel="stylesheet" media="all" href="/assets/sessions.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" /> 13<link rel="stylesheet" media="all" href="/assets/static_pages.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" /> 14<link rel="stylesheet" media="all" href="/assets/users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" /> 15<link rel="stylesheet" media="all" href="/assets/bxslider.self-66d0fab3ba0b739c4e011dc424ae5456b01c70c8da0cd577804d535f620a3ef9.css?body=1" data-turbolinks-track="true" /> 16<link rel="stylesheet" media="all" href="/assets/application.self-d885a0a66bd595c10edb24f8879f94e334d88be0730c4d7c7a7b57c731c09037.css?body=1" data-turbolinks-track="true" /> 17 <script src="/assets/jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1" data-turbolinks-track="true"></script> 18<script src="/assets/jquery_ujs.self-8e98a7a072a6cee1372d19fff9ff3e6aa1e39a37d89d6f06861637d061113ee7.js?body=1" data-turbolinks-track="true"></script> 19<script src="/assets/bootstrap.self-cdea7efeac1597b89ddd6fd86b0e8e0bec5d5fb1fac9c6e8a045f2c59eef2d13.js?body=1" data-turbolinks-track="true"></script> 20<script src="/assets/turbolinks.self-c846e670826600e8c91b1a5ada3e6547110d996cd6ff24cde55024f7a135a1b4.js?body=1" data-turbolinks-track="true"></script> 21<script src="/assets/jquery.bxslider.self-378be78e3ae2ebfc909b86a0b3aea51858c2a394b967a6abafacb3d1fabeb8fd.js?body=1" data-turbolinks-track="true"></script> 22<script src="/assets/jquery.easing.1.3.self-c85028b4485f3b7e91508aa9891cfeb41a8884efd87672715de3fa1ae2173948.js?body=1" data-turbolinks-track="true"></script> 23<script src="/assets/jquery.fitvids.self-0caa1c3cf6099ad75621d7021e543202502128d712d830ae831528e2a7460237.js?body=1" data-turbolinks-track="true"></script> 24<script src="/assets/bxslider.self-6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167.js?body=1" data-turbolinks-track="true"></script> 25<script src="/assets/account_activations.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script> 26<script src="/assets/jquery.bxslider.min.self-2efec8c17fede6e22e8d83ca279de13cda53ced160ab53498db5ffcf3a700dde.js?body=1" data-turbolinks-track="true"></script> 27<script src="/assets/microposts.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script> 28<script src="/assets/password_resets.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script> 29<script src="/assets/relationships.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script> 30<script src="/assets/sessions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script> 31<script src="/assets/static_pages.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script> 32<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script> 33<script src="/assets/application.self-7862a8a8b42407b4741a1adeeea35f0d13ddc4f702ec532adb0674491d296495.js?body=1" data-turbolinks-track="true"></script> 34 <meta name="csrf-param" content="authenticity_token" /> 35<meta name="csrf-token" content="/LiU17FdI/dq/l/ctaeBpk83dVSO2h7g2t7JAmWeutJUKhFcaFctG8BlscCulcVaDwTJieaI+UUVa8PulAXRZA==" /> 36 <!--[if lt IE 9]> 37<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"> 38</script> 39<![endif]--> 40 41<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 42 <script type="text/javascript"> 43 $(document).ready(function(){ 44 $('.bxslider').bxSlider({ 45 auto: true, 46 }); 47 }); 48 </script> 49</head> 50<body> 51 <header class="navbar navbar-fixed-top navbar-inverse"> 52 <div class="container"> 53 54 <a id="logo" href="/"><img alt="logo" src="/assets/logo-10cacf97637abbf6ff7bf7b642f1369acbe27c1d9f48510a8c73121fa4767cc9.PNG" /></a> 55 <nav> 56 <ul class="nav navbar-nav navbar-right"> 57 <li><a href="/">Home</a></li> 58 <li><a href="/help">Help</a></li> 59 <li> <span class="glyphicon glyphicon-user" aria-hidden="true"></span><li> 60 <li><a href="/login">Log in</a></li> 61 </ul> 62 </nav> 63 </div> 64</header> 65 66 <div class="container"> 67 <ul class="bxslider"> 68 <li><a href="/"><img alt="infospace" src="/assets/logo-10cacf97637abbf6ff7bf7b642f1369acbe27c1d9f48510a8c73121fa4767cc9.PNG" /></a></li> 69 …×4 70 </ul>

文字数の関係で以下略とさせていただきます。

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

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

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

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

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

kei344

2016/11/16 09:08

出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。
guest

回答1

0

ベストアンサー

下記を</title>の後にでも移動してみてください。

HTML

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

投稿2016/11/16 09:22

kei344

総合スコア69364

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

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

hikaru923

2016/11/16 09:37

どうやらスライドのフォームが現れたみたいです! …が、どうやら画像を読み込まないみたいです… 自分も試行錯誤してみます。何よりフォームが出てきたら後はもうすぐな気がします! …でも、もしも画像表示に自力でたどり着けなかった時の為に ベストアンサーは少々お待ちください…すみません。 また謝辞は後ほど述べさせていただきます!ひとまずは解決です。ありがとうございます!
hikaru923

2016/11/16 09:45

やっぱり延期は失礼ですね、もし分からなければまた質問させていただきます。 この度は圧倒的な速度で解決していただき誠にありがとうございました! 本当に助かりました…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問