Hugoでブログカード：ショートコードの欠点をエディタで対応
広告
Hugoでブログサイト運用、半年経った感想
今回はいつもの英語・海外ドラマネタと違って、このサイト自体のお話。
このブログは、昨年７月にブログサービス「はてな」から静的Web生成ツール「 Hugo⤴️」へ移行し大成功を収めています。運用費が３分の１に、サイトへのアクセススピードも劇的に速くなりました。また、sitemapの問題もなくなり、細かい設定が自由にできるようになりました。
たかが個人ブログ程度にアプリサーバを動かす必要はあるのか？ という以前持っていた疑問が、この半年の運用で確信に変わりました：
全く必要ありません！（笑）
私のサイトがお世話になっているロリポップさん↓
Hugoの欠点：ブログカード機能無し
と同時に、Hugoの細かい欠点も目につくようになりました。最近、多くのアクセスが今でもあるはてなブログ時代の記事をHugoへ移行し始めたんですけど、はてなで使えてた「ブログカード」機能が使えないんですね（上の２つが例）。
一見するとHugoの「ショートコード」の機能でなんとかなりそうなんですが、「ショートコード」内では外部のリソースを取得できないので、これがなんとかならないのです。
インターネット上でも大勢の人が同様の悩みを抱えていて、様々な弥縫策（workaround）が考え出されています。
個人的にオモシロイと思ったのは ローカルでJSON APIサーバーを動かす⤴️という案で、「ショートコード」内ではJSONを取得できる拡張だけはあるので、擬似的にブログカードのショートコードを作成できるんですね。
ただ、自分的にはそこまでするのは・・・というのも正直あったのです。だって、最初に述べたように、たかが個人ブログなのですからね（笑）
この機能は、本来Hugo側で対応すべきと思ってますので、ここ数ヶ月Hugoの開発状況などを眺めていたんですけど、残念ながら、この先すぐにこの機能不足に対するアクションはなさそうという結論に達しました。なので、自分もこのHugoブログカード弥縫策レースに参戦することに（笑）
ブログカード機能の仕様
そこで、自分が求めるブログカードの仕様を整理してみます。リンクするブログの内容は相手先依存なので、後日変化する可能性がありますよね：
だったのが、１年後URLは全く同じなのに
みたく１８０度の転換をしちゃったり（笑）
と言っても、私が貼ったブログカードの内容も１年後に自動的に変わられたら困りますよね。リンクを張ったこっちの頭が疑われてしまいます。だから、たとえリンク先の記事内容が変わったとしても、ブログカード内の表示は以前の内容のママの方が好ましいですね。ということは、こちらの記事編集時の内容がブログカードには反映されて、それが恒久的であるべきですね。
ただし問題は、リンク先のアイキャッチの画像です。画像にも恒久性を期するなら、画像ファイル自体も編集時点のものをこちらのサイト内にダウンロードするのがいいのでしょうが、たかが個人ブログにそこまでするのもなんなので、今回画像は目をつぶることにします。画像がエロに変ってしまったらごめんなさいと。まあ、画像ファイルは名前が変わる可能性が非常に高いので（上の例だとrally.jpgからbikini.jpg）、そこまで神経質になる必要はないかもですね。
最終的に決定した仕様をまとめると：
ブログカードでリンクしたいURLがあったときに、編集時点でそのURLが含むOGP情報を取得しそれが表示される。そのデータは恒久的（ただし、画像ファイルの内容は無視）
となりました。でもこれって、結局Twitterのエディター上でURL貼った時に、Twitterカードになるのと全く同じなんですよね（笑）
ということで、どうやらエディター上で対応すればいいのが分かりました。
Sublime Text 3 プラグイン開発
さて私はSublime Text 3エディターを普段使っているんですけど、このエディターにはプラグインで標準機能を拡張できる機能があります。幸いプログラム言語はPython 3と馴染みがあったので、このHugoブログカード用のOGPデータを取得するプラグインを自作したのが下記：
クリップボードに入っているURLの文字列からOGPメタデータを取得し、それをHugoのショートコード用データに加工後、カーソルの位置に挿入するプログラムです。
OGPメタデータ取得プラグインのデモ
あとは、このプラグインをctrl+alt+bで呼び出すように設定すると、以下のような感じで使えます。ワオ、めっちゃ楽ちん。データ取得は瞬時に終わりますね。
後は、Hugo上でblogcardのショートコードを作って、見栄えするCSSを作れば終了です。そちらに関しては、この記事の範囲外とさせてもらいます。他サイトの記事でもいいですが、自分が気に入ったブログカードのソースコードとCSSを読むのが一番のおすすめです。
最後に
今回はHugoに無いブログカード機能を使うため、回避策としてエディター上のプラグインとして機能を実装しました。賢明な方はお気づきかと思いますが、結局JSON APIサーバ機能をエディター上に持ってきただけですね（笑） でも、こちらのほうがHugo以外にも適用可能な汎用性があると思います。今回は自分が使っているということで、エディターはSublime Text 3がターゲットでしたが、拡張機能がある他のエディターでも同様に作れると思います、多分。実装のポイントは、URL文字列からOGPメタの情報を引っこ抜くメソッドを作ることですね。それさえできれば、後はどうやってそのURL文字列にアクセスするか、どうやってエディタ上にペーストするかというエディタ側の拡張機能の仕様とにらめっこになります。
この記事で日々のブログ編集作業が楽になる方が一人でもおられたら幸いです。
それでは、また〜
広告