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

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

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

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

解決済

コンソールで画像関係のエラー、undefinedplayer-graphics.gif 404 (Not Found)と出てしまう。

saitou311099
saitou311099

総合スコア0

Ruby on Rails

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

1回答

0評価

1クリップ

1607閲覧

投稿2019/12/16 16:37

編集2022/01/12 10:58

イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明

現在ポートフォリオサイトに音楽再生機能を実装中です。

https://qiita.com/whitia/items/3e533c64ce6b6badfb63

こちらのqiitaの記事を参考に実装しました。
ローカルで一応動作はするのですが、
コンソールで

jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:6719
GET http://localhost:3000/undefinedplayer-graphics.gif 404 (Not Found)

というエラーが出てしまうので、本番環境では動かないものかと思われます。
一応画面上では音楽の再生はできますし、プレイヤーも表示はされているのですが、gifの画像だけおそらく反映されていないといった感じです。

やったこととしましては記事の通りに、
gem 'audiojs-rails'
bundle installして、gem install audiojs-rails を実行。

//= require audiojsを//= require_tree .の手前に追加。

= audio_tag 'menuettm.mp3'
タグをビューに配置。

:script
audiojs.events.ready(function() {
var as = audiojs.createAll();
});

こちらをビューに配置して初期化して読み込みました。

Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.assets.paths << Rails.root.join("app", "assets", "audios")
assetsのパスはこのような形で追加しました。
コンソールcで動作確認済みです。

assets/audios/menuettm.mp3といった形でミュージックを配置しました。
音楽は正常に流れております。

改善のために試したこととしましては、
画像の位置が悪いかと思ったので、player-graphics.gifをimagesの中、audiosの中、assetsの中、いろんなところに配置する画像を変更してみたのですが、全てダメでした。

念の為、audio.min.jsの記述の中に画像を呼び出す記述があったので、そちらを消すなどして試してみてもダメでした。
八方塞がりです。

他に何か試した方がいいことはありますでしょうか。
ご教授いただけると助かります。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

winterboum
winterboum

2019/12/17 00:41

音楽機能ではなく画像関係での問題なので、タイトルを変えたほうが回答が集まりやすいかも、です。 で、 1\) undefinedplayer-graphics\.gif はどこに置きましたか 2\) その呼び出しは view にどのように書きましたか
saitou311099
saitou311099

2019/12/17 06:37

ご指摘ありがとうございます。 タイトルを画像関係のエラーに変更しました。 player-graphics\.gifははじめにimageの中に入れていたのですが、位置がダメだと思ったので、いたるところに配置を変えました。audiosの中,assetsの下、javascriptの中など。色々配置を変更してみましたが、どれも同じエラーが出てダメでした。 ビューでは、タグを一行配置しただけです。 = audio_tag 'menuettm\.mp3' 検証ツールで確認したところ、 <div class="audiojs " classname="audiojs" id="audiojs_wrapper0"> <audio src="/assets/menuettm-1d638718d5926a88dc9f4364ea2e77bc7957af2981b116c5c61d4804462cbed4\.mp3"></audio> <div class="play-pause"> <p class="play"></p> <p class="pause"></p> <p class="loading"></p> <p class="error"></p> </div> <div class="scrubber"> <div class="progress" style="width: 0px;"></div> <div class="loaded" style="width: 16\.6445px;"></div> </div> <div class="time"> <em class="played">00:00</em>/<strong class="duration">02:17</strong> </div> <div class="error-message"></div></div>
saitou311099
saitou311099

2019/12/17 06:40

コードをカットしたらわかりにくいかと思ったので、画像を取り込んで貼り付けさせていただきました。
winterboum
winterboum

2019/12/17 06:42

audioの方は音が出ているのですからそちらではなく、player-graphics\.gif の方です。 viewにどう記述しましたか
saitou311099
saitou311099

2019/12/17 06:45

= audio_tag 'menuettm\.mp3' ビューにはこの一行と :javascript audiojs\.events\.ready\(function\(\) { var as = audiojs\.createAll\(\); }\); 初期化するためのこの文書のみを記述しました。 他に、ビューの方で記述している部分はありません。
winterboum
winterboum

2019/12/17 06:49

よくわからないのですが、それで player-graphics\.gif が表示されるはずなのですね?
saitou311099
saitou311099

2019/12/17 07:17

= audio_tag 'menuettm\.mp3' のタグを配置すると、ビューの方で <div class="audojs">以下の文章が表示されます。 play-pauseクラスのした下の階層にある play  pause loading error この四つのタグがバックグランドURLの指定で player-graphics\.gif gifの画像を呼び出しているようなのですが、undefindと出てきてしまいます。 再生するボタンを表示する部分がうまくいってない気がしました。
winterboum
winterboum

