【WordPress】スマホ対応必須！User-agent(UA)判定ロジックのサンプルコードとPC/Macからのテスト方法を紹介します

最近のWEBサイトにおけるトレンドはスマホ対応。

当サイトのアクセスもPC（Windows/Mac）とスマホ・タブレット（iPhone/iPad/Android）のアクセス比率は、ほぼ半々になっていてスマホにある程度最適化されたコンテンツを表示できるかは、とても重要な要素になっている。

ただ、スマホ用に専用サイトを作ると開発に時間がかかるし、なるべく避けたいというのもまた事実。

当サイトもレスポンシブWEBデザインに対応して、スマホ専用コンテンツを作るというオーバーヘッドは減ったが、ある程度の考慮は必要だ。先日書いたエントリーのような問題もある。

2020.12.24

このスマホからのアクセスを判定するのに便利なのがUser-agentという端末固有の情報だ。

この記事の掲載内容は、2020年12月24日時点の情報です。現在の情報とは異なる場合がございますので、あらかじめご了承ください。

本ページはアフィリエイトプログラムによる収益を得ています。

User-agent（UA）とは

User-agent（UA、ユーザーエージェント）はブラウザなどが持っている情報で、WEBブラウザでの通信に使用するHTTPプロトコルに含まれる。例えばこんなものだ、

●iPhone
Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A334 Safari/7534.48.3

●iPod Touch
Mozilla/5.0 (iPod; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3

●iPad
Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3

●Android
Mozilla/5.0 (Linux; U; Android 4.0.1; ja-jp; Galaxy Nexus Build/ITL41D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

●Internet Explorer
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.0; Trident/5.0)

●Google Chrome
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7

この中に「iPhone」とか「Android」という端末情報を表す文字列が含まれているのが分かるだろうか。つまり、これを見れば何からアクセスしているかはある程度把握できる（ただし、偽装も可能なので絶対的なものではない）。

WordPressでの判定ロジックサンプル

WordPressの場合は、各テーマにあるfunctions.phpに以下のような処理を追加する。

function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android', // 1.5+ Android
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

functionの名前は何でもいいがサンプルでは「is_mobile」とした。
これはiPhoneなどのモバイル端末からアクセスした場合にTRUEを返す。iPadを含めたい場合はそうしてもいいが、iPadは通常のPC向けコンテンツと同じで良いと思うのであえて外している。

実装サンプル

実装は至って単純。

<?php if(is_mobile()) { ?>
    /*【スマホ向けコンテンツの処理】*/
<?php } else { ?>
    /*【PC向けコンテンツの処理】*/
<?php } ?>

こんな感じで行ける。

WordPress3.4以降の場合

ちなみに現在最新のWordPress3.4では「wp_is_mobile」という関数が追加になっていて、上記と同じような動きをする。

ただし、「wp_is_mobile」はiPadからのアクセスもモバイル端末からのアクセスと判定するため、iPadではスマホ向けコンテンツを表示したくない場合は上記の実装をする必要がある。

パソコンからの検証方法

地味に困るのはこれですね。

動いてる環境でいきなり動かすのは怖いから、ローカル環境でテストしたいけど、スマホからアクセスするにはインターネットに公開してないとできね～って思う人は多いかもしれない。そんな方には朗報。

User-agentは前述した通り偽装できるので、PCのブラウザを使ってテストする事が出来る。

お勧めはGoogle Chromeを使う事だろうか。エクステンションで楽に選択できるようになるが、実はGoogle Chromeには標準で用意されているし、手順も大して難しくないのでこれくらいで無駄なエクステンションを増やすことはないかと思う。

Google Chromeから「デベロッパーツール」を起動し、

するとブラウザ下部にこんな画面が表示されるので、右下のボタン（Setting）をクリック。

「User agent」タブをクリックし、

「Override User Agent」のチェックボックスをONにして、例えばiPhoneの場合だと「iPhone -iOS5」を選択。