かわいいIdenticonを生成するBoring AvatarsをReactに導入する
（2022年11月25日追記）
私の本が株式会社インプレス R&Dさんより出版されました。この記事の内容も含まれています。イラストは鍋料理さんの作品です。猫のモデルはなんとうちのコです！
感想を書いていただけるととても嬉しいです！
（2022年8月3日追記）この記事の内容はこちらの本でも読めます。
ユーザーアイコンをなんとかしたい
現在作成中のWebアプリの右上にユーザーアイコンがあります。
これはMerakiUI[1]のNavbarsのサンプルをそのまま使っています。
固定画像を表示しているだけなので、今は誰がログインしても同じアイコンが表示されています。これはよくありません。
ユーザー間の交流などはないサービスなので、画像をアップロードしてカスタマイズできるようにする必要はありません。ふだんと異なるIDでログインしたときに、別のIDで作業していることに気づければ十分です。こういった目的にはIdenticonが適しています。
Identiconとは
Identiconはハッシュ値を視覚的に表現したものです。GitHubでアカウントを作成したときの初期アイコンは典型的なIdenticonですね。下図はreact-identiconsというライブラリのサンプル画像です。
かわいいIdenticonを見つけた
実用上は典型的なIdenticonで全然問題ないのですが、Identiconの実装方法を調べていたらかわいいのを見つけてしまいました。それがBoring Avatars[2]です。
メタモンみたいでかわいいですね。
Boring Avatarsの実装
それでは実装します。まずはインストールしましょう。
npm i boring-avatars
基本的な使い方は次のとおりです。
import Avatar from "boring-avatars";
<Avatar
size={40}
name="Hoge Huga"
variant="beam"
colors={["#FFBD87", "#FFD791", "#F7E8A6", "#D9E8AE", "#BFE3C0"]}
/>
nameの値によって生成される画像が変わります。variantはmarble, beam, pixel,sunset, ring, bauhausの中から選べます。顔のアイコンはbeamです。colorsは使用するカラーパレットです。Boring AvatarsのWebサイト[3]に行くとパラメーターをいろいろ変更して試すことができます。
そしてWebアプリのユーザーアイコンはこうなりました。
nameにはCognitoのusernameを使いました。この値は変更できないので、ユーザーアイコンが途中で変わることはありません。
人間は顔に対する識別能力が高いので、Identiconに顔を使うのは理にかなっています。比較的軽いモジュールですし使い方もシンプルですので、試してみてはいかがでしょうか。
Discussion