デアゴスティーニ商法作業管理第2弾 57-59日目

この3日間で、iPadでの動作不正対策とマルチタッチ対応を完璧に対処できました!

iPadでの動作不正の原因は、iPadOSになってからブラウザのユーザーエージェント情報がPCに近いものになっていたためでした。

以下のような判定で問題なくPCとそれ以外を判定することが出来ました。

const ua = navigator.userAgent;
const isIOS = ua.indexOf("iPhone") >= 0 || ua.indexOf("iPad") >= 0 || navigator.userAgent.indexOf("iPod") >= 0;
const isIPadOS = (navigator.platform == "MacIntel" && 
                  navigator.userAgent.indexOf("Safari") != -1 &&
                  navigator.userAgent.indexOf("Chrome") == -1 &&
                  navigator.standalone !== undefined);
const isAndroid = ua.indexOf("Android") >= 0;
const isPC = !(isIOS || isIPadOS || isAndroid);

マルチタッチ対応は上記のisPCフラグを利用して、PCとそれ以外(スマホやタブレット)で処理を分岐し、マウスポイントやタップ情報を共通の配列に流し込んでうまく処理することが出来るようになりました。

function changedTouches(event) {
    let touches = [];
    if (isPC) {
        // PCはマウスポイント1点だけ
        touches.push({id:0, x:event.pageX - _canvasOffsetX, y:event.pageY - _canvasOffsetY});
    } else {
        // スマホやタブレットは複数
        for (let i = 0; i < event.changedTouches.length; i++) {
            touches.push({id:event.changedTouches[i].identifier, x:event.changedTouches[i].pageX - _canvasOffsetX, y:event.changedTouches[i].pageY - _canvasOffsetY});
        }
    }
    return touches;
}

これで懸念事項が全て解決し、明日からの垂直方向の障害物判定にスッキリした気分で進めます!

(⋈◍>◡<◍)。✧♡

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です