みんなの最新updateを一望できる「twitter100」をリリースしました

twitter100とは

» http://twitter100.com/

twitterを使っていて以下のように思ったので、作ってみました。

• 「大量に発言する人がいて、Recentがその人で埋まってしまう」
• 「そもそもfollowersが多すぎて、みんなのupdateを追いかけきれない」
• 「追いかけるんじゃなくて、一発でみんなの最新updateを一望できたらいいのに」

twitter100の使い方

1. twitter100のトップページから自分のidを入力し、「100」ボタンを押します。
2. しばらくすると以下のように最大100人分のfollowerとupdate内容が最新順に並んで表示されます。

twitter100の機能

自動更新機能

Twitter100には自動更新機能がついています。更新間隔は「3 min (3分)」「10 min (10分)」「30 min (30分)」を設定できます。

手動更新機能

id入力後の画面上部の「Refresh」ボタンを押すと、最新の状態を取得できます。ただし、TwitterのAPIの使用は1時間に70回までに制限されているので、頻繁に取得すると制限にかかってしまうので普段は自動更新で使用してください。制限にかかってしまった場合は延々と右上に「Loading...」が表示されます。

動作環境

動作確認した環境は以下の通りです。

技術的な話

twitter API

twitterの公開APIには、指定のidのfollower100人のupdateを受信できるAPI(xml, json, jsonp)があります。このAPIは認証が不要です。Twitter100ではこのAPI(jsonp)を使い、以下の手順で画面を構築します。

1. ブラウザからtwitterにアクセスしてデータを取得(callback)する。
2. twitter100のサーバーにJSONをPOSTしてレンダリングされたHTMLを受け取る。
3. ブラウザに貼り付ける。

わざわざブラウザにjsonpさせているのはtwitterのAPIには利用制限があって、APIの呼び出しは1時間に70回までに制限されています。（例外あり）そのため、twitter100のサーバーから通信していると同時使用ユーザーが増えたときに簡単に利用制限に引っかかってしまうおそれがあるので、ユーザーの回線からtwitter APIを呼び出すようにしています。

また、レンダリングについては例外としてSafariだけはtwitter100のサーバーに送信せずJavaScriptだけでレンダリングしています。XMLHttpRequestがうまく動作しないので暫定措置としてです。原因は切り分けしきれていないのですが、XMLHttpRequestのPOSTで大きいデータ送信ができないかもしれない...という感じです。動作的に問題は無いのですが、クライアント側のCPU負担が重いのが難点です。

ちなみに100件なのは、APIの仕様上、上限が100件だからです。これ以上厳しくなりませんように...。

なお、APIの日本語ドキュメントとしてtsupo氏の[観] Twitter API 仕様書 (勝手に日本語訳シリーズ)を参考にさせていただきました。

時差をJavaScriptで調整

DateオブジェクトのgetTimezoneOffsetメソッドで標準時刻との時差が分単位で取得できるので、それを利用して日付の表示を調整しています。国際化の一環です。

var timezone_offset = -new Number(new Date().getTimezoneOffset());

Datejsで日付をパース

twitter APIから返される日付の文字列をJavaScriptでパースするために、Datejsというライブラリを使用しました。

Twitter100内でのDatejs利用サンプルコードです。

var m = user_json[0]['created_at'].toString().match(/([^ ]+) ([^ ]+) ([^ ]+) ([^ ]+) ([^ ]+) ([^ ]+)/, '') ;
var date_forparse = m[1] + ', ' + m[3] + ' ' + m[2] + ' ' + m[6] + ' ' + m[4];
var user_date = Date.parse(date_forparse).addMinutes(timezone_offset);
$('#user_update').html(user_json[0]['text'] + ' at ' + user_date.toString('yyyy-MM-dd HH:mm:ss') + "");

Date.parse(date_forparse)
や
user_date.toString('yyyy-MM-dd HH:mm:ss')
などがDatejsの機能ですね。addMinutesメソッドなんてのもあります。詳しくはDatejsのドキュメントをどうぞ。

ご協力いただいた方々

• デザインを手伝っていただいたけんすう。
• 英語を直していただいた田口さん。

ありがとうございました！

» http://twitter100.com/