JSONP 的なもの

前に作ったやつが Safari で動かなくて悲しかったので， JSONP 的なものを使って動くようにしてみた．
JSONP では script タグを使ってどっかのサーバに置いてある javascript を読みにいくことで，サーバをまたがった通信ができます．
GreaseMonkey は script タグを追加するようにソースを修正するだけです．
スクリプトのアップデートもサーバに置いてあるのを修正すればいいだけなので少し楽．

ブラウザには user.js のほうだけをインストールします．

// delfox.user.js

(function (){
    var script = document.createElement("script");
    script.setAttribute("type","text/javascript");
    script.setAttribute("src","(適当なサーバ)/delfox.js");
    document.body.appendChild(script);
})();

delfox.js はサーバに置きます．

// delfox.js

// global variables!
var delfoxUsername = "(ユーザ名)";  // <- user name of del.icio.us 
var delfoxSitename = "http://del.icio.us/";
var delfoxTagfield = document.createElement("div");
delfoxTagfield.style.width = "100%";
delfoxTagfield.id = "tags";
function access2delicious(tags){
   for (tag in tags) {
      var a = document.createElement("a");
      a.appendChild(document.createTextNode(tag));
      a.setAttribute("href",delfoxSitename+delfoxUsername+"/"+tag);
      a.style.display = "inline";
      if ( tags[tag] > 6 ) {
	 a.style.fontSize = "110%";
	 a.style.color = "#ffffff";
      } else if ( tags[tag] < 3 ) {
	 a.style.fontSize = "90%";
	 a.style.color = "#aaaaaa";
      } else {
	 a.style.color = "#dddddd";
      }
      var span = document.createElement("span");
      span.appendChild(a);
      span.style.margin = "3px";
      delfoxTagfield.appendChild(span);
      delfoxTagfield.appendChild(document.createTextNode(" "));
   }
}

(function (){
   var delsearch;
   var searchfield = document.createElement("div");
   searchfield.style.width = "100%";
   searchfield.id = "searchfield";

   function createSearch() {
      delsearch = document.createElement('div');
      delsearch.style.top = "0px";
      delsearch.style.color="#FFFFFF";
      delsearch.style.display="none";
      delsearch.style.fontSize="14px";
      delsearch.style.left="0px";
      delsearch.style.overflow="auto";
      delsearch.style.position="absolute";
      delsearch.style.width="100%";
      delsearch.style.zIndex="10000"; 
      delsearch.style.position="fixed";
      delsearch.style.backgroundImage=
	 "url(http://www.agusa.i.is.nagoya-u.ac.jp/person/shimo/javascripts/delfox/tip.png)";
      delsearch.style.wordBreak="break-all";
      delsearch.style.fontFamily=
	 '"Times New Roman",Times,"?q???M?m?p?S Pro W3","?l?r ?o?S?V?b?N",sans-serif';
      delsearch.style.textAlign="left";
      delsearch.style.letterSpacing="0px";

      /* prepare textbox */
      var tmp = document.createElement("a");
      tmp.style.color = "white";
      tmp.innerHTML = "Search Tag : ";
      searchfield.appendChild(tmp);
      var input = document.createElement("input");
      input.style.border="solid 0 #fff";
      input.style.margin="5px 5px 0px 0px";
      input.style.height="20px";
      input.style.width="200px";
      input.style.background =
	 "transparent "+
	 "url(http://www.agusa.i.is.nagoya-u.ac.jp/person/shimo/javascripts/delfox/textfield_bg.gif) "+
	 "no-repeat";
      input.style.type="text";
      input.id = "filter_field";
      searchfield.appendChild(input);
      delsearch.appendChild(searchfield);
      /* prepare post to delicious */
      var tmp = document.createElement("a");
      tmp.style.color = "white";
      tmp.setAttribute("href",
		       "javascript:location.href='http://del.icio.us/post?v=4;"+
		       "url='+encodeURIComponent(location.href)+';"+
		       "title='+encodeURIComponent(document.title.replace(/^\s*|\s*$/g,''))");
      tmp.innerHTML = "Post to del.ico.us";
      searchfield.appendChild(tmp);
      

      /* access to the delicious with jsonp */
      var script = document.createElement("script");
      script.setAttribute("type","text/javascript");
      script.setAttribute("src","http://feeds.delicious.com/feeds/json/tags/"+
			  delfoxUsername+"?callback=access2delicious");
      document.body.appendChild(script);

      delsearch.appendChild(delfoxTagfield);
      return delsearch;
   }

   /* show and hide search bar */
   function showSearch(){
      if (delsearch.style.display == "none") {
	 delsearch.style.display = "block";
	 document.getElementById("filter_field").focus();
      } else {
	 delsearch.style.display = "none";
      }
   }

   document.addEventListener('keyup', function(e){
      // if '^d' is pushed
      if (e.keyCode == 68 && e.ctrlKey) {
	 if (delsearch == undefined){
	    delsearch = createSearch();
	    document.body.appendChild(delsearch);
	 }
	 showSearch();
      } else
      if ( delsearch != undefined &&
	  delsearch.style.display == "block" &&
	  !e.ctrlKey ) {
	     var f = document.getElementById("filter_field").value;
	     var len = f.length;
	     var num = delfoxTagfield.childNodes.length;
	     for ( i=0 ; i < num ; i+=2 ) {
		if ( delfoxTagfield.childNodes[i].tagName == "SPAN" ) {
		   if(delfoxTagfield.childNodes[i].firstChild.textContent.indexOf(f) != -1)
		      delfoxTagfield.childNodes[i].style.display = "inline";  
		   else
		      delfoxTagfield.childNodes[i].style.display = "none";
		}
	     }
	  }
   }, false);
})();

ユーザ名がサーバにおくファイルで設定してあるのはちょっとなぁと思うけどめんどくさかったのでやめ．