YouTubeのサムネイル画像を取得するプログラムを書いてみた！

投稿日:2017/12/31 更新:2018/4/20 コメント 0件 YouTube , , , , ,


概要

YouTubeのサムネイル画像を取得すること自体はとても簡単なんですがいざ実際に取得するとなると動画のIDを拾ってきてアドレスを書き換えたりと結構手間なんですよね。なので動画アドレスをコピー＆ペーストして２クリックぐらいでPCに保存できないかなぁ～と不慣れなJavaScriptを使って色々と試行錯誤したらなんとか作成することが出来ました。

ほんとはワードプレスのこのブログで作りたかったんですがCSSやJavaScriptの読み込みまでは問題ないのに何故かJavaScriptが動かないので諦めて静的なサイトの方で実現しました。

尚、ド素人が作った完全に個人用スクリプトなのでchrome以外は正常に機能しません。特にMicrosoft edgeではサムネイルすら表示されませんがそれでもよければ自己責任でご自由に使って下さい。スクリプトはリンク先にあります。

YouTube サムネイル取得スクリプト

 




YouTubeサムネイル画像の取得方法

前置きとしてYouTubeにアップロードされた動画のサムネイル画像の取得する方法を簡単に説明しておきます。

YouTubeの動画アドレスはいかのような数パターンあり、同じ動画には固有の11桁の動画ID(赤字)というものがあります。緑色の部分はパラメーターと言われるもので自動再生や指定した場所から再生できたりしますがない場合もあります。

https://youtu.be/Bxe6obFopdw?t=1m47s
https://www.youtube.com/watch?v=Bxe6obFopdw?t=1m47s
https://www.youtube.com/embed/Bxe6obFopdw?t=1m47s

その動画ID(Bxe6obFopdw)の部分だけを抜き取って下記のようなアドレスに書き換えると動画のサムネイル画像が表示されます。(※リンクを開くと新しいタブで画像が表示されます)

1.http://i.ytimg.com/vi/Bxe6obFopdw/mqdefault.jpg
2.https://img.youtube.com/vi/Bxe6obFopdw/mqdefault.jpg

また、青色の部分を変えると画像サイズを変更したりすることができます。

  1. default(120×90)
  2. mqdefault(320×180)
  3. hqdefault(480×360)
  4. sddefault(640×480)
  5. maxresdefault(1280×720)
mqdefault

 

サムネイル取得スクリプト

実際のどのような機能が欲しいかというと複数あるYouTubeのアドレスパターンを入力して画像サイズを指定すると画像が表示され、画像の右メニューを開いて「名前を付けて画像を保存」という作業も省きたいのでついでもダウンロードリンクも表示されるというものです。

プログラムの流れとしては

  1. JavaScriptの正規表現で動画アドレスから動画IDだけを取得
  2. document.writeで取得した動画IDを元にimgリンクとaリンクを記述

完成した入力フォームのコードです。

<form name="youtubethumb">
 動画ID、または動画のアドレスを入力 : <input name="txtb" type="text" value="">
 <input onclick="clr()" type="button" value="入力を削除" class="youtubethumb_delete_button">
 <br><br><br>
 <input onclick="s120x90()" type="button" value="120×90pxのサムネイル画像を表示する" class="youtubethumb_button"><br><br>
 <input onclick="s320x180()" type="button" value="320×180pxのサムネイル画像を表示する" class="youtubethumb_button"><br><br>
 <input onclick="s480x360()" type="button" value="480x360pxのサムネイル画像を表示する" class="youtubethumb_button"><br><br>
 <input onclick="s640x480()" type="button" value="640x480pxのサムネイル画像を表示する" class="youtubethumb_button"><br><br>
 <input onclick="s1280x720()" type="button" value="1280x720pxのサムネイル画像を表示する" class="youtubethumb_button"><br><br><br>
</form>

こちらは 120×90のサムネイル画像を表示するスクリプトです。細かい説明はできませんが以下のような処理をするように記載しています。

  1. str1=document.youtubethumb.txtb.valueで入力されたアドレスを取得
  2.  if (str1.match(/watch/))でアドレスに「watch」が含まれるものを条件分岐
  3. str1.split(/.*v=([\d\w]+).*/)で正規表現で動画IDを取得(result[1])
  4. document.write()で取得した動画IDを元にhtmlを生成
  5. if(str1==”)で入力フォームが未入力の時の処理
<script>
function s120x90(){
 var str1=document.youtubethumb.txtb.value;
 if (str1.match(/watch/)) {
 document.open();
 var result = str1.split(/.*v=([\d\w]+).*/);
 document.write("<img src='https://img.youtube.com/vi/"+result[1]+"/default.jpg'>");
 document.write("<br>");
 document.write("<a download='s120x90.jpg' href='https://img.youtube.com/vi/"+result[1]+"/default.jpg'>画像をダウンロードする</a>");
 document.write("<br>");
 document.write("Chrome以外のブラウザではダウンロードリンクが機能しないものがあります。");
 document.write("<br>");
 document.write("<a href='https://edit-anything.com/other/youtube_thumbnail_get_script.html'>元のページに戻る</a>");
 document.close();
 }
 else if (str1.match(/youtu.be/)) {
 var result = str1.split(/.*\.be\/([\d\w]+).*/);
 document.open();
 document.write("<img src='https://img.youtube.com/vi/"+result[1]+"/default.jpg'>");
 document.write("<br>");
 document.write("<a download='s120x90.jpg' href='https://img.youtube.com/vi/"+result[1]+"/default.jpg'>画像をダウンロードする</a>");
 document.write("<br>");
 document.write("Chrome以外のブラウザではダウンロードリンクが機能しないものがあります。");
 document.write("<br>");
 document.write("<a href='https://edit-anything.com/other/youtube_thumbnail_get_script.html'>元のページに戻る</a>");
 document.close();
 }
 else if (str1.match(/embed/)) {
 var result = str1.split(/.*\embed\/([\d\w]+).*/);
 document.open();
 document.write("<img src='https://img.youtube.com/vi/"+result[1]+"/default.jpg'>");
 document.write("<br>");
 document.write("<a download='s120x90.jpg' href='https://img.youtube.com/vi/"+result[1]+"/default.jpg'>画像をダウンロードする</a>");
 document.write("<br>");
 document.write("Chrome以外のブラウザではダウンロードリンクが機能しないものがあります。");
 document.write("<br>");
 document.write("<a href='https://edit-anything.com/other/youtube_thumbnail_get_script.html'>元のページに戻る</a>");
 document.close();
 }
 else {
 if(str1=='');
 alert('動画ID、または動画のアドレスを入力して下さい。'); 
 }
}
</script>

YouTube サムネイル取得スクリプト

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

関連カテゴリー

YouTubeショート動画として認識されない原因を探る
【YouTube】著作権の一致が新たに見つかりました～審査して下さい」との通知が届く！
YouTube ショート動画が収益化可能に！規約に同意
YouTubeのチャンネルURLやチャンネルIDの調べ方
YOUTUBE コメントが1件あるのに何も表示されない