どうも、まさとらん（@0310lan）です！
今回は、GitHubのプロフィールページを自分好みにカスタマイズできるウィジェットやツールなどを厳選してご紹介します！
統計情報の可視化、グラフ、ブログの更新、アナリティクス、自動化…など、幅広く役に立つものをまとめています。無料で使えるツールばかりなので、ご興味ある方はぜひ参考にしてください！
■独創的なコントリビューショングラフの作成！
GitHubでの活動状況を可視化してくれるコントリビューションのグラフは、当然ながらプロフィールページにも表示できます。
ただし、見た目はどのユーザーも同じなので、自分のプロフィールページを訪問してくれた人にちょっとでも印象に残るようなグラフを埋め込んでみましょう。
例えば、コントリビューションを「スネークゲーム」のように表示することができます！
グラフのドットを、ヘビが少しずつ食べていくという楽しい仕掛けになっているのが特徴です。
作り方は簡単で、開発者のデモサイトにアクセスしてGitHubのユーザー名を入力するだけです。
アニメーションが搭載されたSVGファイルが自動生成されるので、画面下部のリンクをクリックするとダウンロードができます。
あとは、SVGファイルをGitHubにアップロードして、README.mdから読み込むように設定すればプロフィールに表示できます。
ちなみに、このツールはGitHubのマーケットプレイスにも公開されています。
GitHubアクションを利用して、定期的にSVGファイルを自動生成させる方法についても解説されているので、ご興味ある方はぜひチェックしてみましょう。
もう1つ、まったく異なるアプローチとして、コントリビューションのグラフを3Dの街並みに大変身させる「GitHub City」も公開されています。
グラフの色合い（濃さ）によって、生成されるビルや建物が変化するように設計されています。
船、鳥、雲など、細かい部分の動きなども作り込まれているので、見ているだけでも楽しい作品になります。年代別のグラフに切り替えることも可能なので、このリンクをプロフィールに貼り付けておくのも面白いでしょう。
＜参考リンク＞
■スターの獲得履歴をグラフ化する！
GitHubで作成したリポジトリが、これまでにどのような推移で「スター」を獲得していったのかを可視化することができます。
「Star History」というサービスにアクセスして、リポジトリのURLを貼り付けてみましょう。
例えば、「Vue」のリポジトリであれば、以下のようなグラフになります。
時系列でどのようにスターを獲得していったのか分かりやすいと思います。
複数のリポジトリにも対応しており、「React」「Angular」を追加すると以下のようになります。
また、画面下部のボタンをクリックすると、マークダウン形式で埋め込むためのコードをコピーできます。
つまり、自分が関わっているプロジェクトなどをグラフ化して、プロフィールページへ手軽に埋め込むことができるわけです。
他にも、画像ファイル(PNG)やCSVファイルとして書き出す機能もあり、ブラウザの拡張機能もリリースされています。
＜参考リンク＞
■GitHubアカウントの統計情報を可視化する！
自分のGitHubアカウントには、フォロワー数、作成したリポジトリ数、スター数、使用言語の傾向、コミット数…など、さまざまな統計情報があります。
このような統計データを見やすく可視化してみましょう！
まずは、以下のURLで末尾に自分のユーザー名を付与してください。
https://github-stats-evirunurm.vercel.app/api/stats.js?username=【ユーザー名】
このURLをブラウザで開いてみると、統計情報をまとめたカード形式の画像を表示できます。
追加のパラメータとして、背景色を白色にする「color=white」や、ペンギンのアイコンをGitHubアイコンに変える「peng=false」などもあります。
また、自分がよく使っているプログラミング言語を可視化することも可能です。その場合は以下のURLに自分のユーザー名を付与してください。
https://github-stats-evirunurm.vercel.app/api/languages.js?username=【ユーザー名】
同じようにブラウザで開くと次のような画像が表示できます。
こちらも追加パラメータとして、背景色を白色にする「color=white」があり、さらに円グラフから棒グラフに変更できる「pie=false」も提供されています。
もう1つ、簡単な方法として「GitHub Profile Summary Cards」を利用すると、ユーザー名を入力して「SUBMIT」ボタンをクリックするだけで情報を可視化できます。
コントリビューションの可視化はもちろん、使用言語、コミット数、統計情報などをまとめて画像として表示できます。
各画像の下部には、マークダウンに埋め込むためのコードが記載されているので、コピペするだけでプロフィールページに挿入できて便利です。
＜参考リンク＞
■Spotifyの再生リストを埋め込む！
Spotiyで最近聞いた楽曲の再生リストを自動的に生成して、プロフィール情報の一部として活用してみましょう。
再生リストはリアルタイムに更新されるため、プロフィールページに貼り付けておくだけで最新のリストが自動的に表示されるので便利です。
作り方は簡単で「Spotify Recently Played README」にアクセスして、Spotifyアカウントと連携できる以下のボタンをクリックします。
Spotifyアカウントと連携できたら管理画面が表示されます。
画面上部には自動生成されたID番号が記載されており、マークダウン用のコードスニペットも一緒に表示されているのが分かります。
基本となるURLは以下のとおりです。
https://spotify-recently-played-readme.vercel.app/api?user=【ID番号】
ID番号はコードスニペットにあらかじめ記載されているので、そのままコピペして使うことができます。
プレイヤーの幅調整や、表示させるトラックの指定など、いくつかカスタマイズもできるパラメータも提供されているのでお好みで選択してみてください。
＜参考リンク＞
■ブログの更新情報を自動化する！
自分のブログに新しい記事を投稿したら、その更新情報をGitHubプロフィールへ自動的に表示できる仕組みを構築してみましょう。
「Blog Post Workflow」を利用すると、自動化の仕組みを手軽に作れます。
まず最初にプロフィール用のマークダウンファイルへ以下の記述を追記します。
# Blog posts <!-- BLOG-POST-LIST:START --> <!-- BLOG-POST-LIST:END -->
ブログの更新情報を表示させたい箇所であれば、どこでも好きなところへ記述できます。
次に、GitHubアクションの設定を行います。
リポジトリに「.github」フォルダを作成して、その中に「workflows」→「blog-post-workflow.yml」ファイルを作ります。
ymlファイルには、公式ガイドに記載されているプログラムをそのまま貼り付けてください。
ただし、コード内の「feed_list」には、ブログのRSSフィードURLを記述しておきましょう。もちろん、お気に入りのRSSを登録しても構いません。
これだけで準備は完了です！
更新タイミングはymlファイルの「cron」で設定可能ですが、リポジトリの「Actions」タブから手動で更新もできます。
オプションの「Run workflow」をクリックして、しばらく待つとGitHubアクションが実行されます。
GitHubプロフィールを確認すると、以下のようにブログの更新情報が自動的に表示されるようになります。
あとは、新しい記事を投稿していけば、定期的に情報が更新されるようになるので便利です。
＜参考リンク＞
■ターミナル風に統計情報を可視化してみる！
統計情報の可視化についてはすでに解説していますが、ちょっと変わったアイデアで可視化できるツールが公開されているので合わせてご紹介しておきます。
最終的にこんな感じでアニメーションするSVG画像を生成できるようになります。
ターミナルにコマンドを入力して、自分の統計情報を出力するというアニメーションになります。
作り方としては、まず最初に「GitHub Stats Terminal Style」のリポジトリにアクセスします。そして、テンプレートの利用ボタンをクリックして、自分のリポジトリへコピーしましょう。
次に、GitHubアカウントの「Settings」から「Developer Settings」を選択して、パーソナルアクセストークンの設定画面を表示します。
右上にあるボタンをクリックして、新規のトークンを作成します。
任意の名称、有効期限、スコープを設定すればOKです（※スコープは「repo」にチェックを入れます）。
設定が完了するとトークンが表示されるのでコピーしておきましょう。
ちなみにこのトークンは1度しか表示されないので、もし分からなくなったら新しく作り直すようにしましょう。
今度は作成したリポジトリの「Settings」タブに切り替えて、「Environments」の項目を選択します。
画面右上の「New environment」ボタンをクリックしてください。
名称を設定すると、管理画面が表示されるので下部にある「Add Secret」をクリックします。
名称に「GHT」と入力し、Valueの箇所にコピーしておいたトークンを貼り付けましょう。
これで準備は完了です！
GitHubアクションの「cron」設定に従って、定期的にプログラムが実行されて「github_stats.svg」という名称の画像ファイルが自動生成されます（手動で即時実行しても構いません）。
この画像がターミナル風のアニメーションをするSVGになります。オプションでターミナルのテーマカラーを変更することも可能です。
＜参考リンク＞
■GitHubプロフィールにアナリティクス機能を搭載する！
自分のGitHubプロフィールを、どのくらいのユーザーが閲覧してくれたのか手軽に計測できるツールがあります。
つまり、簡易的なアナリティクス機能をプロフィールページに搭載できるわけです。
手順としては、まずは「TrackGit」というサービスにユーザー登録（無料）をします。
専用の埋め込みコードが生成されるのでコピーしましょう。
あとは、GitHubプロフィールのマークダウンにコピーしたコードを貼り付けるだけです。
すると以下のようなバッジを追加できます。
（※表示されている数値が閲覧数になります）
「TrackGit」のダッシュボードから、より詳細なアナリティクスを確認することもできます。
直近の閲覧数や7日・30日・1年といった単位でも確認できるようになります。
埋め込みコードを再確認したり、アナリティクスの所有権を任意の人物に移行させる機能も提供されています。
＜参考リンク＞
■【おまけ】GitHubプロフィールの作り方！
初めてGitHubのプロフィールページを作る方に向けて、作成手順を簡単にご紹介しておきます。
まず最初に新規のリポジトリを作成しましょう。GitHubの画面上部にある「＋」アイコンをクリックして「New repository」を選択します。
「①リポジトリの名称」は「Owner」に記載されている自分のユーザー名と同じにしてください。（ユーザー名がtaroの場合、リポジトリ名もtaroにします）
また、「②Add a README file」の項目にチェックを入れてから作成するのを忘れないようにしましょう。
リポジトリが作成されると、一緒にREADME.mdファイルが1つ自動的に作成されているのが分かります。
このファイルをマークダウンで編集できるので、本記事でご紹介したツールなどを試しながら自分のプロフィールを作成してみましょう。
念のため、プロフィールページに移動してREADME.mdファイルが表示されているかも確認しておいてください。
また、素敵なプロフィールページだけを厳選して集めたWebサイトも公開されています。
カテゴリやキーワード検索を使って、自分好みのプロフィールページを探すことも可能なので、ぜひ有効活用してください！
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
このたび人気の「Python入門編」が全編無料となりました。他にもいろいろな動画レッスンを無料公開しておりますので、エンジニア・非エンジニアにかかわらず、プログラミングを学びたい方はぜひごらんください。
paizaラーニングについて詳しくはこちら
■まとめ
今回は、GitHubのプロフィールページをカスタマイズできるツールを厳選してご紹介しました！
本記事でご紹介したツール以外にも、GitHub上にはたくさん便利なツールが公開されています。実はプロフィールページを丸ごと作成するWebエディタもあったりします。
ぜひみなさんも本記事を参考にしながら、オリジナリティ溢れるプロフィールページを作ってシェアしてみてください！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
