アバターサービスを立ち上げる

ローカルネットワーク内でのチャットにLet's Chatを利用しているが、外部に接続できない環境だとアバター画像が表示されず味気ない。

そこで、Node.js の勉強も兼ねて簡単なアバターサービスを作ってみた
→ Genavatar

以下の様なURL(hogehogeの部分が任意のID, s= が画像サイズ)にアクセスすると自動生成したアバターの画像を返す(以下は、試しにHerokuにデプロイしたアドレス。フリープランなので応答が遅いです)
https://genavatar.herokuapp.com/avatar/hogehoge?s=100

Node.js と ImageMagick があれば、Windows環境でも動作する。画像はIDを基に自動で生成されるので超お手軽である。

自動生成以外にも、imageディレクトリにjpg画像ファイルを置いていればそちらが使われるようになっている。

問題点

アバターの画像には、avatar-generatorを利用させて頂いている。
アバターが自動で生成されのはお手軽で良いのだが、残念なことに生成される画像はちょっと怖い感じ。

ここは絵心がある人に協力を仰ぐのが一番だろうと思いこの記事を書くことにした。

画像の形式

avatar-generator は仕組みとして、背景、顔、体、髪の毛、目、口のパーツをパターンごとに別々のPNGファイルで用意し、それをImageMagickで重ねあわせるというものだ。
画像の形式は各パーツのサイズや位置があっていればなんでも良い。

ただ、オリジナルはドット絵風の画像になっており、これを元にしたほうが手間がかからない。よって、オリジナルの画像を基にそれを修正する手順を説明する

いろいろ試した結果 20x20のドット絵を1ドット 8x8 pixel で作成(つまり160x160の画像)し、これを400x400にリサイズするとオリジナルの画像っぽくなるらしい。

画像の作り方

ドット絵の作成には、ミニドット絵メーカー２を利用させていただいた。

前準備: genavatar を git clone → npm install すると、オリジナルの画像のパーツが node_modules/avatar-generator/img/ にあるのでこれをソースとする

git clone https://github.com/jca02266/genavatar
cd genavatar
npm install
ls node_modules/avatar-generator/img

(1) ミニドット絵メーカー２ で、「新規」を選ぶ

(2) 20x20を選ぶ

(3) 修正したいオリジナルの画像を読み込む

また、パレットの最初の色は透過色になっているので、透過色が見えるように色を画像で使われていない色（この例では緑）にする

この絵はちょっと困った顔で目も逸らしているので、ちょっと自分のアバターにはなって欲しくない感じである。他にハゲとか汚いひげとか怖い目も修正候補になるだろう。

(4) 画像を修正する

読み込んだ画像は拡大等の過程で複雑な色になっているが、画像を修正するとき、白(#ffffff)や黒(#000000)を使って構わない。後の過程でやはり拡大等によりまた複雑な色になる。

完成したら、PNGファイルとして保存する。このとき上の図のように「書き出し時のドットのサイズを8倍」にするのがポイントである。先に書いたとおり、これで160x160の画像ができる。

(5) 画像をリサイズする

avatar-generator でも利用しているImageMagickのconvertコマンドでやると良い。

$ convert -resize 400x400 -strip png:old.png png:new.png

これは、オリジナルの画像が400x400になっているのでそれに合わせるために行っている。どうせavatar-generatorでアバターを生成するときにはまたリサイズが行われるので、すべての画像を160x160に統一していればこの手順は不要になる。

(-strip オプションはEXIF情報を削除する。このオプションなしに conert すると作成日時などの情報が付加されバージョン管理で面倒になる)

なお、160x160はミニドット絵メーカー２の制限である。
PNG書き出し時のドットのサイズが8倍までしか対応してないという制限から来ている。

また、一度編集した画像を再度修正するために読み込みを行うと、PNGファイル読み込み時にまた変換が起こるので元の画像に戻らない(8pixelを1ドットで読むオプションがないため)。仕方ないので、この「ミニドット絵メーカー２」独自のフォーマットであるdot形式でも保存しておくのが無難である。

透過色を扱える簡単で使いやすいサイトではあるが、この作業に関して言えば他により良い手軽なソフトがあればと思っている。

修正例

多少気になるパーツを修正(例)したが、うーん、まだまだ残念な感じ。

Contributing

素敵なアバターパーツができたら、genavatarにプルリクエストをお願いしたい。なお、MITライセンスの基で配布しているので改変自由となることはご承知おきを。