JavaScriptでUA判定するコード

var getDevice = (function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0) {
        return 'sp';
    }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
        return 'tablet';
    }else{
        return 'other';
    }
})();

上のコードの解説

まずUAにデバイスのユーザーエージェントを格納します。
「sp」「tablet」「other」はそれぞれ以下のような振り分けにしています。

• sp： iPhone、iPod、Androidとモバイルデバイスが同時に含まれる場合、Windows Phoneが含まれる場合
• tablet： iPad、Androidのみが含まれる場合
• other： それ以外のデバイスからのアクセス

Androidに関しては「Android」のみで記述してしまうとスマホかタブレットかの判定が行われず混同されてしまうので、スマホ、タブレットを振り分けるため「ua.indexOf(‘Android’) > 0 && ua.indexOf(‘Mobile’)」としています。

iPhone、Android、iPad、タブレットなど「sp」と「tablet」で記述したデバイス以外は全て「other」に振り分けられるようになっています。

今後、新しい規格のデバイスなどが登場した場合、そのデバイスが「sp」に振り分けることができるものなら「sp」内にua.indexOf(‘デバイス名’)の記述を追加することで振り分けることができます。

逆にiPadやタブレットはPCと同じ処理でも良い場合などは「tablet」の記述を削除することで、iPhoneやスマホ以外のデバイスは全て「other」に振り分けることができます。

デバイスによって異なるコンテンツを表示させたい場合や単純にUAの判定に使いたい場合など、使用用途は様々なので、状況に応じて追記、削除などして最適化してご使用ください。

Javascriptがなんとなくわかるところから更に理解を深めるのは以下の書籍がおすすめです。日本で1番売れているJavaScript本のリニューアル版、より自由に使いこなしたい方へおすすめの1冊です。

著者：山田 祥寛
出版社：技術評論社
発売日：2016/9/30

Kindle版で探す

Amazon書籍で探す

まとめ

javaScriptを使ってUAを判別する方法を解説しました。

それぞれのデバイスで異なる処理をしたい時やユーザーがアクセスするデバイスの種類を判定したい時などに活用できるシンプルなコードになっています。

今後も新しい規格のデバイスやOSが登場するかもしれませんが、振り分けるためのコードの構造は変わらないかと思います。マイナーなOSやデバイスに厳密に対応していく場合はif、else内に追記していく感じで対応できそうですね。