ブログのアイキャッチ、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ライセンスで公開しているので改造等お好きにどうぞ。

Fri, 17 Jul 2015 08:44:01 +0000   |   Category:Javascript

関連記事

About Me

kimihiro-n

Androidアプリを中心にいろいろアプリ作ってます。
T N G

Products

放課後アプリ部
放課後アプリ部
個人アプリ開発者のための集客プラットフォーム作りました。 AndroidやiOSアプリのダウンロード数増加を無料で手伝います!

最速のJSON可視化・解析ツール
JSONを使った開発をスムーズにするためのツールです。 特定の値までのパスを簡単に取れます。
過去に作ったiOSアプリ
明日から本気出すタスク管理 for iOS
過去に作ったAndroidアプリ
明日から本気出すタスク管理 for Android Nagareboshi taplight
Others..

Search Articles