ほぼClaude CodeでHugo用のOGP画像ジェネレーターを開発しました

Published:

Hugo用のOGP画像ジェネレーターを、ほぼClaude Codeで開発しました。

リポジトリ： HugoOGPImageGenerator

前半は使い方、後半はClaude Codeでの開発方法を紹介します。

使い方

導入

リリースページから、実行ファイルを取得します。

次のコマンドを実行するとpublicディレクトリに、ファイル構成やurlパラメーターを読み取り、適正な場所にそれっぽいogp.png画像が生成されます。 ファイル名は適宜読み替えてください。

./ogpv15-linux-amd64 Hugoのルートディレクトリ

カスタマイズ

背景画像や文字の配置など、ある程度自由にカスタマイズができます。

設定は、グローバル( config.yaml )→コンテンツタイプ( {Type}.yaml )→記事ごとのFront Matterの ogp キーで上書きができます。 相対パスで指定したファイルは、記事のディレクトリ→ config.yaml のディレクトリの順に検索されます。

詳しい説明はREADMEをご覧ください

以下は、主に設定するであろう項目の説明です。

背景画像

image に1200x630pxの背景画像を設定できます。 未指定の場合は color の色が背景になります。

background:
  image: ogpBackground.png
  # color: #000000

文字設定

文字は title と description の2個設定できます。 名前が違うだけで、設定を全く一緒にすれば同じ挙動です。

title:
  visible: true
  content: "記事のタイトル"
  font: "custom.ttf"
  size: 64
  color: "#000000"
  area:
    x: 100
    y: 50
    width: 1000
    height: 250
  overflow: "shrink"
  • visible
    • レンダリングを行うかどうかを設定します。不必要であればfalseにしてください
  • content
    • レンダリングを行う文字を設定します。設定しない場合は記事の title か、 description が採用されます
  • font
    • レンダリングに使用するフォントファイルを設定します
  • size
    • 文字サイズを設定します
  • color
    • 文字色を設定します
  • area
    • レンダリングする領域を設定します。左上を (x, y) とし、そこから幅と高さを設定します
  • overflow
    • 文字がareaをはみ出す場合の挙動を設定します
      • shrink : 文字サイズを小さくして収める
      • clip : はみ出した部分を切り捨てる

画像挿入

背景画像とは別で、任意の位置に画像を挿入できます。

overlay:
  visible: false
  image: "overlay.png"
  placement:
    x: 50
    y: 50
    width: 500
    height: 500
  • visible
    • レンダリングを行うかどうかを設定します。不必要であればfalseにしてください
  • image
    • レンダリングを行う画像ファイルを設定します
  • placement
    • レンダリングをする位置を設定します。左上を (x, y) とし、そこから幅と高さを設定します。幅と高さのどちらかだけを設定した場合は、アスペクト比を維持して自動的に調整されます

デプロイ

プログラムと設定ファイル、フォントファイルを、Hugoコンテンツと一緒に管理するのが簡単だと思います。

Gitで管理する場合は、次のコマンドで実行権限を付けておくと便利です。

git add --chmod +x ogpv15-linux-amd64

デプロイはhugoのビルド時に、OGPジェネレーターを追加で実行します。

ogpv15-linux-amd64 . && hugo

開発経緯

このサイトはHugoで管理しています。 Hugo自体に 画像を生成する処理はあるものの、禁則処理とかがなく特に日本語環境では難しいものでした。

そのため、今まではCloudinaryで動的に次のようなURLを作成し、動的にOGP画像を生成していました。

https://res.cloudinary.com/dh8imdt4e/image/upload/c_fit,l_text:udg.ttf_64:JPEG%E3%81%AE%E8%A3%8F%E5%81%B4,co_rgb:ffb2e5,w_1000,y_-100/v1749478626/ogp.png

同人誌を作り始めてから、次のような感じで書影を挿入したくなりました。

Cloudinaryでやろうとすると、公開時に手間がかかります。 Claude Codeのテストも兼ねて、自動的に生成できるようにするソフトを開発してみました。

Claude Codeでの開発

Hugoの補助ソフトと言うこともあったので、とりあえずHugoのディレクトリで CLAUDE.md を作成しました。内容はHugoでできている的なことが書いてありました（途中でHugoディレクトリから切り離して CLAUDE.md は再生成しています）

その後、「GoでOGP画像作成ツールを作って」とお願いしたところ、CloudinaryのURLを生成している部分とOGPの元画像を見つけ、タイトルで動的に画像を作るソフトが完成しました。

その後、

  • 設定ファイルから文字の大きさや位置、色を変更できるように
  • 画像を読み込んで、挿入できるように
  • 記事ごとにカスタムできるように
  • 禁則処理を考慮して改行するように
  • 英単語は途中で改行しないように
  • Readmeを作成
  • Github Actionを作成
  • コンテンツタイプごとに設定ファイルを分けられるように

といった感じで、指示を出しました。 また、テンプレート構文を解析する機能が、いつの間にか付いていました。

開発自体は、何回か最初からやり直しています。 いきなり細かく仕様を伝えるより、大枠を雑に書かせてからアジャイル開発の要領でちょっとずつ詰めていった方がうまくいきました。

また、途中でよく不具合が混入するので（指示の出し方が悪いかもしれません）、動作確認とテストコードを適宜追加するような指示も出しています。

Claude Code MAX $100の天井に何回か引っかかりながら、20時間3,000行（テストコードを含めると1万行）のコードをほぼAIが作成しました。

現在は、指摘しないと不具合が見過ごされていたり、コードがしっちゃかめっちゃかになったままになるので、完全に放置はムリそうだなと思いました。 しかし、アイデアを形にするスピードは圧倒的なので「とりあえず作ってみたい」ってときには、強い選択師になるなと思いました。