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

YouTube動画のスクリーンショット

おそらくこの種の拡張機能は色々あると思います。様々な付加機能を備えたツールで使い易いのを探して使えば良いのですが、拡張機能を幾つもブラウザにインストールると、ブラウザの負荷になると思います。その程度は調べないと判らないのですが、自分で作って「Tampermonkey」にインストールすれば、基本的には同じ事が出来て、しかもブラウザへの負荷は節約できると思います。

「YouTube Shot」の制作のコンセプトは、出来るだけシンプルで素の機能のみのツールにするという事でした。結果として、僅か50行のコードに納まりました。

「YouTube Shot」使い方

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

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

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

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

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

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

▪ ファイル形式は「png」横幅は「720px」に固定されます。

ファイルの扱い方

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

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

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

ショット画像のサイズ

ショット画像は「png形式」で、横幅「720px」になります。高さは、動画のアスペクト比で自動的に決まります。横幅のサイズは、ブログ掲載などのハンドリングのし易さを考慮した値です。

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

「YouTube Shot」 ver.0.1　33行～

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

上の部分に「720」が2ヵ所ありますが、この2ヵ所の値を「640」にすれば、ショット画像の横幅が640pxになります。

スクリーンショットのブログ利用は「引用」としてがキー

ブログにショット画像を掲載する場合は、著作権に対しての無知は許されません。既に「良識から外れた目的」や「度を過ぎた方法」のショット画像の掲載が訴えられ、只では済まなくなる場合がある時代です。

著作権は線引きが判り難いので、時々はネットの情報を仕入れて、自分の発信に問題はないか見直す必要があると思います。幾つかのサイトで「YouTube動画のスクリーンショット」に関する「著作権」の問題を調べて見ましたが、以下のサイトは纏まりが良かったので、ここで紹介します。

WEBコンテンツ（YouTube動画、Google マップ、LINEなど）のスクショ利用について　～ちょっとした著作権の話⑤～不定期過ぎて、前回から約１年半ぶりになりますが、ちょっとした著作権についての小話第５弾！今回は、インターネット上のコンテンツ（動画、地図、SNSの投稿など）の印刷物やブログ、SNSなどへの引用・利用について、素人なりにまとめてみました、とい

maruwanet.co.jp

上のサイトだけでなく、殆どのサイトでも必ず以下の注意が書かれています。

◎ ショット画像の掲載が「引用」として認められる事が必要

◎「引用」と認められるには幾つもの条件を全て満たす必要がある

（注：以下は YouTubeのショット画像の場合に合わせて言い換えています）

　▪公正な慣行に合致

　▪引用の目的上正当な範囲内

　▪記事内容が「主」でショット画像は「従」

　▪元動画が判る事（動画埋込・リンクがあるか、著作権者の明記）

以下の事も各所で書かれています。具体的な判例はネット検索で調べてください。

大量のスクショ画像を利用して動画の内容がある程度わかってしまう場合や、スクショ画像を加工して利用する、引用上不要な場面の画像まで利用する、などはNGです。
❝

必要以上に法令を気にして、自由な創造性を失うのはマイナスだと思います。ただ目立ちたいだけの志の低い人は、こういう事に足を取られる可能性が多いでしょう。

「YouTube Shot」を利用するには

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

❶「Tampermonkey」を導入します

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

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

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

⭕「Tampermonkey」の導入方法拡張機能「Tampermonkey」は定評あるブラウザ拡張機能です。これをブラウザに導入する事で、ユーザーライクで有効な JavaScriptツールを制作し、利用することができます。∽ameblo.jp

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

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

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

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

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

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

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

〔 YouTube Shot 〕 ver. 0.1

// ==UserScript==
// @name         YouTube Shot
// @namespace    http://tampermonkey.net/
// @version      0.1
// @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 retry=0;
let interval=setInterval(wait_target, 20);
function wait_target(){
    retry++;
    if(retry>100){ // リトライ制限 100回 2secまで
        clearInterval(interval); }
    let video=document.querySelector('video.html5-main-video');
    if(video){
        clearInterval(interval);
        player_capture(video); }}


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


    video.addEventListener('loadeddata', ()=>{
        // スクリーンショットのサイズ 🔴
        canvas.width=720;
        canvas.height=720*video.videoHeight/video.videoWidth; });


    document.addEventListener("keyup", check_key);

    function check_key(event){
        if(event.keyCode==44 && event.ctrlKey){ //「Ctrl+PrintScreen」キー入力

            //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();
        }}
}

「YouTube Shot」最新版について

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

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

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