JavaScriptでデバイスを判別する方法　ユーザーエージェント（navigator.userAgent）の基本をサンプルコードとともに解説

2021年4月30日2021年5月17日

Webサイトによっては、ユーザーのデバイスによって表示するものを変えることがあります。
最近ではCSSを使ってデバイスに応じたコンテンツを表示しています。
CSSではメディアクエリを使ってデバイスの画面幅で判断していますが、例えば「画面幅が1200px以上だったらデスクトップパソコンのモニターだと考えてデスクトップパソコン用のバナーを、1200px未満であればタブレットやスマートフォン用のバナーを表示させる」という設定をします。

しかし、CSSでは画面幅以外で判定を行うことはできないため、画面幅が同じデスクトップのモニターとタブレットを区別することができません。
この場合、どうすればよいのでしょうか？
ユーザーが使用しているデバイスに応じて表示内容を変えたい場合は、JavaScript を使い、表示を切り替える方法があります。
今回はユーザーエージェントの情報を使い、JavaScriptで判定する方法を解説していきます。

navigator.userAgentの解説

デバイスを判別するにはnavigator.userAgentを使う

JavaScript でWebサイトを見ているユーザーがどのようなデバイスを使っているのかを知るには以下のコードを使います。

navigator.userAgent

navigatorはユーザーが使っているブラウザの情報を持っているオブジェクトです。
そして、userAgentはnavigatorオブジェクトが持つ情報の中からデバイスの情報を取り出すプロパティです^[1]厳密に言えば、userAgentプロパティは、ブラウザからサーバーに送信されたUser-Agent リクエストヘッダーの値を返します。。

このnavigator.userAgentを使うことで、ユーザーのデバイスを判断していきます。

navigator.userAgentの中身

navigator.userAgentでは以下のような情報が得られます^[2]List of mobile browser User-Agent strings。

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1

この内容を詳しく見ていくことはしませんが、この情報の中に"iPhone"という文字があることに注目して下さい。
これは文字通り、このユーザーがiPhoneを使っていることを示しています。
このように、navigator.userAgentで得られる情報の中にはユーザーが使っているデバイスの情報が含まれています。

navigator.userAgentで判別できるデバイス

navigator.userAgentを使うことによって、以下の４種類のデバイスを判別することができます。

iPhone
iPad
Android
その他デスクトップパソコン

iPhone、iPad、Androidについては、navigator.userAgentで得られる情報の中にそのまま「iPhone」や「iPad」、「Android」という文字が含まれています。
デスクトップパソコンについても、「Windows」や「Macintosh」という情報が得られます。
しかし後述するように、navigator.userAgentでユーザーのデバイスを判別する場合は、これらの情報でデスクトップパソコンかどうかを判断するよりも、「iPhoneでもiPadでもAndroidでもないユーザー」という条件で判断するのが一般的です。

navigator.userAgentを使ったサンプルコード

ここからはnavigator.userAgentを使ったサンプルコードをいくつか紹介します。

iPhone、iPad、Androidの判別

ユーザーの使っているデバイスがiPhoneかiPadか、それともAndroidなのかを判別するには、以下のようなコードを使います。

サンプルコード１

var ua = navigator.userAgent;if (ua.indexOf('iPhone') > 0){//iPhone向けの処理}

このコードではnavigator.userAgentの情報を変数uaに代入し、indexOfメソッドを使ってif文を記述しています。
indexOfメソッドは、その後に書かれた文字を検索し、その文字があれば何文字目にあるのかを数字で返し、文字がなければ「-1」を返します。
サンプルコード１の「ua.indexOf('iPhone’)」という記述では、変数uaに「iPhone」の文字があれば０より大きな数字が返り、「iPhone」の文字がなければ「-1」が返ってきます。
この結果を利用してif文を作成し、サンプルコード１ではデバイスに応じた処理をしようとしています。
iPadかどうかを知りたい場合は、サンプルコード１の「iPhone」と記述されている部分を「iPad」に置き換え、同様にAndroidかどうかを知りたければ「Android」に置き換えます。

デスクトップパソコンの判別

デスクトップパソコンの判別をする場合は、以下のようなコードを使います。

サンプルコード２

var ua = navigator.userAgent;if (!(ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('Mobile') > 0 )) {// PC向けの処理}

デスクトップパソコンの判別はサンプルコード２のように、「iPhoneでもiPadでもAndroidでもない場合」という条件式で記述されることが一般的です。
その理由は、デスクトップパソコンがWindowsやMacintoshだけでなく、Linuxなどの他のOSであることがあるため、特定のデバイスを指定するよりも、「iPhoneでもiPadでもAndroidでもない場合」としたほうが判別の精度が上がるからです。
サンプルコード２では「Mobile」つまり、モバイル端末かどうかもチェックし、さらに判別の精度を上げています。

まとめ

今回はユーザーが使用しているデバイスをJavaScript で判別する方法を解説してきました。
今回はデバイスの判別を中心に解説していきましたが、ユーザーが使っているブラウザの判別にも使うことができます。
このようにnavigator.userAgentで得られる情報は多岐にわたるため、それらの情報を上手く利用しながら、ユーザーに最適のコンテンツを提供していきましょう。

参考

注[+]

注
↑1	厳密に言えば、userAgentプロパティは、ブラウザからサーバーに送信されたUser-Agent リクエストヘッダーの値を返します。
↑2	List of mobile browser User-Agent strings

トラブルJavaScript,JSのトラブル

Posted bypromapedia