GitHub の草(Contribution Graph)を追加したい

[y4shiro]

いくつか手段があるので調査検討する。
コンポーネント作成して配置箇所もうまく決める。

[y4shiro]

開発して Web サービスとして公開している方がいらっしゃった。

• https://grass-graph.appspot.com/
• https://zenn.dev/kawarimidoll/articles/b573f617a51c0b

公開されている Web サービスから画像取得して貼り付ければ一応動くが、サーバの負荷など考えるとそれは避けたい。

[y4shiro]

今思いつく案は次の 3 つ

1. 上記 Web サービスから 1 日 1 回画像を取得し、クラウドストレージに保存 / 参照する
2. 上記 Web サービス の GitHub リポジトリをフォークして自前でデプロイ、運用する
3. FaaS (Lambda や Google Cloud Functions、Firebase や Cloudflare workers など) で Contribution Graph を生成するコードを書いてクラウドストレージに保存 / 参照する

1 の案は難易度も楽で作業量も少なく現実的ではある。
Web サービスへの負荷も常識の範囲内に収まるはずだが、Web サービスが公開停止された場合は破綻する。
2 は運用コストに対してメリットが少ないので乗り気ではない。
3 は自分で実装する必要あるが、運用が楽な上に OSS として公開出来るので意外と良さそう。

[y4shiro]

3 の案を進めるため Firebase にプロジェクトを作成、Firebase Storage に画像を保存して読み込むところまで実装した。

• https://firebase.google.com/docs/storage/web/download-files

公式ドキュメントを参考にしたが、日本語ドキュメントの方を鵜呑みにすると高確率でハマるので注意。
Firebase SDK は先月 8/25 に v9 をリリースしたが、v8 とコードの書き方に互換性が無くなった。
公式の英語ドキュメントでは v9 に対応しているが、日本語は v9 未対応のページが多かった。

[y4shiro]

Firebase Functions は 無料の Spark プランでは利用できないため、従量制の Blaze にアップグレードした。
Functions の公式チュートリアルがあるので別ディレクトリ作成して進めていく。

• https://firebase.google.com/docs/functions/get-started?hl=ja

[y4shiro]

公式チュートリアル通りにプロジェクトをセットアップすると、エミュレータのセットアップが不十分になりがち。

• function ignored because the database emulator does not exist or is not running firebase/firebase-tools#2363

firebase init emulators

このコマンド実行して必要なサービスをインストールする。

[y4shiro]

Firebase Functions で Storage の読み書きなど試しているが、無料枠が結構カツカツ。
Firebase Storage 以外を検討するか、実装取りやめしても良さそう。

[y4shiro]

Storage の帯域を大量に食った問題を解決したので、継続の方向で進めていく。
今回は Web ページで読み込む画像は固定かつログインなども不要なので、Firebase SDK を使用せず Token 付き URL を表示する方向で進める。
Token や Bucket ID は環境変数から取得する。

[y4shiro]

今回は Web ページで読み込む画像は固定かつログインなども不要なので、Firebase SDK を使用せず Token 付き URL を表示する方向で進める。

Token 付き URL で実装を進めていたが、画像が更新されると Token もリフレッシュされるため不適である事が発覚。
Firebase SDK の getDownloadURL() で画像を取得する方法に変更した。

[y4shiro]

フロント側の画像表示が実装住んだのでマージ・デプロイしました。
Cloud Function / Cloud Storage は下記リポジトリで管理しています。
https://github.com/y4shiro/website-firebase-functions

[y4shiro]

リリースが完了したのでクローズします。