解決したいこと
現在ポートフォリオ作成中のプログラミング入門者です。ポートフォリオの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
回答1件
あなたの回答
tips
プレビュー