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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

920閲覧

Ruby on RailsでbxSliderを使いたいです!

max3252

総合スコア4

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2020/09/02 07:51

Ruby on RailsでbxSliderを使いたいです!

初投稿ですので説明不足な所がありましたら申し訳ございません!
railsにてオリジナルアプリを製作しています!
トップページにて画像をスライドショーで表示するために、bxSliderを使いたくてWebで使用方法を調べて実行しましたが、動かないので解決したいです!

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

検証ツールでコンソールを開くと以下のエラーが出ています。 GET http://localhost:3000/jquery.bxslider.css net::ERR_ABORTED 404 (Not Found) (index):22 GET http://localhost:3000/jquery.bxSlider.min.js net::ERR_ABORTED 404 (Not Found) (index):25 Uncaught TypeError: $(...).bxSlider is not a function at HTMLDocument.<anonymous> ((index):25) at j (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.I (jquery.min.js:2)

該当のソースコード

Ruby

1view/layout/application.html.erb 2<!DOCTYPE html> 3<html> 4 <head> 5 <title>アプリ名</title> 6 <%= csrf_meta_tags %> 7 <%= csp_meta_tag %> 8 9 <%= stylesheet_link_tag 'application', media: 'all' %> 10 <%= javascript_pack_tag 'application' %> 11 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet"> 12 <link rel="stylesheet" href="/jquery.bxslider.css"> 13 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" /></script> 14 <script src="/jquery.bxSlider.min.js"></script> 15 <script> 16 $(function(){ 17 $('.bxslider').bxSlider({ 18 auto: true, 19 speed: 1000, 20 moveSlides: 1, 21 pause: 3000, 22 maxSlides: 4, 23 slideWidth: 250, 24 randomStart: true, 25 autoHover: true 26 }); 27 }); 28 </script> 29 </head> 30 31 <body>32 <%= yield %> 33 </body> 34</html>

javascript

1app/javascriptにダウンロードしたbxSliderのjquery.bxslider.min.jsファイルを配置(コードが長いため割愛)

html

1 <div class='title-contents'> 2 <ul class="bxslider"> 3 <li><%= image_tag 'meshiagare.jpg' %></li> 4 <li><%= image_tag 'meshiagare.top03.png' %></li> 5 <li><%= image_tag 'meshiagare-header01.jpeg' %></li> 6 </ul> 7 </div>

試したこと

ネットで検索した時にやり方は色々ありましたが、一番簡単そうだった
app/assets/javascriptにダウンロードしたjquery.bxslider.min.jsを配置。
app/assets/stylesheetにjquery.bxslider.cssを配置。
のやりかたを採用しました。
他の方法でGemを使った方法もあったのでとりあえずGemfileに
gem 'bxslider-rails'
gem 'jquery-rails'
をいれましたが変化なしです。
自分でも解決策を模索しますが、初心者のため、教えてくれる方がいらっしゃいましたら宜しくおねがいします!

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

自己解決

難しかったので別の方法で考えます!

投稿2020/09/04 08:59

max3252

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問