BETA

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

投稿日: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>

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@west2538onRailsの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!