【Ethereum】ウォレットのアイコンを生成する

#はじめに
GitHubを利用しているとわかりますが、アカウント作成時に特有のアイコンが自動的に割り当てられます。

このようなアイコンは「Identicon」と呼ばれるもので、特定の規則にしたがって生成されるものです。

Ethereum関連のサービスもIdenticonを使用しているケースが多いです。


例えばEtherscanで自身のアドレスのページをみると次のようになります。

![Screenshot from 2018-03-16 00-04-39.png](https://qiita-image-store.s3.amazonaws.com/0/142016/a974b54a-a6ff-68d6-2ef0-216f52e1bd2e.png)


これはblockiesと呼ばれるライブラリを使って生成がされています。

- Blockies 
   https://github.com/ethereum/blockies


MyEtherWalletや、EtherScan、Parityも これをベースにアイコンを生成しているようです。（MetaMaskはJazziconも使用しているみたいですね。）

#Blockies

Blockiesのページから「blockies.js」をダウンロードしたあと

次のアドレスからアイコンを生成してみます。

| アドレス  |
|:-----------------|
|0xdcc47176a2afee39dbf175e22e46a8de38fd0524            |

簡単なサンプルがGithub上であがっているので、Etherscanのアイコンに近づけてみます。

```html:

<!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　から変えてしまうと、ウォレットどおりの表示にならなかったりするので注意しましょう。アドレスの大小文字にも注意を。）

![Screenshot from 2018-03-16 20-49-191.png](https://qiita-image-store.s3.amazonaws.com/0/142016/8e3bb3d5-d2d6-94db-5ac1-8cd61fad201a.png)

できました。

角をとりたかったら「border-radius」の数字を変えてみます。
![Screenshot from 2018-03-16 21-11-39.png](https://qiita-image-store.s3.amazonaws.com/0/142016/899afe2b-ae2a-bab5-173b-36ef26ce8555.png)

「border-radiuｓ」を50%にしたらまるくなりました。


#Jazzicon

ちなみにMetaMaskはjazziconというライブラリも使用してます。
どちらかというと、こっちのほうがメインでしょうけど。


jazzicon
https://github.com/danfinlay/jazzicon

![Screenshot from 2018-03-16 20-40-061.png](https://qiita-image-store.s3.amazonaws.com/0/142016/794822f8-5296-5cbe-2899-bdf0b9c620ee.png)

実際にjazziconをつかってみると同じものができます。

![Screenshot from 2018-03-16 20-40-062.png](https://qiita-image-store.s3.amazonaws.com/0/142016/371054a0-ac3c-9158-f017-f0e328afb53c.png)


ライブラリをダウンロードしてみて、MetaMaskライクに生成するとしたらこんな感じになります。


| アドレス  |
|:-----------------|
|0xDB86AF558021cE0613c9B42ABe227c1782F9cAFD |

```javascript:sample.js

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
```

```html:
<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <script src="dest/build.js"></script>
    </body>
</html>

```



#参考

- https://github.com/MetaMask/metamask-extension/blob/eed75735b8e90d121537249cf147c1ece60f1e47/ui/app/components/identicon.js


- https://github.com/MetaMask/metamask-extension/issues/251
- https://github.com/ethereum/blockies
- https://github.com/danfinlay/jazzicon