GitHubプロフィールをイケイケにする🏆トロフィー(活動実績)が表示できるサービスを開発した話

# 開発・公開したサービス
![スクリーンショット 2020-08-30 21.51.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46662/70bc16ca-f3a7-24fb-a1c5-fadcb80fe231.png)

リポジトリ： https://github.com/ryo-ma/github-profile-trophy

## デモ
![demo](https://github-profile-trophy.vercel.app/?username=ryo-ma&column=7)

## 🏆 Github Profile Trophy

Githubのプロフィールをイケイケにするのが最近流行っております。([github-readme-stats](https://github.com/anuraghazra/github-readme-stats)、[GitHub Readme Stats を利用してGitHubプロフィールをカッコよくする](https://qiita.com/zizi4n5/items/f8076cb25bbf64a9bc1c)、[Qiitaコントリビューション数をGitHubのプロフィールに貼ってドヤれるサービスを作った](https://qiita.com/mikkame/items/f2c60d9caf8a8e38ec50))
そこで今回はその流行に乗り、GitHubでの活動をゲームの実績、トロフィー、称号のような形で可視化したら便利だろうと思いサービス開発しました。（また、いくつか技術的に気になる部分があったので技術検証も兼ねて）

こんな感じで表示されます：https://github.com/ryo-ma
![スクリーンショット 2020-08-30 22.03.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46662/684bdc53-71ae-3ee4-227e-46a5db91703f.png)

是非こんな用途で使ってみてください


* 個人開発者、学生、駆け出しエンジニアの方がモチベーション維持、目標の指標にする
* 就職活動などで利用するポートフォリオの作成
* 自分の活動実績を可視化によって確認する
* とにかく自分のプロフィールをイケイケにする


# 使い方

とても簡単です。プロフィール用のREADMEを作成していれば、そこの本文に一行だけ[コード](https://github.com/ryo-ma/github-profile-trophy#quick-start)を追加すれば動作します。
あとは`?username=****`の****の部分を自分のGitHubのユーザ名に変更するだけです。

[対象のコードはこちら](https://github.com/ryo-ma/github-profile-trophy#quick-start)

対象のURLからはsvgが返却されるだけなので個人のポートフォリオなどにimgタグを使って表示することもできます。

# トロフィー について

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46662/618aa4bf-e04f-7760-da3e-3f27dd8dd393.png" />

1. 集計対象となるタイトル
2. 現在のランク
3. ランクに応じた称号
4. 現在の集計結果
5. 現在のランクから次のランクまでの道のり

## ランクについて
ランクは `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

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46662/fbde6ffa-099a-694b-b61e-ca408e41deb0.png" />

# その他設定

クエリーパラメータを使って表示を変更することができます。
自信のあるタイトルだけ都合よく表示なども可能です。

* titleでフィルター
* rankでフィルター
* トロフィーを表示する最大の行、列を指定

<img width="330" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46662/71fa6782-89a9-12f1-ef9f-50cf3a365f85.png" />

詳しくは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](https://github.com/anuraghazra/github-readme-stats)のissueおよびコードを参考にしました。

デザインは慣れないsvgを触り、Githubのページに馴染むようなデザインで作成しました。フラットを意識してトロフィーの影は付けないようにしようと思っていたのですがゴールド、シルバーの視認性が悪く、薄らとだけ影をつけることにしました。

# おわりに

是非使ってみてよかったらみんなにも教えてあげてください。
まだまだトロフィーの種類が少ないので、もっとこんな軸で評価するべきとか、ユニークなシークレットトロフィのアイデアなどがあればPullRequest、Isuueお待ちしております。

リポジトリ： https://github.com/ryo-ma/github-profile-trophy