概要
2024年2月3日に東京で行われた技育CAMPキャラバンハッカソンに参加しました。
本ハッカソンにてGitHub統計情報からユーザーをランク付けして画像を生成するGitHub Personaを作成したのでその概要や感想を書こうと思います。
サービスURL: https://read-me-psi.vercel.app/
GitHubレポジトリ: https://github.com/tomoish/github-persona
サービス概要
GitHub Personaは、GitHubの統計情報を取得し、ユーザーに異世界系の世界観で役職とランクを割り当てるサービスです。
以下はその一例です。
システム
今回は以下のような設計としました。
バックエンド
- 使用言語: Golang
GitHub API
GitHubの統計情報を得るためにGitHub GraphQL APIを使用しました。
このページでクエリを試すことができたので、自分が取得したい情報を簡単に取ってこれました。
役職のイラスト
全てChatGPTに作成してもらいました。
メンバーがこれ用のGPTsを作成してくれたのでスムーズに多くのイラストを作ることができました。
グラフを作成する
GitHubでの日別のコントリビューション数を折線グラフにして表示しています。
実際に使用したライブラリはGonum Plotです。
しかし、画質が悪かったりフォントの変更がうまく行かなかったりしため、Golangでグラフを書いて出力したい場合はこれとは違うライブラリの方がいいかもしれません。
画像を作成する
ユーザーが使用している言語の割合を表示しています。
僕は担当しませんでしたが、Go Graphicsというライブラリを使用していました。
画像を合成する
最終的に全ての情報が詰まった画像を作成しました。
これも同じく担当しませんでしたが、標準ライブラリのimageとresizeというライブラリを使用して作成されていました。
インフラ
- 使用クラウド: Google Cloud
バックエンドのデプロイ先はGoogle App Engineのフレキシブル環境を利用しました。
画像を作成する関係上、読み取り専用のGAEスタンダード環境が使用できなかったため、この選択となりました。
他のサーバーレスサービスと同様、デプロイは非常に簡単でした。
参考記事:
Building a Go App on App Engine
Go on Google App Engine - Flexible environment
フロントエンド
- 使用言語・フレームワーク: TypeScript, Next.js
最初はバックエンドのみを作成し、リンクを貼るとREADME.mdで見られるというものにする予定でしたが、それでもハッカソン参加者に試してもらえるかというと微妙そうだと思ったため簡単なページを作ることにしました。
この効果は非常に大きく、当日も多くの方に試してもらえました。
急造のものでしたが、背景が単色だと少し寂しかったのでtsParticlesというライブラリを用いて動きを付けてみました。
本ライブラリのテストページやparticles.jsのテストページで動きを確認した後に設定ファイルをダウンロードできたため、手間はかかりませんでした。
終わりに
本ハッカソンは即席チームで参加しましたが、企業賞を頂けて嬉しかったです。
サポーターズ主催のハッカソンは今後増やしていくとのことでしたので、オンサイトのハッカソンがあればまた参加してみたいと思います。(どなたか誘ってくれると嬉しいです。)