gadgets.window.adjustHeight で、確実に !? ガジェットの高さを自動調整する方法

おはようございます。なかじまんです。

Gadgets API の gadgets.window.adjustHeight を使うと、ガジェットの高さを自動調整できますが、実際のところは、画像のロードタイミングや、ブラウザごとに仕組みの異なる gadgets.rpc が影響して、期待どおりの高さに自動調整されないことが多々あります。

で、今までいろいろ試してきましたが、現在は、次のとおり、周期的に高さを自動調整して、期待する高さを保つという方法がもっとも確実であるという結論です。

setInterval(function() { gadgets.window.adjustHeight(); }, 1000);

また OpenSocial jQuery だと、次のようになります。

setInterval(function() { $(window).adjustHeight(); }, 1000);

1秒間隔で、ガジェットの高さの自動調整を試みています。gadgets.window.adjustHeight のソースコードを調べたところ、ガジェットの高さに変化のないときは、コンテナと RPC 通信せずに何もしないようになっていたので、1秒間隔くらいで gadgets.window.adjustHeight を呼び出しても、それほどコストはかかりません。

1秒間隔なので、高さが自動調整されるのがひと呼吸遅いかなという感じがあったり、頻繁に高さが変わるようなガジェットだと、ペコペコ高さが変わって見苦しいこともありますが、高さが自動調整されないという最悪の結果は回避できます。

-- 2009-11-28 追記

上記のガジェットの高さを自動調整し続ける... をプラグインとして公開しました。公式サイトからダウンロードして使ってください。

OpenSocial jQuery autoHeight 1.0.0 (opensocial-jquery.autoHeight.js)
http://code.google.com/p/opensocial-jquery/

使い方は、次のとおり opensocial-jquery.autoHeight.js をロードして、はじめに1度だけ window オブジェクトに対して autoHeight を呼び出すだけです。

<script type="text/javascript" src="opensocial-jquery.min.js"></script>
<script type="text/javascript" src="opensocial-jquery.autoHeight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(window).autoHeight();
});
</script>

ガジェットXMLの実例を用意しました。
http://opensocial-jquery.googlecode.com/svn/trunk/tests/opensocial-jquery.autoHeight.test.xml

ガジェットXMLを gooホームにも登録しましたので、体験してみてください。
http://sandbox.home.goo.ne.jp/gadget/N43bmJWwmt18/detail

ガジェットXMLが動作する様子を動画にしました。文章のフォントサイズを変更すると、その変化に応じて、ガジェットの高さが自動調整されることが見て分かります。