レスポンシブだけじゃいられない？時と場合によるユーザーエージェント判別の方法

2013.06.14 | 初心者向け | 覚えておきたい

スポンサードリンク

先週、某iPhoneアプリをリリースした際に公式サイトを担当したネイビーです。
iPhoneアプリだから公式サイトはiPhoneで見れればいい！というわけではないんですね。知りませんでした。だったらレスポンシブで！と行きたいものの、ニョーンと伸び縮みするスタイルが万人受けするものでもありません。
iPhone向けとPC向けのページを作ってユーザーエージェントで振り分ける方針が決まりつつ、いつどこで判別したらよいものか？リリース前日まで悩んでしまいました。

レスポンシブだけじゃいられない？

PHPによる判別

スマホ向けとPC向けのコンテンツを振り分ける際にまず思いつくのは、サーバ側のプログラムでユーザーエージェントを判別して処理を分岐する方法です。端末によってコンテンツの種類や量を調節したり、マークアップを変更したり、バナーを差し替えたりと自由自在です。
もともとサーバ側のプログラム言語にて構築するサイトであれば、迷わずこの方法でしょう。

例えばPHPの場合は、

<?php $ua = $_SERVER['HTTP_USER_AGENT']; if(preg_match('/iPhone/i', $ua) || preg_match('/iPad/i', $ua)) { 　　// iPhoneかiPad向けの処理 } else { 　　// それ以外の処理 } ?>
※状況に応じて判定条件を書き換えてください

PHPクラスライブラリ Mobile Detect

当WP-Dメンバーより、ユーザーエージェントの判別を行うPHPのクラスライブラリを教えてもらいました。
»Mobile-Detect

使い方は、

include 'Mobile_Detect.php'; $detect = new Mobile_Detect();
if ($detect->isMobile()){ 　　// スマホ向けの処理 } else{ 　　// それ以外の処理 }

スマホ判定だけでなくisiPhone()、isAndroidOS()といった細かい判定メソッドも用意されています。使いやすそうで、最近の主流となりつつあるという話にうなずけます。

JavaScriptによる判別

静的HTMLやCMSを利用する場合は、JavaScriptによる判別ができます。基本はレスポンシブWebデザインで対応して、スマホのときだけブラウザのアドレスバーを隠したり、フリックしたいというような場合に向いています。

var ua = navigator.userAgent; if (ua.indexOf('iPhone') != -1 || ua.indexOf('iPad') != -1 ) { 　　// iPhoneかiPad向けの処理 } else{ 　　// それ以外の処理 }

※状況に応じて判定条件を書き換えてください

.htaccessによる判別

スマホ向けのサービスでも、プレスリリースの都合上PCから見れるリッチなページは欲しいものです。iPhoneとiPadだけ専用ページにダイレクトしたい、そのような場合は.htaccessによる判別を使うとよいでしょう。

トップページ(/)にアクセスした場合に、もしスマホであれば(/mobile/)にリダイレクトする例です。

RewriteEngine on RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|iPad|Android) RewriteRule ^$ /mobile/ [R]

※状況に応じて判定条件を書き換えてください

このようにトップページだけ振り分けて、お知らせページなどシステム開発が絡んでくる部分はスマホでもPCでも見れるようにレスポンシブ対応してもよいでしょう。モバイルファーストの軽いサイトに適しています。

wp_is_mobile()による判別

最近のWordPress(バージョン3.4以降)では、条件分岐タグにwp_is_mobile()があります。
»Function Reference/wp is mobile « WordPress Codex

テーマで利用するは、

<?php if (wp_is_mobile()) : ?> // スマートフォン向けの処理 <?php else: ?> // それ以外の処理 <?php endif; ?>

※この場合の判定条件はWordPressの仕様になります

wp_is_mobile()を利用して広告バナーを差し替えたり、モバイルだったらサイドバーなし、などとできますね。

ユーザーエージェントを見なくてよくなった？

ユーザーエージェントを判定する理由のひとつにGoogle Adsenseがありますが、最近の改訂でレスポンシブ対応が可能となりその必要もなくなりそうです。
これまではGoogle Adsenseコードを改変したり非表示にしてはいけないなど制約がありました。そのためPHPやWordPressの関数でユーザーエージェントの判定をした上でPC用・スマホ用と広告の振り分けを行っていた方も多いでしょう。今回の改訂では、広告サイズの振り分けをGoogle Adsenseコードの中に記述できるようになっています。
»AdSense 広告コードの修正 – AdSense ヘルプ

目的に合わせて使おう

ユーザーエージェントを判別するのは意外と簡単！ということがおわかりいただけたでしょうか。
どの方法も万能というわけではないので、やりたいことに合った方法や自分の担当部分に合わせて使いこなしてみましょう。

著者情報

WPD-Navy: ひょんなことからWordPressに出会いました。