ブログのアイキャッチ、OGP画像をタイトルから自動生成してみる
↑こんなのを自動生成するツールを作ってみました。
ブログの投稿にキャッチ画像と呼ばれる記事固有の画像を設置している人も多いかと思います。
アイキャッチ画像には、画像があることで読み手に読まれやすくなったり、SNSでシェアするときに拡散されやすくなる効果があるため設置しておくメリットは大きいです。
ただ適切なアイキャッチ画像を見つけて設置するというのは結構大変です。テーマに沿った画像を見つけるのも大変ですし、画像自体の権利云々もやっかいです。技術ブログだと特にテーマが限られており、真っ黒いターミナルを写したような画像を毎度毎度のように掲げざるを得ないというのも辛いです。
そこでなんとか自動生成できないかとやってみたのが今回の趣旨です。
どんなものを自動生成するか
理想はフリーの画像を蓄えて、渡されたテキストに応じた画像を返すAPIを作ってみようかと思ったのですが、再配布可能な画像を被らないほど沢山蓄えたり、テキストにマッチした画像を適切に選択したりする難易度が高かったため別の方法を探ってみること。(いつかやりたい)
画像を集めるのが大変なら画像を作ればいいじゃない、ということで1から画像を動的生成する手法を考えてみました。
文字からユニークなアイコンを作ってみるテスト
以前作ったアイコンジェネレーターをベースにアイキャッチ用に加工してみることに。Javascriptベースで作っていたのでAPI化するには向かないかと思っていたのですが、Node.jsでサーバー上でもCanvasを扱えることが分かりコードを大きく書きなおすこと無く移植することが出来ました。
UniqueOGP
Github: UniqueOGP
https://github.com/pistatium/unique_ogp
作成したツールがこちらです。
Node.jsが動くサーバーでセットアップすれば画像APIとして動かすことが可能になります。ブログのテンプレートを弄って動的にタイトルが入るようにすれば全自動でアイキャッチ、OGP画像を埋め込むことができるようになります。
本当はこちらでサーバーを用意してAPIとして公開したかったのですが、手元のサーバースペックに難があるため公開を見合わせました。GoogleAppEngineでNode.jsが動いてくれれば助かるのですが…。
Javascriptベースなのでもちろんブラウザベースでも動かすことができます。
UniqueOGP Demo
http://pistatium.github.io/unique_ogp
デモページを作ったのでこちらでどんな画像が生成されるか試すことが可能です。
MITライセンスで公開しているので改造等お好きにどうぞ。