ブログのサムネ画像を自動生成するアプリを作った話

今までこのブログのサムネイル画像は、Canvaを使って毎回セコセコとGUIで作っていました。

しかし過去の記事のサムネを見ていただけるとわかるのですが、私のブログのサムネのデザインは毎回同じです。

QiitaのOGP画像(Twitterの投稿にリンクを貼ると出てくる記事のサムネ画像)は自動生成されている話をどこかで聞いたので、自分でも作れないかと思い立ったのが今回のきっかけです。

TL;DR

今回の記事サムネのような画像を(半)自動生成できます。
使用方法は以下GitHubのリポジトリに記載しているので、ご自由にお使いください。

サムネイル(OGP)画像を自動生成するCUIアプリケーション

事例紹介

Qiita以外に事例は無いかと調べていたところ、クックパッドが最近導入したらしいです。

以下記事の抜粋ですが、クックパッドでは全てのレシピに対し画像を自動生成するのではコストがかかってしまうのとOGP画像のリクエストの割合は低いため、OGP画像用リクエストがあったタイミングで動的に生成し返すアプリケーションになっているようです。

また、画像生成の内部的にはhtmlを生成し、puppeteerでスクショを取り、OGP画像を生成しているようでした。

クックパッド：レシピページのOGP画像を動的に生成する

今回の構成

クックパッドのようにサーバーを用意してリクエストに応じて画像を返す、それができたら理想ですが今回は個人のブログのサムネに使うだけなので、サーバーは用意しません。

ローカルでコマンドを叩いて画像ができればそれで良いのです。

ですが処理の内容はありがたくクックパッドを参考にし、html生成&スクショの方針で行きます。

ということで最終的な処理はざっと以下のようになりました。

1. json内にタイトルを書く
2. jsを実行し、htmlとしてタイトルを埋め込んだ画像を生成
3. puppeteerで生成したhtmlをスクショし、ローカルに保存

結局毎回タイトルを変更し、ビルドしているのでなんちゃって自動生成ではありますがどうかご勘弁を…

このブログはwordpressなので、記事を投稿したタイミングで画像生成のAPIをリクエストし勝手に埋め込んでくれる仕様を完成させるにはWordPressのプラグインを自作するのと、画像生成し投げてくれるサーバーを用意しないといけなさそうです。

自分は生成された画像をせっせとwordpressに手動で埋め込んでいます。。
（これでも結構楽になったので嬉しい！）

できたもの

タイトルを入力しコマンドを叩くだけで、こんな感じのイケたサムネが出力されます。

自分のブログ用ではQiitaリスペクトな感じにしてみました。

このアプリはGitHubに公開しているので、使ってみたい方はご自由にどうぞ。
基本クレジット表記は不要ですが、記載していただけると作者が喜びます！

サムネイル(OGP)画像を自動生成するCUIアプリケーション