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

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

ただいまの
回答率

90.51%

  • HTML

    11456questions

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

  • Ruby on Rails

    8835questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 705

hikaru923

score 19

前提・実現したいこと

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記載させていただきます。

<!DOCTYPE html>
<html>
<head>
  <title>Ruby on Rails Tutorial Sample App</title>
  <link rel="stylesheet" media="all" href="/assets/account_activations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/custom.self-81bbf562ca335a709ee83c010d4cc658bf6a3a6648bcd73f5ee7fcbf1d6a2e89.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery.bxslider.self-bbab3ad0b58b6f86426ad37ea56ad041af6d4ec186f6bceed95572414dee8e9f.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/microposts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/password_resets.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/relationships.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/sessions.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/static_pages.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/bxslider.self-66d0fab3ba0b739c4e011dc424ae5456b01c70c8da0cd577804d535f620a3ef9.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-d885a0a66bd595c10edb24f8879f94e334d88be0730c4d7c7a7b57c731c09037.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-8e98a7a072a6cee1372d19fff9ff3e6aa1e39a37d89d6f06861637d061113ee7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap.self-cdea7efeac1597b89ddd6fd86b0e8e0bec5d5fb1fac9c6e8a045f2c59eef2d13.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c846e670826600e8c91b1a5ada3e6547110d996cd6ff24cde55024f7a135a1b4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery.bxslider.self-378be78e3ae2ebfc909b86a0b3aea51858c2a394b967a6abafacb3d1fabeb8fd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery.easing.1.3.self-c85028b4485f3b7e91508aa9891cfeb41a8884efd87672715de3fa1ae2173948.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery.fitvids.self-0caa1c3cf6099ad75621d7021e543202502128d712d830ae831528e2a7460237.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bxslider.self-6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/account_activations.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery.bxslider.min.self-2efec8c17fede6e22e8d83ca279de13cda53ced160ab53498db5ffcf3a700dde.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/microposts.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/password_resets.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/relationships.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/sessions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/static_pages.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-7862a8a8b42407b4741a1adeeea35f0d13ddc4f702ec532adb0674491d296495.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="/LiU17FdI/dq/l/ctaeBpk83dVSO2h7g2t7JAmWeutJUKhFcaFctG8BlscCulcVaDwTJieaI+UUVa8PulAXRZA==" />
  <!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->

<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>
    <header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">

    <a id="logo" href="/"><img alt="logo" src="/assets/logo-10cacf97637abbf6ff7bf7b642f1369acbe27c1d9f48510a8c73121fa4767cc9.PNG" /></a>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/">Home</a></li>
        <li><a href="/help">Help</a></li>
         <li> <span class="glyphicon glyphicon-user" aria-hidden="true"></span><li>
          <li><a href="/login">Log in</a></li>
      </ul>
    </nav>
  </div>
</header>

    <div class="container">
      <ul class="bxslider">
        <li><a href="/"><img alt="infospace" src="/assets/logo-10cacf97637abbf6ff7bf7b642f1369acbe27c1d9f48510a8c73121fa4767cc9.PNG" /></a></li>
        …×4
    </ul>


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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/11/16 18:08

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

    キャンセル

回答 1

checkベストアンサー

+3

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/11/16 18:37

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

    キャンセル

  • 2016/11/16 18:45

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

    キャンセル

同じタグがついた質問を見る

  • HTML

    11456questions

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

  • Ruby on Rails

    8835questions

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