Cordovaでハイブリッドアプリを作ると、画面がバウンディングする

◆哀丁・四方山話 第03話

pinch
Cordovaでハイブリッドアプリを作ると、画面がバウンディングする

ジャンル・キーワード

  • Cordova
  • Windows 10 Mobile
  • Visual Studio 2015
  • JavaScript

結果は・・・・解決(^o^)

 

何が起こったの?

Visual Studio 2015ではApache Cordova(アパッチ コルドバ)を用いて、JavaScriptによるWeb技術を使ったハイブリッドアプリケーションが作成可能です。

Web技術を使ってスマホやWindowsで動作するアプリケーションが作れる Cordova は、なかなか魅力的です。

喜び勇んでWindows 10 Mobile用のアプリケーションを作り始めたは良いものの・・・画面を上下にスワイプすると、背景画像がググっとせり上がって妙な隙間ができてしまいます。

バウンディング(画像URL:Larida 無料画像 様:2016/10 リンクが見つかりません

例えば画面を上にスワイプすると、上図のように画面の下側がせり上がって空白ができてしまうのです。で、手を離すと元に戻る・・・。このような現象をバウンディングと呼ぶそうです。

画面へのタッチやスワイプ操作を多用するアプリケーションでは、意図しないタイミングで画面が上下に揺れる事になり、ちょっと困ります。

この現象は JavaScriptとして以下の設定を加えたり、index.html に以下のviewport指定を行っても防止できません。

 

結論

まず CSSに以下の設定を行います。

ポイントとなるのは overflow : hidden;  の記述です。

また、Cordovaのconfig.xml に以下の定義を加えます。

これでバウンディングを防止できます。

Windows 10 Mobile ではconfig.xmlを書き換えなくても、上記CSSの設定を入れるだけでバウンディングを防止できました。

ただしiOSなどでは CSS の設定だけではNGとの情報もありますので、両方の設定を入れておいたほうが良さそうです。

 

わかった事

Cordova では、プラットフォームごとに設定を切り替える事ができます。

ただし、 Windows 10 Mobile と Cordova の組み合わせは情報が少なく、かつ英語のサイトばかりで、かなり苦戦します・・・(汗)。

またブラウザ毎にタッチイベントのサポート具合はバラバラです。IEやMicrosoft Edgeでは touchstart や touchmove イベントは反応しません。※

※IEでは、11以降 “MSPointer”で始まるイベントさえ非推奨になりました(汗)。

様々なブラウザを考慮してタッチイベントに反応させる為には

のように、一工夫する必要があります。

またIE10ではデフォルトでパン、ピンチによるズームや、スワイプによる前後ページへの移動ができてしまいます。

他のブラウザと挙動を一致させるためには
-ms-touch-action: none;
の指定を、CSSに加えたほうが良さそうです。

 


参考にさせて頂いたサイト様など

●JavaScriptのtouchmove無効化について
nymemo
negic

●バウンディングの防止について
PROTO-START.com
buildinsider.net

●プラットフォーム毎の Config.xml の設定について
cordova.apache.org

●IEでのタッチイベントについて
webtech-walker
Microsoft公式サイト
GitHub hifive
Quita :cssでwindows8のタッチ操作を無効化する 記事


哀丁・四方山話一覧 へ戻る
(画像URL:illust-AC 様:wayo さん、acworks さん Free icons 様)