mixi Developer Center (ミクシィ デベロッパーセンター)

mixiアプリ

mixiアプリ » 技術仕様（RESTful API方式） » PC » 表示領域を調整してみよう

表示領域を調整してみよう

mixiアプリは限られたページ領域の中でリッチなコンテンツをユーザに提供することになります。その際に、余計な余白や、領域が足りないといった状況は好ましくありません。そのために、mixiアプリは自動的に適した領域を確保することができます。

adjustheight

mixiアプリの大きさ

画面最大縦幅最大横幅
run_appli.pl (canvas) 600px以上(※) 1280px

※表示可能な最大縦幅はブラウザに依存します

縦幅の自動調整

mixiアプリが表示するコンテンツは様々です。使える横幅は固定ですが、縦幅については可変となります。この際、mixiアプリが表示したコンテンツに従って最適な縦幅に自動的に調整がかかると非常に便利です。

OpenSocialでは、縦幅の自動調整を行うための関数が提供されています。gadgets.window.adjustHeight()関数を使うことで、縦幅の自動調整を行うことができます。この関数を利用するためには、dynamic-height機能を有効にする必要があります。

<Module>
  <ModulePrefs>
    <Require feature="dynamic-height" />
  </ModulePrefs>
</Module>

dynamic-height機能の利用宣言をタグを使って記述します。これにより、以下のようにしてadjustHeight()関数が使えるようになります。

// do something
gadgets.window.adjustHeight();

adjustHeight()関数の呼び出し直後に、領域の大きさが変更される点に注意します。例えば、mixiアプリの起動時に領域調整をadjustHeight()関数で行いたい場合は、画像や文字列など、通信やDOM操作を一通り終えた後にadjustHeight()関数を呼び出すようにすればよいでしょう。

表示領域を調整してみよう に含まれるページ

このページの上部へ

©MIXI