mixiアプリのアプリ表示領域のサイズ指定方法

以下、mixi アプリのアプリ描画領域のサイズ変更についてのメモです。


mixi アプリの URL

mixi アプリは、以下のような URL からアクセスされます。

http://mixi.jp/run_appli.pl?id=<アプリのID>


mixi アプリからのデフォルトの画面サイズ指定

上記の mixi アプリの URL から表示されるページでは以下のような iframe タグが指定されていて、その内部にアプリその他が表示されるようになっているようです。

<iframe src="mixiが用意したURL" id="アプリのID" name="アプリのID" height="500" width="945" frameborder="0" border="0"></iframe>

この段階で iframe のサイズが height="500" width="945" と指定されています。


アプリ用 iframe 内部

上記 iframe の先は mixi 側が用意した opensocial 系の API javascript 等を含むページとなっており、最後のほうで、gadget.xml で記述した自サイト用の記述が入るようになっています。


強引にサイズを変更してみる

強引に以下のように親の iframe を変更しようとすると、parent.document の段階でセキュリティに引っかかってしまいます。

<script type="text/javascript">
  alert("in script");
  function resizeAppContentIframe() {
    alert("in resizeAppContentIframe()");
    alert("parent = " + parent);
    alert("parent.document = " + parent.document);
    alert("parent.document.getElementById('app_content_xxxxx') = " + parent.document.getElementById('app_content_xxxxx'));
    var iframeElement = parent.document.getElementById('app_content_xxxxx')
    alert("iframeElement = " + iframeElement);
    iframeElement.style.width = "945px"
    iframeElement.style.height = "800px"
  }
  function init() {
    alert("in init()");
    setTimeout("resizeAppContentIframe()", 10);
  }
  gadgets.util.registerOnLoadHandler(init);
</script>

Gadgets API を使いましょう

結局、以下のように Gadgets API を使えば OK でした。

<?xml version="1.0" encoding="UTF-8"?>

<Module>
  <ModulePrefs title="sample">
    <Require feature="opensocial-0.8" />
    <Require feature="dynamic-height" />
  </ModulePrefs>
  <Content type="html"><![CDATA[

<!-- resize parent iframe -->
<script type="text/javascript">
  gadgets.util.registerOnLoadHandler(function(){ 
    gadgets.window.adjustHeight();
  }); 
</script>

  ]]></Content>
</Module>

以下の２点がポイントです。

<Require feature="dynamic-height" />

gadgets.window.adjustHeight();