開発・公開したサービス
リポジトリ： https://github.com/ryo-ma/github-profile-trophy
デモ
🏆 Github Profile Trophy
Githubのプロフィールをイケイケにするのが最近流行っております。(github-readme-stats、GitHub Readme Stats を利用してGitHubプロフィールをカッコよくする、Qiitaコントリビューション数をGitHubのプロフィールに貼ってドヤれるサービスを作った)
そこで今回はその流行に乗り、GitHubでの活動をゲームの実績、トロフィー、称号のような形で可視化したら便利だろうと思いサービス開発しました。（また、いくつか技術的に気になる部分があったので技術検証も兼ねて）
こんな感じで表示されます：https://github.com/ryo-ma
是非こんな用途で使ってみてください
- 個人開発者、学生、駆け出しエンジニアの方がモチベーション維持、目標の指標にする
- 就職活動などで利用するポートフォリオの作成
- 自分の活動実績を可視化によって確認する
- とにかく自分のプロフィールをイケイケにする
使い方
とても簡単です。プロフィール用のREADMEを作成していれば、そこの本文に一行だけコードを追加すれば動作します。
あとは?username=****の****の部分を自分のGitHubのユーザ名に変更するだけです。
対象のURLからはsvgが返却されるだけなので個人のポートフォリオなどにimgタグを使って表示することもできます。
トロフィー について
- 集計対象となるタイトル
- 現在のランク
- ランクに応じた称号
- 現在の集計結果
- 現在のランクから次のランクまでの道のり
ランクについて
ランクは SSS SS S AAA AA A B C UNKNOWN SECRET があります。
| ランク | 説明 |
|---|---|
| SSS, SS, S | 正直かなり難しく設定しています。このランクを取得できたら自信を持ってイキってください。 |
| AAA, AA, A | ここまでは日々の努力で到達可能です。まずはAランクを目指しましょう |
| B, C | 成長途中です。まだできることがあるはず。 |
| UNKOWN | 対象のタイトルではまだ活動していません。まずは行動しましょう。 |
| SECRET | とても珍しいランク（トロフィー）です。条件を満たすまで表示されません。 |
SECRETランクについて
これも条件が厳しく珍しいランクです。
条件を満たすまで表示されないのですが、オープンソースなのでコードを見れば条件を知ることができますね。
まだまだ数が少ないので、アイディアがある方はPullRequestかIssueをくれると嬉しいです。
https://github.com/ryo-ma/github-profile-trophy
その他設定
クエリーパラメータを使って表示を変更することができます。
自信のあるタイトルだけ都合よく表示なども可能です。
- titleでフィルター
- rankでフィルター
- トロフィーを表示する最大の行、列を指定
詳しくはREADMEで解説しています。
https://github.com/ryo-ma/github-profile-trophy#optional-request-parameters
雑多に技術的な話
- 実行環境：Deno v1.3
- 言語：TypeScript v3.9.4
- クラウド：Vercel
- API： GitHub API v4 GraphQL
今回の開発はDenoを使ってどこまでプロダクトを開発できるかを確認するというモチベーションが大きかったです。結論としてはTypeScriptが直(コンパイル無し)で動き煩雑な設定を必要としないためとても楽に開発することができました。開発したかったことも、それなりにちゃんとできました。
また、Deno + Vercelの組み合わせではクラウド側でのビルド時にjsのライブラリの依存周りでエラーが発生していました。そのためjsのライブラリは使わずdeno用(.ts)のライブラリを利用で回避。それ以外は特に問題なくスムーズに利用できました。
GitHubAPIの実行リミットが一時間あたり5000回(正確にはGraphQLの場合はリクエストの中身でコスト計算らしい)なのでcacheの設定でpublicとmax-ageを設定しています。GitHub APIおよびキャッシュの設定はGitHub Readme Statsのissueおよびコードを参考にしました。
デザインは慣れないsvgを触り、Githubのページに馴染むようなデザインで作成しました。フラットを意識してトロフィーの影は付けないようにしようと思っていたのですがゴールド、シルバーの視認性が悪く、薄らとだけ影をつけることにしました。
おわりに
是非使ってみてよかったらみんなにも教えてあげてください。
まだまだトロフィーの種類が少ないので、もっとこんな軸で評価するべきとか、ユニークなシークレットトロフィのアイデアなどがあればPullRequest、Isuueお待ちしております。