ユーザーエージェントでスマホとタブレットとOSとそれ以外を切り替える方法

スマホが登場してからWebサイトの作り方にもたくさんの方法が出て来ました。WordPressの場合、WPtouchやWPtap News Pressといったスマホ表示用のプラグインがあります。また初期テーマであるTwenty ElevenやTwenty Twelveなどは、レスポンシブWEBデザインが採用されています。特にレスポンシブWEBデザインは、やっていて当たり前といった状況になっています。ただ、レスポンシブWEBデザインを使うとスマホだけ出したいとかPCだけだしたいとかいうことが出てくるかもしれません。WordPressの標準関数のwp_is_mobile()や独自に作ったスニペットを使ってユーザーエージェントの切り替える方法を紹介します。

WordPressでのユーザーエージェント切り替え

WordPressではユーザーエージェントを判定するのにWordPress 3.4からwp_is_mobile()が追加されました。wp_is_mobile()は、ブラウザのユーザーエージェントをみてスマホ(タブレット)を判定します。判定してくれるものは以下のものです。

ユーザーエージェントに「Mobile」が含まれているもの

• iPod Touch・iPhone・iPad
• Android
• Kindle
• BlackBerry
• Windows Phone
• Opera Mini
• Opera Mobile
• Silk

以上がwp_is_mobile()で判定してくれるスマホ(タブレット)の種類です。

wp_is_mobile()では、主に「Mobile」が入っているユーザーエージェントをみて判定しています。なので「Mobile」が入っているユーザーエージェントを持つiPad、「Android」が入っているユーザーエージェントを持つNexus 7などのAndroidタブレットなども対象になっています。まぁタブレットをスマホのレイアウトで見せる場合にはwp_is_mobile()で十分ですが、スマホだけ見せたい場合やタブレットはタブレットのレイアウトでみせたい場合ではwp_is_mobile()は使えません。

独自スニペットでユーザーエージェント切り替え

スマホとそれ以外を判定する関数

スマホ判定の関数をつくります。WordPressで使う場合、以下のコードをfunctions.phpに書きます。

function match_mobile_useragent(){
    $ua = getenv('HTTP_USER_AGENT');
    $agent = '/iPhone|Android.*,*.Mobile|Blackberry|IEMobile/';
    if(preg_match($agent, $ua)){
        return true;
    }else{
        return false;
    }
}

上のコードは、スマホでアクセスがあった場合は、trueを返してそれ以外のアクセスはfalseを返します。

スマホとタブレットを切り替える

スマホのみ判定じゃなくタブレットのみの判定も出したい場合は以下のようなコードを作ります。WordPressテーマで使いたい場合は、functions.phpに追加してください。

function is_match($target_ua) {
    switch ($target_ua) {
        case 'mobile':
            $target = '/iPhone|Android.*Mobile|Blackberry|IEMobile/';
            break;
        case 'tablet':
            $target = '/iPad|Android(?!.*Mobile)|Kindle|Silk|PlayBook|RIM\sTablet/';
            break;
        case 'ios':
            $target = '/iPhone|iPad/';
            break;
        case 'android':
            $target = '/Android/';
            break;
        case 'kindle':
            $target = '/Kindle|Silk/';
            break;
        case 'blackberry':
            $target = '/Blackberry|PlayBook|rim\sTablet/';
            break;
        case 'windowsphone':
            $target = '/IEMobile/';
            break;
        /* 引数になかったらfalseを返す */
        default:
            return false;
    }
    $ua = getenv( 'HTTP_USER_AGENT' );
    if( preg_match( $target, $ua )){
       return true;
    } else {
       return false;
    }
}

関数の引数を指定して指定したもののユーザーエージェントがあればtrueを返すような関数です。switch文にある引数のユーザーエージェントの判定をしてマッチしたらtrueを、ない引数はユーザーエージェントの判定をせずにfalseを返す関数です。ターゲットとする条件のロジックとユーザーエージェントを判定するロジックを分離することでターゲットとしたいユーザーエージェントを追加しやすくしています。

まとめ

WordPress標準のwp_is_mobile()も独自のスニペットも基本的に標準ブラウザを対象とした判定方法です。標準ブラウザ以外のブラウザでアクセスした場合に判定対象とならない場合も当然あります。また今後新しいまったく新しいユーザーエージェントが出てくる場合もあるので都度変更する必要があります。wp_is_mobile()は、WordPress側で対応してもらうのを待つ必要がありますが、独自のスニペットはすぐに対応できます。そして独自のスニペットは、WordPress限定だけではなくPHPで動くものでしたらなんでも使えます。

最近はスマホ対応でレスポンシブWEBデザインを使う場面が多いと思いますが、レスポンシブWEBデザインでカバーしたくないところではユーザーエージェントによる判定が多いと思うので使えるのではないかと思います。WordPressでfunctions.phpに書きたくない場合やプラグインでなんとかならんかといった場合には、mobbleというプラグインがあり、スマホ・タブレット・OS別といったものが簡単にできるのでおすすめです。

• 関数リファレンス/wp is mobile – WordPress Codex 日本語版
• mobble