🐥

かわいいIdenticonを生成するBoring AvatarsをReactに導入する

2022/06/02に公開

(2022年11月25日追記)
私の本が株式会社インプレス R&Dさんより出版されました。この記事の内容も含まれています。イラストは鍋料理さんの作品です。猫のモデルはなんとうちのコです!

https://www.amazon.co.jp/dp/B0BMPZW444/

感想を書いていただけるととても嬉しいです!

(2022年8月3日追記)この記事の内容はこちらの本でも読めます。

https://zenn.dev/sikkim/books/how_to_create_api_sales_service

ユーザーアイコンをなんとかしたい

現在作成中のWebアプリの右上にユーザーアイコンがあります。

ユーザーアイコン

これはMerakiUI[1]のNavbarsのサンプルをそのまま使っています。

MerakiUI

固定画像を表示しているだけなので、今は誰がログインしても同じアイコンが表示されています。これはよくありません。

ユーザー間の交流などはないサービスなので、画像をアップロードしてカスタマイズできるようにする必要はありません。ふだんと異なるIDでログインしたときに、別のIDで作業していることに気づければ十分です。こういった目的にはIdenticonが適しています。

Identiconとは

Identiconはハッシュ値を視覚的に表現したものです。GitHubでアカウントを作成したときの初期アイコンは典型的なIdenticonですね。下図はreact-identiconsというライブラリのサンプル画像です。

react-identiconsより

かわいいIdenticonを見つけた

実用上は典型的なIdenticonで全然問題ないのですが、Identiconの実装方法を調べていたらかわいいのを見つけてしまいました。それがBoring Avatars[2]です。

Boring Avatars

メタモンみたいでかわいいですね。

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]に行くとパラメーターをいろいろ変更して試すことができます。

Boring Avatars

そしてWebアプリのユーザーアイコンはこうなりました。

Boring Avatars適用後のユーザーアイコン

nameにはCognitoのusernameを使いました。この値は変更できないので、ユーザーアイコンが途中で変わることはありません。

人間は顔に対する識別能力が高いので、Identiconに顔を使うのは理にかなっています。比較的軽いモジュールですし使い方もシンプルですので、試してみてはいかがでしょうか。

脚注
  1. https://merakiui.com/components/ ↩︎

  2. https://www.npmjs.com/package/boring-avatars ↩︎

  3. https://boringavatars.com/ ↩︎

Discussion