[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](https://ja.gravatar.com/)に登録が必要。

登録方法の参考。
[LAYER8 - グローバルなアバター Gravatar に登録してみよう](http://blog.layer8.sh/ja/2011/06/28/lets-signup-for-gravatar/)

プロジェクト作成。

```iex
>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
iex(1)> email = String.downcase("Test@test.com")
"test@test.com"
```

:erlang.md5を検証。

```iex
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](https://ja.gravatar.com/site/implement/hash/)

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

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

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

```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
```

こちらはそのままです。

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

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

##3. Display gravatar image
そろそろ画面に変化が欲しいので、DefaultのProfileImageを表示する。
取得方法の詳細は以下に書いてある。
[Gravatar - Image Requests](https://ja.gravatar.com/site/implement/images/)

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

```html
<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

```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タグを以下のように書き換える。

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

#Speaking to oneself
汎用性皆無で作ったので、あくまで使い方の一例といったところです。
ちなみにProfileを取得することもできるです。
[Gravatar - Profile Requests](https://ja.gravatar.com/site/implement/profiles/)

#Bibliography
[LAYER8 - グローバルなアバター Gravatar に登録してみよう](http://blog.layer8.sh/ja/2011/06/28/lets-signup-for-gravatar/)
[darian moody. - Cryptographic hash functions in Elixir; generating hex digests](http://www.djm.org.uk/cryptographic-hash-functions-elixir-generating-hex-digests-md5-sha1-sha2/)
[Erlang - crypto](http://www.erlang.org/doc/man/crypto.html)
[Gist - 10nin / Crypto.ex](https://gist.github.com/10nin/5713366)
[Gravatar - Creating the Hash](https://ja.gravatar.com/site/implement/hash/)
[Gravatar - Image Requests](https://ja.gravatar.com/site/implement/images/)