はじめに

本関数の内容

• ES2015のアロー関数を使用
• ブラウザでWebページを表示時にアクセス元のOSをユーザエージェントを元に判定する
• 正規表現を使ったiOS, Android, その他のOSを反映

各OSのユーザエージェントはこちらを参考にした

iPadは13よりiOSではなくiPadOSになり、PC向けのWebサイトを表示する設定をしている場合はUserAgentにiPadと入ってくれないので、トリッキーな判定をする必要がある

ref: https://stackoverflow.com/a/57924983/4480860

iOSかAndroidかを判定する関数

Androidの場合に表示するURLスキーム

const getMobileOS = () => {
  const ua = navigator.userAgent
  if (/android/i.test(ua)) {
    return "Android"
  }
  else if (/iPad|iPhone|iPod/.test(ua))
     || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1){
    return "iOS"
  }

  return "Other"
}

使い方

この関数の例はAndroidとiOSで開いている場合にそれぞれストアのアプリのサイトを開いたり、アプリを直接起動するurl schemaを出し分けるのに使う。

const os = getMobileOS()
# console.log(os) => 'Android'
# console.log(os) => 'iOS'
# console.log(os) => 'Other'

補足 正規表現の説明

説明した関数の中で使用している/android/i.test(ua)を例に説明

• /android/ が正規表現の本体
• /android/i のiは正規表現のフラグで大文字小文字を判定しない
  • AndroidやANDROID,aNdRoIdに対応することになる
  • /android/iでは検証する文字列のどこかに大文字小文字を気にしないでandroidを含む文字列があるかどうかを判定する
• /android/i.test(ua) のtestメソッドは引数の文字列uaに含まれる文字列が/android/iの正規表現にヒットするかどうかをtrue/falseで返す