[Elixir+Phoenix]PhoenixでGravatar画像を利用する

Goal

PhoenixでGravatar画像を利用する。
(I use the Gravatar image in Phoenix.)

Dev-Environment

OS: Windows8.1
Erlang: Eshell V6.4, OTP-Version 17.5
Elixir: v1.0.4
Phoenix Framework: v0.13.1
PostgreSQL: postgres (PostgreSQL) 9.4.4

Wait a minute

今回は、Gravatar画像を利用します。
自分の画像を表示したいのであれば、Gravatarに登録が必要。

登録方法の参考。
LAYER8 - グローバルなアバター Gravatar に登録してみよう

プロジェクト作成。

>cd プロジェクト作成ディレクトリ
>mix phoenix.new gravatar_sample
>cd gravatar_sample
>mix phoenix.server
>ctrl+c

Index

1. What is Gravatar?
2. hexdigest(md5) and downcase(Email)
3. Display gravatar image
4. HelperMethod

1. What is Gravatar?

Gravatarは、EmailとProfileImageを結びつけるサービス。

Gravatarで登録と設定を行えば、
Google+、Twitter、Bloggerなどなどで共通のProfileImageが利用できるようになる。
(但し、対象のサービスサイトがGravatarを採用していること)

2. hexdigest(md5) and downcase(Email)

Gravatarを利用するためにはEmailをmd5で暗号化する必要がある。
また、Emailは大文字小文字で区別されないが、
md5では区別されるのでdowncaseを暗号化前に実施する。

利用するのは、以下の二つ。
- String.downcase/1
- :erlang.md5/2

まず、iexから利用する関数を試す。
iexを起動する。

downcaseを検証。

iex(1)> email = String.downcase("[e-mail]")
"[e-mail]"

:erlang.md5を検証。

iex(2)> :erlang.md5("[e-mail]")
<<182, 66, 180, 33, 123, 52, 177, 232, 211, 189, 145, 95, 198, 92, 68, 82>>

例は、こちらに書いてある。
Gravatar - Creating the Hash

これを関数にする。
但し、md5の値をそのまま使うことができないので変換をする。
(一度、実行時エラーが発生して手戻りが発生した)
参考: Gist - 10nin / Crypto.ex

名称: web/views/page_view.ex
二つの関数を作成する。

もはや原型は最初の一行しか残っていない・・・

def email_crypt_md5(email) do
  :erlang.md5(email)
  |> :erlang.bitstring_to_list
  |> Enum.map(&(:io_lib.format("~2.16.0b", [&1])))
  |> List.flatten
  |> :erlang.list_to_bitstring
end

こちらはそのままです。

def email_downcase(email) do
  String.downcase(email)
end

関数名を含め、特定用途の関数となっています。
実際に使う場合は適宜変更をして下さい。

3. Display gravatar image

そろそろ画面に変化が欲しいので、DefaultのProfileImageを表示する。
取得方法の詳細は以下に書いてある。
Gravatar - Image Requests

名称: web/templates/page/index.html.eex
以下のように編集して下さい。

<div class="jumbotron">
  <div class="gravatar">
    <img src="https://secure.gravatar.com/avatar/?s=50" class="gravatar">
  </div>
</div>

GravatarURL: https://secure.gravatar.com/avatar/
size指定: ?s=50

各ユーザIDの画像を表示する場合のURLは以下のようになる。

https://secure.gravatar.com/avatar/#{gravatar_id}?s=50

4. HelperMethod

PageView(web/views/page_view.ex)に関数を定義し、eexで使えるhelper関数とする。
名称: web/views/page_view.ex

def get_gravatar_url() do
  gravatar_id = "Gravatar登録アドレス" |> email_downcase |> email_crypt_md5
  "https://secure.gravatar.com/avatar/#{gravatar_id}?s=50"
end

実際に使う場合は適宜変更をして下さい。

名称: web/templates/page/index.html.eex
indexテンプレートのimgタグを以下のように書き換える。

<img src="<%= get_gravatar_url %>" class="gravatar">

Speaking to oneself

汎用性皆無で作ったので、あくまで使い方の一例といったところです。
ちなみにProfileを取得することもできるです。
Gravatar - Profile Requests

Bibliography

LAYER8 - グローバルなアバター Gravatar に登録してみよう
darian moody. - Cryptographic hash functions in Elixir; generating hex digests
Erlang - crypto
Gist - 10nin / Crypto.ex
Gravatar - Creating the Hash
Gravatar - Image Requests