javascriptでUAを取得してphpで処理する。

電脳備忘録

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から2年以上経過しています。

需要がなさそうですが、javascriptでUAを取得してajaxでphpに値を渡し、phpで処理して戻すコード。

最近のiOSはPHPでiPadの判別できないのでjavascriptでモバイル(iPod、iPhone、iPad、Android)とそれ以外(PC)に分けて値をPHPに値を渡して処理して戻すコードを書いたのですが、よくよく考えたらJavascriptのみで対応できることが分かったので結局お蔵入り・・・。

PHPで処理することに固執して迷走したなんて言えない・・・とはいえなんかの時に使う機会があるかもしれないので残しておきます。

<script>
const ua = window.navigator.userAgent.toLowerCase();
const isMobile = ua.indexOf("iphone") >= 0 
  || ua.indexOf("ipad") >= 0 
  || (ua.indexOf('macintosh') > -1 && 'ontouchend' in document) /* iPad */
  || ua.indexOf("ipod") >= 0
  || ua.indexOf("android") >= 0;

// XMLHttpRequestオブジェクトを作成
var xhr = new XMLHttpRequest();
// POSTリクエストを作成し、process.phpに送信
xhr.open('POST', 'process.php', true);
// リクエストのContent-Typeを設定
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// レスポンスが返ってきた時の処理
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // レスポンスをコンソールに表示
    var response = xhr.responseText;
    console.log(response);
    if (response.trim() === 'pc') {
      //PC
    } else {
      //モバイル
    }
  }
}
</script>

process.phpの内容

<?php
// mobile パラメータを取得
$mobile = $_POST['mobile'];

// モバイルかPCかを判定
if ($mobile === 'true') {
    // モバイルの場合の処理
    $response = 'mobile';
} else {
    // PCの場合の処理
    $response = 'pc';
}

// レスポンスを出力
echo $response;
?>

上記のような小難しいことをしなくても結局これで何とかなりました。
モバイル(iPod、iPhone、iPad、Android)だったらtrue、それ以外(PC)だったらfalseが変数isMobileに格納されるのでその値を元に分岐処理します。

const ua = window.navigator.userAgent.toLowerCase();
const isMobile = ua.indexOf("iphone") >= 0 
  || ua.indexOf("ipad") >= 0 
  || (ua.indexOf('macintosh') > -1 && 'ontouchend' in document) /* iPad */
  || ua.indexOf("ipod") >= 0
  || ua.indexOf("android") >= 0;
console.log(isMobile); 
if (isMobile === true) {
  //モバイル

} else {
  //PC

}//end if
0%