Webアプリのダブルタップ拡大を防ぐ
この記事について
スマートフォンのブラウザ(Safariなど)で使用するWebアプリを開発している方向けの豆知識です。
PWA(Progress Web App)やゲームを作っている方におすすめです。
今回私は採用しなかったdblclickイベント、touchedイベントもどういう実装をしたいかによって使えるものなので紹介しています。
ダブルタップでの拡大を防ぐ
対策
調べてみると、いくつか対策方法がありました。
その中でもおすすめのものを順番に紹介します。
touch-actionプロパティを使用する-採用
一番導入が簡単で、ダブルタップの拡大のみを防ぐことができる方法です。
touch-actionはCSSのプロパティで、タッチ画面の操作を設定します。
今回は値をmanipulationに設定します。
manipulationはダブルタップでのズームなど、標準外のジェスチャーを無効します。
CSSファイルにこの以下のコードを追加します。
html {
touch-action: manipulation;
}
利点
タップした際のイベント自体をキャンセルする必要がないので、タッチ操作のあるゲームへの対策にピッタリです。
dblclickイベントを使用する-今回は不採用
addEventListener()メソッドで使用できる dblclickイベント を使用する。
単一の要素上で素早く2回クリックされた時に発生します。
ダブルタップ判定がされたら、preventDefault()メソッドでイベントをキャンセルする方法です。
以下のコードをダブルタップを回避したい要素に追加します。
const rightButton = document.querySelector(".right");
rightButton.addEventListener('dblclick', function (e) {
e.preventDefault();
});
欠点
preventDefault()メソッドを使用するのでタップしたイベント自体がキャンセルされます。今回はダブルタップ時の拡大だけ回避したかったので不採用としました。
touchedイベントを使用する-今回は不採用
addEventListener()メソッドで使用できる touchendイベント を使用する。
ユーザーがタッチ面から指を離すとtouchendイベントが発生します。
指が離れた時間を取得して、前回指が離れた時間と比較してダブルタップ判定、preventDefault()メソッドでイベントをキャンセルする方法です。
以下のコードを HTML の<head>内に<script>タグで挿入します。
let lastTime = 0;
window.addEventListener('touchend', function (e) {
const now = new Date().getTime();
if ((now - lastTime) < 350){
e.preventDefault();
}
lastTime = now;
};
欠点
上記と同じく、preventDefault()メソッドを使用するのでタップしたイベント自体がキャンセルされます。今回はダブルタップ時の拡大だけ回避したかったので不採用としました。
導入後
MVPで作ったテトリスなので荒いところはご容赦ください。
ダブルタップ拡大を防ぐコードを導入すると、このように連続でタップしても画面が拡大されません
ちなみにこのテトリスはこちらで遊べます-> https://kiki-her.github.io/tetris/
まとめ
ゲームを作る際のダブルタップ処理、さまざまな場合があると思います。
この記事が参考になったら幸いです。
Discussion