Twitterの情報を取得する簡単なOperaの拡張機能を作ってるところですが、JavaScriptのメモを。
Tue, 28 May 2013 12:04:35 +0000
というようなツイートされた時刻を取得できるわけですが、タイムゾーンが+0000なので、日本時間ではありません。さて、これをどうやって変換してやればよいものか....
と思ってましたが、大して思い悩むほどのことでもありませんでした。
var date = new Date(Date.parse("Tue, 28 May 2013 12:04:35 +0000"));
これで日付オブジェクトになります。あとは、下記を参照しながら煮るなり焼くなり...
こんな感じ。
実行すると、執筆時(2013/05/28)では、21:04と表示されます。日付が変れば月日が付き、年が変れば西暦も表示されるようになるはずです。
ついでに、細々としたのを。
IMGタグにonMouseOverイベントとonMouseOutイベントでアイコンを切り替える関数を呼んでるだけです。CSSでもできるようですが、たしか背景を変更みたいな感じだったような。
参考:Twitter相対時間表示 | マイヤーの開発ブログ
PR:Effective JavaScript JavaScriptを使うときに知っておきたい68の冴えたやり方
PR:作りながら覚えるHTML5+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)表示に際して、Twitterっぽい表示の時刻にしてみたいと思います。「~時間前」のような相対表記は面倒なので、絶対表記にしつつ、同日の場合は、西暦と月日を省くような。
http://www.tohoho-web.com/js/date.htm
<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プログラミング
コメント
コメントを投稿