Edited at

リアルタイムで投稿時間からの経過時間を表示 livestamp.jsの使い方(ios対応)

More than 1 year has passed since last update.


概要

RubyOnRailsでツイッターのような投稿サイトを作るときに、投稿時間からの経過時間を表示する機能を実装したいと考えやり方調べた。

ライブラリなどを使わずにデータベースに投稿時間を問い合わせて、現在時刻を引くことで、実装することは出来るが、この方法の場合、ページを更新しないと経過時間も更新されず、実態との差異が生じてしまう。

そのため、今回はlivestamp.jsというライブラリを使用してとことん簡単に実装した。


環境

Ruby2.2.4

Rails 5.1.4


手順


1. 必要なライブラリの取得

今回は、ライブラリをダウンロードせずに、CDNで取得する。

必要なライブラリは、jquery.jsmoment.jslivestamp.jsの3つ。


application.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/livestamp/1.1.0/livestamp.js"></script>

Memo:記載する順番に注意!

moment.jsはjquery.jsに依存し、livestamp.jsはmoment.jsに依存しているので上記の順番で記載しないとエラーが出る。


2.投稿表示画面の編集

経過時間を表示したい場所に、以下を追記する。

data-livestamp=""に投稿時間を取得すれば、現在時刻から何分前に投稿されたかを計算してくれる。


index.html.erb

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


以上


感想

非常に簡単にリアルタイムの表示を実装することができた。

ただ、時間を表示するだけでなく、1分以内なら"a few seconds ago"と表示するなど凝った作りになっているのもすごい。


追記!!!(iosで時間が表示されない問題について)

この機能を実装して友人に自慢したら、iosだと時間が表示されない問題が発覚した。(私はandroidユーザーなので気が付かなかった。)

iphoneでもwebアプリが使えるようにchromeのデベロッパーツールでプレビューしているが、それは仮想的に画面サイズを変えているだけなので、実際の挙動とは異なることを痛感した。

いろいろ試した結果、解決策が見つかったので追記します。


解決法

問題の原因はDATEのデータのフォーマットがrailsのデフォルトのフォーマットではiosが対応していていないことであった。

railsのデフォルトでは2018-01-16 14:09:45 UTCというフォーマットで日付が「-」(ハイフン)で区切られている。しかし、iosでは-での区切りに対応していなく「/」で区切るフォーマットに変換しなくてはいけない。

そこで、上記のコードで投稿時間を取得していたpost.created_atに変換するコードを追記し、post.updated_at.strftime("%Y/%m/%d %H:%M %Z")にすれば、正常に表示されるようになった。