タイムラインの「〇〇前」をリアルタイム更新

公開日:2018-10-27
最終更新:2018-11-05

自作のWebアプリ「まちかどルートのタイムラインで、下のような投稿時間の表記を実現したときのメモです。放置しているとリアルタイムに刻々と変化します。

time_ago_in_words メソッド

をはじめは使おうとして

time_ago_in_words(post.updated_at, include_seconds: true) + '前'

というコードを書きました。ところが、これだとリアルタイムに刻々と変化しないんです。便利なメソッドだなあと思っていたので残念です。

moment.js と livestamp.js の併用

そこでJavaScriptを使うことにしました。※要JQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/ja.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/livestamp/1.1.2/livestamp.js"></script>

上記の3行をapplication.html.erbに追記してから

<span data-livestamp="<%= post.updated_at %>"></span>

この1行を表示部分に書きました。

補足

Chromeのデベロッパーツールでエラーを見つけました。調べてみるとmoment.jsでは参照する日付がISOフォーマットでないといけないもよう。そこで

<span data-livestamp="<%= post.updated_at.strftime('%Y-%m-%d %H:%M:%S') %>"></span>

というコードに変更することでエラーが解消しました。

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@west2538onRailsの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする