Hatena::ブログ(Diary)

モトクロスとプログラムと粉砕骨折と RSSフィード Twitter

2011-01-15

[][][]Sencha TouchをAndroidで使って少しはまったこと

ウチの会社で開発運営しているEnquetePad、モバイル側は今までiPadにしか対応してなかったんですけど、ある会社様のご厚意でGalaxyTabをお借りすることができまして、いま一生懸命対応させてます。


もともとSencha Touchを使って実装しているので、GalaxyTabというかAndroidで動かすにしても、ほとんどがフォントとかレイアウトとかの見た目調整だけで済みましたが、少しだけハマった事があったので忘れないうちに書いておきます。


ハマったこと:意外なところでOrientationChangeイベントが走る

前提として、各ページはExt.Panelを拡張して実装しています。また常にフルスクリーンモードで動作します。つまりURL入力欄とかは普段表示されていません。

※iPadではホーム画面にアイコンを登録してもらい、そこから立ち上げるStandAloneモードでしか動かなくしています。

別のもっと大きな理由がきっかけでそうしてるのですが、それはまた今度書きます。


まずiPadと同じコードで動作させました。

だいたい問題なく動いたんですけど、どうにも画面ローテートイベント(OrientationChangeイベント)が変なところで走ってる気がする。そこで以下のコードをinitComponentに入れてみて、動きを見てみる事にしました。


this.on('orientationchange', function() { alert('Sweet!'); });

そしてGalaxyTabを縦から横にしてみるとですね...止まらないんですよ。Sweet!が。永遠と表示され続けるんですよ。Sweet!が。


メッセージボックスのOKを押してもすぐに次のSweet!が表示されるSweet!地獄。これはオカシイ。


次から次へと現れるSweet!のOKを押す簡単なお仕事をこなしながら、しばらく動きを眺めていました。そこでふと気がついたんですが、メッセージボックスが現れると、フルスクリーンモードが一時的に解除されてるんですね。

具体的には、時刻とかが表示されるツールバーのようなモノが、画面上部に表示されます。そして画面が少し狭くなり、HTMLのレイアウトがそれに合わせて変更される。メッセージボックスが消えるとツールバーも消えて、またHTMLのレイアウトが変更される。


ここでひとつの仮説を立ててみました。


Sencha TouchをMacのSafariとかで動かすと、ブラウザのリサイズでSencha TouchのOrientationChangeイベントが走ります。window.orientationが存在しないブラウザの場合、Sencha TouchがResizeイベントをOrientationChangeイベントに割り当てるので、そのような動きになります。


もしかしたら、メッセージボックスと同時に現れるツールバーによって画面サイズが変わり、それによってOrientationChangeイベントが走っているのではないかと。OKを押してメッセージボックスが消えるとツールバーも消えて画面サイズが変わり、また新たなOrientationChangeイベントが発生するため、Sweet!が無限に表示されてしまうのではなかろうかと。


そこで先程のコードを書き換え、OrientationChangeイベントが発生したらalertするのでは無く、画面上のDOMエレメントにSweet!を表示させるようにしてみました。


var counter = 1;
this.on('orientationchange', function() {
        var emt = document.getElementById('hoge');
        emt.innerHTML = 'Sweet! ' + (counter++) + '回目';
});

おk


OrientationChangeイベントは無限に発生していませんでした。

やはりメッセージボックスの出現に伴い画面サイズが変わることによって、OrientationChangeイベント無限ループが発生していたようです。


ただ、画面サイズが変わることによってOrientationChangeイベントが発行されるのは解せません。

Sencha Touchのソースも漁ってみましたが、window.orientationプロパティが存在するブラウザ(=iPadやGalaxyTabなどのモバイルタッチ端末)では、ResizeをOrientationChangeに割り当てるような処理になってないように思えます。


そこでSencha Touchのではなく、windowオブジェクトのOrientationChangeイベントがどのタイミングで発行されるかを確認する事にしました。


var counter = 1;
window.addEventListerner('orientationchange', function() {
        var emt = document.getElementById('hoge');
        emt.innerHTML = 'Sweet! ' + (counter++) + '回目';
}, false);

GalaxyTabの向きを変えてみると、windowオブジェクトのOrientationChangeイベントが正しく発行されている事は確認できました。


そしてWindowのリサイズでどうなるか。

Androidにはメニュー(?)のハードボタンがあります。押すとフルスクリーンモードでもURL入力欄などが表示されてブラウザサイズが小さくなります。


恐る恐る押してみると... 発行されたよ。OrientationChangeイベント orz

そりゃどうしよもないよね。ブラウザ純正のOrientationChangeイベントが発行されれば、Sencha Touchだって発行するさ。


というワケで、Androidはブラウザの表示サイズが変わるたびに、OrientationChangeイベントが発行されますよっと。そんなお話でした。

もしかしたらiPadでも同じような動きになるかもしれないんですけど、前述の通りフルスクリーン限定で動かしてるので分かりません。誰か知ってる人がいたら教えて下さい。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/sngmr/20110115/1295112607