JavaScript

拙作のツール、「Twitter Stream Viewer」や「Twitter Follow Manager（作成中）」で、Twitter API から複数ページを取得するロジックがあるんですが、そのロジックがスマートではないのでライブラリを作ってみました。
使ってみたら結構便利だったので公開してみます。

jsonPageLoader

使い方はこんな感じです。

var loader = new jsonPageLoader({
  url     : 'http://twitter.com/statuses/friends.json',
  start   : 1,
  end     : function(result) { return result.length > 0; },
  onStart : function(page) { alert(page + 'ページ目の取得開始'); },
  onEnd   : function(result, page) { alert(page + 'ページ目の取得完了'); },
  callback: function(results, start, end) { alert('全ページの取得完了'); }
});

オブジェクトを new してあげて、引数にハッシュ形式でオプションを渡します。
url にはベースとなる URL を指定します。
start には開始するページ番号を指定します。省略すれば 1 ページ目からになります。
end には終了するページ番号または関数を指定します。必須。
5 と指定すれば 5 ページ目まで取得して処理が終了します。
関数を指定した場合、各ページの取得完了時に結果を引数としてこの関数が呼び出されます。false が返されるまでページ番号を 1 ずつ増やしながら処理が続行されます。上の例の場合、取得結果が 0 件になったところで処理が終了します。
onStart, onEnd は各ページの処理開始・終了時に呼び出される関数を指定します。省略可。
callback は全ページの取得完了時に呼び出される関数を指定します。引数の results はページ毎の結果を格納した配列です。ページ番号と添字が一致しています。

ライブラリのソースは以下で。

Continue reading

最近 jQuery のプラグインを作っていて、DOM 要素毎にデータを一時的に保持できる機能を持ったメソッド jQuery.data() がかなり便利であることに気がつきました。

例として検索フォームなどでよく使われている、フォームの入力フィールドにあらかじめ説明を入れておき、フォーカス時に消すプラグイン（にするほどのものじゃないけど）のソースを以下に載せます。

(function($) {
  $.fn.previewInput = function(previewValue) {
    if((typeof previewValue != 'string') || (previewValue.length == 0)) return;

    return this.each(function() {
      if(this.value == undefined) return;

      // 元の文字色を保存しておく
      $.data(this, 'previewInput', $(this).css('color'));

      // call, focus, blur 時に文字色を変更する
      $(this).attr('value', previewValue)
      .css('color', '#999999')
      .blur(function() {
        if($(this).val().length == 0) {
          $(this).val(previewValue).css('color', '#999999');
        }
      }).focus(function() {
        if($(this).val() == previewValue) {
          $(this).val('').css('color', $.data(this, 'previewInput'));
        }
      });
    });
  };
})(jQuery);

そこで、この data() メソッドがどういう仕組みでデータを保存しているのか疑問に思ったので、Firebug で調べてみました。

DOM の該当要素に、jQuery オブジェクトの一意の名前である「”jQuery” + timestamp 値」のプロパティを作成し、そこに ID(uuid) がセットされています。
その ID と jQuery 内の配列 cache の添え字が紐付いており、データを設定 / 取得することができるようになっていることが分かりました。

紹介したプラグインもそうですが、イベント処理で変更前の状態を保持しておく場所等で有効活用できそうですね。

参考リンク

• jquery.jsを読み解く：第3回　jQueryライブラリ（470行目～769行目）｜gihyo.jp … 技術評論社
• jQuery.dataの使い方 : tech.kayac.com - KAYAC engineers’ blog
• jQueryのdata()を勉強したけど構造がイメージできずに撃沈気味… | THE HAM MEDIA

きっかけ

Twitter など字数制限があるサイトではよく使われている URL の短縮サービス。
フィッシング詐欺に使われることもあるそうなので注意が必要です。
でもいちいちリンクを踏むたびにプレビューするのも煩わしいと思ったので、短縮 URL を展開表示するグリモンを書いてみました。

今回、Long URL Please というところで TinyURL 等の代表的なものだけでなく、55 種類のサービスに対応した API を公開していたので、それを使わせていただきました。

なお、このグリモンは Firefox には対応していません（理由は後述）。対応しました。上記リンクからプラグインを入れると幸せになれると思います。
Safari で動作確認済。Opera でも多分動きます。Opera でも動作確認しました。oAutoPagerize 対応。

インストール

こちらからどうぞ。

