identicon.js - A JavaScript Implementation of Identicon

hgwrsgr@gmail.com (2009-11-14)

はじめに

identicon.js (実行例) は、 Don Park が発明した Identicon の JavaScript による実装です。 HTML5 の canvas タグを使って Identicon を描画しています。

サーバ側で Identicon 画像を生成してブラウザに送るのではなく、画像の元となる数値と JavaScript コードをブラウザに送って、ブラウザ側で Identicon を描画させようということを意図しています。

github で公開しています。 hgwr's identicon at master - GitHub

Identicon については、次のページが詳しいです。

• Identicon - Radium Software
• Coding Horror: Identicons for .NET
• ここここあ JavaScriptとVMLでIdenticon

特に、「Coding Horror: Identicons for .NET」にあった C# による Identicon の実装は大変参考になりました。というより、 identicon.js は、 Jeff Atwood と Jon Galloway によって書かれた Identicon-sample-vs-2005-v13/App_Code/IdenticonRenderer.cs を、その C# コードから JavaScript へほぼ直訳したものといえます。

参考にさせてもらったページ及びコードの作者様へ。ありがとうございます。

To the authors of the codes and the pages. Thank you !

使用法と例

実行例のページで動作を確認できます。また、そのコードが使用例になっています。

IE8 は canvas タグをサポートしていません。なので IE8 でも見えるようにするために、 ExplorerCanvas (excanvas.js) と一緒に identicon.js を使います。

ひとつは、次のように最初から canvas タグを用意しておく使い方です。

<div>
<canvas id="static_cv" width="90" height="90"></canvas>
3113572969
</div>

そして、 head タグ内の script タグ内で、ページロード後に Identicon クラスをインスタンス化します。引数は canvas タグの id と、描画する柄の元となる数字 (32bit integer) と、サイズです。

window.onload = function () {
  new Identicon('static_cv', 3113572969, 90);
}

もうひとつは、実行時に canvas タグを document.createElement する場合です。 IE だとその場合、excanvas.js のなかの G_vmlCanvasManager.initElement で canvas タグを初期化してやる必要があります。このことについては、 excanvas.js のハマリどころ, G_vmlCanvasManager.initElement の使い方 - latest log が参考になりました。

canvas = document.createElement('canvas');
canvas.setAttribute("width", size);
canvas.setAttribute("height", size);
document.body.appendChild(canvas);
if (typeof G_vmlCanvasManager != "undefined") {
  canvas = G_vmlCanvasManager.initElement(canvas);
}
new Identicon(canvas, code, size);