時間の差を表示させるJavascripライブラリ「timeago.js」



現時刻からの時間差を表示させたい時に便利なjavascriptライブラリ「timeago.js」の紹介です。

ブログやニュース系のサイト、Twitterなどで「◯分前」「◯時間前」というような、投稿時間からの経過時間が表示される項目は よく見かけます。

テンプレートエンジンを使って、サーバー側で投稿時間からの経過を表示させることは、そこまで難しいことではありませんが、TwitterやFacebookのタイムラインように、リアルタイムで経過時間を表示させるのは少し手間がかかります。

Twitter上での投稿時間 -> 経過時間の例

そんな経過時間を簡単に計算・表示出来るライブラリが「timeago.js」です。

timeago.jsを使うと、ブラウザ上で「"投稿時間 -> 経過時刻" をリアルタイムに更新させる」なんてことが簡単に出来るようになります!

timeago.jsは、現在30以上の言語に対応しています


timeago.jsの入手 

timeagoの入手はこちらのGitHubのレポジトリから直接ダウンロードする方法と、"git", "npm"に対応しています。

# gitを使って入手する場合
git clone https://github.com/hustcc/timeago.js.git

# npmを使って入手する場合
npm install timeago.js --save


timeago.jsの使いかた

ブラウザ上で使う場合

timeago.jsをブラウザで使用する場合「"timeago"をインスタンス化 -> 言語をセット(デフォルトでは英語) -> 紐付けたい要素 の指定」の3ステップで簡単に使うことが出来ます。

<!-- datetime内の時間がレンダリングされます -->
<div class="time" datetime="2016-10-01 05:30:00"></div>

<!-- ライブラリの読み込み -->
<script src="/js/timeago.js/dist/timeago.js"></script>
<script src="/js/timeago.js/dist/timeago.locales.min.js"></script>

<script type="text/javascript">
    var timeAgo = new timeago();
    
    // 日本語にセット
    timeAgo.setLocale('ja')
    // class='time'に紐付け
    timeAgo.render(document.querySelectorAll('.time'));
    
    // id='yourID'をレンダリングする場合
    // timeAgo.render(document.getElementById('yourID'));
    //
    // jqueryオブジェクトでも可能
    // timeAgo.render($('yourID'));
    
    // リアルタイム更新をストップする場合
    // timeagoInstance.cancel();
</script>


また、最近よくるある babelやwebpack等を使ってES6で記述し、モジュールをインポートして使う方法にも対応しています!

// es6形式で書く場合
import timeago from 'timeago.js';
import lang from 'timeago.js/locales/ja';

timeago.register('ja', lang);

var timeAgo = new timeago();
timeAgo.setLocale('ja');

timeAgo.render(document.querySelectorAll('.time'));
// //リアルタイム更新を止める
// timeagoInstance.cancel();


node.js上で使う場合

timeago.jsは他ライブラリに依存していないので、node.js上でも問題なく使用することが可能です。
ブラウザ上じゃないので、リアルタイムで経過時刻の更新するこは出来ませんが、よくあるタイムライブラリとして、nunjucksやejs上でも簡単に使えそうです。

const timeAgo = require("timeago.js");
const lang = require("timeago.js/locales/ja")

// *このサンプルは adonis.jsのコントローラを例に使っています
* timeago(request, response) {
    // 日本語を登録
    timeAgo.register('jp', lang);

    var timeago = new timeAgo();
    
    // 言語を日本語にセット
    timeago.setLocale('jp')

    yield response.sendView('design.timeago', {
        title: 'timeagoのデモ',
        timeAgo: timeago // viewに'timeAgo'という変数名で渡す
    });
}

// .nunjucksで使った例
<h4>{{ timeAgo.format('2016-10-01') }}</h4>


Summary

以上がtimeago.jsの紹介でした。

他ライブラリのmoment.jsやjquery-timeagoでも同等の機能を使うことは可能ですが、
timeago.jsはtimediff機能に特化しているので、軽量に仕上がっています。

多言語化にも対応しており、色々なシーンで活用できそうなライブラリなので、気になった人はゼヒ×2チェックしてみてください!

GitHub: hustcc/timeago.js

 

See the Pen WGkpBN by cupof (@cupof-github) on CodePen.

この記事のカテゴリ
プログラミング

この記事に付けられているタグ



その他の運営サービス

最新の記事