jQueryを使ってuserAgent判定を行う方法

知り合いから
『自分で作ったリファラページに貼っているリンク先を、ユーザーのデバイスがPCだったらPC用ページに。モバイル・タブレットだったらモバイル用ページのリンク先に飛ぶようにして欲しい』
という依頼を受けたので、やってみました。

が、何しろ私userAgent判定をしたことがなかったもので、userAgentなるものさえもよくわかっていませんでした...笑

そんな
『userAgentなんて知らん。でもやり方知りたい！』
という私と同じような気持ちを抱いている方に、jQueryでuserAgent判定を行う方法を今回は書いていきたいと思います＾＾

userAgentとは？

userAgentがそもそもなんなのかから説明しますね。

ユーザーがサイトを訪れる時って必ず、
「PCからアクセスしています」とか「Chromeからアクセスしています」といったどのような環境からアクセスしているかの情報が送られます。
その、ユーザーがどのような環境でアクセスしているのかという情報のことをuserAgentといいます。

ユーザーの環境情報をjQueryで取得して、その環境によって分岐することができるのです！
では今回は、スマホかタブレットかPCかといった環境情報でリンク先を分岐させてみたいと思います。

HTML

<!--ここではスマホ用リンクを貼っています-->
<a class="url_a" href="https://example.com/sp/">リンクです</a>

jQuery

$(function () {
    // ユーザーのuserAgent情報取得
    var ua = navigator.userAgent;
    // 環境によって分岐
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
        // スマホ用コード
        $('.url_a').attr("href", "https://example.com/sp/");
    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
        // タブレット用コード
        $('.url_a').attr("href", "https://example.com/tb/");
    } else {
        // PC用コード
        $('.url_a').attr("href", "https://example.com/pc/");
    }
})

これで、ユーザーがアクセスしてきたデバイス環境によって、aタグのリンク先が勝手に変更されるようになります。
今回のこのやり方は簡単にいうと、もともとhtmlで記述したaタグのリンク先をjQueryのattrで変更しているという感じです。

navigator.userAgentだけでユーザーの環境情報が取得できるとは簡単ですね！

ちなみに今回はaタグで飛んだ先がリファラで、このリファラではページにきて１秒後にまた違うリンク先に飛ぶようにしていて、
そのリファラ内に書かれたリンクをuserAgent判定するという依頼だったので、困りました笑

なぜかというと、リファラページに記述してある、
「１秒でまた違うリンク先に飛ぶ」という記述がmeta refreshでリダイレクトする書き方になっていたからです。
『え、metaタグか...。metaタグってjQueryで書き換えられるの？したことないぜ...。』
と一瞬焦りましたが、metaタグもhtmlタグですもんね。
上と基本同じコードでセレクタを変えるだけで普通に書き換えることができました！

よ、よかった〜笑