wp_is_mobile() を JavaScript とクッキーで実装してみたよ

December 16, 2014

WordPress と JavaScript との連携を考えるとき、wp_is_mobile() 関数を JavaScript でも使いたい、と思うことがあります。正確には、サーバー側のモバイル判定とクライアント側のモバイル判定を一致させたいときです。

Image

そんなコードは誰でも書ける。誰でも書けるなら、誰かが書いたコードを丸コピーして使いたい。むしろ、どうぞ使ってください、そんな気持ちで公開している人がいるに違いない。だから筆者は胸を張って検索しました。見つからない。せめて 3ページ目までには出てきて欲しい。なかった。無いなら仕方ない。自分で書くしかない。現実は甘くなかった。

設計

最近はクッキーが無効になっているクライアントなんてマイノリティ。PHP で wp_is_mobile() の結果をクッキーに保存して、JavaScript でそれを読むようにします。なんだよタイトル詐欺かよ。そんなことはない。目的と手段を取り違えてはいけない。でも万一、クッキーが無効にされている場合を考えて、ちゃんと JavaScript のコードも書いたよ。

PHP – setcookie()

functions.php に以下を追加。

setcookie( 'isMobile', wp_is_mobile() ? 'true' : 'false', 0, '/' );

3番目のパラメータはクッキーの expire で、0 を指定するとセッション クッキー。4番目のパラメータはパス指定。パスを指定しないと、URL上のディレクトリごとにクッキーが保存されてしまう。つまり WordPress でスラッグを使った URL にしていた場合、記事ごとに別のクッキーになってしまいます。それを避けるため、サイトのルート パスを指定しています。

上記のコードはドメインのルートが WordPress サイトの場合の例です。クッキーのパスは、あなたのサイトに合わせて設定してください。

PHP – wp_is_mobile()

JavaScript に移植するために wp_is_mobile() のソースコードを拝見。

function wp_is_mobile() {
    static $is_mobile;

    if ( isset($is_mobile) )
        return $is_mobile;
 
    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }

    return $is_mobile;
}

JavaScript – isMobile()

PHP の static は JavaScript に無いですね。でも似たようなことはできるらしい。

function isMobile() {
    if ( typeof isMobile.f === 'undefined' ) {
        if ( !jQuery.cookie('isMobile') ) {
            var ua = window.navigator.userAgent;
            if ( ua.indexOf('Mobile') > -1
                || ua.indexOf('Android') > -1
                || ua.indexOf('Silk/') > -1
                || ua.indexOf('Kindle') > -1
                || ua.indexOf('BlackBerry') > -1
                || ua.indexOf('Opera Mini') > -1
                || ua.indexOf('Opera Mobi') > -1 ) {

                isMobile.f = true;
            } else {
                isMobile.f = false;
            }
        } else {
            isMobile.f = (jQuery.cookie('isMobile') == 'true') ? true : false;
        }
    }
    return isMobile.f;
}

jQuery の cookie プラグインを使っています。

最後に

スマホ対応(mobile-friendly)を重要視する Google 先生は、モバイル デバイスではあるものの、タブレットには PC 向けのサイトを表示させるべきだと考えているようです。wp_is_mobile() は、モバイル デバイス(スマホ+タブレット)か、PC かを判別する関数であり、この関数を使ってコンテンツの表示を変えることは、Google 先生のご意向に反することになります。このあたりは注意が必要です。

ウェブサイトに PC 用とスマートフォン用で異なるページがあり、タブレット専用のページがない場合、Google の認識では、通常、タブレット ユーザーにはサイトのスマートフォン用ページではなく PC サイトが表示されます。

Flash コンテンツを出し分ける場合には、wp_is_mobile() が良いのですけどね。ケース バイ ケースといったところでしょうか。

One thought on “wp_is_mobile() を JavaScript とクッキーで実装してみたよ

  1. Pingback: これで完璧! WordPress で setcookie するベストな方法 | Design Hack and Slash

コメントを残す

メールアドレスが公開されることはありません。