GitHub Identicons

2015年5月5日 GitHub Identicon

突然ですが、上の画像は GitHub の初期アイコンです。先日、某氏との Twitter でのやりとりで、ふとこの画像の生成方法について気になったので、いろいろと調べてみました。そのまとめです。

まず、以下が GitHub のブログで紹介されていた記事です。

Identicons!

5×5 ピクセルで、ユーザの ID に基づいてハッシュを生成して、偶数だったらオン、奇数だったらオフ、色もハッシュから決定している、位しか分かりません。

さて、ググりましょう。役だったのは以下の 2 つのページです。

infinitemule/github-identicons
dgraham/identicon

1 つ目のページは、形の生成方法を知るのに役立ちましたが、色が分かりませんでした。そして、 2 つ目のページは、 1 つ目のページで形は出来ていたので、色の生成方法のみ参考にしました。結局、生成方法をまとめると以下の通りです。

  • ユーザ ID (ユーザ名じゃなくてシステムが作る連番)を MD5 します。ユーザのアイコンの URL に用いられていたりするので、すぐに分かると思います。
  • MD5 の先頭 15 文字を使って形を作ります。偶数ならばオン、奇数ならばオフで、順番は真ん中の列の上から下、その左右の列の上から下、そして両サイドの列の上から下となっています。
  • 色は MD5 の末尾 7 文字を使います。 HSL 色空間で、色相 3 文字、彩度 2 文字、輝度 2 文字の順番です。色相の範囲を 0 から 360 まで、彩度と輝度の範囲を 0 から 100 までとします。このとき、色相は 0 から 4095 までを 0 から 360 までの範囲に変換して、そのまま用います。彩度と輝度は 0 から 255 までを 0 から 20 の範囲に変換して、それぞれ 65 と 75 から減算した値を用います。

と、こんな感じになっています。 HSL 色空間から RGB 色空間に変換するときは、以下のページを参考にしました。

RGBとHSLの相互変換ツールと変換計算式 – PEKO STEP

一応、この流れで画像を生成するものを作りましたので、参考まで。

GH Identicon Generator


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です