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

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

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

charは文字データ型を指します。一文字分の文字コードの格納を想定としている型です。

JavaScript

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

Q&A

1回答

795閲覧

JavaScript(Chrome拡張) fetch(url).then.thenでblobをうまく渡せない

kuunelp

総合スコア4

char

charは文字データ型を指します。一文字分の文字コードの格納を想定としている型です。

JavaScript

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

0グッド

1クリップ

投稿2020/01/14 12:03

編集2020/01/14 12:28

前提・実現したいこと

こちらのChrome拡張(Netflixのページ上で動作します)が動かなくなりました。

Subadub (Chromeウェブストア)
rsimmons/subadub: Chrome+Firefox extension for studying foreign languages using Netflix subtitles (GitHub)

JavaScriptは学習中の身ですが、幸い比較的単純なソースコードで動いているようでしたので自力での改修を試みました。

問題・試したこと

今まではNetflixで動画を開くと最終的にenableDownloadButton()関数が実行されてボタンを押せるようになっていたはずが、enable状態にならなくなってしまいました。この問題を解決したいです。

まず

const WEBVTT_FMT = 'webvtt-lssdh-ios8';

という部分を

const WEBVTT_FMT = 'nflx-cmisc';

に書き換えたほうが良さそうということは突き止めたのですが、その後苦手なthenに関する問題を発見しました。

該当のソースコード

こちらは該当すると思われる箇所を抜き出したものです。(全コードは上述のgithubにあります)
ここでwebvttCache.set()関数およびrenderAndReconcile()関数を実行するところまで到達できればよいのですが、到達しません。

JavaScript

1 if (!webvttCache.has(cacheKey)) { 2 const trackInfo = getSelectedTrackInfo(); 3 const url = trackInfo.bestUrl; 4 5 fetch(url).then(function(response) { 6 if (response.ok) { 7 console.log('あああ'); 8 return response.blob(); 9 } 10 throw new Error('Bad response to WebVTT request'); 11 }).then(function(blob) { 12 console.log('いいい'); 13 webvttCache.set(cacheKey, new Blob([blob], {type: 'text/vtt'})); // set type to avoid warning 14 renderAndReconcile(); 15 }).catch(function(error) { 16 console.error('Failed to fetch WebVTT file', error.message); 17 }); 18 }

console.log('あああ')とconsole.log('いいい')は自分で追加したものです。
Chromeのデベロッパーツールでコンソールを見ると、

あああ

は表示されるのですが

Bad response to WebVTT request
いいい
Failed to fetch WebVTT file

はいずれも表示されません。

このことから、response.okではあるもののその後のthen(2回目のthen)にうまく繋がっていないようです。

responseの中身はこうなっていました。
responseの中身の画像

fetch(url).thenに関する初歩的な問題のような気もしますが、この辺りには疎く…
どういった理由が考えられるでしょうか?

追記

何故なのかはまだちゃんと検証できていませんが、GitHubのIssueにてコメントをいただいたところ
Language Learning with Netflix
という拡張と併用することでひとまずSubadubの動作も復活するようです。

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

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

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

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

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

Lhankor_Mhy

2020/01/15 02:09 編集

たとえば、一つ目のthenが返すpromiseがrejectされて(または二つ目のthenで例外が起きて)catchに飛び、その中でさらに例外が起きれば、そのようなコンソールの出力になるのではないかと思います。 もちろん、その場合は別のエラーがコンソールに出るかもしれませんが、それも例外処理されているなら見えなくなってしまう可能性もあるかと。
guest

回答1

0

まずはこんなかんじのデバッグから

fetch(url).then(res=>{ if(res.ok){ console.log('あああ'); return res.blob(); } throw new Error('bad res'); }).then(console.log).catch(err=>{ console.error('Fail', err.message); });

投稿2020/01/15 01:53

yambejp

総合スコア114839

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問