Content@type="url"のガジェットでOpensocialのJavascript APIを使うには

OpenSocial

OpenSocialガジェットのコンテンツを記述する方法は、Content@type="html"でXMLの中に処理を書き込む方法とContent@type="url"のhrefに指定したhtmlを返すサービスを指定する方法があります。

Content@type="url"の場合は、phpなり、javaサーブレットなりサーバーサイドを好きなように作ることができるので、サービス提供とガジェットを同じサーバーでする場合などは便利です(SSO環境がある場合に限りますが)。
その際、呼び出されるHTML側でもガジェットの高さ調整などをしたいので、OpenSocialのJavascript APIを呼び出したいところです。

その方法については、以下のドキュメントに書いてあります。

http://code.google.com/intl/ja/apis/gadgets/docs/legacy/fundamentals.html#JS_URL

http://www.opensocial.org/Technical-Resources/opensocial-spec-v09/Gadgets-API-Specification.html#process

OpenSocial1.0では、この記述がなくなっているのが少々気になります。また、iGoogleの場合は、libsに指定されるパスは相対パスが渡ってくるので、「http://www.google.com/ig/f/」を足してあげる必要があります。
infoScoopは、絶対パスを渡しています。この辺りは仕様に明記されて居ないので、実装依存になってしまうところで悩ましいところです。

それと、iGoogleではレガシーAPI(_IG_で始まる関数)しか動かないです。

Content@hrefで指定されたHTMLでgadgets.*、opensocial.*のライブラリを呼び出す方法について、以下のサンプルを貼っておきます。

高さ調整が動くかどうかをテストするサンプルです。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
	<ModulePrefs title="module/content/type/url/href" height="80">
		<Require feature="dynamic-height"/>
   	</ModulePrefs>
	<Content type="url" href="http://www.infoscoop.org/gadgets/work.html"/>
</Module>

このファイルは、http://www.infoscoop.org/gadgets/dynamic-height.xmlに置いてありますので興味のある方は試してみてください。

urlに指定するHTMLは以下の通り。
loadScriptという関数でパラメータにわたってきたjsファイルへのパスを指定したscriptタグを追加しています。

<html>
<head>
<script>
function loadScript( src ) {
	if( src instanceof Array ) {
		for( var i=0;i<src.length;i++ )
			loadScript( decodeURIComponent( src[i] ));
		
		return;
	}
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = 'http://www.google.com/ig/f/' + src;
	document.getElementsByTagName("head")[0].appendChild( script );
}
function getUrlParameters() {
	var pairs = window.location.search.substring(1).split("&");
	var params = {};
	for( var i=0;i<pairs.length;i++ ) {
		var pair = pairs[i].split("=");
		params[ pair[0]] = pair[1];
	}
	return params;
}
loadScript( getUrlParameters().libs.split(","));
</script>
<script type="text/javascript">
function plus() {
	var div = document.createElement("div");
	div.innerHTML = "hoge";
	_gel("hage").appendChild( div );
	adjust();
}
function minus() {
	if( _gel("hage").childNodes.length > 0 )
		_gel("hage").removeChild( _gel("hage").lastChild );
	adjust();
}
function adjust() {
	//gadgets.window.adjustHeight();
        _IG_AdjustIFrameHeight();
	setTimeout( function() {
		document.getElementById("size").innerHTML = gadgets.json.stringify( gadgets.window.getViewportDimensions());
	},10 );
}

</script>
</head>
<body>
<div id="size">ViewportDimension</div>
	<div>
		Press it ur self =>>
		<input type="button" value="+" onclick="plus()"/>
		<input type="button" value="-" onclick="minus()"/>
	</div>
	<div id="hage"/>
</div>
<script>
gadgets.util.registerOnLoadHandler( adjust );
</script>
</body>
</html>

実際に、iGoogleで動かすと、やっぱりgadgets.*は動きませんでしたので、レガシーAPIの_IG_AdjustIFrameHeightを呼び出しています。