2019/12/17 07:25

このfileを読みに行く辺りのlogを見たいです。 この画面を表示させるリクエストの所からください。
saitou311099
saitou311099

2019/12/17 07:37

すみません。 デバックの方が少し不慣れなものでこれでいいのかよくわからなかったのですが、こちらに追加させて頂いた二枚の画像でよろしいでしょうか。
saitou311099
saitou311099

2019/12/17 07:46

すみません。 画像を追加させて頂いたのですが、 urlを呼び出す部分のCSSを強引に player-graphics\.gif に変更したらエラーがコンソールで表示されなくなりました。 なぜ呼び出す画像のURLにundefindが勝手についてしまったのかは、正直よくわかりませんが。
winterboum
winterboum

2019/12/17 07:47

log/development\.log と言うのがあると思います。 サーバを止めて、このlogを削除かrenameしてサーバを起動して で、画面を表示させると、logに書きだされます。
saitou311099
saitou311099

2019/12/17 08:01

勉強になりました。ありがとうございます。 今はもうエラーが表示されていないのですが、ログを消して無理やりまたエラー起こしてみたら、その部分のエラーのログだけ表示されるようになりました。
winterboum
winterboum

2019/12/17 08:04

それを見せてください
saitou311099
saitou311099

2019/12/17 08:09

エラーが起きている前の状態に戻してサーバーを立ち上げて、ログを出力しました。
winterboum
winterboum

2019/12/17 08:12

すみません、画像だと見難いのでtextで貼っていただけませんか
saitou311099
saitou311099

2019/12/17 08:13

ActionController::RoutingError \(No route matches \[GET\] "/undefinedplayer-graphics\.gif"\): actionpack \(5\.2\.3\) lib/action_dispatch/middleware/debug_exceptions\.rb:65:in `call' web-console \(3\.7\.0\) lib/web_console/middleware\.rb:135:in `call_app' web-console \(3\.7\.0\) lib/web_console/middleware\.rb:30:in `block in call' web-console \(3\.7\.0\) lib/web_console/middleware\.rb:20:in `catch' web-console \(3\.7\.0\) lib/web_console/middleware\.rb:20:in `call' actionpack \(5\.2\.3\) lib/action_dispatch/middleware/show_exceptions\.rb:33:in `call' railties \(5\.2\.3\) lib/rails/rack/logger\.rb:38:in `call_app' railties \(5\.2\.3\) lib/rails/rack/logger\.rb:26:in `block in call' activesupport \(5\.2\.3\) lib/active_support/tagged_logging\.rb:71:in `block in tagged' activesupport \(5\.2\.3\) lib/active_support/tagged_logging\.rb:28:in `tagged' activesupport \(5\.2\.3\) lib/active_support/tagged_logging\.rb:71:in `tagged' railties \(5\.2\.3\) lib/rails/rack/logger\.rb:26:in `call' sprockets-rails \(3\.2\.1\) lib/sprockets/rails/quiet_assets\.rb:13:in `call' actionpack \(5\.2\.3\) lib/action_dispatch/middleware/remote_ip\.rb:81:in `call' actionpack \(5\.2\.3\) lib/action_dispatch/middleware/request_id\.rb:27:in `call' rack \(2\.0\.7\) lib/rack/method_override\.rb:22:in `call' rack \(2\.0\.7\) lib/rack/runtime\.rb:22:in `call' activesupport \(5\.2\.3\) lib/active_support/cache/strategy/local_cache_middleware\.rb:29:in `call' actionpack \(5\.2\.3\) lib/action_dispatch/middleware/executor\.rb:14:in `call' actionpack \(5\.2\.3\) lib/action_dispatch/middleware/static\.rb:127:in `call' rack \(2\.0\.7\) lib/rack/sendfile\.rb:111:in `call' railties \(5\.2\.3\) lib/rails/engine\.rb:524:in `call' puma \(3\.12\.1\) lib/puma/configuration\.rb:227:in `call' puma \(3\.12\.1\) lib/puma/server\.rb:660:in `handle_request' puma \(3\.12\.1\) lib/puma/server\.rb:474:in `process_client' puma \(3\.12\.1\) lib/puma/server\.rb:334:in `block in run' puma \(3\.12\.1\) lib/puma/thread_pool\.rb:135:in `block in spawn_thread' コピペして貼り付けました。こちらでよろしいでしょうか。
saitou311099
saitou311099

2019/12/17 08:14

Started GET "/undefinedplayer-graphics\.gif" for ::1 at 2019-12-17 17:07:01 \+0900 こちら貼り忘れてました。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Ruby on Rails

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