YouTube動画のスクリーンショットツール「YouTube Shot」/ JavaScipt

「ショート形式」の動画に対応

「YouTube Shot」ver.0.1 をテストしていて、「ショート（shorts）」の表示形式に対応する必要に気付きました。

◎ スマホで撮影した縦長画面の動画にフィットする「ショート」という動画の表示形式があり、Youtubeサイトの動画画面の右列に並んでいます。（下の赤枠）

このサムネイルをクリックすると、下の様なスクロールすると幾つも動画が出て来る画面になります。

ショット画像が縦長になる 

スマホ撮影の動画で縦長ですが、ver.0.1 ではショット画像の幅を「720px」に統一したので、「ショート」動画のショット画像は不釣り合いに縦長で大きな画像になります。 これを改善するために、横幅・高さの大きな方を「720px」に統一する仕様に改めました。

 

 通常 ⇄ ショート の変更で機能が中断する問題

ver.0.1は、YouTubeサイト内での移動を考慮していませんでした。 そのため、ショートの画面に入って通常の画面に戻ると、ツールが機能しなくなる事が生じました。 これは JavaScriptの制作で頻繁に経験する事で、ページ切換えに合わせて、スクリプトを再起動（エンハンス）する必要がありました。

ここから、コードの編成を全面的に組み変え、画面移動での機能停止をしない様に改善しました。 結果として、ソースコードは 90行程度に増えましたが、それでもシンプルな範囲内だと思います。

「YouTube Shot」使い方 

このツールは YouTubeサイトでの使用を前提にしていますが、ブログ等に埋込まれたYouTube動画からもスクリーンショットが得られます。 ブログページに複数の動画がある場合は、再生中の動画がスクリーンショットの対象になります。

いずれの場合も、スクリーンショットを撮像するまでに、僅かの時間でも動画を再生する必要があります。 これは動画のデータがロードされる必要があるためです。

スクリーンショットを得る 

● YouTube動画のある画面で「Ctrl+PrintScreen」を押します。

▪ 押した瞬間のスクリーンショットがダウンロードフォルダーに保存されます。

▪ ファイル名は「YT(n).png」になります。「n」は自動の連番です。

▪ 動画は再生中でも停止中でもかまいません。 続けて複数回のショットが可能。

▪ ファイル形式は「png」で、横幅・縦幅は大きな方が「720px」になります。

 ショット画像のファイルの扱い方

手っ取り早いのは、ブラウザのツールバーの「   」のボタンから、ダウンロードしたファイルを開く事です。

私は、「png」ファイルの関連アプリを「IrfanView」に指定しているので、画像をクリックして得た画像をその場で確認し、任意のフォルダーに保存が出来ます。 他のアプリケーション（例えば Paint）でも、同様の操作が可能でしょう。

また、多数のスクリーンショットをまとめて移動したり削除する場合は、「   」アイコンをクリックして「ダウンロードフォルダー」を開いて操作ができます。

ショット画像のサイズ 

横幅が長い（ランドスケープ）画像のショット画像は横幅「720px」になります。

高さが高い（ポートレイト）画像のショット画像は、高さが「720px」になります。

下は横長の動画の場合のショット画像です。

この「720px」は、「YouTube Shot」のソースコードを書き変えることで、簡単に任意の幅に変更できます。

「YouTube Shot」 ver.0.2　71行

let cover=720 // スクリーンショットのサイズ 🔴

上の「720」の値を「640」に書き換えると、ショット画像の「縦」または「横」の最大サイズが「640px」になります。（単位なしで指定します）

「YouTube Shot」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 YouTube Shot 〕 ver. 0.2

// ==UserScript==
// @name         YouTube Shot
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  YouTube動画のスクリーンショットツール
// @author       You
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==


let target=document.querySelector('head title');
let monitor=new MutationObserver(main);
monitor.observe(target, { childList: true, });

main();

function main(){
    let path_name=location.pathname;
    let sel
    if(path_name.includes('/shorts/')){ // ショート動画
        sel='ytd-player.ytd-shorts video.html5-main-video'; }
    else if(path_name.includes('/embed/')){ // 埋込の動画
        sel='video.html5-main-video'; }
    else{
        sel='ytd-player.ytd-watch-flexy video.html5-main-video'; }

    let retry=0;
    let interval=setInterval(wait_target, 50);
    function wait_target(){
        retry++;
        if(retry>100){ // リトライ制限 100回 5secまで
            clearInterval(interval); }
        let video=document.querySelector(sel);
        if(video){
            clearInterval(interval);
            set_canvas(); }}



    function set_canvas(){
        let cv='<canvas id="draw" style="position: absolute; z-index: -1; visibility: hidden;"></canvas>';
        if(!document.querySelector('#draw')){
            document.body.insertAdjacentHTML('beforeend', cv); }
        let canvas=document.querySelector('#draw');

        setTimeout(()=>{
            document.addEventListener('keyup', (event)=>{
                if(event.keyCode==44 && event.ctrlKey){ //「Ctrl+PrintScreen」キー入力
                    event.preventDefault();
                    event.stopImmediatePropagation();
                    player_capture(canvas); }});
        }, 400);

    } // set_canvas()



    function player_capture(canvas){
        let path_name=location.pathname;
        let sel
        if(path_name.includes('/shorts/')){ // ショート動画
            sel='ytd-player.ytd-shorts video.html5-main-video'; }
        else if(path_name.includes('/embed/')){ // 埋込の動画
            sel='video.html5-main-video'; }
        else{
            sel='ytd-player.ytd-watch-flexy video.html5-main-video'; }
        let video=document.querySelector(sel);

        let cover=720 // スクリーンショットのサイズ 🔴
        if(video.videoHeight < video.videoWidth){
            canvas.width=cover;
            canvas.height=cover*video.videoHeight/video.videoWidth; }
        else{
            canvas.height=cover;
            canvas.width=cover*video.videoWidth/video.videoHeight; }

        //videoをcanvas描写
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

        let link=document.createElement("a");
        link.href=canvas.toDataURL("image/png");
        link.download="YT.png";
        link.click();

    } // player_capture()

}// main()

「YouTube Shot」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「YouTube Shot」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）