Pythonでアイキャッチ画像を自動生成するツールを作成した話

ブログを作成する際、アイキャッチ画像は悩みの種の一つだと思います。アイキャッチ画像を作成するのが億劫な人も多いのではないでしょうか。

しかし、SEOを意識するならアイキャッチ画像を設定した方がいいし、毎回記事に合わせて画像を選んで文字を載せて…という作業を行うのは骨が折れます。特に、技術系の記事なども多いSOK大学ではアイキャッチを毎回用意するのは地味に面倒です。

そこで、SOK大学はアイキャッチ画像を自動生成してくれるツールを作成しました。この記事のアイキャッチも作成したツールを用いて生成しています。

今回はどのようにしてアイキャッチ画像生成ツールを作成したのかをお話します。

目的
ツールの概要
技術スタック
まとめ

目的

まず、目的としては冒頭で述べた通り、アイキャッチ画像を用意する手間を省略できるようにアイキャッチ画像の自動生成を行うことです。

アイキャッチ画像を用意するうえでは、主に画像を用意する手間、タイトルを入力する手間、アップロードする手間等があります。

そこで、これらを解決できるようなツールの作成を目指します。

現在実装している機能としては、

タイトルを入れるだけで自動生成
任意の画像からも生成可能
JPEG、PNG、WEBPに対応
タイトルに合わせてフォントサイズなどもカスタマイズ可能
誰でも使えるようにwebアプリ化

です。

現状は生成したものを手動でアップロードする必要がありますが、今後のアップデートで自動アップロードに対応したいと思います。

ツールの概要

作成したツールはこんな感じです。

特に難しい説明はありません。テキストを入力したら生成ボタンを押すだけです。内部で使うだけなのでデザイン等は適当です。

ネット上の画像からも作成できるので、フリー素材サイトなどから作成したい場合に便利です。

技術スタック

生成はバックエンドで行い、APIを通じてWebから作成ができるように実装しました。フロントエンドでCanvasを用いて実装する方法も考えましたが、将来的に記事の投稿時に自動生成するということも考えられるため、APItとして実装しました。

ただ、リアルタイムで結果を確認出来る方が便利であることは間違いないので、将来的にはフロントエンドでの実装についても行うかもしれません。

具体的な技術スタックは以下のようになっています。

画像生成

画像の生成は、OpenCVとPillowを用いてPythonで行っています。最初、OpenCVのみでやろうと考えていたのですが、OpenCVではフォント周りが貧弱だったのでPillowと組み合わせることにしました。

結果的に、画像のリサイズなどはOpenCVで、文字入れをPillowで行っています。

バックエンド

生成プログラムをPythonで作ったので、バックエンドはPython製のフレームワークから選定しました。Pythonの有名なフレームワークとしては、DjangoやFlaskがありますが、今回の要件的にAPIを建てられればそれで十分なので、FastAPIを採用しました。

FastAPIはPythonのAPIフレームワークで、APIサーバーを建てるなら圧倒的に効率的です。フロントエンドフレームワークと組み合わせてAPIサーバーを開発するなら是非おすすめしたいです。

作成したプログラムはRender.comにデプロイしました。Render.comは無料で月750時間の利用枠があり、1つのプロジェクトのみなら実質永久に無料で使えます。デプロイもgitと連携することで非常に簡単に終わりました。

フロントエンド

フロントエンドはフレームワーク等を使わず、Google Siteを用いて生HTML、CSS、JSのみで作りました。フロントエンドでやることはAPIのユーザーインターフェースを作ることだけだったのでこれで十分でした。もう少し複雑なプロジェクトであれば、Next.js + Vercelなどの組み合わせを採用していたと思います。