WindowsタブレットがUAではPC判定されタッチデバイス判定もされなかったのでハマった話
ごきげんよう 藤原です。
先日とある案件で、WindowsタブレットがUA（ユーザエージェント）でPC判定される&
タッチデバイスとして判定されないのでハマりました。
webサイト製作においてデバイスで操作を分けたいってことはまぁまぁあると思います。
デバイスでの処理分けはたいていUAを判定して処理を分けることが多いとおもいますが、
WindowsタブレットはUAで判定
（条件はこんなかんじ https://w3g.jp/blog/php_ua_sniffing2015 ）
すると「タブレット」とは判定されずに「PC」として判定されてしまいます。
タッチデバイスでもあるくせに「PC」であり「マウスデバイス」である。
UAでの判定ではうまくいきませんでした。
Windowsタブレットはノートパソコンとしても使ったり、
キーボードと切り離してタブレットとして使ったりと「2 in 1」で使用されることがあるので、
「PC」という判定は間違いではなく正しい挙動なのですが、キーボードなしのタブレットとして使用してるときは、タブレットとして操作させたい。
JSでタッチデバイスかどうか、で判定をして処理分けすればいいかな、
とおもったのですがこれもだめでした。
タッチデバイスではなくマウスデバイスとして認識されてしまうため、
デスクトップPCと同じ挙動になってしまう。
厳密な処理分けができない。
タブレット判定してくれない、タッチデバイス・タッチイベントでの処理分けもうまくいかない、
ということだったので今回採用した方法は、
JSで連続したカーソルの動きがあるかないかを判定し処理分けをすることで実現しました。
参考記事：
マウスデバイスかどうかの判定
http://qiita.com/ksk1015/items/5217bc930cb1ccec2b78
連続したmousemoveの動きが「あれば」マウスデバイスで操作しているとみなす。
つまりマウスポインタ・カーソルが連続して動いたかどうか、での処理分けです。
タッチデバイスは連続したマウスポインタ・カーソルの動きがないはずなので
これで処理わけができ、「2 in 1」のデバイスでもいける。
ただこれでも完璧ではありません。
Windowsタブレットのディスプレイをタッチしてぐりぐり触ってるとマウスとして認識される場合もありました。
（デバイスのタッチの感度にもよるかもしれません・・・）
ただ操作性はある程度、担保できそうです。
そもそもPCとタブレットで処理を分けないUIで実現するのがいちばんよいのですが、
今回はそうもいかなかったので、これでヨシとすることにしました。
