ぺんちゃん日記

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

ブログ記事に YouTube 動画とサムネイルを差し込めるように機能追加する【AutoHotkey】。

f:id:yasushiito:20190403184928p:plain

はじめに。

私は病気で重度の身体障害があるので PC を楽に操作するための様々なツールを探したり自力で作成したりしています。
特に AutoHotkey というスクリプト言語に力を入れていて、ブログを簡単に更新できる様になるツールをいろいろ作っています。
また、それをブログのネタにもしています。
何らかの問題を改善することができたら今回のように記事にします。
以上のような事情から、広く一般に利用できるような話ではありませんのでご了承ください。

もうちょっとかっこよくYouTube 動画を紹介したい。

時々 YouTube 動画を紹介したくてブログ記事にまとめることがあります。
その記事が SNS などで拡散される時にアイキャッチ画像が添えられるわけですが、はてなブログの場合は編集画面で個別に指定しない限りはdefaultの画像で紹介されてしまいます。
可能であれば紹介した YouTube 動画のサムネイルをアイキャッチとしたいのです。

はてなブログアイキャッチを個別に指定する方法は分かっています。
アイキャッチの画像は本文の中の画像から参照されます。
ブログの本文に最初に挿入された画像が利用されます。
画像が複数ある場合は編集オプションでアイキャッチ画像の項目から指定できます。
本文で利用されている画像のリストが表示されています ので選択するだけです。
YouTube は動画のサムネイルを取得できるようになっているので、これを本文に差し込めばアイキャッチにできるはずです。
そこではてなブログYouTube 動画のサムネイルを差し込んでアイキャッチにする方法を調べてみます。

YouTube のサムネイル。

YouTube 動画には個別に ID が付与されています。
それをもとに動画のリンクを作ったりサムネイル画像を表示させたりできます。
サムネイル画像の URL は次のようなフォーマットで指定できます。

https://img.youtube.com/vi/動画ID/default.jpg

この URL をブログ本文に貼り付ければサムネイル画像を表示できます。
次のようなタグで貼り付ければクリックで動画を開ける画像を表示できます。

[https://www.youtube.com/watch?v=動画ID:image=https://img.youtube.com/vi/動画ID/default.jpg]

このタグはこんな感じに見えます。
https://www.youtube.com/watch?v=Rax37KtyWOk&t=436s

既存のスクリプトに機能追加するには。

これまでにブログ本文に様々なサイトのコンテンツを引用するようなスタイルで差し込む機能を作成してきました。
例えばGitHubに保存しているスクリプトのソースコードを引用するなどです。
そこでは表示されているページのどこかを選択することで、選択テキストを引用しながら ブログに差し込んでいました。
今回も同じように YouTube 動画上のどこかをテキスト選択することで、動画をサムネイル形式で引用しながらブログに差し込むようにするのが良いかと思います。
引用と言っても画像ですから 引用する場所などないのですが、将来的にはテキスト選択されていない場合は動画の参照を行うようにしたいので 用途を分けるためのフラグとしてテキスト選択しておくものとします。

ドメインごとに引用スタイルを変えてタグを生成する関数に YouTube の URL を検出するような機能を追加します。

;ドメインごとに適切な引用スタイルでタグを生成してクリップボードにセットする。
clipblockquotefordomain(url, title, selectedtext){
    ;GitHubページからソースコードを引用するならタグを受け取る。
    txt := blockquotegithub(url, title, selectedtext)
    ;引用文字列が帰ってきたならクリップボードに転送して呼び出し元に復帰する。
    if strlen(txt) > 0
    {
        clipboard := txt
        return
    }
    ;YouTube のサムネイルならタグを受け取る。
    txt := blockquoteyoutube(url, title, selectedtext)
    ;引用文字列が帰ってきたならクリップボードに転送して呼び出し元に復帰する。
    if strlen(txt) > 0
    {
        clipboard := txt
        return
    }
    ;対応すべきドメインが見つからないので汎用の引用スタイルでタグを返す。
    txt :=
    ;引用のタグを生成する。
    ;txt := ">>`n" . selectedtext . "`n<<`n"
    txt := "><blockquote cite=""" . url . """><p>" . selectedtext . "</p><cite><a href=""" . url . """>" . title . "</a></cite></blockquote><`n"
    ;クリップボードに転送して呼び出し元に復帰する。
    clipboard := txt
    return
}

myahk/blogrefemb.ahk at master · yasushiito/myahk

そしてサムネイルのタグを生成して返す関数を作成します。

;YouTube のサムネイルを引用する形のタグを返す。
;無関係の URL なら空文字列を返す。
blockquoteyoutube(url, title, selectedtext){
    res :=
    ; URL がYouTubeドメインであればサムネイルの可能性あり。
    x := RegExMatch(url, "^https\:\/\/www\.youtube\.com\/watch")
    if x > 0
    {
        ;正規表現を使って idらしい部分を取り出す。
        pos := RegExMatch(url,"v\=\w*", vid)
        ;見つかった場合。
        If pos > 0
        {
            ; 無駄な文字を取り除いてサムネイルへの URL にする。
            StringReplace, videoid, vid, v=
            vurl := "https://img.youtube.com/vi/" . videoid . "/default.jpg"
            ;画像と引用テキストをタグにする。
            res := "[" . url . ":image=" . vurl . "]`n" . selectedtext . "`n"
        }
    }
    ;無関係の URL なら空文字列を返す。
    return res 
}

myahk/blogrefemb.ahk at master · yasushiito/myahk

ベースは出来上がっているので単純に追加するだけで済みますね。

サムネイルをアイキャッチにしてみる。

スクリプトを利用してブログ本文サムネイルのタグを差し込んだら、サイドバーのアイキャッチの項目をリロードします。

f:id:yasushiito:20190722153605p:plain

確かに差し込んだサムネイルが表示されますね。
この画像を選択すれば キャッチを YouTube 動画のサムネイルに差し替えられます。


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

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