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

◆哀丁・四方山話　第03話

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指定を行っても防止できません。

// スクロール禁止
document.body.addEventListener('touchmove', function (e) {
   e.preventDefault();
});

// スクロール禁止

document.body.addEventListener('touchmove', function (e) {

e.preventDefault();

});

<meta name="viewport" 
  content="user-scalable=no, 
  initial-scale=1, 
  maximum-scale=1, 
  minimum-scale=1, 
  width=device-width"
>

content="user-scalable=no,

initial-scale=1,

maximum-scale=1,

minimum-scale=1,

width=device-width"

結論

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

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

html, body {

margin: 0;

padding: 0;

height: 100%;

overflow: hidden;

}

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

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

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

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

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

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

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

わかった事

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

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

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

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

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

//サポート状況を調べる
 var support = {
   mspointer: window.MSPointerEvent,
   pointer: window.PointerEvent,
   touch: 'ontouchstart' in window
 };

 //サポート状況に応じてイベント名を切り替える
 var touchStartEvent =
   support.pointer ? 'pointerdown' :
   support.mspointer ? 'MSPointerDown' :
   support.touch ? 'touchstart' :
   'mousedown';
 var touchMoveEvent =
   support.pointer ? 'pointermove' :
   support.mspointer ? 'MSPointerMove' :
   support.touch ? 'touchmove' :
   'mousemove';
 var touchEndEvent =
   support.pointer ? 'pointerup' :
   support.mspointer ? 'MSPointerUp' :
   support.touch ? 'touchend' :
   'mouseup';

//イベントを設定する
document.addEventListener(touchStartEvent, TouchStart, false);

//イベント処理関数
function TouchStart(event) {
   //イベント処理を記述
}

//サポート状況を調べる

var support = {

mspointer: window.MSPointerEvent,

pointer: window.PointerEvent,

touch: 'ontouchstart' in window

};

//サポート状況に応じてイベント名を切り替える

var touchStartEvent =

support.pointer ? 'pointerdown' :

support.mspointer ? 'MSPointerDown' :

support.touch ? 'touchstart' :

'mousedown';

var touchMoveEvent =

support.pointer ? 'pointermove' :

support.mspointer ? 'MSPointerMove' :

support.touch ? 'touchmove' :

'mousemove';

var touchEndEvent =

support.pointer ? 'pointerup' :

support.mspointer ? 'MSPointerUp' :

support.touch ? 'touchend' :

'mouseup';

//イベントを設定する

document.addEventListener(touchStartEvent, TouchStart, false);

//イベント処理関数

function TouchStart(event) {

//イベント処理を記述

}

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

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

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

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

●JavaScriptのtouchmove無効化について
nymemo 様
negic 様（2022/05 Linkが見つかりません）

●バウンディングの防止について
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 様）

自己啓発。人生について考える

楽しいを極めろ。人生は夢の中

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

◆哀丁・四方山話　第03話