はじめに
GitHubを利用しているとわかりますが、アカウント作成時に特有のアイコンが自動的に割り当てられます。
このようなアイコンは「Identicon」と呼ばれるもので、特定の規則にしたがって生成されるものです。
Ethereum関連のサービスもIdenticonを使用しているケースが多いです。
例えばEtherscanで自身のアドレスのページをみると次のようになります。
これはblockiesと呼ばれるライブラリを使って生成がされています。
- Blockies https://github.com/ethereum/blockies
MyEtherWalletや、EtherScan、Parityも これをベースにアイコンを生成しているようです。（MetaMaskはJazziconも使用しているみたいですね。）
Blockies
Blockiesのページから「blockies.js」をダウンロードしたあと
次のアドレスからアイコンを生成してみます。
| アドレス |
|---|
| 0xdcc47176a2afee39dbf175e22e46a8de38fd0524 |
簡単なサンプルがGithub上であがっているので、Etherscanのアイコンに近づけてみます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
#icon {
width: 512px;
height: 512px;
background-size: cover;
background-repeat: no-repeat;
border-radius: 0%;
box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
}
</style>
</head>
<body>
<div id="icon"></div>
<script src="./blockies.js"></script>
<script>
var address = '0xdcc47176a2afee39dbf175e22e46a8de38fd0524';
var icon = document.getElementById('icon');
icon.style.backgroundImage = 'url(' + blockies.create({ seed:address ,size: 8,scale: 16}).toDataURL()+')'
</script>
</body>
</html>
（size: 8,scale: 16 から変えてしまうと、ウォレットどおりの表示にならなかったりするので注意しましょう。アドレスの大小文字にも注意を。）
できました。
角をとりたかったら「border-radius」の数字を変えてみます。
「border-radiuｓ」を50%にしたらまるくなりました。
Jazzicon
ちなみにMetaMaskはjazziconというライブラリも使用してます。
どちらかというと、こっちのほうがメインでしょうけど。
jazzicon
https://github.com/danfinlay/jazzicon
実際にjazziconをつかってみると同じものができます。
ライブラリをダウンロードしてみて、MetaMaskライクに生成するとしたらこんな感じになります。
| アドレス |
|---|
| 0xDB86AF558021cE0613c9B42ABe227c1782F9cAFD |
var jazzicon = require('./jazzicon-master')
var body = document.querySelector('body')
var address='0xDB86AF558021cE0613c9B42ABe227c1782F9cAFD'
var addr = address.slice(2, 10)
var seed = parseInt(addr, 16)
var el = jazzicon(100, seed)
body.appendChild(el)
補足：
MetaMaskの場合、アドレスから先頭１０文字を抽出し１０進数のInt型にパースした値を元にiconを生成しているため次の行を追加しています。
address.slice(2, 10)
var seed = parseInt(addr, 16)
nodejsからbrowserifyを噛ませて、クライアント側で確認してみるとブラウザ上で簡単に確認できます。
browserify ./sample.js -o ./dest/build.js
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script src="dest/build.js"></script>
</body>
</html>