👾

React以外でもkawaiiアバター(Boring avatars)を使いたい

2023/07/29に公開

Boring avatarsってなんやねん

Boring avatarsはテキストからユニークなアバター(Identicon)を生成できるReactライブラリです。有名どころでいうとGitHubは初期アイコンがIdenticonになってます。
Boring avatarsを使えば、テキストを指定するだけで以下のようなアバターが簡単に作れます。

beam	pixel	bauhaus	marble

ほとんどのWebサービスではユーザーがアイコン画像を登録しない場合、一律で同じアイコンになってしまいます。それでは味気ないのでBoring avatarsを使ってかわいい/かっこいいIdenticonを初期アイコンにしましょう！

使い方

Boring avatarsはReactライブラリなのでReactで使用することがメインで開発が行われているでしょうが、React以外でも使用することができます。めちゃくちゃ簡単です。

0. APIを使用

Boring avatarsは公式でAPIが提供してあるので、そのAPIを使用します。

https://source.boringavatars.com/

1. アイコンの種類

Boring avatarsでは6種類のアイコンが提供されています。以下から好きなデザインを選んでその名前をパスパラメータとします。
個人的にはbeamとbauhausがお気に入りです。

marble	beam	pixel	sunset	ring	bauhaus

↓これはbeamを選択した場合。

https://source.boringavatars.com/beam

もっと沢山のサンプルを見たい場合は公式サイトを見るのがおすすめです。

https://boringavatars.com/

2. サイズの指定

サイズを指定するだけです。パスパラメータに入れます。
↓これはサイズ100のとき。

https://source.boringavatars.com/beam/100

3. 色の指定

アバター生成時に使用する色を指定します。colorパラメータで色の配列を指定します。16進数のカラーコードで指定します。
以下は適当に色を決めたが案外それっぽくなる。

https://source.boringavatars.com/beam/100?colors=4169e1,ffd700,9400d3,ffa07a

4. 四角形にする

アバターを円形ではなく四角形にする場合、squareパラメータを追加します。

https://source.boringavatars.com/beam/100?square

5. テキスト指定

ユーザー名やIPアドレス等、テキストを指定することでユニークなアバターが生成されます。
テキストをパスパラメータで指定します。

https://source.boringavatars.com/beam/100/kawaii-icon

番外. ランダムに生成する

テキストを指定しない場合、ランダムにアバターが生成されます。
アイコンの種類やサイズを指定しない場合、初期は種類はmarble、サイズは80のアバターが作られます。

https://source.boringavatars.com/

まとめ：Kawaiiね

ここまでアバターの種類等を指定できたら、Webサイト上に埋め込んで使うだけです！めっちゃ簡単です。
これでWebサービスを作るとき、初期アイコンが単調になってしまうのを防止できます。