2014年2月8日土曜日

Hypeの iframe でスクロールバウンス抑止　その２

前回のHypeの iframe でスクロールバウンス抑止の続きです。
iframeを入れ換えるコードの実装先が課題になっていました。

解決策を考えた結果、以下のiframeを入れ替えるコードを start.js というスクリプトファイルの関数にして、window.onload でその関数を呼ぶようにしました。

var changeinnerhtml = '<iframe src ="www_melonjs/index.html" width="240px" height="320px" scrolling="no"></iframe>';
document.getElementById("iframe5").innerHTML = changeinnerhtml

 これを、まず以下のようにスクリプトファイルにして、

 var start = {
    "onload" : function () {
        var changeinnerhtml = '<iframe src ="www_melonjs/index.html" width="240px" height="320px" scrolling="no"></iframe>';
        document.getElementById("iframe5").innerHTML = changeinnerhtml;
    },
};

index.html の body を以下のように修正しました。
Hypeが自動生成したコードを手動でコピペしていますが、その後に追加しました。

 <body>
   <script src="cordova.js"></script>
   <div style ="margin:auto;width:480px">
   <!-- copy these lines to your document: -->
      <div id="xxx_hype_container" style="position:relative;overflow:hidden;width:480px;height:320px;">
      <script type="text/javascript" charset="utf-8" src="XXX.hyperesources/XXX_hype_generated_script.js?77789"></script>
      </div>
   <!-- end copy -->
   </div>
   <script src="start.js"></script>
   <script>
      window.onload = function() {
         start.onload();
      };
   </script>
</body>

取りあえず、Hypeが自動生成するコードを変更する必要はなくなりました。

投稿者 時刻: 0 件のコメント:

2014年2月5日水曜日

Hypeの iframe でスクロールバウンス抑止

HypeとMelonJSで電子書籍のプロトタイプみたいなものを作っています。
Hypeのバージョンは1.6.2です。MelonJSは0.9.11です。

以下の画像のような感じで、iPhoneをランドスケープにし、本文とゲームで半分に分けて表示させる仕様です。下地となる本文エリアは、サイズを480x320にし、ゲームエリアは、その上から iframe を貼付けました。このiframeでは、MelonJSのサンプルを改造したHTMLファイルを指定しました。

下地が白なので境界が見えませんが…
これを、PhoneGap2.9.1を使用して実機で試したところ、タッチでスクロールバウンスをしてしまいます。スクロールを無効にする方法を検索したところ、XCodeのプロジェクトフォルダの下のResourceフォルダの中に config.xml という設定ファイルを変更すればよいとのことです。よって、以下の DisallowOverscroll 属性の値を true に変更します。

<preference name="DisallowOverscroll" value="true" />

これで、本文エリアはスクロールバウンスを抑止できたのですが、ゲームエリアの方がまだできていないようです。Hypeで その iframe をインスペクタで一通り見ても、そのようなスクロールに関する項目がありませんでした。

Hypeのフォーラムによると、iframe にID（仮に iframe5 とする）を付けて、Hypeのドキュメントのロード直後に以下のスクリプトを実行すればできるそうです。

var changeinnerhtml = '<iframe src ="http://site.com/" 'width="240px" height="320px" scrolling="no"></iframe>';
document.getElementById("iframe5").innerHTML = changeinnerhtml

 scrolling="no"というところが、スクロール禁止の属性のようです。あらかじめHypeで設定されたiframeを後で置き換えるというものです。同じiframeを２回表示することになるので、Hypeのiframeの設定で、TypeをEmdeded HTML にして適当なテキストでも入れておいた方がよさそうです。

 さて、このスクリプトをどこに置いたらよいのでしょうか？
取りあえず、Hypeがエクスポートで吐き出すスクリプトに追加してはみましたが、
これで、良いのかどうかはわかりません。吐き出すたびに追加する作業をしないといけないのが面倒です。

 エクスポートすると、XXX_hype_generated.jsというファイル名で生成されます。そのファイルの最後に、以下のように追加しました。hypeDoc.documentLoad(this.body); の直後です。
www_melonjs/index.html がMelonJSのサンプルですが、iPhoneで表示するために若干修正しています。

   HYPE.documents[documentName] = hypeDoc.API;
   document.getElementById(mainContainerID).setAttribute("HYPE_documentName", documentName);

   hypeDoc.documentLoad(this.body);

   var changeinnerhtml = '<iframe src ="www_melonjs/index.html" width="240px" height="320px"
scrolling="no"></iframe>';
   document.getElementById("iframe5").innerHTML = changeinnerhtml

}());

以上、実機で試してみたところ、スクロールバウンスは抑止できました。


その２に続きます。
投稿者 時刻: 0 件のコメント:
登録: 投稿 (Atom)