ZennやAtCoderでの頑張りをバッジで可視化してくれるサービスを試してみた

こんにちは、AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。

私は趣味でAtCoderという競技プログラミングのサイトで毎週活動しています。

先日一つ壁を越えて、茶色コーダーというものになれたので喜びの記事を書いています。

「茶色になれたし、GithubとかにAtCoder茶色ってわかる様にしたいなぁ・・・」と思っていた矢先、「Zenn や Qiita や AtCoder のバッジを生成できるサービスを公開しました」というタイトルの記事を見つけました!!

このサービスを使えば、自分のAtCoderでのランクやZennでの良いねの数をかっこよく表示できるのでは？

と思い、早速試してみました！

※ こちらのサービスはkokiさんが公開されているサービスでZennやAtCoderが公式に推奨しているわけではありません

Badge Generatorの使い方

使い方はとてもシンプルでした。

まず以下のサイトにアクセスします。

あとは生成したいサイトのサービスに応じて、ユーザー名を入力するだけです！

私の場合AtCoderのバッチを生成したいので、以下画像のように入力するとカッコ良いバッジを生成してくれました！

スタイルの部分を変更するとバッチのスタイルも変わって素敵です！

GithubにAtCoderのレートをバッジとして表示する方法

私のGithubページにAtCoderのレートとZennのLike数のバッジを埋め込みんでみました！

やり方はとても簡単です！

以下のように、マークダウンに埋め込むだけです。

「ユーザー名」に各サービスのご自分のユーザー名を入力してください。

AtCoderのアルゴリズム系バッチの場合
![my_atcoder_rating](https://badgen.org/img/atcoder/ユーザー名/rating/algorithm?style=flat)

ZennのLike数
![my_zenn_likes](https://badgen.org/img/zenn/ユーザー名/likes?style=flat)

以下の様にimgタグが生成されています。

<img alt="my_atcoder_rating" src="https://badgen.org/img/atcoder/ユーザー名/rating/algorithm?style=flat">
<img alt="my_zenn_likes" src="https://badgen.org/img/zenn/ユーザー名/likes?style=flat">

実際にGithubのReadmeに埋め込んでみました。

か、カッコ良い・・・

まとめ

koki様が公開しているサービス「Badge Generator」を使って、自分の頑張りをバッジとして可視化してみました。

AWSの認定資格のデジタルバッジなんかもそうですが、自分の努力が目で見れるってとても素敵だなと思いました！

こちらのサービスもおそらく個人で作成されていると思いますので、私もとても刺激をいただくことができました！