ツイート関連のちょっとしたJavaScriptメモ

Twitterの情報を取得する簡単なOperaの拡張機能を作ってるところですが、JavaScriptのメモを。

ツイート時刻

JavaScriptでhttps://search.twitter.com/search.json?q=hogehoge (※API1.0) などと叩いてやるとhogehogeの検索結果と共に、
Tue, 28 May 2013 12:04:35 +0000
というようなツイートされた時刻を取得できるわけですが、タイムゾーンが+0000なので、日本時間ではありません。さて、これをどうやって変換してやればよいものか....
と思ってましたが、大して思い悩むほどのことでもありませんでした。

var date = new Date(Date.parse("Tue, 28 May 2013 12:04:35 +0000"));

これで日付オブジェクトになります。あとは、下記を参照しながら煮るなり焼くなり...

・日付（Date）
http://www.tohoho-web.com/js/date.htm

表示に際して、Twitterっぽい表示の時刻にしてみたいと思います。「～時間前」のような相対表記は面倒なので、絶対表記にしつつ、同日の場合は、西暦と月日を省くような。

<script>
function parseTwitterDate(stamp) {
    var str_date = "";
    var twi_time = new Date(Date.parse(stamp));
    var today = new Date();

    if(twi_time.getYear() != today.getYear()) {
        // 年が違えば年月日が必要
        str_date = twi_time.getFullYear() + "/"
                + zerofill(twi_time.getMonth() + 1)
                + "/"
                + zerofill(twi_time.getDate())
                + " ";
    }else if(twi_time.getDate() != today.getDate()) {
        // 日付が異なれば、月日が必要
        str_date += zerofill(twi_time.getMonth() + 1)
                + "/"
                + zerofill(twi_time.getDate())
                + " ";
    }

    var min = twi_time.getMinutes();

    return str_date + twi_time.getHours() + ":" + zerofill(min);
}

function zerofill(value) {
    if(value < 10) {
        value = "0" + value;
    }
    return value;
}
alert(parseTwitterDate("Tue, 28 May 2013 12:04:35 +0000"));
</script>

こんな感じ。
実行すると、執筆時（2013/05/28）では、21:04と表示されます。日付が変れば月日が付き、年が変れば西暦も表示されるようになるはずです。

ついでに、細々としたのを。

マウスオーバーでアイコンの差し替え

<img name="usericon" src="icon.png" onMouseOver="changeSettingIcon();" onMouseOut="changeOriginalIcon();"/>
<script>
function changeSettingIcon() {
document.usericon.src="settingIcon.png";
}
function changeOriginalIcon() {
document.usericon.src = "icon.png";
}
</script>

IMGタグにonMouseOverイベントとonMouseOutイベントでアイコンを切り替える関数を呼んでるだけです。CSSでもできるようですが、たしか背景を変更みたいな感じだったような。

画像を角丸に(CSS)

.icon img{
border-radius: 6px 6px 6px 6px;
}

追記：2013/06/20

Operaのオレオレ拡張機能をそろそろリリースするべく、Twitter API1.1対応をやってますが、

・Twitter APIと開発者規約変更のインパクトまとめ：結局、Twitter API 1.1で何が変わる？ 5つのポイント - ＠IT
http://www.atmarkit.co.jp/ait/articles/1209/26/news120.html
>ツイートのタイムスタンプが24時間以内であれば相対時刻で表示すること

風の噂で何となく知ってましたが、やりたくないため目を背けてた時間の相対表記。上記サンプルだと絶対表記なので、一応追加コード。

var relative_time = Math.floor((today.getTime() - twi_time.getTime())/1000);

/**
 * 相対表記
 */
if(relative_time < 60) {
    return relative_time + "秒";
}
else if(60 <= relative_time && relative_time < (60*60)){
    return Math.floor(relative_time/60) + "分";
}
else if((60*60) <= relative_time && relative_time < (60*60*24)) {
    return Math.floor(relative_time/(60 * 60)) + "時間";
}

参考：Twitter相対時間表示 | マイヤーの開発ブログ

PR:Effective JavaScript JavaScriptを使うときに知っておきたい68の冴えたやり方
PR:作りながら覚えるHTML5+JavaScriptプログラミング

takaiwa.net

このブログを検索