ubiquityで、twitter機能を網羅させるぞ１

ubiquity

EeePC s101を買ったので、ubiquityでいろいろしたくて、twitter apiを使って、作ってみました。

以下のページ等を参考にしました。
■参考ページ
https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.1_Author_Tutorial
Labs/Ubiquity/Ubiquity 0.1 Author Tutorial

http://apiwiki.twitter.com/
Twitter Api Wiki

http://www.itmedia.co.jp/enterprise/articles/0808/31/news003_2.html
ブラウザの新境地？　Ubiquityが変える衝撃のブラウザ体験 (2/2)

■ubiquityのインストール
http://labs.mozilla.com/2008/08/introducing-ubiquity/
Get Involvedの下にある"Download Ubiquity 0.1"をクリックする。

■twitter-pochiの登録
http://elazyrest.net/twitter-pochi/
http://elazyrest.net/ubiquity/twitter.html
http://gist.github.com/32967

画面を開くと上部にsubscribeボタンが表示されるので、クリックする。

■使い方
１．firefox起動中に"Ctrl+Space"で、コンソールが起動
２．"twitter-pochi"と入力する
３．デフォルトでは、フレンドタイムラインが表示される。
４．twitterからベーシック認証が要求されるので、twitterid, passwordを入力する必要がある。
５．twitter-pochitにつづいて、以下のコマンドを入力する。

・list
フレンドタイムラインの取得

・@@
フレンドタイムラインの取得

・@ユーザ名
@指定したユーザのタイムラインの取得

・fav
お気に入り一覧の取得

・reply
自分宛のつぶやき一覧の取得

・following
自分がフォローしているユーザ一覧の取得

・follower
自分がフォローされているユーザ一覧の取得

・search 文字列
twitter検索

■ソース
ubiquityで、"command-editor"コマンドを利用して、テストを行う。
サンプルソースが表示されているので、わかりやすい。

previewで、プレビュー画面に表示する内容を実装する。
executeで、Enter押下時の処理を実装する。

特徴的には、jqueryが使えることと、CmdUtilsで、テンプレートを利用できることでしょうか。

CmdUtils.CreateCommand({
  icon: "http://twitter.com/favicon.ico",
  name: "twitter-pochi",
  homepage: "http://elazyrest.net/twitter-pochi/",
  author: {name: "kazkicks"},
  license: "GPL",
  description: "twitter",
  takes: {"'update','list','@@','@','fav','reply','following','follower','search', 'browse', 'source', 'rank'": noun_arb_text},
  preview: function(pblock, directObject){
    var status = directObject.text;
    var page = 1;
    var disp_num = 7;
    if(status.length < 1 || status == "list") {
      jQuery.get("http://twitter.com/statuses/friends_timeline.json", {count:disp_num, page:page}, parse_timeline, "json");
      return;
    }
    else if (status == "@@") {
      jQuery.get("http://twitter.com/statuses/user_timeline.json", {count:disp_num, page:page}, parse_timeline, "json");
      return;
    }
    else if (status.match(/^@(.+)/)) {
      var id = RegExp.$1;
      jQuery.get("http://twitter.com/statuses/user_timeline.json", {count:disp_num, page:page,id:id}, parse_timeline, "json");
      return;
    }
    else if (status == "fav") {
      jQuery.get("http://twitter.com/favorites.json", {page:page}, parse_timeline, "json");
      return;
    }
    else if (status == "reply") {
      jQuery.get("http://twitter.com/replies.json", {page:page}, parse_timeline, "json");
      return;
    }
    else if (status == "follower") {
      jQuery.get("http://twitter.com/statuses/followers.json", {page:page}, parse_users, "json");
      return;
    }
    else if (status == "following") {
      jQuery.get("http://twitter.com/statuses/friends.json", {page:page}, parse_users, "json");
      return;
    }
    else if (status.match(/^search\b(.+)/)) {
      var query = RegExp.$1;
      jQuery.get("http://search.twitter.com/search.json", {rpp:disp_num, page:page, q:query}, parse_result, "json");
    }
    function parse_timeline(data) {
      var prevTemplate = '<div style="font-size:11px">{for status in statuses}<div><table><tr><td><img src="${status.user.profile_image_url}" style="width:30px;height:30px"/></td><td><span style="color:#FFFF33"><a href="http://twitter.com/${status.user.screen_name}">${status.user.screen_name}</a></span><br/>${status.text}</td></tr></table></div>{/for}</div>';
      pblock.innerHTML = CmdUtils.renderTemplate(prevTemplate, {statuses:data.splice(0, disp_num)});
    }
    function parse_users(data) {
      var prevTemplate = '<div style="font-size:11px">{for user in users}<div><table><tr><td><img src="${user.profile_image_url}" style="width:30px;height:30px"/></td><td><span style="color:#FFFF33"><a href="http://twitter.com/${user.screen_name}">${user.screen_name}(${user.name})</a></span><br/>${user.description}</td></tr></table></div>{/for}</div>';
      pblock.innerHTML = CmdUtils.renderTemplate(prevTemplate, {users:data.splice(0, disp_num)});
    }
   
    function parse_result(data) {
      var prevTemplate = '<div style="font-size:11px">{for result in results}<div><table><tr><td><img src="${result.profile_image_url}" style="width:30px;height:30px"/></td><td><span style="color:#FFFF33"><a href="http://twitter.com/${result.from_user}">${result.from_user}</a></span><br/>${result.text}</td></tr></table></div>{/for}</div>';
      pblock.innerHTML = CmdUtils.renderTemplate(prevTemplate, data);
    }

  },
 
  execute: function(){
  }
});


次回以降の予定(未定)
・改ページ(ページ指定 or 前へ、次へ）
・投稿
・今見ているページの投稿
・APIが安定していれば、最新４００件中で、投稿数の多い順に並べる
・APIが安定していれば、最新４００件中で、人気クライアントの抽出
etc