いろんなサービスやサイトでプロフィール情報（説明・画像など）を登録するのが面倒になってきたので、Gravatarで集約管理を目指しています。

情報を集約するには、そのデータを引き出せるようにする必要があります。

今回はNext.jsのAPIやgetStaticPropsで取得することを想定して、Node.jsで処理する方法をまとめます。

Gravatarのデータにアクセスするには、md5でのハッシュが必要

Gravatarに登録したデータを取得するURLは、メールアドレスをmd5でハッシュにしたものを利用します。

A simple profile link looks like this:
https://www.gravatar.com/HASH

https://ja.gravatar.com/site/implement/profiles/

md5ライブラリをインストール

npmでライブラリを追加します。

$ npm i md5

// TypeScript
$ npm i -D @types/md5

メールアドレスをハッシュ化

メールアドレスを変換します。

import md5 from 'md5';

const hash = md5('[email protected]');

URLを作成

あとはハッシュを使ってURLを作るだけです。

// Webpage
`https://gravatar.com/${hash}`

// JSON
`https://gravatar.com/${hash}.json`

// Profile image
`https://gravatar.com/avatar/${hash}`
`https://gravatar.com/avatar/${hash}.jpg`

応用: 任意のサイズでプロフィール画像URLを生成する

シンプルなヘルパー関数にしてみました。Gravatarは2048pxまでに対応しているので、2049px以上を指定するとエラーを投げます。

import md5 from 'md5';
const getGravatarProfileImageURL = (email: string, size = 80): string => {
  if (size > 2049) {
    throw new Error("size must be less than 2048")
  }
  const hash = md5(email)
  return `https://www.gravatar.com/avatar/${hash}?s=${size}`
}

余談

プロフィールテキストも集約できそうですが、多言語化には対応していません。

もしGUIでプロフィールテキストも多言語で管理したい場合は、多言語プロフィールに対応しているLinkedInが良いかもしれません

参考リンク

https://ja.gravatar.com/site/implement/images/

https://ja.gravatar.com/site/implement/profiles/