Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@mnishiguchi

[Phoenix LiveView] date/timeをtime zoneとlocaleで翻訳

2021/03/05(金) 23:59〜開催のautoracex #14での成果です。

Phoenix LiveViewアプリ上のdate/timeをブラウザから取得したtime zoneとlocaleにより翻訳する方法について勉強しました。

経緯としては、過去数週間、autoracexの主催者@torifukukaiouさんの記事を参考に、趣味で温度湿度データを表示するPhoenix LiveViewアプリに取り組んでおり、そこに表示する時間のフォーマットを現地化してみたいなーと思っていたことです。全てUTCで同じフォーマットではなく、アメリカ東海岸ではアメリカ東海岸の、日本では日本やりかたで時間を表示したかったのです。

# ある時間
~U[2021-03-02 22:05:28Z]

# 日本にいるユーザー向け
"2021年3月3日 7:05:28 JST"

# アメリカ東海岸のユーザー向け
"March 2, 2021 at 5:05:28 PM EST"

time zoneとlocaleの取得

ブラウザ側

LiveViewでは、接続前と接続後の2回サーバ側でレンダリングされます。一回目レンダリングのあとにブラウザ側のJavascriptでtime zoneとlocaleを取得し、それらをLiveSocketのparamsに追加します。そうすることで、接続後のレンダリングでそれらの値にアクセスできます。

いろいろやり方があるようですが。僕は下記の関数を使いました。

/assets/js/app.jsのLiveSocketに任意のkey-valueペアをparamsとして追加します。

-let liveSocket = new LiveSocket('/live', Socket, { params: { _csrf_token: csrfToken } });
+let liveSocket = new LiveSocket('/live', Socket, {
+  params: {
+    _csrf_token: csrfToken,
+    locale: Intl.NumberFormat().resolvedOptions().locale,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    timezone_offset: -(new Date().getTimezoneOffset() / 60),
+  },
+});
[info] CONNECTED TO Phoenix.LiveView.Socket in 112µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "Ay8cCDsHZCFYBicSKTMHfi5EIjowK3sJHWHrqqVH4hcboKI8a1v_wB4g",
                "_mounts" => "0",
                "_track_static" => %{"0" => "http://localhost:4000/css/app.css",
                                     "1" => "http://localhost:4000/js/app.js"},
                "locale" => "en-US",
                "timezone" => "America/New_York",
                "timezone_offset" => "-5",
                "vsn" => "2.0.0"}

サーバ(LiveView)側

サーバ(LiveView)側では、socketのparams経由でtime zoneとlocaleを受け取ります。一つ重要なことは、socketのparamsはLiveView接続後のマウント時のみにアクセスできることです。

defmodule MnishiguchiWeb.TimezoneLive do
  use MnishiguchiWeb, :live_view

  @default_locale "en"
  @default_timezone "UTC"
  @default_timezone_offset 0

  @impl true
  def mount(_params, _session, socket) do
    socket =
      socket
      |> assign_locale()
      |> assign_timezone()
      |> assign_timezone_offset()

    {:ok, socket}
  end

  defp assign_locale(socket) do
    locale = get_connect_params(socket)["locale"] || @default_locale
    assign(socket, locale: locale)
  end

  defp assign_timezone(socket) do
    timezone = get_connect_params(socket)["timezone"] || @default_timezone
    assign(socket, timezone: timezone)
  end

  defp assign_timezone_offset(socket) do
    timezone_offset = get_connect_params(socket)["timezone_offset"] || @default_timezone_offset
    assign(socket, timezone_offset: timezone_offset)
  end

  ...

datetimeフォーマット

time zoneとlocaleをLiveViewプロセスの状態に保存したので、あとはそれを使用してどうdatetimeをユーザ現地のフォーマットに加工するかの問題です。この目的にはこれらのライブラリが使えます。

mix.exsに追加して、いつもの通りmix deps.getします。

   defp deps do
     [
       ...
+      {:timex, "~> 3.6"},
+      {:ex_cldr_dates_times, "~> 2.0"},
       ...
     ]
   end

Cldrライブラリのドキュメントによると、設定はシンプルで、こんな感じにモジュールを作るだけでうまくいきました。これでアプリのどこからでも一貫したdatetimeのフォーマットができます。

defmodule Mnishiguchi.Cldr do
  @default_locale "en"
  @default_timezone "UTC"
  @default_format :long

  use Cldr,
    locales: ["en", "ja"],
    default_locale: @default_locale,
    providers: [Cldr.Number, Cldr.Calendar, Cldr.DateTime]

  @doc """
  Formats datatime based on specified options.

  ## Examples

      iex> format_time(~U[2021-03-02 22:05:28Z], locale: "ja", timezone: "Asia/Tokyo")
      "2021年3月3日 7:05:28 JST"

      iex> format_time(~U[2021-03-02 22:05:28Z], locale: "ja", timezone: "America/New_York")
      "2021年3月2日 17:05:28 EST"

      iex> format_time(~U[2021-03-02 22:05:28Z], locale: "en-US", timezone: "America/New_York")
      "March 2, 2021 at 5:05:28 PM EST"

      # Fallback to ISO8601 string.
      iex> format_time(~U[2021-03-02 22:05:28Z], timezone: "Hello")
      "2021-03-02T22:05:28+00:00"

  """
  @spec format_time(DateTime.t(), nil | list | map) :: binary
  def format_time(datetime, options \\ []) do
    locale = options[:locale] || @default_locale
    timezone = options[:timezone] || @default_timezone
    format = options[:format] || @default_format
    cldr_options = [locale: locale, format: format]

    with time_in_tz <- Timex.Timezone.convert(datetime, timezone),
         {:ok, formatted_time} <- __MODULE__.DateTime.to_string(time_in_tz, cldr_options) do
      formatted_time
    else
      {:error, _reason} ->
        Timex.format!(datetime, "{ISO:Extended}")
    end
  end
end

ローディングアイコン

これは別になくてもよいのですが、ここまでのコードで一つ問題があります。1回目のレンダリング時点ではまだブラウザでtime zoneとlocaleの取得は行っていません。ですのでデフォルトの値でとりあえず仮のレンダリングをします。その結果、一回目と二回目のレンダリングでフォーマットが異なるという変な挙動を起こしてしまいます。一瞬ですがユーザーには不自然に見えます。

他の方法もあるみたいですが、僕はLiveViewが接続されるまでの間、単にローディングアイコンを表示してコンテンツを隠すという方針にしました。実装とメンテが楽でかつ確実に効くので。Single Element CSS Spinnersのアイコンが気に入ってます。

<%= unless connected?(@socket) do %>
  <div style="min-height:90vh">
    <div class="loader">Loading...</div>
  </div>
<% else %>

  <!-- contents -->

<% end %>

以上

資料

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mnishiguchi
Software Engineer in Washington DC

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?