• このエントリーをはてなブックマークに追加
ついともにた ver. 0.1.0..

はじめに

Twitter でのお友達 (今は following かな?) のつぶやきを一覧するアプリ 「ついともにた」 の新バージョンを公開しました.

twitomonitor [ついともにた]

背景

Kanasan.JS JavaScript第5版読書会 #2 の LT でこのアプリについて発表させていただいた ことで,モチベーションがグッと上がった気がします.

そしてもうひとつ.

akiyan.com の中の人 が 「つぶやき一覧」 系のサービスを公開されたことですね.この一件がかなり大きいかも.

変更点

ver. 0.1.0 における主な変更点は次のとおりです.

  • ログインの単純化.
  • 「お友達リスト」 をアイコン表示に.
  • 「モニタ」に移動機能を追加.
  • JavaScript による実装部分を jQuery ベースに移行.
  • それに伴うHTMLの再構成.
  • ロゴ.

変更点についての簡単な解説

ログインの単純化
ワンクリックでログイン可能に.

以前から Twitter Reader のログイン方法をステキに感じていたので,同様に,ワンクリックでログインできるようにしてみました.

これには,最近ようやくわかってきた JSONP な手法を使っています.流れとしては次のような感じですかね.

  1. 「ログイン」ボタンをクリックする.
  2. <script src="http://twitter.com/statuses/friends.json?callback=hogehoge"></script> を生成する.
  3. ↑ のソースは hogehoge( json ); といったものになる.
  4. ログイン後の処理をあらかじめ定義した関数 hogehoge が実行される.

なお,事前に Twitter にログインしていない場合には,2.の段階で認証のダイアログが表示されるかと思います.Twitter で利用しているニックネームとパスワードを入力すればOKです.(一度済ませたら,ブラウザを閉じるまで(?)は認証不要です.)

「お友達リスト」 をアイコン表示に
「お友達リスト」 をアイコン表示化.

テキストよりもアイコンでの方が探しやすいかな?ということで.省スペースにもなりましたしね.

アイコンをマウスオーバーすると,リスト上部にそのユーザのニックネームが表示されます.また,クリックでそのユーザの 「モニタ」 の表示・非表示を切り換えられます.

「モニタ」に移動機能を追加
「モニタ」 に移動機能を追加.

「モニタ」 右上部の 「←」「→」 をクリックすると,それぞれ左隣・右隣の 「モニタ」 との位置が入れ替わります.

JavaScript による実装部分を jQuery ベースに移行,それに伴うHTMLの再構成

DOM 操作やイベント処理,簡単なエフェクトをすばやく記述できていい感じです.書いてて楽しいですね,ホント.

ロゴ
ロゴ.

Twitter っぽいと言われている Pico-alphabet を使いました.(via:twitter のロゴに似ているフリーフォント「Pico-alphabet」 ::: creazy photograph. )

おわりに

さっそくアプリを使いながら本エントリを書いてますが,さっそくバグが見つかりました>< 自動 (手動でも) 更新後の 「モニタ」 の時間表示がヘンになってますね.今後の最初の課題...と.

あと,IE (6 だけ?)で動かない,と言う不具合についてだけは,しばらくの間スルーしますw

参考

Twitter!―Twitter APIガイドブック
以前の ついったー名古屋 味仙オフ にて tsupo さん よりいただいた本です.Twitter API を利用して得られるJSONデータのフォーマット関連において特に参考になりました.

Main Page – jQuery JavaScript Library
jQuery に関するドキュメントです.
クイックリファレンス 第5版―JavaScript1.5対応
文法や仕様については 本家 に任せるとして,各種オブジェクトのメソッド,それらの動作について素早く知りたいときに重宝します.