[Middleman 3]初めてのMiddleman：Helperを使ってGravatarのアイコンを表示する

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

今回はちょっとした小ネタです。Middlemanでブログ等にプロフィール情報を表示したいときアイコンも付けたいですよね。画像を直置きでも良いですが、Gravatarのアイコンを表示できるようにしてみたいと思います。Gravatarを使えばアイコンの変更もWeb上から行えるので便利です。

必要なもの

MiddlemanでGravatarのアイコンを表示するにはGravatarアカウントの登録メールアドレスが必要です。このメールアドレスを使ってイメージをリクエストします。リクエスト方法の詳細については公式のImage Requestsを参考にします。

Middleman Helperを用意する

まず、config.rbに必要なモジュールを読み込みます。この二つのモジュールはメールアドレスをHash化する、デフォルトアイコンのURLをエンコードするために使います。

require 'digest/md5'
require 'uri'

Middleman Helper

config.rbに下記のHelperを追加します。メールアドレスを渡すとGravatarのアイコン画像のURLを返すHelperです。引数周りは適当にカスタマイズしてください。

helpers do
  def get_gravatar(email, size = 80, default = '')
    hash = Digest::MD5.hexdigest(email.chomp.downcase)
    default_url = URI.escape(default)
    "//www.gravatar.com/avatar/#{hash}?s=#{size}&d=#{default_url}"
  end
end

Gravatarアイコンを表示する

単純に画像のURLだけを取得するのであれば<%= get_gravatar('hoge@fuga.com') %>のように指定します。返り値はhttp://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50のようにメールアドレスをHash化したURLとなります。

オプションでリクエスト時のサイズ<%= get_gravatar('hoge@fuga.com', 200) %>、デフォルトアイコン<%= get_gravatar('hoge@fuga.com', 200, 'http://fuga.com/icon.png') %>を指定できます。

Assets Helperを使って表示するには以下のようにURLを渡します。

<%= image_tag get_gravatar('hoge@fuga.com', 200), :width => 200, :height => 200, :class => 'avatar' %>

データファイルを使ってアイコン一覧を表示する

authors.ymlというデータファイルを作り、回すことでアイコンの一覧が作れます。Proxyを使って動的ページを作ればAuthor別のページ作成も可能です。

nukos_kitchen:
  name: 
    en: kitchen_nukos
  profile: プロフィール文章が入ります。
  email: hoge@fuga.com
  social:
    twitter: nukos_
  blog:
    name: Whiskers
    url: http://whiskers.nukos.kitchen

hoge_fuga:
  name: 
    en: ...

一覧を表示する方法はこんな感じ。

<% data.authors.each do |key, author| %>
  <%= image_tag get_gravatar(author.email, 200), :width => 200, :height => 200, :class => 'avatar' %>
<% end %>