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

Elixirの学習をしていたら、福岡在住ではありませんが、ご縁あってfukuoka.exにお世話になっていますので、次は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です。

ちなみに、"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>

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>

少し気になったので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>

最後に

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

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

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

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

DataFormatを試す

最後に