TwitterのAPIから取得した日付のフォーマットを整えたよ

JuitterというjQueryのプラグインを使って、Twitterのタイムラインをサイトに表示させた時に、日付のフォーマット(タイムゾーン)が気に入らなかったので直した時の記録です。
Juitterに限らず、外部サイトからのフィードなどで、取得先のフォーマットを変えることができない時にも応用できますよ。

Juitterを入れてみたら、なんだか日付がおかしいことに気づいた(´・ω・`)

あわゆきのβ版のホームでは、JuitterでTwitterの自分のタイムライン@awayukiのタイムラインを表示させています。
JuitterはjQueryのプラグインで、簡単なカスタマイズでTwitterのタイムラインを自分の好きな形で設置できる優れもの。そんな噂を聞きつけてここぞとばかりに導入してみたのですが、実際に動かしてみて、時間がズレていることに気づきました。

Juitterでの時間表示

Fri, 28 Jan 2011 05:35:16 +0000

"+0000"...すなわち世界標準時です。日本の標準時は+0900なので、これだと日時自体が日本と9時間ずれているということになります。
何でこうなるんだろうと調べてみたところ、TwitterのAPIがこのタイムゾーンで時間を出しているのですね。Juitterはそれを素直に表示させているだけのようです。しかし、このままではちょっと分かりづらいので、自分で直すことにしたのでした。

JavaScriptのコアに、日時をコントロールする関数があります

今回の場合、日付のフォーマットがきちんとしているので(RFC2822)、コア JavaScriptでタイムゾーンや形式を変換します。

タイムゾーンは閲覧する人の現地時間に対応させ、日付の形式をYYYY/M/D HH:mm とした場合、以下のようになります。

var date = new Date("Fri, 28 Jan 2011 05:35:16 +0000");
return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate()+" "+date.getHours()+":"+date.getMinutes();

説明

日付を扱う下準備として、まずnew Date()という構文でDateオブジェクトを生成します。その後、諸々の関数でオブジェクトを好きな形に変更します。
今回使った関数は以下の5つです。

getFullYear()
現地時間におけるDateオブジェクトの年を4桁の数字で返す
getMonth()
現地時間におけるDateオブジェクトの月フィールドを返す(配列的な数字で返ってくるので0始まり)
getDate()
現地時間におけるDateオブジェクトの日にちを返す
getHours()
現地時間におけるDateオブジェクトの時間フィールドを返す
getMinutes()
現地時間におけるDateオブジェクトの分フィールドを返す

現地時間というのはJavaScriptを実行するところの時間(タイムゾーン)、すなわち見ている人の端末のタイムゾーン設定に従います。
日本で見ている人であればおおむねタイムゾーン設定は日本(+0900)でしょうから、これで日本の時間にあわせて表示される、ということになります。

以上が、日時の表示を変更する基本です。
JavaScriptでDateオブジェクトを扱うメソッドについてはこのほかにもたくさんあるので、気になることがあったらリファレンスなどで調べてみるとよいと思います。

Juitterに組み込みます。

jquery.juitter.jsを以下のように修正します。

1: 日付の表記を変更する関数を作る

189行目の"}"の後に","(半角カンマ)を追加、189行目と190行目の間に、赤字の部分を追加します。

    temporizador: function(){
        // live mode timer
        running=true;
        aTim = timer.split("-");
        if(aTim[0]=="live" && aTim[1].length>0){
        tempo = aTim[1]*1000;
        setTimeout("\$.Juitter.update()",tempo);
        }
    },//←半角カンマ追加
    //↓↓追加ここから
    convertDateString: function(dateString){
        var date = new Date(dateString);
        return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate()+" "+date.getHours()+":"+date.getMinutes();
    }
    //↑↑追加ここまで
};

2: 日付を表示させるところで関数を呼び出して変換

124,125行目で日付を取得して表示させるあたりのことが書いてあるので、そこに1で定義した関数を組み込みます。
"item.created_at" と書いてあるところがそれなので、これを "$.Juitter.convertDateString(item.created_at)" に修正します。

if(fromID=="image") mHTML="<a href='http://www.twitter.com/"+item.from_user+"'><img src='"+item.profile_image_url+"' alt='"+item.from_user+"' class='juitterAvatar' /></a> "+$.Juitter.textFormat(tweet)+" -| <span class='time'>"+$.Juitter.convertDateString(item.created_at)+"</span> |- <a href='" + link + "' class='JRM' "+openLink+">"+readMore+"</a>";
else mHTML="<a href='http://www.twitter.com/"+item.from_user+"'>@"+item.from_user+":</a> "+$.Juitter.textFormat(tweet)+" -| <span class='time'>"+$.Juitter.convertDateString(item.created_at)+"</span> |-  <a href='" + link + "' "+openLink+">"+readMore+"</a>";

これで完成。下記のリンクで、実際のデモを確認できます。

できたできた

...ということで、jQueryのプラグインの中に関数を足すなどしれっとかましているようですが、もちろんまだ独りでは出来るはずもなく。今回は@yuzy76さんにJavaScriptのコアについての基本と、これをJuitterの中に入れ込む方法をレクチャーしてもらった上でできるようになったのでした。ありがとうございます。
いつか自分でもいろいろできるようになりたいと思いながら、サイの本を心のバイブルに据えて、あわゆきは進みます。

blog comments powered by Disqus

アバウト ひきだし

日々のお仕事で覚えたことやら勉強したことやらをきちんとためていく(ことができたらいいなと願う)ブログです。

カテゴリーズ