esa.ioからの記事更新でカード画像を設定する

以前の記事で紹介したとおり、このブログはesa.io内の特定カテゴリに書いた記事が、Hugo+Netlifyによって自動で反映されるようになっています。

この際、記事のFrontmatterはesa.ioのGitHub WebHookによって自動で設定されるため、記事ごとの画像を設定することができずサイトアイコンを表示するだけにしていました。

しかしながら今どきTwitterCard画像に非対応というのも寂しいので、少し頑張ってみた結果、以下のように記事ごとの画像をTwitterCardに入れられるようになりました。

先日書いたデレステの記事も、スクショをいい感じに設定できて楽しいです。

ブログをちょっと弄ってSummary Card with Large Imageを使えるようにした。だいぶ見栄えが良くなったので満足。 https://t.co/WSResAOUHM

— 黒曜 (@kokuyouwind) July 14, 2019

ものすごく簡単なアイディアではあるのですが、どうやったのかをまとめておきます。

🐦 esa.io の記事にFrontMatterを追加する

自分の使っているBilberry Hugo Themeでは、Frontmatterの featuredImage に画像URLを設定しておけば、記事HTMLにog:imageを挿入してくれます。

というわけで、とりあえずは esa.io で書いた記事の先頭に、雑にFrontmatter記述を追加してみます。

……まぁ、水平線になりますよね。そりゃそうだ。

このまま記事を更新すると、GitHub WebHookで生成されるマークダウンは以下のようになります。

---
title: "ライブカーニバル振り返り"
categories: [ゲーム]
tags: [デレステ]
created_at: 2019-07-09 23:05:16 +0900
updated_at: 2019-07-11 22:04:50 +0900
published: true
number: 175
featuredImage: https://img.esa.io/uploads/...
---

(以下本文)

いい感じにマージしてくれたりはせず、空行を挟んで単純に連結されていますね。

このままHugoを立ち上げても、以下のようにURLがそのまま表示されてしまいます。

これは残念極まりない。

🔪 sedでのFrontmatter書き換え

さきほどのマークダウンを見ると、2つのFrontmatterをいい感じにくっつけることができればよさそうです。

つまり、空行を挟んだ2つの --- を取り除くわけですね。

これはsedを使って sed -r '/---/{N;N;N;s/---\n\n---\n//}' のようにすれば実現できます。(Nで2行ではなく3行先読みしているのは、3行分の改行を取り除けるようにするためです)

以前の記事で書いたとおり、tagsとcategoriesについてもシェルスクリプトで変換処理を噛ませています。

そこにFrontmatterの結合処理も追加しました。結果、前処理のスクリプトは以下のようになっています。

#!/bin/bash

echo "start translate"
sed -r "s/^category: ([^\[]+)$/categories: \[\1\]/g" -i content/posts/*
sed -r "s/^tags: ([^\[]+)$/tags: \[\1\]/g" -i content/posts/*
sed -r '/---/{N;N;N;s/---\n\n---\n//}' -i content/posts/*
echo "finish"

これをNetlifyでビルド前に実行することで、esa.ioの記事に書いたFrontmatterがきちんと認識されるようになりました。

📝 記事テンプレート

毎回手でFrontmatter部分を書くのは面倒だしミスする可能性が高いので、 esa.io の記事テンプレートに featuredImage の記述を追加しておきました。

このテンプレートを元に記事を作って、記事中に入れた画像の中から1枚を選んでURLコピペするだけでカード画像を設定できるようになりました。

お手軽！

💬 感想

思ったより簡単に実現できたので、もうちょっと早めにやっておけばよかったですね。

featuredImageのために実装しましたが、結果的に任意のFrontmatterを記事ごとに設定できるようになったのでいろいろと使い所がありそうです。