YouTubeのサムネ取得をJavaScriptでやろうとしたが画像が表示されない

前提・実現したいこと

YouTubeの動画リンクからサムネイルを取得し、その画像を新しいタブで表示する

発生している問題・エラーメッセージ

プロンプトは生成されるがその先はしーんとして動かない

該当のソースコード

html
1<html>
2<head>
3<title>YouTubeサムネ取得ツール</title>
4<script type="text/javascript">
5<!--
6function disp(){
7	// 入力ダイアログを表示 ＋ 入力内容を mid に代入
8	mid = window.prompt("YouTubeのURLをhttp://から入力してください。", "");
9	
10	// エラーデバッグ用にリンクをコピー
11	bcd = mid
12	
13	// 上のあれをURL用に変換
14	mid = mid.slice( 32 ) ;
15	mid = mid.slice( 0, 11 );
16	url = "https://i.ytimg.com/vi/" + mid + "/hq720.jpg";
17
18	// URLが正常か確認
19	if(url == "https://i.ytimg.com/vi/" + mid + "/hq720.jpg"){
20		var img = new Image();
21		img.src = url;
22		return img.height > 0; // 読み込みに失敗すれば 0 になる。
23		if(existImage(url)){
24			alert("画像の存在を確認しました。\n画像を表示します。");
25			window.open(url, '_blank');
26		}else{
27			alert("画像の存在が確認できませんでした。\n動画URLをご確認ください。\n何度も発生する場合、構文がバカになっている可能性があります。\n動画URLはこちら→" + bcd);
28		}
29	} else {
30		// 空の場合やキャンセルした場合、システムエラーの場合は警告ダイアログを表示
31		window.alert('キャンセルされました。')
32	}
33}
34-->
35</script>
36</head>
37<body>
38<p><input type="button" value="入力用ダイアログを起動する" onClick="disp()"></p>
39</body>
40</html>
41
42

試したこと

if(url == "https://i.ytimg.com/vi/" + mid + "/hq720.jpg"){の先をwindow.open(url, '_blank');にしたら動きます。ただ、画像が存在するかも確認したいのでそれも含めてお願いします。

thyda.eiqau

2020/05/31 09:48

url = "https://i.ytimg.com/vi/" + mid + "/hq720.jpg"; // URLが正常か確認 if(url == "https://i.ytimg.com/vi/" + mid + "/hq720.jpg"){ こちらのif文は常にtrueになる気がしますが、どういう意図で書かれた処理ですか？ ---- return img.height > 0; // 読み込みに失敗すれば 0 になる。このreturn文はどういう意図で書かれた処理ですか？ ---- if(existImage(url)){ existImage() って何ですか？どのように定義されているのかご提示ください。

glyzinieh

2020/05/31 09:50

詳しいことは、分かりませんがYouTubeのスクレイピングは規約で禁止されているようです。

miyabi_pudding

2020/05/31 12:35

スクレイピングではなく、公式APIではやってみてないのでしょうか？間違いなくあるとは思うのですが・・・。

qwesr

2020/05/31 13:54

> こちらのif文は常にtrueになる気がしますが、どういう意図で書かれた処理ですか？忘れました。いらないので後で消します。 > このreturn文はどういう意図で書かれた処理ですか？ https://www.ecoop.net/memo/archives/2005-06-29-3.htmlに記載された内容を勘で解釈してぶち込みました。意味はほぼ理解していません。 > existImage() って何ですか？どのように定義されているのかご提示ください。上と同じようにhttps://www.ecoop.net/memo/archives/2005-06-29-3.htmlに記載された内容を勘で解釈してぶち込みました。意味はほぼ理解していません。 > 詳しいことは、分かりませんがYouTubeのスクレイピングは規約で禁止されているようです。それってこの項ですかね？ "3. 自動化された手段（ロボット、ボットネット、スクレーパなど）を使用して本サービスにアクセスすること。" あ～でも...まぁ確かにURLから動画IDを持ってきて画像リンクに飛んでるというのを自動でやってるからこれに当てはまるのか...なるほど。 > スクレイピングではなく、公式APIではやってみてないのでしょうか？間違いなくあるとは思うのですが・・・。公式APIなんてあるんですね...。調べてみます。

行動規範の内容に同意します

回答1件

質問への追記・修正依頼の欄にも書きましたが、謎のreturnで処理が中断されているように見えます。その後の処理に進んだとしても、定義されていない existImage() を呼び出そうとしているのでエラーになると思います。

ブラウザのコンソールにエラーが表示されていると思います。コンソールを確認して、表示されたエラーに対して一つずつ対処していく作業 (デバッグ) を実施してください。

実装例

js
1/**
2 * 動画のURLから動画IDを取得
3 * @param {URL} YouTubeの動画を指す URL オブジェクト
4 * @return {String?} 動画ID
5 */
6function videoIdFromUrl(url) {
7  // `?v=MOVIE_ID` を探す
8  const vInQuery = url.search.substring(1).split('&').map(query => {
9    const [key, val] = query.split('=');
10    return {key, val};
11  }).filter(obj => obj.key === 'v');
12  if(vInQuery.length > 0) return vInQuery[0].val;
13
14  // `/embed` の場合
15  if(url.pathname.startsWith('/embed')) {
16    return url.pathname.substring('/embed/'.length);
17  }
18
19  // 動画IDが見つからなかった場合、 null を返す
20  return null;
21}
22
23/**
24 * 画像のロードが完了したときのイベントハンドラ
25 * @param {Event} evt HTMLImageElement の load イベント
26 */
27function onImageLoaded(evt) {
28  const img = evt.currentTarget;
29
30  // 正常
31  if(img.naturalHeight === 720) {
32    window.alert('画像の存在を確認しました。\n画像を表示します。');
33    window.open(img.src);
34    return;
35  }
36
37  window.alert(`
38画像の存在が確認できませんでした。
39動画URLをご確認ください。
40何度も発生する場合、構文がバカになっている可能性があります。
41動画URLはこちら→${img.src}
42`.trim());
43};
44
45function disp() {
46  let movieId = null;
47
48  try {
49    const url = new URL(window.prompt('YouTubeのURLをhttp://から入力してください。').trim());
50    movieId = videoIdFromUrl(url);
51    if(!movieId) throw new Error();
52  } catch(e) {
53    // URLの解析中にエラーが発生した場合は処理を中断する
54    window.alert('Invalid URL');
55    return;
56  }
57  
58  const img = new Image(0, 0);
59  img.onload = onImageLoaded;
60  img.src = `https://i.ytimg.com/vi/${movieId}/hq720.jpg`;
61}