読者です 読者をやめる 読者になる 読者になる

【jQuery】twitterのように「分前」などと表示してくれるライブラリ

jQuery javascript

最近プログラムを書くようなアルバイトを始めて、家ではめっきりあnげふん生活している海山ですこんばんは。

時刻を登録して、表示しようとしたときの話です。
タイムゾーンが違う地域で登録されたりすると、表示がおかしくなってしまうとの事だったので、「○分前」などのtwitterのような表記にしたいという話が有りました。

そこで見つけたのがこのライブラリ、timeagoです。
http://timeago.yarp.com/
以下のように表示してくれます

three days ago

使い方

まず、timeagoをダウンロード

http://timeago.yarp.com/

2つのjsファイルを指定します。
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>
記述例
jQuery.timeago(new Date()); //"less than a minute ago"

このようなようにして、timeagoに値を渡すと、コメントアウトしてあるような結果が返ってきます。
他の例としては

jQuery.timeago("2010-11-12"); //"about 2 hours ago"
jQuery.timeago("2010-11-12 0:00"); //"about 2 hours ago"
jQuery.timeago("2010-11-11 0:00"); //"a day ago"
jQuery.timeago("2010-11-11 0:00:00.99"); //"a day ago"

このような形です。
小数点以下を入れても、ちゃんと判定してくれたりするので、とても良さそうです。
失敗すると、NaNが返ってきています。

jQuery.timeago("2010-11-11 0:00.99"); //"NaN years ago"

以下のサイトでもtimeagoに渡す情報について書かれています
http://webdesignerstips.blog73.fc2.com/blog-entry-10.html

2010/11/18:追記

2010-11-12 0:00:00Z+0

というように、タイムゾーンの指定をちゃんとしておかないと、PC側のタイムゾーンが利用される+サーバ側は世界標準時という事でズレが生じてしまいます!
注意!

日本語表示にする

コメント参照です!
以下に載せたソースよりも、とてもいいものがあります!
検索をかけましたが、特に見つからなかったので、無理やり簡単な物を書きました。

function change_japanese(time){
  var japanese = time.replace(" a ","1");  
  japanese = japanese.replace("less than","");  
  japanese = japanese.replace("minute","分");  
  japanese = japanese.replace("hour","時間");  
  japanese = japanese.replace("day","日");  
  japanese = japanese.replace("ago","前");
  japanese = japanese.replace("s","");

  japanese = japanese.replace(/\s/g,"");
  return japanese;
}

これで、change_japanese(jQuery.timeago("時間"));などとすると、日本語表示にしたバージョンを返してくれます。
less thanの部分は訳しても、微妙だと思ったので、あえて""に置き換えて、消しています。

間違っているところなどあったら、こっそり教えていただけるとありがたいです…