
ユーザ名の横にアイコンを表示するようにしました(Hachikin)
先日、こっそりとHachikinをGravatarに対応させました。
Gravatarに登録していると、上記イメージのように氏名の左側にアイコンが表示され、誰が作成したのかが直感的に分かるようになります。まだ、適用できていない画面もありますが、徐々に対応していく予定です。
さて、Gravatarをご存じない方に使い方を簡単に説明致します。
Gravatarとは
Gravatarとは、メールアドレスにアイコン(アバター)を紐付けることで、様々なブログサービスやサイトで紐付いたアイコンを表示させるようにするサービスです。Hachikinでもこの仕組みを使って、上記のようなアイコンを表示させることにしました。
Gravatarに登録していない場合のHachikinでの表示
Gravatarに登録していない場合、ユーザのアイコンは以下のものが使用されます。ちょっと寂しいですね。
1. WordPress.comでアカウント登録
まず、Gravatarのホームページ (https://ja.gravatar.com/) に行って、下記の「Create Your Own Gravatar」をクリックします。
すると、wordpress.comのサインインページに飛ぶので、以下のフォームに「メールアドレス」「ユーザ名」「パスワード」を入力します。
- メールアドレス ・・・Hachikinで使用しているメールアドレスを指定します。
- ユーザ名 ・・・ なんでもOK
- パスワード ・・・ 誰にも分からないパスワードを指定します(Hachikinのパスワードではありません)

上記入力が完了し「Sign up」ボタンを押すと、以下の画面が表示されます。確認用メールアドレスが送信されたようなので、メールボックスを確認します。

次のようなメールが来ていると思うので、「Activate Account」ボタンを押し、登録を完了させます。

ボタンを押すと、次の画面が表示されると思います。これで、wordpress.comにアカウントが作成されました。ここで「Sign in to Gravatar」ボタンを押し、ようやくGravatarへのサインインが完了します。

2. Gravatarでアバター(画像)を登録する
さて、前述の「Sign in to Gravatar」ボタンを押すとGravatarへサインインが完了し、次の画面が表示されていると思います。画面中央のメールアドレス(下の画像ではぼかしが入っていますが)の左側に「G」を横にした青いアイコンが表示されていると思います。これは、まだ画像が登録されていない状態なので、これから登録して行きましょう。
画面下の「Add one by clicking here!」というリンクをクリックします。

すると、どこに画像があるか聞かれます。自分のPCの中にあるのか、インターネット上にあるのか、既存の画像なのか、カメラで撮影したものを使うのか選択できます。ここでは、自分のPCの中にある画像を使うことにします。「My computer’s hard drive」を選択します。

ファイルを選択するボタンがあるので、適当な画像を選んで「Next」ボタンを押します。

すると、画像がアップロードされ、以下のように必要な部分だけを表示するように調整することができます。調整が終わったら「Crop and Finish!」ボタンを押して完了させます。

次に、登録したアバターのレーティングを設定します。今回はただの猫の画像なので、「G」を選択しておきます。

これで登録完了です。メールアドレスの左側に今登録した画像が表示されていると思います。

3. Hachikinで確認する
Hachikinでは特に設定は必要ありません。ログインして画面の右上を確認してください。こんな風にGravatarで登録した画像が表示されていれば完了です!
微妙な改善ですが、社内の皆がGravatarに登録していると、パッと見て誰が担当しているものなのか直ぐに分かるようになると思います。登録がちょっと面倒ですが、ぜひお試しください。