[Elixir]Calendarモジュールを使って、DataFormatを作る方法を色々と試す。

Elixirでカレンダーを作る為に、日付の取得とフォーマットを作る為の方法を探ってみました。
Elixirのアドベントカレンダー11日目としてエントリーしたので学習がてらDataFormatの作成についてアウトプットします。

Elixirの学習をしていたら、福岡在住ではありませんが、ご縁あって[fukuoka.ex](https://fukuokaex.fun/)にお世話になっていますので、次はfukuoka.exのアドベントカレンダーでもElixirの事を書きたいと思います。

まだまだ、学習中の身なので、アドバイスを頂けたら喜びますので、よければコメントください。

# Calendarモジュールを使って、DataFormatを作る

まずはじめに、ex_calendarでプロジェクトを作りました。

```
mix phx.new ex_calendar
```

プロジェクトを作るとおきまりのタスクとして、ディレクトリを移動して、DBを作成します。

```
cd ex_calendar

mix ecto.create
```
* calendarモジュールを追加する

```mix.exs
defp deps do
    [
      ...省略
      {:plug_cowboy, "~> 2.0"}, # カンマを追記
      {:calendar, "~> 0.17.4"}  # カレンダーモジュールを追加
    ]
  end
```
* mix.exsに以下を追加する

```mix.exs
 def application do
    [
      applications: [:logger, :calendar] 
    ]
  end
```

カレンダーモジュールを追加する為に、```mix deps.get```をターミナルで
打つ

これで、Calendarモジュールが利用できるようになったので、試して見ましょう。
```<main>``` タグの中を以下のように書き換えて見てください。

```ex_calendar_web/templates/layout/app.html.eex
<main role="main" class="container">
        <%= cdn = Calendar.DateTime.now! "Asia/Tokyo" %>
</main>
```

それでは、
Phoenixサーバーを立ち上げて見ましょう。

```
iex -S mix phx.server
```

以下のように表示されていれば、OKです。

<img width="904" alt="スクリーンショット 2018-12-11 12.25.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/72962/f93270bc-4c62-f5b9-dbe7-b806cd6dca14.png">

ちなみに、"Asia/Tokyo"この部分にZontimeを変更したい場合、以下で調べる事ができます。
http://www.timezoneconverter.com/cgi-bin/zoneinfo

さて、これで　日付や時間などが取得できました。
ちなみに、他にも現在時刻を取得する方法はいくつかあるようです。簡単に取得する方法として、
ErlangのCalendarモジュールを利用する方法があります。

ElixirからErlangのモジュールを利用する場合は、アトムの形式で呼び出します。
```:calendar.local_time```これでローカルエリアの現在時刻を取得できます。
試しに、iexで出力結果を確認してみます。

```
iex(1)> :calendar.local_time  
{{2018, 12, 11}, {20, 8, 23}}
```
どうやら、タプルで {{年、月、日}, {時, 分, 秒}} データを持っているようです。

これをWeb上で表示するように```<main>```の中を以下のように書き換えてみます。

```ex_calendar_web/templates/layout/app.html.eex
<main role="main" class="container">
   <%= Calendar.NaiveDateTime.from_erl!(:calendar.local_time)  %>
</main>
```

<img width="832" alt="スクリーンショット 2018-12-11 20.19.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/72962/03001fd3-cc59-10d7-37ef-38216c4a2344.png">

Erlangの```:calendar.local_time```は簡単に時刻を取得できて楽できそうですが、日時秒まで含まれるので、年月日だけ出したい場合は扱いづらいです。

そこで、日時だけ取得してみたいと思います。日時だけ取得するには、```Calendar.Date.today!(timezone)```を利用すると簡単に取得できるようです。

```ex_calendar_web/templates/layout/app.html.eex
    <main role="main" class="container">
        <%= Calendar.Date.today!("Asia/Tokyo") %>
    </main>
```
<img width="791" alt="スクリーンショット 2018-12-11 20.32.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/72962/4a39736f-ecee-358f-eeac-be05d9433172.png">

少し気になったので```Calendar.Date.today!("Asia/Tokyo")```はどのような値を返却してくるのかiex上で確認してみます。

```
iex(3)> today = Calendar.Date.today!("Asia/Tokyo")
~D[2018-12-11]
```
どうやらシジルになっているようです。

## DataFormatを試す

色々と試して見たところで本題のDataFromatを作って見たいと思います。
Calendarモジュールの中を見ると、```Calendar.DateTime.Format```の中に
色々な形式にしてくれる関数が用意されているのでそれを利用したら簡単にできそうです。

今回は以下のフォーマットを試して見たいと思います。

* ```Calendar.DateTime.Format.rfc3339```
* ```Calendar.DateTime.Format.iso8601_basic```
* ```Calendar.DateTime.Format.unix```
* ```Calendar.DateTime.Format.js_ms```

上記のFormatに引き渡すデータは%DateTimeから始まる構造体のデータの為、まずはこのデータを作る必要があります。
今回は、現在の日時として、```:calendar.local_time```を使って取得した日付と時刻のデータを```Calendar.DateTime.from_erl```を使って構造体のデータをtokyo変数に入れてtokyoをパイプで
渡してフォーマットデータを取得してみます。

```ex_calendar_web/templates/layout/app.html.eex

 <main role="main" class="container">
        <% {:ok, tokyo} = Calendar.DateTime.from_erl :calendar.local_time, "Asia/Tokyo" %>
        <br />
        <%= tokyo |> Calendar.DateTime.Format.rfc3339 %>
        <br />
        <%= tokyo |> Calendar.DateTime.Format.iso8601_basic %>
        <br />
        <%= tokyo |> Calendar.DateTime.Format.unix %>
        <br />
        <%= tokyo |> Calendar.DateTime.Format.js_ms %>
        <br/>
        <% date = tokyo |> Calendar.DateTime.Format.js_ms %>
  </main>

```

最後におまけとして、JavaScriptの ```new Date()```にElixirのローカルタイムを取得して渡すのを
試します。

```ex_calendar_web/templates/layout/app.html.eex

 <main role="main" class="container">
　　　　　・・・省略
　　　　　<% date = tokyo |> Calendar.DateTime.Format.js_ms %> 
　　　　　↓↓↓追記       
        <% localtime = Calendar.Date.today!("Asia/Tokyo") %>
        <p id="demo"></p> 
  </main>
　<script>
       var d = new Date("<%= localtime %>");  
       document.getElementById("demo").innerHTML = "Javascript = " + d;
 </script>
```

<img width="799" alt="スクリーンショット 2018-12-11 23.29.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/72962/f2bbced1-671f-180d-3c92-69510a412f77.png">

## 最後に

という事で今回、Calendarモジュールを使って色々なタイプのDataFormatに変換して見ました。
次回は、カレンダーを作ってみたいと思います。

ふー、何とか11日目、日付またがずに書き終えました。