Kanasan.JS Jetpack ワークショップに参加した

12/06(日) Kanasan.JS Jetpack ワークショップに参加した(告知ページ)。

Jetpack というのは Firefox の拡張機能で、そいつをインストールすると簡単なアドオンみたいなのを作成、実行したりできるようになる。この「簡単なアドオンみたいなもの」のことを Feature と呼ぶ。

今回は実際にコーディングを行うとのこと。Kanasan.JS 初の試みということで楽しみにしながら向かった。

Jetpack 入門

まずは Jetpack Feature の基本的な作り方をおさえようということで、入門用のスライドでお勉強。僕が予習してきたので発表した。

Jetpack Workshop

View more documents from H M.

とりあえずこれで基本は押さえれたと思う。そのスライドで出てきたページへのリンクは以下。

英語ページ

日本語ページ

あとは僕の書いた入門記事。

コーディング開始

だいたい分かってきたので、参考になるページを読みながらコーディング開始。僕は prototechno さんとペアになって、Slidebar で Twitter 検索できる Feature を作った。

jetpack.future.import("slideBar");

jetpack.slideBar.append({
  html: "<h1>Twitter List</h1>" +
        "keyword : <input type='text' id='keyword' value=''></input>" +
        "<input type='button' value='search' id='searchbutton'></input>" +
        "<ul id='userlist'></ul>",
  width: 320,
  onReady: function(s) {
    $(s.contentDocument).find("#searchbutton").click(
      function() {
        var keyword = $(s.contentDocument).find("#keyword").val();

        $.getJSON("http://search.twitter.com/search.json",
          {q: keyword, locale: "ja"},
          function(data) {
            $(s.contentDocument).find("#userlist").empty();

            for (var i = 0; i < data.results.length; i++) {
              var username = data.results[i].from_user;
              var elem = $("<li><a target='_blank' href='http://twitter.com/" + username + "'>" +
                username + "</a></li", s.contentDocument);
              $(s.contentDocument).find("#userlist").append(elem)
            }
          }
        );

      }
    );

  }
});

かっこが多い。

もうちょっと修正

せっかくなので、作った Feature を家に帰ってから修正した。修正したとこは以下。

テキストボックスで Enter を押したら検索できる
Jetpack の Twitter API があるので、そいつを使う
検索リクエストのオプションを変更
個別のつぶやきにリンクを張る
ユーザ名とかにあやしげな文字がきても大丈夫なように、出力する文字をエスケープする

jetpack.future.import("slideBar");

jetpack.slideBar.append({
  icon: "http://a1.twimg.com/a/1260817727/images/favicon.ico",
  html: "<h1>Twitter List</h1>" +
        "<form>" +
          "keyword : <input type='text' id='keyword' value=''></input>" +
          "<input type='submit' value='search' id='searchbutton'></input>" +
        "</form>" +
        "<ul id='userlist'></ul>",

  width: 320,

  onSelect: function(s) {
    s.slide(320, {persist: true});
  },

  onReady: function(s) {
    var submitFunction = function() {
      var keyword = $(s.contentDocument).find("#keyword").val();

      var searchSuccess = function(data, status) {
        $(s.contentDocument).find("#userlist").empty();

        for (var i = 0; i < data.results.length; i++) {
          var username = data.results[i].from_user;
          var id = data.results[i].id;
          var tweetParmalink = "http://twitter.com/" + username + "/status/" + id;

          var a = $("<a>", s.contentDocument).
            attr({href: encodeURI(tweetParmalink), target: "_blank"}).text(username);
          var elem = $("<li>", s.contentDocument).append(a);

          $(s.contentDocument).find("#userlist").append(elem);
        }
      };

      var searchError = function(xhr, errMsg, errObj) {
        console.error("twitterlist.js: search error: " + xhr.responseText);
      };

      jetpack.lib.twitter.search({
        q: keyword,
        lang: "ja",
        locale: "ja",
        rpp: 25,
        success: searchSuccess,
        error: searchError
      });

      // デフォルトの動作を行わない
      return false;
    };

    $(s.contentDocument).find("form").submit(submitFunction);
  }
});

gist にも張った。

感想

というわけでまとめ。

Jetpack Feature は確かに作りやすい。でも、微妙に癖がある。最初のとっかかりとか UI のがわを作るとこはわかりにくいし、jQuery で書くコードも微妙にちがうとこがある。でも、そこさえクリアしてしまえばすらすらかけるようになると思う。かなり楽しいです。

世の中には山のように拡張機能があふれてて、一見するとわざわざ自分で書く必要はないように思える。でも、既存の拡張でもなんかこう、「かゆいところに手が届かない」ことがある。そんなとき Jetpack を活用すればもっと Web を楽しめるようになると思った。