Q&A
「ポートフォリオのshowアクションでページを表示した際」とは具体的にはどういう操作をしてますか？
解決したいこと
現在ポートフォリオ作成中のプログラミング入門者です。ポートフォリオのshowアクションでページを表示した際にMIMEのエラーが発生してしまいます。
発生している問題・エラー
Refused to execute script from 'http://localhost:3000/' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. #そしてなぜか<!DOCTYPE html>の部分がエラー表示？（赤字ではなく、青く点滅）された
ソースコード
html.erbファイル
#show.html.erb <h1>キーボードでの操作方法</h1> <h4>・ctrl(コントロールキー) = スタート/ストップ ()<br>・←(左カーソルキー) = 3秒戻る ・→(右カーソルキー) = 3秒進む </h4> <table class = "table table-striped"> <tr> <th>教科</th> <td><%= @gogaku.subject%></td> </tr> <tr> <th>中身</th> <td><%= @gogaku.body%></td> </tr> <tr> <th>音声</th> <td><%= @gogaku.file%></td> </tr> </table> <%# <input id="audio_file" type="file" accept="audio/*" > %> <script src="https://unpkg.com/wavesurfer.js@6.0.4/dist/wavesurfer.js" type="text/javascript"></script> <script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"></script> <script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js" type="text/javascript"></script> <div id="waveform"> </div> <script type="text/javascript"> document.write( '<script src="draw.js?' + new Date().getTime() + '"><\/script>' ); </script> <script type="text/javascript"> var wavesurfer = WaveSurfer.create({ barRadius: 3, cursorWidth: 1, height: 230,barMinHeight: 1, barGap: 1, container: '#waveform', waveColor: 'gray', progressColor: 'orange', scrollParent: true, backend: 'MediaElementWebAudio', plugins: [ WaveSurfer.regions.create({ regions: [ { start: 5, end: 7, loop: false, color: 'hsla(200, 50%, 70%, 0.4)', } ], }) ] }); wavesurfer.load('<%= rails_blob_path(@gogaku.file) %>'); // audio comes from different domain so need to do this (not related to the bug) const corsAudio = new Audio('<%= rails_blob_path(@gogaku.file) %>'); corsAudio.crossOrigin = true; wavesurfer.load(corsAudio); wavesurfer.on('ready', () => { console.log('ready'); }); // function playbackRate() { // rate = rate === 1 ? 2 : 1; // wavesurfer.setPlaybackRate(rate); // document.getElementById("rate").innerText = "速度: " + rate; // } function playPause() { wavesurfer.playPause(); } </script> <div class="container" style="text-align: center"> <div class="controls" > <span> <button class="btn btn-primary col-sm-2" onclick="wavesurfer.skipBackward(5)"><i class="fa fa-step-backward"></i>5秒戻る</button> <button class="btn btn-primary col-sm-2" onclick="wavesurfer.playPause()"><i class="fa fa-play"></i>Play/<i class="fa fa-pause"></i>Pause</button> <button class="btn btn-primary col-sm-2" onclick="wavesurfer.skipForward(5)"><i class="fa fa-step-forward"></i>5秒進む</button> <select id="controller" class="btn btn-primary col-sm-2"> <option type="button" value="0.5">0.5</option> <option type="button" value="0.75">0.75</option> <option type="button" value="1.0" selected>1.0</option> <option type="button" value="1.25">1.25</option> <option type="button" value="1.5">1.5</option> <option type="button" value="1.75">1.75</option> <option type="button" value="2.0">2.0</option> </select> <button class="btn btn-primary col-sm-2" id="loop"><i class="fa fa-step-forward"></i>区域ループ再生</button> </span> </div> </div> <script type="text/javascript"> // let rate = 1; let speed = document.getElementById('controller'); speed.addEventListener('change', function() { let idx = speed.selectedIndex; let specon = speed.options[idx].text; console.log(specon); function playbackRate() { switch (specon) { case 0.5: rate = specon wavesurfer.setPlaybackRate(rate); console.log(specon); break; case 0.75: rate = specon wavesurfer.setPlaybackRate(rate); console.log(specon); break; case 1.25: rate = specon wavesurfer.setPlaybackRate(rate); console.log(specon); break; case 1.5: rate = specon wavesurfer.setPlaybackRate(rate); console.log(specon); break; case 1.75: rate = specon wavesurfer.setPlaybackRate(rate); console.log(specon); break; case 2.0: rate = specon wavesurfer.setPlaybackRate(rate); console.log(specon); break; default: rate = specon wavesurfer.setPlaybackRate(rate); console.log(specon); break; } } playbackRate(); }) </script> <script type="text/javascript"> document.addEventListener('keydown', keydown_ivent); function keydown_ivent(e) { let key = ''; switch (e.key) { case 'Control': wavesurfer.playPause(); break; case 'ArrowLeft': wavesurfer.skipBackward(3); break; case 'ArrowRight': wavesurfer.skipForward(3); break; } return false; } </script> <script type="text/javascript"> let l = document.getElementById('loop'); l.addEventListener('click', function() { let region = Object.values(wavesurfer.regions.list)[0]; region.playLoop(); }); </script> <div style="text-align: center" class="isolation"> <p class="row"> <div class="col-xs-1"> <i class="glyphicon glyphicon-zoom-in"></i> </div> <div class="col-xs-9"> <input id="slider" type="range" min="1" max="200" value="1" style="width: 100%" /> </div> <div class="col-xs-1"> <i class="glyphicon glyphicon-zoom-out"></i> </div> </p> </div> <script type="text/javascript"> var slider = document.querySelector('#slider'); slider.oninput = function () { var zoomLevel = Number(slider.value); wavesurfer.zoom(zoomLevel); }; </script> <textarea rows="10" cols="50" placeholder="ここに文字を入力出来ます"></textarea> <div class="hidden_box"> <label for="label1">クリックして答えを表示</label> <input type="checkbox" id="label1"/> <div class="hidden_show"> <table class = "table table-striped"> <tr> <th>答え</th> <td><%= @gogaku.answer%></td> </tr> </table> </div> </div> <%= link_to "戻る", root_url, class:"btn btn-link" %>
application.html.erbファイル
<!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= include_gon %> <%# <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= render "layouts/shim" %> <script src="https://unpkg.com/wavesurfer.js@6.0.4/dist/wavesurfer.js" type="text/javascript"></script> </head> <body> <%= render "layouts/header"%> <div class="container"> <%= yield %> <%= render "layouts/footer" %> </div> </body> </html>
環境
・wsl2のubuntuを使っています
・ruby 3.0.3
・Rails 6.1.5
・Dockerで環境構築を行いました。
自分で試したこと
https://teratail.com/questions/39021
・こちらの記事を参考にさせていただいたところ、MIMEのタイプを指定すればいいのではないかと考えたので、すべてのscriptタグに
type="text/javascript"
を付けましたが、改善しませんでした。
こちらの方はsrcに / を付けたところ改善したようですが、私はurlで指定したため、間違っていないはずです。一応、試しに先頭に / をつけてみたところエラーになってしまいました。
こちらの方は webpack config を修正したところ上手く行ったようです。ですが、私はそもそwebpack.config.js
というファイルは使っていません。npm wevpack -vを打つと、7.0.3と返ってくるのでwebpackのインストールはしています。
ここで詰まってしまいました。何かしらアドバイスがあればよろしくお願いいたします。
追記
new create showアクションのコードを記載します
def show @gogaku = Gogaku.find(params[:id]) end def new @gogaku = Gogaku.new end def create @gogaku = current_user.gogakus.build(gogaku_params) @gogaku.file = params[:gogaku][:file] if @gogaku.save flash[:success] = "登録完了!" redirect_to root_url else @feed_items = current_user.feed.paginate(page: params[:page]) flash[:danger] = @gogaku.errors.full_messages if @gogaku.errors.any? redirect_to new_gogaku_path end end private def gogaku_params params.require(:gogaku).permit(:subject, :body, :file, :answer) end
コメントありがとうございます。字数制限に引っかかってしまったのでこちらに更に追記させていただきます。
・自分の考察など
一旦エラー対処から離れてアップデートされたファイルにバリデーションを加える作業をしていました。バリデーションは上手く作れており、登録も上手くいったと思う（ちゃんとセーブの処理がされた）のですが、今度はそもそも読み込むと
```
No route matches {:action=>"show", :controller=>"active_storage/blobs/redirect", :filename=>nil, :id=>"13", :signed_id=>nil}, possible unmatched constraints: [:filename, :signed_id]
Did you mean? rails_service_blob_path
rails_service_blob_proxy_url
rails_service_blob_proxy_path
```
のようなエラーになってしまいました。バリエーションをかけただけで読み込めなくなったというのは考えにくいので、恐らくそもそもどこか間違っていて、今までは奇跡的動いていたと考えられます。
自分としては @gogaku.file = params[:gogaku][:file]の部分が怪しいと考えたのですが、以前の私の質問（今回のエラーと似ているが少し表示が違う）
https://teratail.com/questions/pi8spm1q50ufk6
ではなぜかこの記述がないと動きませんでした（paramsでデータを取ってきているのに追加でインスタンス変数に入れる必要性がないのになぜかこれで動くようになった）。今は@gogaku.file = params[:gogaku][:file]を消しても今追記で載せたエラーのままです。なお、バリデーションをかける前に保存されたファイルではこのエラーが出るものと出ないものがありました。もしかするとActiveStrage辺りに何かしら問題があるかもしれません。
現在本来の質問と追記の質問を合わせてデバッグ中です。恐らく追記のエラーはバリデーション実施後に出たので前の状態に戻せば消えるとは思いますが、エラーが出ていないだけでそもそもどこか間違っている可能性の方が高いと考えています。文がごちゃごちゃしてしまい申し訳ございません。
エラーメッセージの載せ方が中途半端です。
その前後にもっと色々情報があるはず。それらも載せてください。たとえば どのfileのどの行って情報ありません？
あと
このエラーになったということは、この質問の冒頭のエラーはでなくなった？
申し訳ございません。新しく出たエラーメッセージ（デベロッパーツール上ではない）はこちらになります
```
ActionController::UrlGenerationError in Gogakus#show
Showing /app/app/views/gogakus/show.html.erb where line #76 raised:
No route matches {:action=>"show", :controller=>"active_storage/blobs/redirect", :filename=>nil, :id=>"13", :signed_id=>nil}, possible unmatched constraints: [:filename, :signed_id]
Did you mean? rails_service_blob_path
rails_service_blob_proxy_url
rails_service_blob_proxy_path
Extracted source (around line #76):
74
75
76
77
78
79
// audio comes from different domain so need to do this (not related to the bug)
const corsAudio = new Audio('<%= rails_blob_path(@gogaku.file) %>'); #エラーの行
corsAudio.crossOrigin = true;
wavesurfer.load(corsAudio);
```
いつ起こったか
ホームページ（root_url）から詳細ページ（gogaku_path(gogaku.id)）へ移動するshowアクションをした時に起こりました。
＞このエラーになったということは、この質問の冒頭のエラーはでなくなった？
このエラーが発生しているときはデベロッパーツールに質問冒頭のエラーではなく、
```
GET http://localhost:3000/gogakus/13 500 (Internal Server Error)
```
のエラーが表示されます。この時は冒頭のエラーは表示されません。ですが、このエラーが発生しない（バリデーションをかける以前のファイルデータを読み込んだ場合）時は冒頭の質問のエラーのみが表示されます。
ここからは自分の考察ですが、冒頭のエラーの前にGET http://localhost:3000/gogakus/13 500 (Internal Server Error)が起こったため、ディベロッパーツール上では冒頭のエラーは表示されていないものの、このエラーを解決した次の読み込みの際に冒頭のエラーが発生するのではないかと考えています。
そのため、２つのエラーが異なるタイミングで発生しているという状態です。
自分としては、もしかしたら「ホームページ（root_url）から詳細ページ（gogaku_path(gogaku.id)）へ移動するshowアクションを行う」この一連の流れに使っているコード自体に原因があるのではないかと考えました。なので、追加の情報としてバリデーションをかけたあとの状態についても載せておけば、本来のエラーに対して何かしらヒントが頂けるかもしれないと考えたので追記として記述しました。
話をややこしくしてしまい申し訳ございませんでした。
簡潔にまとめると、冒頭のエラーを解決したいが、その際に追記の情報も載せておけば何かしら役に立つかもしれないと思い、一応載せて置いた。ということになります。
追記のエラーはやはりバリデーションが原因だったようです。バリデーションを使わない場合はこのエラーは発生しませんでした。
回答1件
0
自己解決
何とか自己解決出来ました！
どうやら下記のコードを使っていたことが原因だったようです。このコードを削除後MIMEのエラーが解消されました。
# show.htmlのこの部分を削除 <script type="text/javascript"> document.write( '<script src="draw.js?' + new Date().getTime() + '"><\/script>' ); </script>
この度はお時間を割いていただき誠にありがとうございました。
投稿2022/03/19 08:54
総合スコア281
あなたの回答
tips
プレビュー
