LoginSignup
47
44

More than 5 years have passed since last update.

「10分前」「4時間前」「2日前」みたいなやつを作る

Last updated at Posted at 2015-07-03

時間の相対表示

WHAT

たとえばTwitterの投稿時間,絶対時間じゃなくて相対時間で表示されますよね(24時間以内ならですが).

time_ago.png

これをどうやって実装するか.

HOW

Ruby on Railsの場合

Ruby on Railsではtiem_ago_in_wordsというViewHelperを利用すれば簡単に実装できます.

<span><%= time_ago_in_words(tweet.created_at) %></span>

HTML的にちゃんとするとしたら,以下のように書くのがベストですかね.

<time datetime="<%= tweet.created_at %>">
  <%= time_ago_in_words(tweet.created_at) %>
</time>

長いのでHamlで書きましょうか.

%time(datetime="#{tweet.created_at}")= time_ago_in_words(tweet.created_at)

JavaScriptの場合

さいきんのナウいWebアプリの流行に乗って,ajaxでツイートを取得して表示したい時もありますよね? APIレスポンスにtime_ago_in_words(tweet.created_at)を載せてしまうのでもいいですが,ここはオシャレにJS側で処理してみましょう.

実はMoment.jsfromNow()を利用すれば簡単です.
(Rails側でDateTimeto_sしたものをそのままぶち込んで大丈夫です)

// tweet.created_at === "2015-07-01T12:00:00+09:00"
moment(tweet.created_at).fromNow()
<time datetime="{{tweet.created_at}}">
  {{moment(tweet.created_at).fromNow()}}
</time>

ちなみにMoment.jsのlocaleを変更することで日本語化/i18nも簡単に出来ます.

AngularJSとかで使いたい人はdirectiveやfilterでラップしてあげるといいと思います.

References

47
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47
44