PIYO - Tech & Life -

RubyでGmail風プロフィール画像を生成するinitial_avatarでユーザーを識別しやすくする

Ruby gem Rails

ユーザーにアバター画像（プロフィール画像）を登録してもらうサービスの場合、画像未登録のユーザー用にデフォルトの画像を用意することがあると思います。

グレー背景のシルエットとか、Googleのイニシャル（漢字なら最初の一文字）、Twitterのたまごとか、Slackの模様とか、いろいろなパターンがありますね。

そんななか、Googleのイニシャルの画像と同じような画像を一行で使えるようにするgemを同僚が作ったということで、ここで代わりに紹介したいと思います。

GitHub - aki77/initial_avatar: Create Gmail like text avatars for profile pictures using SVG.
Create Gmail like text avatars for profile pictures using SVG. - GitHub - aki77/initial_avatar: Create Gmail like text avatars for profile pictures using SVG.
github.com

Rubyのgemなのでgem install initial_avatarまたはGemfileへのgem 'initial_avatar'の追記で導入できます。

実際の用途としてはRailsなどのWebフレームワークで使用することが多いと思いますが、シンプルに紹介するためにRubyのコンソールのみで動かしてみました。

基本となるのは、以下のInitialAvatar.avatar_data_uriです。これによりSVGの情報がBase64エンコードされたData URIとして返ってきます。

require 'base64'
require 'initial_avatar'

InitialAvatar.avatar_data_uri('あ', size: 100, font_size: 70)
=> "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHBvaW50ZXItZXZlbnRzPSJub25lIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICMyZWNjNzE7IHdpZHRoOiAxMDBweDsgaGVpZ2h0OiAxMDBweDsiPgo8dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB5PSI1MCUiIHg9IjUwJSIgZHk9IjAuMzVlbSIgcG9pbnRlci1ldmVudHM9ImF1dG8iIGZpbGw9IiNmZmZmZmYiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2FOZXVlLUxpZ2h0LEhlbHZldGljYSBOZXVlIExpZ2h0LEhlbHZldGljYSBOZXVlLEhlbHZldGljYSwgQXJpYWwsTHVjaWRhIEdyYW5kZSwgc2Fucy1zZXJpZiIgc3R5bGU9ImZvbnQtd2VpZ2h0OiA0MDA7IGZvbnQtc2l6ZTogNzBweDsiPuOBgjwvdGV4dD4KPC9zdmc+Cg=="

このData URIを<img>タグのsrcに渡すとこんな風になります。

ちゃんと出ていますね。

色々試してみる

オプションなしだとデフォルト値に

InitialAvatar.avatar_data_uri('あ')

2文字以上

ちなみに、3文字以上にするとさすがにはみ出ます。

InitialAvatar.avatar_data_uri('AB', size: 100, font_size: 60)

漢字 + サイズを大きく

InitialAvatar.avatar_data_uri('水', size: 200, font_size: 150)

設定

色の候補とかサイズのデフォルト値などは予めしていしておくことが可能です。

# 何も指定しなければデフォルト値が使われる

InitialAvatar.configure do |config|
  config.colors = %w[
    #1abc9c #16a085 #f1c40f #f39c12 #2ecc71 #27ae60 #e67e22 #d35400 #3498db
    #2980b9 #e74c3c #c0392b #9b59b6 #8e44ad #bdc3c7 #34495e #2c3e50 #95a5a6
    #7f8c8d #ec87bf #d870ad #f69785 #9ba37e #b49255 #b49255 #a94136
  ]
  config.text_color = '#ffffff'
  config.size = 100
  config.font_weight = 400
  config.font_family = 'HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif'
  config.seed = 0
end

デフォルト画像として使う

例えばRailsでよく使われるCarrierWaveではアップロード済のファイルがない場合にデフォルト値として使うURLを指定する方法があります。

そのデフォルト用のURLでこのInitialAvatar.avatar_data_uriの結果を返せば、ユーザーごとの頭文字を使ったアバターを初期設定値にできます。

固定の画像だと多くの人が同じアバター画像になってしまうなどして見分けがつきにくくなってしまいますが、色付き頭文字になるだけでかなり見やすくなってオススメです。