[Elixir+Phoenix]Use a Gravatar image

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 に登録してみよう

Index

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

1. What is Gravatar?

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

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

2. hexdigest(md5) and downcase(Email)

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

利用するのは、以下の二つ。

• String.downcase/1
• :erlang.md5/2

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

>iex -S mix

downcaseを検証。

iex(1)> email = String.downcase("Test@test.com")
"test@test.com"

:erlang.md5を検証。

iex(2)> :erlang.md5("test@test.com")
<<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/user_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

名前を含め、特定用途の関数となっています。
しかし、別の用途に使うことがなければ抽象化か汎用化は行わない。

必要になったら必要なことをすればよい。
オブジェクト指向での考えですが・・・
YAGNI(=You Ain’t Gonna Need It): それは多分、必要ない

3. Display gravatar image

そろそろ画面に変化が欲しいので、
Default Imageを表示する。

取得方法の詳細は以下に書いてある。
Gravatar - Image Requests

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

<div class="jumbotron">
  <div class="gravatar">
    <img src="https://secure.gravatar.com/avatar/?s=50" class="gravatar">
  </div>
  <p><strong>Name:</strong><%= @user.name %></p>
  <p><strong>Email:</strong><%= @user.email %></p>
  <p>web/templates/user/show.html.eex</p>
</div>

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

各ユーザIDはどこに入れるのかと言うと・・・以下のようになる。

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

各ユーザIDに対応して表示したい。
なので、汎用に利用できる関数にする。

Tips:
HTTPSを利用しないのであれば、以下のURLでも表示できる。
URL: http://www.gravatar.com/avatar/?s=50

4. HelperMethod

UserView(web/views/user_view.ex)に定義し、helper関数とする。

名称: web/views/user_view.ex
aliasの追加と関数の作成を行う。

alias SampleApp.User

def get_gravatar_url(%User{email: email}) do
  gravatar_id = email |> email_downcase |> email_crypt_md5
  "https://secure.gravatar.com/avatar/#{gravatar_id}?s=50"
end

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

<img src="<%= get_gravatar_url(@user) %>" class="gravatar">

実行して確認すると、以前作成したユーザのGravatarが表示されている。
(おそらくDefault imageだと思うが・・・)
今回はここまでとする。

5. Extra

少しCSSを付け足してみる。
styleで直接記述している。
いやな方は、CSSファイルをご自分で用意して下さい。

名称: web/templates/user/show.html.eex
以下のように変更する。

<h2>
  <div class="gravatar" style="float: left; margin-right: 10px;">
    <img src="<%= get_gravatar_url(@user) %>" class="gravatar">
  </div>
  <p><%= @user.name %></p>
</h2>

少しデザインが寂しくなった。
だが後に画像と名前の右側には、
記事の一覧が入るので問題はないだろう。

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

​