OGPページ生成ツールというWebアプリをつくった

最近Twitter等でOGPによるシェアを前提としたWebサービスが注目されています。
ちょっと前だと、Peing(質問箱)が有名で、質問がOGPでシェアされてます。
peing.net

最近だと、ためしがき、bosyuといったサービスですね。リクエスト毎にOGPでコンテンツをシェアしています。
tameshigaki.jp

bosyu.me

個人的にはリクエスト毎にOGPを設定したページを生成できるのかが疑問で、その疑問を解消する過程でWebアプリを作りました。
OGPページを作れるアプリです。
ogp-generator.hi1280.com

アプリの説明、使い方はこちらです。

OGPページ生成ツールの使い方

アプリの仕組み

実装はAngular+Firebaseでこんな形にしています。

考えてみれば簡単だったんですが、サーバサイドでHTMLを生成すればよかったんですね。
実装当初はHTMLファイルをStorageに保存してみたいな無駄なことをしてました。

細かい作りは以下のようにしています。

• Firebase HostingとFunctionsを接続する
• FunctionsでExpressを利用してHTMLを動的に返す
  • Expressの利用は必須ではないですが、HTMLのテンプレートを楽に使えたりするので利用しました

まとめ

最近はサーバサイドでHTMLをレンダリングすることがほとんどなくなってきたので、その発想が真っ先に出てこなかった。
FIrebaseの使い方として、サーバサイドでの動的コンテンツの生成をFunctionsに任せてしまうというのは汎用性がありそうな利用法だと思いました。Expressをそのまま動かせるのは楽です。