iOS とAndroid の判別
スマートフォンのOS が、iOS かAndroid かをプログラムで判別します。
OS を判別するプログラムは、OS に依存するプログラムを作る際に、必要になります。
（注）OS に依存するプログラム
OS が異なることで、動作が異なるプログラム
userAgent は、使用しているコンピュータ種別やブラウザなどを特定する情報です。
Web サイトにアクセスする際には、相手Webサイトに、HTTP のuserAgent ヘッダとして送信します【1】。
userAgent の中身の項目は以下となります【2】。
userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
Localization; rv: revision-version-number) product/productSub
Application-Name Application-Name-version
ここで、userAgent の項目の中に、「OS-or-CPU」があることが分かります。
また、userAgent の使い方は、以下となります【2】。
var ua = window.navigator.userAgent;
【参照1】Wikipedia: ユーザーエージェント
【参照2】MDN: window.navigator.userAgent
userAgent の具体例
userAgent の具体例をいくつか見てみます。
- iPhone の場合
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X)
AppleWebKit/601.x.x (KHTML, like Gecho) GSA/x.x.x
Mobile Safari/601.x
- Android スマホの場合
Mozilla/5.0 (Linux; Android5.1.1; KFFOWI)
AppleWebKit/537.x (KHTML, like Gecko) Silk/57.x.x like
Chrome/57.x.x Safari/537.x
- iPhone の場合、userAgent 中に文字列「iPhone」があります。
- Android スマホの場合、userAgent 中に文字列「Android」があります。
iOS かAndsroid かの判別方法
Web アプリが動くコンピュータのOS が、iOS かAndroid かを判別するには、userAgent 中の特定な文字列の有無を判別すればよいことが分かります。
userAgent 中に以下の文字列があることで、各OS を判別します。
- iOS ： 文字列「iPhone」もしくは「iPad」、「iPod」
- Android： 文字列「Android」
プログラム
プログラム1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iOS_or_Android</title>
<script>
var os_name; // iOS, Android
window.onload = function() {
var ele = document.getElementById("output");
//
var ua = navigator.userAgent;
if (ua.match(/Android/)) {
os_name = "Android";
} else if (ua.match(/iPhone|iPad|iPod/)){
os_name = "iOS";
} else {
os_name = "unknown";
}
ele.innerHTML = "OS = " + os_name;
}
</script>
</head>
<body>
<output id="output"></output>
</body>
</html>
プログラムの説明
window.onload 関数
プログラム1 の12 行目で、userAgent を変数ua に代入しています。
13 行目で、ua 中に、文字列「Android」の有無を調べています。
15 行目で、ua 中に、文字列「iPhone」「iPad」「iPod」の有無を調べています。
