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

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

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

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

JavaScript

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

HTML

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

Q&A

解決済

1回答

5173閲覧

Refused to execute script because its MIME type ('text/html') is not executableエラーを解決したい

senseIY

総合スコア281

Ruby on Rails 6

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

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2022/03/17 11:41

編集2022/03/18 00:56

解決したいこと

現在ポートフォリオ作成中のプログラミング入門者です。ポートフォリオの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"

を付けましたが、改善しませんでした。

https://stackoverflow.com/questions/49617440/mime-type-text-html-is-not-executable-and-strict-mime-type-checking-is-enab

こちらの方はsrcに / を付けたところ改善したようですが、私はurlで指定したため、間違っていないはずです。一応、試しに先頭に / をつけてみたところエラーになってしまいました。

https://stackoverflow.com/questions/49760641/refused-to-execute-script-from-because-its-mime-type-text-html-is-not-execut

こちらの方は 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

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

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

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

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

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

winterboum

2022/03/18 00:08

「ポートフォリオのshowアクションでページを表示した際」とは具体的にはどういう操作をしてますか?
senseIY

2022/03/18 00:51

コメントありがとうございます。字数制限に引っかかってしまったのでこちらに更に追記させていただきます。
senseIY

2022/03/18 01:14 編集

・自分の考察など  一旦エラー対処から離れてアップデートされたファイルにバリデーションを加える作業をしていました。バリデーションは上手く作れており、登録も上手くいったと思う(ちゃんとセーブの処理がされた)のですが、今度はそもそも読み込むと ``` 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辺りに何かしら問題があるかもしれません。 現在本来の質問と追記の質問を合わせてデバッグ中です。恐らく追記のエラーはバリデーション実施後に出たので前の状態に戻せば消えるとは思いますが、エラーが出ていないだけでそもそもどこか間違っている可能性の方が高いと考えています。文がごちゃごちゃしてしまい申し訳ございません。
winterboum

2022/03/18 01:38

エラーメッセージの載せ方が中途半端です。 その前後にもっと色々情報があるはず。それらも載せてください。たとえば どのfileのどの行って情報ありません?
winterboum

2022/03/18 01:42

あと このエラーになったということは、この質問の冒頭のエラーはでなくなった?
senseIY

2022/03/18 02:29 編集

申し訳ございません。新しく出たエラーメッセージ(デベロッパーツール上ではない)はこちらになります ``` 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)が起こったため、ディベロッパーツール上では冒頭のエラーは表示されていないものの、このエラーを解決した次の読み込みの際に冒頭のエラーが発生するのではないかと考えています。 そのため、2つのエラーが異なるタイミングで発生しているという状態です。 自分としては、もしかしたら「ホームページ(root_url)から詳細ページ(gogaku_path(gogaku.id))へ移動するshowアクションを行う」この一連の流れに使っているコード自体に原因があるのではないかと考えました。なので、追加の情報としてバリデーションをかけたあとの状態についても載せておけば、本来のエラーに対して何かしらヒントが頂けるかもしれないと考えたので追記として記述しました。 話をややこしくしてしまい申し訳ございませんでした。 簡潔にまとめると、冒頭のエラーを解決したいが、その際に追記の情報も載せておけば何かしら役に立つかもしれないと思い、一応載せて置いた。ということになります。
senseIY

2022/03/18 02:52

追記のエラーはやはりバリデーションが原因だったようです。バリデーションを使わない場合はこのエラーは発生しませんでした。
guest

回答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

senseIY

総合スコア281

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問