dorayakiBlog
~絵や興味ある事について書いてます~
header image

PCとスマホからのアクセスをJavaScriptのユーザーエージェントで振り分ける方法

パソコンやスマホからのサイトへの訪問をそれぞれのデバイスに適した表示形式や別々の専用のページへ振り分けたい事もある。

そんな時にはユーザーエージェントと呼ばれるサイト訪問者の使用環境等のユーザー情報を参照して振り分ける事が出来る。

ユーザーエージェントのデバイスを示すiPhoneやWindows等の様な文字列を検索する関数を用いて判別する事になる。

サイト作成で最も使われるプログラミング言語のJavaScriptではnavigator.userAgentでユーザーエージェントを取得する。

navigator.userAgentをindexOf('文字列')の関数で該当する文字列が含まれているか検索出来る。文字列が見つかった場合は0以上の見つかった位置のインデックスの数値を、見つからない場合は-1を返すのでその戻り値でデバイスを判定する。

パソコンとスマホで振り分けるならばどちらかを文字列に指定する。スマホ側ならば'iPhone' 'Andoroid' 'iPod' 'iPad'で大体のスマホやタブレットからのアクセスは判別出来る様になる。

そしてその判別をif文かswitch文の条件判定で選別して振り分ける処理をすれば良い。

例 : パソコンの場合の処理)
<script>
if(navigator.userAgent.indexOf('iPhone') == -1 && navigator.userAgent.indexOf('Android') == -1 && navigator.userAgent.indexOf('iPod') == -1 && navigator.userAgent.indexOf('iPad') == -1) {
/* パソコンの場合の処理 */
} else {
/* スマホやその他での処理 */
}
</script>

その他サイト作成のサーバサイドでよく使われるPHPでもサーバー変数の$_SERVER['HTTP_USER_AGENT'];を使用してユーザーエージェントを取得する事が出来る。そしてpreg_match()等のPHPの文字列検索の関数を使って判定するJavaScriptと同じ流れである。