Rails

日付/時刻を日本時間で表示させる方法（タイムゾーンの変更/相対時間の表記）

 
2+

今回は、日付/時刻を日本時間で表示させる方法について簡単にまとめてみました。
実装例としてコメント機能の実装に際して、コメントの投稿日時を表示させるという目的のもと、まとめていきたいと思います。

まずは、コメントが投稿されたときの現在の表示画面とHTMLは下記のようになっています。

Ruby
1
2
3
4
5
6
7
    <% @comments.each do |comment| %>
      <p>
        <strong><%= link_to comment.user.nickname, "/users/#{comment.user_id}" %>：</strong>
        <%= comment.text %>
      </p>
      <p><%= comment.created_at %></p>
    <% end %>

時刻表示はUTCとなっており、日本時間でもないので、とても見にくいです。
そこで、まずは、UTCから日本時間に変更を加えていきます。

手順①config/application.rbに設定を追加する。

Ruby
1
2
3
4
5
6
7
module Pictweet
  class Application < Rails::Application
・
・
  config.time_zone = 'Tokyo'
end
end

これでタイムゾーンがUTCから東京に変わります。

これでもまだ、UTCから換算した時差（+0900）の表示が残っているので、
これも消してしまいましょう。

手順②config/initializersにtime_formats.rbを作成する

Shell
1
MacBook-Pro:initializers Username$ vim time_formats.rb

このconfig/initializers/以下にあるファイルは、設定ファイルとしてRailsを起動した時に自動的に読み込まれるファイル。なので、このファイルを読み込もうと思ったら、Railsを再起動して作成したファイルを読み込ませる必要があります。これはrails newでアプリケーションを作成した際に、初期ファイルとしてcongfig/initializers/以下に生成されたファイルにコメントアウトでちゃんと書かれています。

Ruby
1
2
3
# Be sure to restart your server when you modify this file.
 
以下、省略

手順③time_formats.rbに日時の表示フォーマットを設定する

Ruby
1
2
3
#time_formats.rb
 
Time::DATE_FORMATS[:datetime] = '%Y-%m-%d %H:%M'

これで日時は右記のようなフォーマットになります。（2019-03-20 21:00）

手順④HTMLにtime_formats.rbに設定したフォーマットを適用する。

手順③で作成したのは、あくまで出力フォーマットなので、実際にHTMLに記述し、適用させます。

Ruby
1
2
3
4
5
6
7
    <% @comments.each do |comment| %>
      <p>
        <strong><%= link_to comment.user.nickname, "/users/#{comment.user_id}" %>：</strong>
        <%= comment.text %>
      </p>
      <p><%= comment.created_at.to_s(:datetime) %></p>
    <% end %>

comment.created_atをto_sメソッドを使って、指定フォーマット（:datetime）のString型に変換しています。

これで、日時が見やすい形になりました。

フォントサイズも調整すれば、コメントの内容を邪魔しないデザインに変えることも簡単にできます

番外編：現在時刻を基準とした相対時間を表示する

twitter等で、よく見る時間表示で「1時間前」「1分前」といった相対時間を表示しているサービスもよく見かけるので、相対時間の表示方法も試してみました。

手順①helpers/application.helper.rbでヘルパーメソッドを作成する

Ruby
1
2
3
4
5
module ApplicationHelper
  def date_format(datetime)
    time_ago_in_words(datetime) + '前'
  end
end

ここでは、Railsに搭載されているtime_ago_in_wordsと呼ばれる関数を使います。
これ関数単体でも使えるので、下記のように直接HTMLに記述することも可能です。

Vim
1
2
3
<time datetime="<%= tweet.created_at %>">
  <%= time_ago_in_words(tweet.created_at) %>
</time>

ただ、ViewのHTMLファイルに毎回同じ記述を書くのは長いし、面倒なのでヘルパーメソッドを作成して、再利用しやすい形にしています。

手順②相対時間を日本語表記に変える。

先程と同様、config/application.rbに設定を追加します

Ruby
1
config.i18n.default_locale = :ja

 

ただ、このままだとエラーメッセージの時と同様で、一部分が英単語の表記になってしまうので、config/locales/にja.ymlという日本語訳のためのファイルを作成します。

手順③ja.ymlに日本語訳を設定する。

Vim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
ja:
  datetime:
    distance_in_words:
      half_a_minute: "30秒前後"
      less_than_x_seconds:
        one:   "1秒"
        other: "%{count}秒"
      x_seconds:
        one:   "1秒"
        other: "%{count}秒"
      less_than_x_minutes:
        one:   "1分"
        other: "%{count}分"
      about_x_hours:
        one:   "約1時間"
        other: "約%{count}時間"
      x_days:
        one:   "1日"
        other: "%{count}日"
      about_x_months:
        one:   "約1ヶ月"
        other: "約%{count}ヶ月"
      x_months:
        one:   "1ヶ月"
        other: "%{count}ヶ月"
      about_x_years:
        one:   "約1年"
        other: "約%{count}年"
      over_x_years:
        one:   "1年以上"
        other: "%{count}年以上"

これで、日本語表示が可能になった。あとは、ヘルパーメソッドをHTMLに適用するだけです。

手順④HTMLでヘルパーメソッドを呼び出し、相対時間を適用する。

Vim
1
2
3
4
5
6
7
    <% @comments.each do |comment| %>
      <p>
        <strong><%= link_to comment.user.nickname, "/users/#{comment.user_id}" %>：</strong>
        <%= comment.text %>
      </p>
      <p><%= date_format(comment.created_at) %></p>
    <% end %>

これで、下記のような相対時間を表示させることができます。

通常の時刻表示よりもちょっとオシャレになりました！

 

2+
date format ヘルパーメソッド 日付 時刻表示
関連記事