[Issue-31] @vercel/ogを導入

[TBSten]

目的・解決すること

@vercel/ogを使った画像生成ができるようになる。

close #31

変更内容

• @vercel/og を追加
• OG画像のサイズの設定方法とユーティリティをを追加

スクリーンショット

特になし

テスト項目

• [x] スマートフォンでも動作するか確認した（影響ないと考えられる場合は省略可）

• [x] UI の変更の場合、画面サイズを変えてもレイアウトが崩れないか確認した

• [x] 適当なルートで画像の生成の可否を検証済み（別途コメントにて詳細あり）

チェック項目

• [ ] 適切なレビュワーをアサインした。

備考

各ページの画像は別のissueで対応していきたいですー

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
zutomayo-card-web	✅ Ready (Inspect)	Visit Preview	Sep 17, 2023 9:43am

[TBSten]

本issueのMerge後 大会のOG画像を設定したいと思ってますー

[TBSten]

本PRの差分には含まれていませんが、試しにローカルで カードの情報を持ってきて適当な画像を生成するAPIルートを作ってみたのですが、firebase関連のファイルをimportするとその依存関係にedge runtimeに対応していない関数 (eval())の呼び出しを含む行が原因でビルドできないです。

対応として

1. evalが含まれている/web/src/shared/utils/word.tsの実装をevalを使わない形に変更
2. eval関数が含まれているのは /web/src/shared/utils/word.ts のみでそのファイルをimportするファイルがないためプロジェクトから削除
3. firestoreのデータはSDKからではなく、別途データ取得用のAPIルートを立ててそこから取得する

一番工数がかからないのは2ですが、今後のことも考えると1が良さそうだなというお気持ちです。