HTMLを飲ませると画像を返すAPI作った

最終更新日:2020-08-01

こんにちは。
今日、HTMLから画像を生成するAPIを作成したので、それについての記事を書いていきます。

動機

https://blog.ojisan.io/jsx-preview
このブログを見て、サーバーサイドでdom-to-imageのようなことをやるのはどうすればいいかなと思い、学習のために作ってみました。

技術

特に真新しい技術は使っていません。
ただ、よく使われるnode-canvasは使っていません。
Node.js上でHeadless Chromeを動かせるPuppeteerというライブラリを使い、HTMLをChromium上にレンダリングさせて、それのスクリーンショットを撮っているという形です。
そのスクリーンショットをCloud Storageにアップロードして永続化しています。
最初はVercel上にデプロイしようと思いましたが、Vercelの裏側のLambdaではaws-lambda-chromeというライブラリを入れないとHeadless Chromeを動かすことができませんでした。またこのライブラリが相当重く、追加で日本語フォントなどを入れるとVercelのサイズ制限に引っかかりそうだったので、Vercelはやめて、Cloud Functionsにデプロイすることにしました。
お金がないので、nodejs8を使うことで無料で動かしています。
また、独自ドメインでの運用のために、Firebase Hostingも使用しています。
余談ですが、Cloud Functions for Firebaseのnodejs8って、サポートがもうちょっとで終わるからなのか、コンソールからいきなり消えたりしますね。どうやらFirebaseのコンソールから消えても、関数自体が消えているわけではなさそうです。

使い方

https://ogp.dai.gd/api/ogp/
に、POSTリクエストを送ります。
リクエストボディーは以下のような感じです。

{
  html:"画像化したいHTML"
}

正常に画像への変換に成功すると、以下のようなレスポンスが得られます。

{
  success:true,
  URL:"https://storage.googleapis.com/create-ogp.appspot.com/一意なID.png"
}

このURLから、作成された画像を参照することができます。
お読みいただきありがとうございました。