adiary開発日誌

Wikipedia APIとは

というふうに、サムネイル作成で使わせて頂いているSimple APIが提供するWikipediaの情報を取得するAPIです。これを adiary で Ajax 風に実装しようと思ったんですが、XMLHttpRequest ではセキュリティ上の問題でクロスドメイン（Simple API提供のWikipedia API）から直接データを取得することができないんですね。

よくよく調べると、JSONPというのがありまして、別にhandlerの名前を指定出来なくていいから対応してもらえないかなーという感じです。

例えば

呼び出すhandler名は固定で、引数も現在のAPIを文字列に変えたものでいいんですけど…。例えば、http://wikipedia.simpleapi.net/api?keyword=Google&output=xml&jsonp=1にアクセスすると、特定の関数をXMLを文字列として戻してくれるとか。

追記 2006/12/28

JSONは既に対応済だったらしい（恥）

サンプルと概要

ASIN記法のサンプル

上のリンクのマウスを乗せるとわかりますが、画像がポップアップで表示されます*1。

このようなポップアップを実現するには、Firefox (Netscape)において、onMouseMoveを使うことが一般的のようです。しかし、マウス座標を取得するためだけに、マウス移動のイベントを拾うというのは非効率的すぎてどうにも釈然としません。

IE/Firefoxで使えるポップアップウィンドウ

以下のスクリプトは自由に使って構いません。（2008/09/17 Update）

function popup_img( img_url, evt ) {
	var text  = "<img src=\"" + img_url + "\">";
	var div   = document.getElementById( 'popup' );
	var style = div.style;
	var cx; var cy;
	if (! evt) { evt = event; }
	cx = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
	cy = evt.clientY + (document.body.scrollTop  || document.documentElement.scrollTop);
	style.left = (cx + 16) + 'px';
	style.top  = (cy + 12) + 'px';
	div.innerHTML = text;
	style.zIndex   = 9999;
	style.display  = 'block';
}

function popdown() {
	document.getElementById( 'popup' ).style.display = 'none';
}

となります。ポップアップを実現したい場所では、

<tag onMouseOver="popup_img('<画像URL>', arguments[0])" onMouseOut="popdown()"></tag>

とします。

仕組み

見ればわかりますが、呼び出し側でarguments[0]と書かれた場所があります。これがミソです。onMouseMoveを使う実装方法では、マウスを動かすたびにいちいちイベントを取得していましたが、この方法ではonMouseOver発生時のイベント（イベントオブジェクト）をarguments[0]によって取得しています。