JavaScript勉強会

JavaScriptの学習日記

JavaScriptでidenticonを表示する方法

JavaScript

GitHubなどで、ユーザーのトレードマークのような画像がありますね。

これは、「identicon」（アイデンティコン）と呼ばれています。

 

http://identicon.net/

An Identicon is a avatar which represents a hash of unique information.

 

こんなかんじの画像です。

f:id:jsstudy:20180909231317p:plain

このような幾何学模様は、生成するアルゴリズムで、色や形、大きさが違います。

いろいろな作成方法が考案されているので、自分の好みのものを探して使ってみましょう。

 

で、このアイデンティコンの画像をJavaScriptで表示する方法がありました。

 

jdenticon.com

 

「Jdenticon」というライブラリーを使うと、JavaScriptでブラウザー上にアイデンティコンを表示できます。

 

<html>
<head>
    <title>Jdenticon browser test</title>
    <meta charset="UTF-8">
    <script src="jdenticon.min.js"></script>
</head>
<body>
    <canvas width="80" height="80" data-jdenticon-value="user127"></canvas>
</body>
</html>

jdenticon.min.jsをダウンロードして、上記のようなHTMLファイル（index.html）を作成してみました。

ブラウザーで開くと、<canvas>タグのところに、「user127」という文字列を基に生成したアイデンティコンの画像が表示されました。

 

こんなかんじの画像です。

f:id:jsstudy:20180909232508p:plain

 

他にもいろいろアイデンティコンをJavaScriptで表示させる方法が紹介されていました。

 

identicon javascript - Google 検索

 

kuroeveryday.blogspot.com

 

ユーザーの識別にアイデンティコンを使いたい場合、手軽に利用できそうです。

 

時間があったら、模様の作り方を改造して、オリジナルのアイデンティコンを作ってみたらいいかも？

 

 

インフォグラフィカル・イラストレーション&アイコン-豊かなコンテンツ体験のための視覚化アイデアブック

インフォグラフィカル・イラストレーション&アイコン-豊かなコンテンツ体験のための視覚化アイデアブック