iOS/Androidでのジェスチャー動作の検出
スマートフォンで動作するWebアプリケーションを開発していると、様々なジェスチャー動作を検出したい時があります。ただ、JavaScriptでマルチタッチを扱おうとすると、iOS/Androidでイベントの動作が異なっていたりと意外と面倒だったりします。
私はWebアプリケーション開発の際は、ジェスチャー動作を検出する自前の簡易ライブラリを使っていたのですが、これを少し整理してhttps://github.com/kztomita/gesture-managerにアップロードしました。
GestureManagerライブラリの機能
このライブラリはiOSとAndroid(Ver.4以降)に対応しているので、端末の種類を気にせずにジェスチャーを扱うことができます。gesturechangeイベントがないAndroidにおいても、これをエミュレートするので、iOSと同様にgesturechangeイベントを扱うことができます。
現在、検出できるジェスチャーは以下の二種類です(自分にとって必要な機能しか入っていないためスワイプの検出などはなく、機能は少ないです)。
- ダブルタップ
- ピンチ操作による拡大／回転
「ダブルタップ」は一般にジェスチャーと呼ばないかもしれませんが、Webアプリケーションを開発する上で検出したい時が多くあるので、本ライブラリに組み込んでいます。
「ピンチ操作による拡大／回転」はiOSはネイティブのgesturechangeイベントから拡大率(scale)と回転角(rotation)を取得しますが、gesturechangeイベントがないAndroidではこれをエミュレートしてiOSと同様にscaleとrotationを取得できるようにします。
このライブラリを使ったサンプルをhttps://www.bit-hive.com/~tomita/github/gesturemanager/にアップしてあります。iOS/Android端末でアクセスしてピンチ操作をすると、中央のテキストが拡大／回転しますが、これを、iOS/Androidの違いを意識することなく実装できます。
iOSとAndroidのジェスチャーイベントの違い
ライブラリの使い方はgithubのページのREADMEを読んでもらった方がいいので、ここではiOSとAndroidのジェスチャーイベントの違いを少し説明します。
iOSでは二本以上の指をスクリーンに触れて動かすとgesturechangeイベントが発生し、イベントオブジェクトからピンチ操作の拡大率(scale)と回転角(rotation)を取得できます。一方、Androidではgesturestart、gesturechange、gestureendのgesture系のイベントは存在しないため、ピンチ操作による拡大率、回転角を取得することはできません。
このため、本ライブラリではtouchstart,touchmove,touchendのtouch系イベントを使って指の動きを追跡し、iOSと同じようなgesture系イベントを生成しています。
今後
ライブラリの今後の機能追加としては以下を考えています。
(1) 検出できるジェスチャーの種類を増やす
現在は私が必要としていた最小限のもののみしか対応していないので、スワイプ等、他の動作の検出に対応したい。
(2) ES Modules形式の出力
現在、UMD(Universal Module Definition)形式しか出力していないのでES Modules形式の出力にも対応したい。
(3) Windows8への対応
ローカルで使用しているジェスチャーライブラリではWindows8にも対応しているので、その処理を本ライブラリにも反映する。Surfaceにも対応できるようになるかもしれない。
=============弊社ではデジタルカタログ等のHTML5を使ったWebアプリケーションの開発を行っています。
以下のWebアプリケーションの開発でも本ライブラリを使用しました。
投稿日:2019/05/02 00:50
タグ: Webアプリ JavaScript