Javascriptの皮を被ったXML #1

前回のエントリについて、nektixeさんから、「Greasemonkey限定であれば、GM_xmlhttpRequest という関数を使うことで、外部ドメインのデータも受信可能みたいです」というコメントを頂きました。ありがとうございます。確かに、「GM_xmlhttpRequest is not restricted to the current domain」って書いてありますね。これは強力。

というわけで、「Javascriptの皮を被ったXML構想」は、Greasemonkeyであれば実現できそうな感じです。この構想の要点をおさらいとして整理すると、

Javascriptから直接APIにアクセスしてXMLを取得して、UIを被せる。
UIとなるHTMLはJavasciptから分離する。
各サービスに合わせて外部XSLTファイルを用意し、JavascriptでXSLT変換する。これにより様々なサービスに統一的なUIを適用する。

といった感じです。

構想の実現に向けて、まずはGM_xmlhttpRequest関数で遊んでみようかと思ったのですが、その前にdel.icio.us direc.torをGreasemonkeyで動かしてみることにしました。といっても、やってみるとものすごく簡単で、del.icio.us direc.torのおおもとのJavascriptである、dboot.jsの先頭に、以下の様にGreasemonkey用の記述を数行加えてあげるだけです。

// ==UserScript==
// @name            del.icio.us direc.tor greasemonkey user script
// @namespace       http://mizzy.org/
// @description     When open a folder in bloglines, close other folders.
// @include         http://del.icio.us/mizzy/director
// ==/UserScript==

var d = '<form><img src="http://johnvey.com/features/deliciousdirector/director-logo.gif" width="206" height="18" alt="Delicious Director" style="float:left;padding:2px 10px 0 0" />';
d += '<input id="q" name="q" type="text" size="60" onkeyup="rd.filter(this.value)" autocomplete="off" />';
d += '<input type="checkbox" id="h" checked="checked" onchange="rd.th()" /><label for="h">Highlight Terms</label></form>';
d += '<h2>Tag Browser</h2>';
d += '<div id="browser">';
d += '  <div id="br1" class="browserPane"></div>';
d += '  <div id="br2" class="browserPane"></div>';
d += '  <div id="br3" class="browserPane"></div>';
d += '  <div id="br4" class="browserPane"></div>';
d += '  <div id="br5" class="browserPane"></div>';
d += '  <div id="br6" class="browserPane"></div>';
d += '</div>';
d += '<h2 id="summary">Bookmarks</h2>';
d += '<div id="ps"><p>Loading your del.icio.us bookmarks...</p></div>';
d += '<p id="ft">© 2005 Johnvey Hwang. <a href="http://johnvey.com/features/deliciousdirector/" target="_blank">del.icio.us direc.tor project page</a>. Released under the <a href="http://www.gnu.org/copyleft/gpl.html" target="_blank">GPL</a>.</p>';

function init() {

    var i, a, main;

    document.body.innerHTML = "";
    document.body.innerHTML = d;
    
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
      if(a.getAttribute("rel").indexOf("style") != -1) {
        a.disabled = true;
      }
    }
    
    var ns = document.createElement("link");
    ns.rel = "stylesheet";
    ns.type = "text/css";
    ns.href = "http://johnvey.com/features/deliciousdirector/d.css";
    document.body.appendChild(ns);
    
    var js = document.createElement("script");
    js.language = "javascript";
    js.src = "http://johnvey.com/features/deliciousdirector/d.js";
    document.body.appendChild(js);
    
    document.title += " (Direc.tor)";
}

init();

実際に試してみたい方は、こちらからどうぞ。

@includeで指定されるページは、適宜変更してください。自分は、http://del.icio.us/mizzy/director にアクセスした時にお猿さんが発動するようにしていますが、そこは各自のお好みで。

次回は実際にGM_xmlhttpRequest関数を利用して、外部HTMLテンプレートを読み込むのに挑戦したいと思います。

↑ newer post older post ↓