【JavaScript】ユーザーエージェントでスマホとPCで処理を分岐する方法

スマホやタブレット対応といえば、CSSで画面幅に応じて要素のスタイルを変更したり上書きするメディアクエリを用いた方法が主流です。

ただ状況によってはJavaScriptでもうまくスマホ/タブレット対応する必要があります。

例えばスマホの場合は余計なファイルを読み込まないようにしたり、処理自体を別のものに置き換えたり。

スマホ表示で使わない容量の大きいファイルを読み込むのは無駄な通信になってしまいますからね。

ページ表示速度やパフォーマンス、ひいてはSEOにも影響があると思います。

JavaScriptでユーザーエージェントによる条件分岐

CSS同様画面幅に合わせて対応する方法もありますが、JavaScriptではユーザーがどんな端末で閲覧しているか、ユーザーエージェント判別が可能です。

ここではその手法によるコードを掲載します。

スマホ、タブレット、PCの条件分岐

<script>
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
        // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        // タブレット向けの記述
} else {
        // PC向けの記述
}
</script>

if文を使ってユーザーエージェントでの条件分岐になってます。

条件分岐解説

スマホの条件分岐を少し改行を入れて解説してみますね。

/*〜省略〜*/
if (navigator.userAgent.indexOf('iPhone') > 0 ||
　　 navigator.userAgent.indexOf('Android') > 0 &&
　　 navigator.userAgent.indexOf('Mobile') > 0) {
        // スマートフォン向けの記述
}/*〜省略〜*/

もし、ユーザーエージェントの中に「iPhone」が含まれているか、
ユーザーエージェントの中に「Android」が含まれている。
なおかつユーザーエージェントに「Mobile」が含まれている。

という条件になってます。

そして条件に合致する場合には{ }の部分に記述する処理が実行されるという具合です。

論理演算子

「||」が、「OR・もしくは」
「&&」が、「なおかつ」

という意味になります。

こういった条件式には他にも

「==」で、「等しい」
「!==」で、「ノットイコール・等しくない」

といった論理演算子と呼ばれる記号が用いられます。

論理演算子の「!」は上記のように「==」と組み合わせて等しくないというようにも使いますし、他の演算子と組み合わせたり式と組み合わせて、「～ではない」といった否定の意味になります。

例えば以下のように先ほどのスマホを判別する条件を全て否定することも出来ます。

/*〜省略〜*/
if ( !(navigator.userAgent.indexOf('iPhone') > 0 ||
　　 navigator.userAgent.indexOf('Android') > 0 &&
　　 navigator.userAgent.indexOf('Mobile') > 0 ) ) {
        // スマートフォン向けの記述
}/*〜省略〜*/

先ほどの条件式の「if( 式 )」を「if( !( 式 ) )」というようにカッコで一まとめにした上で全否定するように「!」をつけています。

これを使ってスマホ以外という条件を指定することも出来ます。

スマホ以外への条件分岐

<script>
if ( !(navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 ) ) {
        // PC向けの記述
} else {
        // スマホ向けの記述
}
</script>