はじめに
WEBアプリ開発において、さまざまな端末で利用できるようにレスポンシブ対応するのは当たり前になっていますよね
画面へのタッチやスワイプ等の直感的なインタラクションに合わせた機能は、主にpc表示の時は無効状態にすることが多々あります。
そんな中で、無条件でPCとして扱われてしまうタッチ対応デバイスにフォーカスを合わせて、より便利なアプリを目指そう！というお話です。
タッチ対応デバイスとは？
タッチ対応デバイスとは、画面へのタッチを認識可能なデバイスを指します。たとえば、画面タッチ対応のノートPCやディスプレイモニターなどが挙げられますね。特に画面タッチが可能なノートPCは、windows8が発表されたくらいから少しずつデバイスが増え、今ではipadとノートPCを兼任するようなデバイスがたくさん登場しています。
ただこれらは、WEB開発では画面幅はPCでも、SPに備わっている機能も一部兼ね備えているため、とりわけ扱いの難しい存在にもなりえます..
画面タッチ対応か否かを判別して、期待する挙動となるよう実装しましょう！
タッチデバイスの判断方法
ではどのように判別するのか。判別方法として以下3つが挙げられます。
Window.document内のontouchstartの有無でチェックする
シングルタッチ機能に対応している場合にはWindow.documentにontouchstartプロパティが生えているので、その有無を利用しタッチデバイスか否かを判断します。
if ('ontouchstart' in document) {
~タッチ対応デバイス向けの処理内容~
}
navigator内のmaxTouchPointsの有無でチェックする
マルチタッチを活用した実装で仕様される同時タッチ接触点の最大数を返すプロパティ
マルチタッチがサポートされている場合、デバイスはタッチ対応デバイスであると判断できます。
実際の実装では、maxTouchPointsの接触点に応じて処理分岐を分ける実装が一般的なようですね！
※MicrosoftEdge および IEでは、代わりにmsMaxTouchPointsプロパティとなっているため注意
if (navigator.maxTouchPoints > 1) {
// マルチタッチ対応
}
else if (navigator.maxTouchPoints > 0) {
// シングルタッチ対応
}
window内のorientationの有無でチェックする
縦向き横向き等のデバイスの方向を返すプロパティ
タッチ端末が登場し始めた際には、デバイス方向を検知できる == タッチ対応デバイス という時代があったようですが、現代では画面の向きにおうじて画面を回転させられるがタッチ未対応なディスプレイモニターも多く登場しているため、基本的には非推奨となります。
if ('orientation' in window) {
~タッチ対応デバイス向けの処理内容~
}
最後に
タッチ対応デバイス向けに機能実装することが多くないと思いますが、頭の片隅にしまっておいて損ないです！
画面幅はPCサイズだけど時折SPとしても扱って欲しいタッチデバイスをうまく手懐けて、よりユーザビリティの高いアプリ開発を目指しましょう！
Discussion