ぺんちゃん日記

食と歴史と IT と。 Web の旅人ぺんじろうが好奇心赴くままに彷徨います 。

YouTube 動画を編集中のブログ記事に一発で貼り付けたい【AutoHotkey】。

f:id:yasushiito:20190403184928p:plain

はじめに。

私は重度の身体障害者なので PC 操作を手助けするツールを探したり作ったりしています。
ブログ編集を助けるツールは要望が特殊すぎて満足いくようなツールは手に入らないので自作しています。
主に AutoHotkey というスクリプト言語で開発しており、開発記録としてその内容をブログ記事にしております。
この記事はその一つです。
内容及び成果物は個人的な環境に強く依存しているので皆様のお役には立てないかと思いますがご了承ください。

これまでの経緯。

前回 YouTube 動画のサムネイルをブログ本文に差し込む機能を 追加しました。
そのおかげでブラウザで表示しているページをブログ本文に差し込む時に、 URL で判別してそのページが YouTube 動画であれば サムネイル画像を表示するタグを生成して差し込むようになりました。
さらにサムネイル画像をブログ記事のアイキャッチ画像に使えることも確認しました。
今回は画像ではなく動画を差し込むようにしたいです。

ブログ記事に YouTube 動画を貼り付けるには。

YouTube 動画の右下にある共有ボタンをクリックすれば、 各種 SNS で共有するための窓が開きます。

f:id:yasushiito:20190723182945p:plain

その中野埋め込むボタンをクリックすると、 ブログなどに貼り付けるための HTML タグが表示されます。

f:id:yasushiito:20190723183015p:plain

これをコピーしてブログ本文にペーストすれば記事に動画を差し込めます。

f:id:yasushiito:20190723183042p:plain

他の方法は?

そんなものを使わなくても、はてなブログの編集画面には YouTube 動画を参照するボタンがあるんですけどね。

f:id:yasushiito:20190723183101p:plain

自分が紹介したい動画を右側のサイドバーで検索して選ぶのってだるいじゃないですか。
動画を紹介したい時は、大抵その動画を視聴しているんですから。
しかも、最終的には YouTube の共有ボタンからコピーできるタグと同じものが出来上がるんだし。

ということで、私ははてなの 機能は使わずにYouTube の共有ボタンからコピペする派です。
ただこれも共有ボタンをクリックして、埋め込みボタンをクリックして、 コピーボタンをクリックして、ブログの編集ページを選択して、ペーストするといういささか面倒な手順となるのです。
これをワンクリックにできるだけでも記事作成のスピードはぎゅっと上がるはずです。

今回の方針。

前回同様に埋め込みリンクを差し込むスクリプトに追加します。
前回は YouTube 動画のページで何らかのテキスト選択が行われていた場合にサムネイルを差し込むようにしましたが、今回は何もテキスト選択されていない場合に動画を差し込むようにします。
現在の仕様ではテキスト選択されていない場合は必ずはてな記法による「埋め込みリンク」のタグが差し込まれています。
そこで、 URL からドメイン名などを使って判別する処理を追加しながら、 YouTube 動画であれば動画の埋め込みタグを差し込む形にします。

実装。

テキスト選択されていない場合にはドメインごとに動作を変える関数を呼び出すことにします。

   selectedtext := getselectedtext()
    ;テキストの選択が発見されたらドメインごとに適切な引用を行う。
    If strlen(selectedtext) > 0
    {
        ;選択範囲が改行で終わっている場合、改行がダブらないように一度削除してしまう。
        selectedtext := RegExReplace(selectedtext, "\n$" , "")
        ;ドメインごとに適切な引用を行う。
        txt := clipblockquotefordomain(url, title, selectedtext)
    }
    Else
    {
        ;ドメインごとに適切な引用を行う。
        txt := clipembedfordomain(url, title)

    }

myahk/blogrefemb.ahk at master · yasushiito/myahk

ドメインごとの判定関数では、 YouTube 動画に対応して タグを生成する関数を呼び出すことにします。

clipembedfordomain(url, title){
    ;YouTube の動画を埋め込むならタグを受け取る。
    txt := embedyoutube(url, title)
    ;引用文字列が帰ってきたならクリップボードに転送して呼び出し元に復帰する。
    if strlen(txt) > 0
    {
        clipboard := txt
        return
    }

    ;特殊な引用ではなかったのでdefaultの機能である埋め込みリンクをクリップボードに転送。
    ; URL 取り出して埋め込みリンクの文字列を生成してクリップボードに入れる 。
    clipboard = [%url%:embed:cite]
    return
}

myahk/blogrefemb.ahk at master · yasushiito/myahk

YouTube 動画らしき場合に動画の埋め込みタグを生成する関数です。
なお開始位置は指定できず、プレイヤーのコントロールバーを表示するがチェックされて、プライバシー強化モードを有効にするはオフになっています。

;YouTube の動画を埋め込む形のタグを返す。
;無関係の URL なら空文字列を返す。
embedyoutube(url, title){
    res :=
    ; URL がYouTubeドメインであれば動画の可能性あり。
    x := RegExMatch(url, "^https\:\/\/www\.youtube\.com\/watch")
    if x > 0
    {
        ;正規表現を使って idらしい部分を取り出す。
        pos := RegExMatch(url,"v\=\w*", vid)
        ;見つかった場合。
        If pos > 0
        {
            ; 無駄な文字を取り除いて動画の id にする。
            StringReplace, videoid, vid, v=
            ;動画を埋め込むタグにする。
            res := "<iframe width=""560"" height=""315"" src=""https://www.youtube.com/embed/" . videoid . """ frameborder=""0"" allow=""accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"" allowfullscreen></iframe>"
        }
    }
    ;無関係の URL なら空文字列を返す。
    return res 
}

myahk/blogrefemb.ahk at master · yasushiito/myahk

結果。

これが今回のスクリプトで生成したタグです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/G5QbHqvD_2k" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

私の環境では問題なく閲覧できますね。

この記事に登場するAutohotkey スクリプトについて

この記事の中で私が作成したプログラムは、全て自由に使うことができます。
詳しくはこちら