[Rails] Twitterのように時刻を○○前と表示する方法(time_ago_in_time)

Twitterをよく見ると、ツイートした時間の表示は○○前とか約○○時間前のように、アバウトな時間表示になっています。

Ruby on Railsではtime_ago_in_wordsメソッドを使うことで簡単に実装することができます。ここではこのtime_ago_in_wordsの使い方についてご紹介します。

ヘルパーに追加

タグで囲んだり、クラスをつけたり、統一する必要が出ることもあるので、一旦helperに時刻をフォーマットするメソッドを用意します。

もし、カスタマイズしたいときはこのヘルパーメソッドを編集しましょう。

ここではapp/helpers/time_helper.rbに書いていきます。

def post_time(datetime)
  time_ago_in_words(datetime) + '前'
end

これで、Viewの中で<%= post_time(post.created_at) %>みたいに読み込んでやると、今からどのくらい前かを表示することができます。

このままだと、「2days前」のようにルー大柴感が漂う表記になるので、日本語化してやりましょう。

言語の設定

まず、このアプリケーションで使用するデフォルト言語を選択します。

ここでは日本語を選択しようと思うのでconfig/application.rbの中に以下のように書き込みましょう。

config.i18n.default_locale = :ja


次に、翻訳用の辞書ファイルを作成します。辞書ファイルはconfig/localesの中に格納します。

ここにja.ymlを作成して、以下のような辞書ファイルを作成しましょう。

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}年以上"

これで、「約1時間前」のように表示されると思います。

まとめ

正確な時間が必要ないときにざっくりとした時刻を表示する方法をご紹介しました。

Twitterのような更新頻度が高いサービスの場合だと、「どのくらい前なのか」という情報のほうがパッと把握できる有意義な情報です。

是非、必要に応じてtime_ago_in_wordsを利用してみてください。