Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

Gravatarを使えばサービスごとにアイコンを設定する必要がなくなるよ!

Gravatarというサービスを知っていますか?Gravatarとは、「メールアドレスにアイコンとプロフィールを紐付ける」サービスです。その仕組み、APIについてご紹介します。

そもそもなんでメールアドレスにアイコンを紐付けたいのか?

多くのサービスは登録時にメールアドレスを必要とします。そのため、メールアドレスを登録するだけでそれに紐付けられたアイコンも同時に設定することができます。さらに、プロフィールも括り付けておけば、ユーザー名などの登録の手間も省くことができます。

ほとんどのサービスで同じユーザー名、アイコンを使いまわすことのほうが多いと思うので、とても合理的だと思います。しかも、そのメールアドレスを登録したサービスのアイコン画像の一括更新が可能となります(Gravaarと紐付けられたサービスのみ)。

現在、QiitaやGitHubが対応しています。ただし、GitHubは一度画像をアップロードして設定するとGravatarのアイコンに再設定できないようです。けっこう歴史のあるサービスのはずなのに、なんで流行ってないのですかね…

どうやってメールアドレスとアイコンを括り付けるのか?

Gravatarにメールアドレスを送信すると紐付けられたアイコン画像が返されます。しかし、メールアドレスをそのまま送ってしまうとメールアドレスを公開情報にするということになります。それは良くないですよね?そこで、メールアドレスをMD5にてハッシュ化してから送信します。

<?php
echo md5(strtolower(trim("mail@example.com"))); // ハッシュ値を得る
  1. 前後の空白を削除(トリム)
  2. 全て小文字化
  3. MD5でハッシュ化

これで得られたハッシュ値を使ってアクセスします。

アイコンを取得してみる

僕のメールアドレスは0a23deea36dfa98784144624b8be4a32というハッシュ値になるので、これでアクセスしてみます。

https://www.gravatar.com/avatar/0a23deea36dfa98784144624b8be4a32

また、サイズを変更することもできます。

https://www.gravatar.com/avatar/0a23deea36dfa98784144624b8be4a32?s=400

ちなみにGravatarにはデフォルトアイコンがいくつか用意されています。また、見つからなかったときに設定する画像を変更することもできます。

https://www.gravatar.com/avatar/?default=mp

詳細はこちらをご覧ください。Image Request

プロフィールを取得してみる

僕はプロフィールを取得できないようにしているので、サンプルにあったものをご紹介します。以下のURLにアクセスすると、JSONでプロフィール情報が返却されます。以下がその結果です(見やすいよう整形してあります)。

https://www.gravatar.com/205e460b479e2e5b48aec07710c08d50.json
{
  "entry": [
    {
      "id": "100894404",
      "hash": "205e460b479e2e5b48aec07710c08d50",
      "requestHash": "205e460b479e2e5b48aec07710c08d50",
      "profileUrl": "http://gravatar.com/beautesting1blog",
      "preferredUsername": "beautesting1blog",
      "thumbnailUrl": "https://secure.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
      "photos": [
        {
          "value": "https://secure.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
          "type": "thumbnail"
        }
      ],
      "name": [],
      "displayName": "beautesting1blog",
      "urls": []
    }
  ]
}

このようにプロフィールが取得できます。

JSONのほかにも様々な形式でデータを取得できます。

  1. JSON
  2. XML
  3. PHP
  4. VCF/vCard
  5. QR Code