Simplicity2 を使うから WPtouch を捨てる

　昨日入れ替えたテーマ「Simplicity2」は 1 つで PC にもモバイル端末にも対応が可能となる。以前使用していた Suffusion も対応はしていたのだが、違和感の無いシームレスなレスポンシブとは言い難い物だったから WPtouch を用いていた。
　Simplicity2 はレスポンシブであってもモバイル端末から特に違和感無く柔軟に使用することが可能と判断したので、長いことお世話になった WPtouch を削除する方向に決めた。その方がメンテナンスが楽だからなんてメリットもある。

Web Server 側のお話し

　Nginx では Reverse Proxy を用いた Cache を使うような運用をしているので、生成するキャッシュを PC 向けとモバイル端末、携帯電話用の 3 つで分けている。
　PC 用テーマと WPtouch では異なる内容である為、キャッシュを分けることは必須。
　これは Simplicity2 に於いても同じ事が言える。内部の関数で User-Agent を見る事により出力するコードを変更している為だ。このままキャッシュを一本化出来ると楽だけどなーと思ったけど、Viewport の記述は必須だし PC と同じって訳にもいかないようだから仕方の無いこと。

モバイル端末判別の仕組みを見る

　どういう感じにモバイル端末と切り分けているのかなと、少し Simplicity2 のソースを探してみると次の様になっていた。

//スマホ表示分岐
function is_mobile(){
  if ( is_page_cache_enable() ) {
    return false;
  }
  if ( is_tablet_mobile() ) {
    return wp_is_mobile();
  }
  $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android *** Only mobile
    'Windows.*Phone', // *** Windows Phone
    '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(){
  if ( is_page_cache_enable() ) {
    return false;
  }
  if ( is_tablet_mobile() ) {
    return wp_is_mobile();
  }
  $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android *** Only mobile
    'Windows.*Phone', // *** Windows Phone
    '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
    'Mobile.*Firefox', // Firefox OS
    'Opera Mini', // Opera Mini Browser
    'BB10', // BlackBerry 10
    'Touch' // MSIE Touch Function
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

　この関数はオーバーライドできるので、子テーマの functions.php にまるっと記述することで済ませた。

Nginx 側の調整

　モバイル端末判定を今一度見なおすことにした。うちのサーバーでは次のようなマッピングを行っている。map ディレクティブは http ブロック内に記述する。

# 0 = PC, 1 = Mobile, 2 = tablet, 3 = Ktai
map $http_user_agent $is_mobile {
    default 0;
    ~*iPhone           1; # iPhone
    ~*iPod             1; # iPod
    ~*incognito        1; # iPhone Browser
    ~*webmate          1; # iPhone Browser
    ~*Android.*Mobile  1; # Android Smartphone
    ~*Windows.*Phone   1; # Windows Phone
    ~Touch            1;  # Windows IE Touch Function
    ~*Mobile.*Firefox  1; # Firefox OS
    ~*Opera Mini      1; # Opera Mini Browser
    ~*BB10             1; # BlackBerry 10
    ~*BlackBerry       1; # Other BlackBerry
    ~*webOS            1; # Web OS
    ~*DoCoMo           3; # DoCoMo
    ~*UP.Browser       3; # au
    ~*Softbank         3; # Softbank
    ~*WILLCOM          3; # Willcom
    ~*emobile          3; # emobile
    ~*J-PHONE          3; # J-PHONE
    ~*MOT-             3; # Vodafone
}

　Simplicity2 の定義と Nginx 側の定義は互いに補い合う感じの調整とした。タブレットは PC と同じ物とみなすようにしているので、特別タブレット用としてのキャッシュは生成させていない。
　server ブロック内でキャッシュさせるときの KEY は次の様にしておけばキャッシュはターゲット別に生成されるようになる。

        proxy_cache_key    "$scheme://$host$request_uri$is_mobile";

　その他、Simplicity2 はテーマの機能として Vary: User-Agent を出力してくれないので逆にありがたい。
　別途 Nginx の Reverse Proxy 運用ではフロントエンド側で「add_header Vary User-Agent;」を記述してあげる事が望ましい。これはそのままの意味で、User-Agent によって出力される内容が異なることを通知する為に合った方が良いとされている。
　WPtouch に関連する記述も一緒に削除してしまうとスマートになる。例えば PC ビューとモバイルビューの切り替えで Cookie を見る所などなど。

おわりに

　テーマに合わせてサーバー側も適切に設定をしてあげないと噛み合わない所が出てくる事は WPtouch と変わらずだが、なによりもテーマを一本化出来る事が運用に於いて非常に楽が出来る。カスタマイズの労力が半分になるし、意識すべきポイントも減るメリットは非常に大きい。
　WPtouch は無料版だったので、少し調整したくてもソースを直接いじる場面が多く、良い運用とは言えなかった。そこから脱せたという事が今回得られた大きな収穫だ。