Short URL Expander for Greasemonkey

ソース

// ==UserScript==
// @name           Short URL Expander
// @namespace      http://www.sukechan.net/
// @description    Expand shortened URLs.
// @include        *
// @version        1.1
// ==/UserScript==

(function() {
  var apiUrl = 'http://www.longurlplease.com/api/v1.1';
  var urls = new Array();
  var shortUrlsPattern = new RegExp("(^http(s?)://(adjix\.com|b23\.ru|bacn\.me|bit\.ly|bloat\.me|budurl\.com|cli\.gs|clipurl\.us|dwarfurl\.com|ff\.im|fff\.to|href\.in|idek\.net|is\.gd|korta\.nu|lin\.cr|ln\-s\.net|loopt\.us|merky\.de|moourl\.com|nanourl\.se|ow\.ly|peaurl\.com|ping\.fm|piurl\.com|pnt\.me|poprl\.com|reallytinyurl\.com|rubyurl\.com|short\.ie|short\.to|smallr\.com|sn\.vc|snipr\.com|snipurl\.com|snurl\.com|tiny\.cc|tinyurl\.com|tr\.im|tra\.kz|twurl\.cc|twurl\.nl|u\.mavrev\.com|ur1\.ca|url\.az|url\.ie|urlx\.ie|w34\.us|xrl\.us|yep\.it|zi\.ma|zurl\.ws)/[a-zA-Z0-9_-]*)|((^http(s?)://[a-zA-Z0-9_-]+\.notlong\.com)|(^http(s?)://[a-zA-Z0-9_-]+\.qlnk\.net)|(^http(s?)://chilp\.it/[?][a-zA-Z0-9_-]+))[/]?$");

  // JSONP Callback Function
  function createNamespace() {
    window.shortURLExpanderUserJs = {
      json_callback: function(r) {
        for(url in r) {
          for(var i = 0, l = this.items.length; i < l; i++) {
            var item = this.items[i];
            if(item.href == url) {
              item.href = r[url];
              if(r[url].length <= 40) {
                item.textContent = r[url];
              } else {
                item.textContent = r[url].substr(0, 30) + '...';
              }
            }
          }
        }
      },
      items: []
    };
  }

  var f = function() {
    var x = document.evaluate('//a', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for(var i = 0; i < x.snapshotLength; i++) {
      var url = x.snapshotItem(i).href;
      if(url.match(shortUrlsPattern)) {
        if((urls.length == 0) && (typeof GM_xmlhttpRequest == 'undefined')) {
          createNamespace();
        } else {
          var items = new Array();
        }
        urls.push(url);
        if(typeof GM_xmlhttpRequest == 'undefined') {
          shortURLExpanderUserJs.items.push(x.snapshotItem(i));
        } else {
          items.push(x.snapshotItem(i));
        }
      }
    }
    if(urls.length > 0) {
      var requestUrl = apiUrl + '?q=' + urls.join('&q=');
      if(typeof GM_xmlhttpRequest == 'undefined') {
        jsonp(requestUrl);
      } else {
        GM_xmlhttpRequest({
          method: 'GET',
          url: requestUrl,
          onload: function(x) {
            var r = eval('(' + x.responseText + ')');
            for(var url in r) {
              for(var i = 0, l = items.length; i < l; i++) {
                var item = items[i];
                if(item.href == url) {
                  item.href = r[url];
                  if(r[url].length <= 40) {
                    item.textContent = r[url];
                  } else {
                    item.textContent = r[url].substr(0, 30) + '...';
                  }
                }
              }
            }
          }
        });
      }
    }
  }
  function jsonp(url) {
    var s = document.createElement('script');
    s.src = url + '&callback=shortURLExpanderUserJs.json_callback';
    s.charset = 'UTF-8';
    document.body.appendChild(s);
  }

  f();
  addFilter(f);
  function addFilter(filter, i) {
    i = i || 4;
    if(window.AutoPagerize && window.AutoPagerize.addFilter) {
      window.AutoPagerize.addFilter(filter);
    } else if(i > 1) {
      setTimeout(arguments.callee, 1000, filter, i -1);
    }
  }
})();

Firefox に対応していない理由

このグリモンでは JSONP を使って API を実行しており、Callback 関数をグローバルに定義する必要がありました。
ただ、Firefox の Greasemonkey からグローバルの変数にアクセスする方法が無いらしいので、対応できませんでした＞＜。
Firefox はプラグインがあるので、まあ要らないんですけどね。

（追記@20090315）
version 1.1 で Firefox / Greasemonkey に対応しました。
それと Firefox / Greasemonkey の場合、グローバル変数には unsafeWindow を使えばアクセスできます。

とあるグリモンを作っていて、JSONP をサポートしている API にリクエストを投げて、Callback 関数で結果を受け取りたい。例えば以下のような URL。

http://example.com/api?data=hoge&callback=fuga

無名関数内でこの JSONP を呼び出しても fuga は当然実行されないので、グローバルにオブジェクトを 1 つ作り（名前空間的なものです）、その中に Callback 関数を定義してみました。
Safari ではちゃんとグローバルになるんですが、Firefox ではグローバルにならず。
原因が分からずいろいろ調べてみたところ、Greasemonkey として実行される場合、前後に (function() { ～ })(); が付くらしい（Safari では付かない）。

次に、Callback パラメータ内にイベントを作成して、Callback 時にイベントを発生させられないかと思って試してみましたが、こちらは Safari で結果を受け取る方法が分からず断念。

(function() {

  // Callback
  document.addEventListener("onJSONPLoad", function(request) {
    alert('callback');
  });

  // JSONP 実行
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.charset = 'UTF-8';
  s.src = 'http://example.com/api?data=hoge&callback=(function(result){var%20c=document.createEvent(%22HTMLEvents%22)%3bc.initEvent(%22onJSONPLoad%22,true,true)%3bdocument.dispatchEvent(c)%3b})';
  document.body.appendChild(s);
})();

仕方ないので、script タグを動的に生成して、グローバルに 1 つ名前空間を作り、その中に関数を定義。

(function() {

  // JSONP 実行
  var s = document.createElement('script');
  s.src = param.url + '&callback=my_ns.json_callback';
  s.charset = 'UTF-8';
  document.body.appendChild(s);

  // Callback
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.charset = 'UTF-8';
  var t = document.createTextNode("var my_ns = { callback: function(r) { alert('callback'); } }");
  s.appendChild(t);
  document.body.appendChild(s);
})();

とりあえずこれで動きますが、もっとスマートな方法ありそうですね・・・。
JavaScript に対する理解がまだまだ浅いことを実感しました＞＜

参考リンク

• Greasemonkeyで定義した関数をJSONPで呼び出したい - ロックスターになりたい
• JavaScriptの巧い書き方 - Archiva
• amachang - JavaScript 入門
• 関数、オブジェクト、クロージャ - RapidShare
• Greasemonkeyは(function(){\nと\n})()を付加しなくなる(という夢を見た) - 0x廃棄階層 - 統治局

先日 Twitter で

マク語が局所的に話題になっていたので、マク語に変換する bookmarklet を作りました。まだ数は少ないです。

マク語に変換するでよ

ソース

(function() {
  var s = {
    'です。':'でよ。',
    'ですよ。':'てすよ。',
    'ここ':'こつら',
    'こちら':'こつら',
    'ありがとう':'サンクス・ァロツト',
    'これ':'こり',
    'みなさん':'みんなさん',
    'して':'すて',
    'した':'すた',
    'くれた':'くりーた',
    'してる':'してーる',
    'だった':'だた',
    'やって':'ヤッて',
    'ちょっと':'ちょと',
    'ください':'くだせぃ',
    'まったく':'またーく',
    '！':'あひーっ！',
    'すごい':'すげぇ',
    'いい':'ぃぃ',
    'そういえば':'そうゆえば',
    'あたらしい':'あたらしぃ',
    'もらった':'もらつた',
    'する':'ずる',
    'ない':'亡い',
    '無い':'亡い',
    'Apple':'アプール',
    'Mac':'マっク',
    'マック':'マっク',
    'グラフィック':'グラヒック',
    'アップル':'アプール',
    'デザイン':'デザィン',
    'スタンダード':'スタンダド',
    'サイト':'サィト',
    'サイズ':'サィズ',
    'ドラッグ':'ドラツグ',
    'ドロップ':'ドロツプ',
    'メール':'メィル',
    'サムネイル':'サムネェル',
    'サムネール':'サムネェル'
  }
  for(var i in s) {
    var r = new RegExp(i, 'g');
    document.body.innerHTML = document.body.innerHTML.replace(r, s[i]);
  }
})();

これで

どこでもマク語になるでよ、あひーっ！