時間の相対表示
WHAT
たとえばTwitterの投稿時間,絶対時間じゃなくて相対時間で表示されますよね(24時間以内ならですが).
これをどうやって実装するか.
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.jsのfromNow()
を利用すれば簡単です.
(Rails側でDateTime
をto_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でラップしてあげるといいと思います.