OpenSocial大技林(予)

■ソース(XML)
サンプルは、テキストエリアに入力したHTMLをプレビューできる簡易HTMLエディター。最初に読み込んだ時と、プレビューボタンをクリックする度にガジェットの高さを調整してくれます。
ModulePref内で"dynamic-height"機能を呼び出すよう定義し、高さの調整をしたい箇所で gadgets.window.adjustHeight();を呼び出すだけです。 <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="HeightTest2" height="100"> <Require feature="dynamic-height"/> </ModulePrefs> <Content type="html"><![CDATA[ <form> <textarea id="edit" rows="3" cols="60"> </textarea><br /> <input type="button" value="プレビュー" onclick="setHTML()" /> </form> <div id="bord" style="border:1px solid gray"> </div> <script type="text/javascript"> //---------------------------- //onLoadイベント時の処理定義 //---------------------------- gadgets.util.registerOnLoadHandler(function(){ //高さを変更 gadgets.window.adjustHeight(); }); //---------------------------- //文字列セット＋高さ調整 //---------------------------- function setHTML(){ var txt = document.getElementById('edit').value; document.getElementById('bord').innerHTML = '<pre>' + txt + '</pre>'; //高さを変更 gadgets.window.adjustHeight(); } </script> ]]> </Content> </Module>

■参考ページ
Google Code - ガジェット
http://code.google.com/intl/ja/apis/gadgets/docs/ui.html

ガジェット自体がサイズを変更できるようにするため、ガジェットのスペックに以下を追加する必要があります。
* dynamic-height ライブラリを読み込むようガジェットに指示する <Require feature="dynamic-height"/> タグ (<ModulePrefs> の下に置きます)。
* JavaScript 関数 gadgets.window.adjustHeight() への呼び出し。コンテンツの変更時や、ガジェットのサイズを変更する必要があるその他のイベントの発生時ごとに呼び出します。