YouTube の動画のサムネイル画像を観覧【ブックマークレット編】

パソコンのブラウザで YouTube のページを開くとホーム画面にはオススメ動画がズラ～っと並んでいますよね、あの動画のサムネイル画像をしっかり見たい！って事ありませんか？、クリックすると動画のページが開きますがすぐに再生が始まっちゃうのであのサムネイル画像だけを開くのって実は中々難しいんです、そこで以前このサムネイル画像を開く方法の「手動編」と「拡張機能編」のふたつをご紹介した事があるのですが、手動編は URL を弄るのが面倒ですしどこをどのように変更するのか覚えておかないといけないのでとにかく面倒、拡張機能は簡単ですが求められる権限も強いからできればインストールしたくないという方も多いのではないでしょうか？、という事でもっと簡単にサムネイル画像を開けるようにブックマークレットを作成してみました、こちらの記事でご紹介しているコードを使ってブックマーク（お気に入り）を作成して、あとは対象の動画のページを開いたらこのブックマークをクリックするだけの簡単仕様ですね、そうすると新しいタブでサムネイル画像が開きます。

では YouTube 動画のサムネイルを開くブックマークレットを作成してみましょう、ちなみに今回は例としてブラウザの Chrome を使用しています、別のブラウザを使う場合は各項目のメニュー名が違う事もありますのでご注意ください、まずはブックマークバーの何も無いところ右クリックして開いたメニューから「ページを追加」を選択します。

「ブックマークを編集」が開くのでまずは「名前」の設定ですね、ここで入力したテキストがブックマーク名になるので分かりやすい名前を付けましょう、こちらでは「YouTubeサムネイル」という名前にしてみました、ちなみに名前が長すぎると後半部分は見切れちゃうので注意してください。

次に下記のコードをコピーしてその下の「URL」のボックスに貼り付けます、あとは「保存」ボタンをクリックしたらブックマークレットの完成ですね。

javascript:void((function(){
    var url = window.location.href;
    var videoId = '';
    if (url.includes('youtube.com/watch')) {
        var match = url.match(/[?&]v=([^&]+)/);
        if (match) videoId = match[1];
    } else if (url.includes('youtu.be/')) {
        var match = url.match(/youtu\.be\/([^?]+)/);
        if (match) videoId = match[1];
    } else if (url.includes('youtube.com/shorts/')) {
        var match = url.match(/shorts\/([^?]+)/);
        if (match) videoId = match[1];
    }
    if (videoId) {
        var imageUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
        window.open(imageUrl, '_blank');
    } else {
        alert('YouTubeの動画ページを開いて実行してください。');
    }
})());