Vue.jsで作ったプロジェクトにGravatarを入れてみたので、導入方法をメモメモ

Gravatarとは、Qiitaの右上にある、あれのことである。

Gravatarにアカウントを作成しアイコンを登録しておくことで、Qiitaをはじめとした様々なWebサービスで共通のアイコンを使えるようになるので、Gravatarに対応したサービスで新たにログインアカウントを作成しても、アイコン登録をしなくて済むという優れもの。

これをVue.jsで作ったプロジェクトに埋め込んでみたい、と思い立ったので導入してみた。
以下、参考にした公式サイト。
https://ja.gravatar.com/site/implement/

公式サイトを見ると、HTML上に直接書き込んで導入できるようだが、Gravatarから画像のURLを引っ張ってくるために利用するメールアドレスなどをmd5で暗号化したりしなければならず、多少の手間がかかる。

探してみると、Node.jsのライブラリが提供されていることが分かったので、こちらの方法で導入することを選択。
https://www.npmjs.com/package/gravatar

ということで、導入したいプロジェクトのrootで以下コマンドを実行。

$ npm install gravatar

コマンドを実行すると、node_modules配下にgravatarディレクトリが作成されライブラリが配置される。
また、package.jsonに下記が追加される。

package.json

 "dependencies": {
    "gravatar": "^1.8.0",
  },

これで、利用するための準備が完了。

vueファイルのScriptの書き出し部分にimport定義を追加。

<script lang="ts">
import gravatar from '@/node_modules/gravatar';

template部にGravatarで呼び出される画像のURLをimgのsrcに配置する。

<div class="user-icon"><img :src="gravatarUrl" ></div>

Script部はimportしたライブラリからurlメソッドを利用して、Gravatarの画像のURLを取得する。

  private beforeMount(): void {
    // gravatarからユーザーアイコンを取得
    this.gravatarUrl = gravatar.url(this.loginUser.mail);
  }

画像URLの取得に成功すると、gravatarに登録されているアイコンが表示される。

なお、デフォルトは正方形の画像が表示されるため、アイコンっぽさを出すには、

.user-icon {
    border-radius: 50%;
}

あたりを使ってみるとよい。

手順を記載の通り、とても手軽に導入できた！
ユーザーアカウント毎のアイコン管理の仕組みを1から実装するのはかなり手間なので、それっぽくアイコン表示させたいのならGravatarを導入してみるのもいいかもしれない。