Github を頻繁に使っていると、この図を頻繁に目にすることになります:
2021041001


"Contributions" というタイトルが付けられたこの図は Github への貢献を可視化したもので、自分のプロファイルページに表示されます。何をもって「貢献」とみなすか?についてはこちらのページを参照していただきたいのですが、簡単に言うと「コミット」のことのようです。自分のリポジトリに対するコミットの回数が日毎にカウントされ、コミットがなかった日はグレーで、コミットがあった日はその回数に応じて緑が濃くなって、およそ過去1年分が表示されているようでした:
2021041002
(↑自分は 2020/11/05 に 12 回コミットしていたらしい様子。。)


ちなみに縦1列が1週間を意味しています。一番上が日曜日、一番下が6日後の土曜日で、縦7データです。これが一年分あるので横幅は50強のデータがあります。この画面をキャンバスとみなして絵や文字列メッセージを表示できたら・・・というのが当初のアイデアでしたが、1年もの間、コミットの回数をこのためだけに調整するのは難しい。。

コミットの回数はコミットの粒度にも関係しているので、短絡的に「回数が多い=より貢献している」とは言い切れない部分もありますが、一方でこういったゲーミフィケーション的な視覚化はモチベーションにも繋がると思っていて、視覚化の UI 含めてよく考えられていると思っています。


・・・で、自分でもよくわからないのですが、たまに狂気的なアプリアイデアが浮かぶことがあります。今回もそれに近い感じで、「この Github Contributions 図を自分でも作ってみたい」「自由な位置に色を配置してデジタルサインのように見えたら面白そう」といった不思議な欲求が生まれて、そこから味付けしたサービスを作って公開してみたのでした。


作ってみたのがこちらです。申し訳ないですがスマホからの利用を想定しておらず(理由は後述)、PC ブラウザからアクセスしてください:
https://github-commit.mybluemix.net/

2021041101


(↓2021/04/12 追記)
バージョンアップして、画面右上に "Message" ボタンを付けました。このボタンを使うと下で紹介するように1件ずつコミットしなくても、メッセージを直接入力してまとめてコミットすることができるようにしました。
(↑2021/04/12 追記)

画面上部に Github Contributions に似た図が表示され、直近1年分のコミット結果が視覚化されます。ちなみにこの部分は(一部わざと変えている部分もありますが)本物同様の動的な SVG を生成して表示を実現しています。

ここでの「コミット結果」とは Github へのコミットではなく、あくまで「このサービス内でのコミット」を対象にしています。なので最初にアクセスした時点ではコミットは1つも登録されていないはずなので、Contributions は全てグレーで表示されているはずです。

コミットは画面下部で行います。右側のカレンダーをクリックしてコミットする対象の日をカレンダーから指定することもできます(指定しない場合は「今日」のコミットとして扱われます)※。

※実際の Git にはこのような日付を調整してコミットする機能はありません。
2021041102


仮に 2021/02/14 を選択してみました。Contributions 図も 2021/02/14 だけが赤枠で表示され、これから行うコミットの対象となる日が明示されます(繰り返しますが、実際の Git にはこのような機能はありません):
2021041103


対象日が決まったらコミットします。画面左下のコマンドライン($ に続く部分)はテキストが入力できるので、まずはここを選択します:
2021041104


選択後に git のコミット命令("git commit")を入力します。-m オプション後にコミットコメントを指定することもできます(指定しない場合はコメントなしとしてコミットされます)。最後に Enter キーを押します(上で書いた件の補足ですが、この部分のインターフェースが PC での作業を想定しており、スマホではなく PC でのアクセスでないと色々面倒だと思っています):
2021041105


するとカレンダーで指定した日(指定されなかった場合は今日)に1回コミットが記録されます:
2021041106


これを繰り返して色を濃くしたり、別の日にコミットを記録することができます。なお画面右上の "Reset" で全てコミットを取り消してやり直すことができます。またクッキーでブラウザを登録するので、同じブラウザからであれば次回アクセス時に続きを行うことができるようになっています。注意点として、Contributions は直近1年分を対象としているので、画面内に表示できそうでも1年以上前の日付は登録できません。また翌週(翌日曜)になるとデータが横に1列ずれてしまい、一番左にあった列のデータは表示されなくなることに注意が必要です。

で、気長に頑張るとこんなこともできます。というか、これをやってみたかったがためのサービス開発&ブログでした:
2021041107


自分でやってみてわかりましたが、このハローワールド程度でもかなり根気のいる作業です(苦笑)。ただ "Github Art" みたいな感じで面白くもあるなと。4段階のグラデーションも付けられるので、がんばれば絵の一部も描けるかも。。と思ってますが、実際はかなり大変だと思ってます。


Github を使ったことのない人はぜひコミットの練習に使ってみてください(実際の手順とはちと異なりますけど (^^;)。もしかしたら「Github で仕事してる風に見える」かも。