🎉

SNSで注目されるアレを簡単に作れるサービスを開発しました

2022/11/13に公開約2,400字

SNSで目立つアレ

これです。


お馴染みのGitHub


よく見るブログ風

これらはOGP画像と呼ばれるもので、Twitterでは大きめに表示され目立ちます。この画像がいい感じだと…ちょっと押したくなります❗️

よって、このOGP画像を作るにはどうすれば良いか気になります。

クックパッドさんがレシピページでOGP画像の動的生成を導入したときのブログが残っているため引用しますと、実現のためのアーキテクチャとして、

  1. サードパーティの画像配信 CDN サービスを利用する
  2. ImageMagick や node-canvas を使ってサーバーサイドで画像処理を行い生成する
  3. HTML として描画したビューのキャプチャを撮ることで画像を生成する

といった方法があるようです。

1番の方法は、画像配信サービスの提供するAPIを利用して、用意したテンプレート画像に文字や画像を重ねていく方法です。しかし、サービスが提供する機能以上の複雑な表現ができないという課題があります。
2番の方法は、実装が複雑です。ローカルでフォントを用意したり、コード内でテキストを合成するための場所をピクセル単位で指定する必要があるため、デザインを変更するのが大変だという課題があります。
3番の方法は、自由度が高く、変更も簡単ですが、スクリーンショットを撮るためにヘッドレスブラウザを稼働させる必要があり、多少のコストの高さはあります。

OGIMG.CCでは、これらの課題を解決するために、HTMLをベースにしたテンプレートを作成し、送信されるパラメータに合わせて画像を生成するサービスを提供します。また、Liquidというテンプレートエンジンを組み込むことで、Javascriptを使わずに条件分岐等のロジック生かして画像を生成できるようになりました。

↓ 作ったもの ↓
https://ogimg.cc

サービスの特徴

BurnとFreezeの二つの機能があります。まだサンプルが1つしかなくて申し訳ないですが、Playgroundでお試しできます。

🔥 Burn API

BurnはURLにアクセスすることでテンプレートから画像を生成する機能です。オンデマンドで画像を生成するので、サービス側がストレージに画像を保存する必要がありません。

下のようにテンプレートを作成した場合、

<h1>{{ title }}</h1>

QueryStringでtitleパラメータを渡してあげます。
https://templates.ogimg.cc/${TEMPLATE_ID}?title=hello

<h1>hello</h1>

レスポンスには上のように値をレンダリングした後のHTMLを画像化したものが返ってきます。

❄️ Freeze API

FreezeはAPIにJSONでパラメータを送信することでテンプレートから画像を生成する機能です。
Burnと同様に値をレンダリングした後のHTMLを画像化してくれます。

構成

フロントエンド

Next.js, Chakra UI, Recoil

Next.jsは自分が一番扱えるフレームワークです。Chakra UIは元からデザインが良いので、手間が省けると思って採用しました。Recoilは以前も利用したことがあったのですが、その時は設計が死んでいて苦労したのでリベンジマッチとして採用しました。

バックエンド

Golang, Gorm, Liquid

クリーンアーキテクチャを意識した開発をすることを今回の目標の一つにしたため、新しい言語を選ぶことはせずに歴の長いGolangを採用しました。また、相性の良さからデータベースのライブラリは Gormを選定しました。Liquidはテンプレートエンジン(言語)です。サービスのコンセプトであるProgrammable Imageを実現するために、このテンプレートエンジンを組み込むことにしました。

インフラ

Docker, Render.com

開発ではDockerを利用しているため、本番環境もコンテナで動いています。

リリースする決意

以前、別のWebサービスを作ろうと取り組んでいたとき、二ヶ月くらい制作を続けていましたが、途中で諦めてしまったことがありました。そのため、今回のサービスは1ヶ月以内にリリースできる範囲までをリリースすると決めていました。
当初は2週間の設定をしていましたが、平日が忙しいため、思ったように開発が進みませんでした。俯瞰すれば、今の状態でも「どんなサービスなのか」「どういうふうに動くのか」は最低限見せられる状態だろうと判断して、リリースすることにしました。

収益の目標

目標は自分が一人暮らしできるくらいの収益を出すことです(笑)
というのは理想で、まずはサーバ代くらい払えるようになりたいですね。

今後の展望

ドキュメントの整備やフロントエンドでサービスを使いやすいように、ライブラリを作成したいと思っています。また、テンプレートのカスタム構文を増やしてテンプレートのコードの記述量を減らせるようにしたいです。

Discussion

ログインするとコメントできます