2009年9月14日月曜日

mixiアプリの表示領域(高さ)を調整する最適な方法

mixiアプリの開発をはじめてからずっと表示領域(高さ)の調節に悩まされていたのですが、下記の記述でうまく調整されるようになりました。

gadgets.window.adjustHeight($(document).height());


$(document).height()でjQueryを使ってdocumentの高さを取得し、
コンテナの提供するgadgets.window.adjustHeightに渡すようにしています。


そもそも、gadgets.window.adjustHeightは引数を渡さず実行すると、表示領域の高さを自動調整してくれるはずなので、引数なしで呼びだせばそれでOKなはずなのですが、これが結構うまく動作してくれません。
その結果コンテンツが全て画面に入りきらずに、スクロールバーが表示されてしまい、見づらいし、使いずらいということになってしまいます。

ここで問題なのが、開発環境と本番環境で挙動が異なるということで、
僕の場合ローカルの開発環境(Partuza+Shindig)では高さの自動調整がうまく行くのに、mixi上で動作させると高さがうまく調整されずスクロールバーがでてしまうという現象になやみました。

そこで上記の解決策です。jQueryで高さを取得することで、コンテナに依存しなくなるので、開発環境でも本番環境でも同じ挙動を得ることができるようになりました。

コンテナが成熟してくればこの手の問題はある程度解決していくとは思いますが、コンテナ毎の微妙な差異というのは少なからず残るのではないかと思います。

そのため、今回のようにコンテナに依存しないような方法を取るというのは、様々なプラットフォームで動かすアプリを作る時には考えなければいけないなと思います。