復興ログ

未来の被災地にいるアナタと数十年後のキミたちへ。すべての記録を残します。

Twitter Image View

twitterのhomeTimeLineに表示されるツイートから画像だけを抜き出して一覧表示するwebアプリを作ってみました。

Twitter Image View

使い方

1.ログイン

Connect with Twitterをクリックしてログイン
f:id:hebita164:20100921004044p:image

2.認証

別ウィンドウが立ち上がり、Anywhereの認証を行います
f:id:hebita164:20100921004400p:image:w258:h281
Connectをクリック

3.元のウィンドウに戻ります

認証を行い、元のウィンドウに戻ったときにhomeTimeLineを読み込みに行きます。

iPhoneiPadSafariはここで落ちます笑
認証は完了しているので、ここでもう一度Safariを立ち上げてください。たぶん、Anywhereのせい・・

4.タイムラインの表示

直近、1,000件ぐらいのタイムラインから画像を拾ってきます。

f:id:hebita164:20100921004916p:image

対応しているイメージサービスは

  • twitpic
  • yfrog
  • plixi

です。
※10分に、一回自動でリロードをします。
※時々、Anywhereの呼び出しに失敗することがあるので、そのときにはページのリロードをしてください。

5. ログアウト

ログアウトする際には、アイコンの右隣の[ ログアウト ]をクリックするだけです。

利用シーン

以下を想定して作りました。
朝に会社に行ってiPadTwitter Image Viewを開いてデスクに置いておく。
10分に一回タイムラインの最新画像が表示されて結構、楽しいかも。(楽しくないかも・・・)
とういか、個人的にこれがやりたかったので作りました笑
なので、全部JSでやる必要がありました。
サーバがJavascriptを朝に一回吐き出せば、あとは一日ブラウザが考えてくれるだけなので、サーバに優しいですよね。

技術的メモ

技術的にはtwitterのAnywhereを使用したwebアプリになります。
サーバー側のプログラムは一切書いていません。
つまり、Javascriptだけでtwitterクライアントができちゃうわけです・・・

おそろしいわ。。

今回使用したAnywhereはchirp_previewです。

ということで、
ポイントの記述はコレ!

twitter.User.current().homeTimeline({count:tweetCount, rpp:i, max_id:jmax_id}).each(function(status) {

});

twitterAPIを使用している人には非常に馴染みのあるリクエストの投げ方なのですが、これtwitterのドキュメントに書いていないんですよ笑
こちらを参照 → WiseJive: Twitter @Anywhere Javascript API exposed

homeTimelineメソッドにはこのように書くことができます。

{count:200, rpp:3, since_id:171981, max_id:181981}
  • count:tweetを引っ張る件数
  • rpp:何ページ目か
  • since_id:最小tweetのid
  • max_id:最大tweetのid

困ったことに、count:200を指定しても200件がきちんと返ってこない笑
デベロッパー向けのバージョンのAPIなので、仕方がありませんね。。

非同期によるリクエストはユーザの体感利用速度を上げることができますが、プログラムを組む際には一工夫必要になりますね。。

それと、クライアント側で処理をさせることで、サーバの負荷を気にしなくてすむようになります。
それが最大の魅力だと思います。Javascriptを吐き出して、あとはブラウザに全て任せる。クライアントパワーです!

ただ、今回作ってみて、まだデベロッパー版のAPIでは作りこみが難しいのかなーと感じました。

非同期の処理って難しいなぁ。。