JavaScriptを利用して、スマートフォンを判別する

jQuery

他の方の業務で必要となりサクッと作ったので、物忘れのひどい自分へのメモとして記載しておきます。
やりたかったことは、スマフォページの中でアプリのダウンロードを行う際に、端末がAndroidなのかiPhoneなのかを判別した上で「Google Play」または「AppStore」へ遷移する様にしたいとのことでした。

 

※判別するのに、jQueryを利用していませんので、不要な場合にはCDNからの読み込みを削除してしまってください。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript"><!--
    var uri = null;
    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0) {
      uri = 'https://itunes.apple.com/';
    } else {
      uri = 'https://play.google.com/store';
    }
  -->
  </script>
</head>

<body>
  <button id="download">アプリをダウンロード</button>
  <script type="text/javascript"><!--
    $(document).ready(function() {
      $('#download').click(function() {
        alert(uri);
      });
    });
  -->
  </script>
</body>
</html>

 

各行の説明をしておきます。

 

4行目
GoogleのCDNから最新のjQueryを読み込んでいます。

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

5~13行目
ここがメインの機種の判別を行っている処理となります。

  <script type="text/javascript"><!--
    var uri = null;
    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0) {
      uri = 'https://itunes.apple.com/';
    } else {
      uri = 'https://play.google.com/store';
    }
  -->
  </script>

 

行っている処理内容は下記のようになります。

  • 接続してきたユーザーのUAの文字列に「iPhone」が含まれているか?
  • 接続してきたユーザーのUAの文字列に「iPad」が含まれないか?
  • 接続してきたユーザーのUAの文字列に「iPod」が含まれているか?

string.indexOf(“hoge”) は、”string” に “hoge” が含まれている場合、「0」以上を、含まれない場合には「-1」を結果として返します。

この処理に当てはまる場合には、「AppStore」へ飛んで行ってもらうことになります。

 

それ以外の場合には、「Google Play」に飛んで行きます。

ここの処理については、「本当にAndroidなのか?」と判別するための処理を行った方がいいのかもしれませんが、あくまで「サクッと」なので今回は省略しました。

 

このままソースコードをコピーして利用した場合には、ぶっ飛びませんのでご注意ください。

コメント

タイトルとURLをコピーしました