Nginx Mobile Theme – Nginxリバースプロキシ下で動作するモバイル用のテーマ切り替えプラグイン

Nginxリバースプロキシ環境下で使用するためのモバイル用のテーマ切り替えのプラグインをリリースしました!

http://wordpress.org/plugins/nginx-mobile-theme/

banner-772x250

で、これは通常のプラグインと違ってサーバーサイドの設定と連動させることが必須になります。

そんなわけで、導入はめんどくさいですが、テーマをモバイルデバイスによって切り替えているサイトでパフォーマンスに問題を抱えている場合は劇的な改善が期待できます。

(通常の環境のWPtouchとくらべて、秒辺りの同時接続数が数百倍向上します。)

モバイルテーマ切り替え系の技術とリバースプロキシの組み合わせで発生する問題

リバースプロキシはURLをキーにして、静的にキャッシュするための技術です。

一方でモバイル切り替え系のWPtouchなどのプラグインは、同じURLに対してユーザーエージェントを判別してテーマを切り替えるためにリバースプロキシ側でキャッシュの区別をすることができません。

これは、Nginxの設定で回避することもできますが、コンテンツを更新した際にPC、モバイル両方のキャッシュをフラッシュする必要があり、そのためのWordPress側でのプログラミングが必要でした。

このプラグインは、Nginx Cache Controllerプラグインと連動することで、これらの問題を比較的簡単な設定で解決することができます。

WordPress_›_Nginx_Cache_Controller_«_WordPress_Plugins

Nginx Mobile Themeについて

このプラグインは、NginxリバースプロキシからWordPressへ特殊なリクエストヘッダーを送ってもらい、その値によってテーマを切り替えます。

WordPress › Nginx Mobile Themes « WordPress Plugins

主な機能は以下のとおりです。

  • モバイルテーマ、PCテーマそれぞれのテーマでの出力を、Nginxリバースプロキシによって静的にキャッシュさせることを目的としており、それに伴う様々な問題を解決します。
  • 記事の保存時やコメントの投稿時などのタイミングで、モバイル用、PC用それぞれのプロキシーキャッシュをフラッシュします。
  • モバイルデバイスの判別はNginx側だけで行うのでとてもエコです。
  • 使用するテーマはテーマカスタマイザーで設定することができます。
  • タブレット用テーマ、スマフォ用テーマなど複数のデバイスに対してそれぞれのテーマを適用することができます。
    (Nginx側の設定及びフィルターフックを使用したカスタマイズが必要です。)

動作環境

  • PHP 5.3以上
  • WordPress 3.7 以上
  • Nginxリバースプロキシ
  • Nginx Cache Controller 2.0.0 がWordPressで有効化されていること。

Nginx Mobile Themeの使い方

スマフォ等で表示させるテーマを設定するにはWordPressの外観以下にあるカスタマイズで、テーマを選択してください。

screenshot-1

テーマは、wp-content/themes以下にあるテーマを選択可能です。


Nginxの設定

Nginx側には以下の設定を追加してください。

UAを判定するための設定を追加する。

正規表現の部分はあくまでも一例です。

set $mobile '';
if ($http_user_agent ~* '(iPhone|iPod|incognito|webmate|Android|dream|CUPCAKE|froyo|BlackBerry|webOS|s8000|bada|IEMobile|Googlebot\-Mobile|AdsBot\-Google)') {
    set $mobile "@smartphone";
}

Nginx Mobile Themeはデフォルトでは、@smartphoneという文字列を受け取ると、テーマの切り替えを行います。

ここでは、正規表現にマッチしたUAの場合に、$mobile という変数に @smartphone という文字列を格納しています。

プロキシキャッシュキーの設定

次にプロキシキャッシュのキーがPCとモバイルデバイスそれぞれで別々になるように設定します。

この設定に関してはほとんどの場合コピペでいいはずです。

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

この値は通常はリクエストがあったURLを指定しますが、このURLの先頭に先ほどのUAの判定結果の文字列を追加します。

この設定を間違えるとWordPress側から適切にキャッシュをフラッシュできないのでご注意ください。

リバースプロキシからWordPressに対して判定結果を送信する設定を追加

最後にリバースプロキシからWordPressに対してUAの判別結果を送信するための設定を追加します。

proxy_set_header X-UA-Detect $mobile;

以上が完了したらNginxを再起動して動作確認をしてみてください。

Nginx Cache Controllerのドキュメントも参照してください。

http://wordpress.org/plugins/nginx-champuru/installation/

以上が完了したらテーマカスタマイザーに移動してテーマを変更してみてテストしてください。


Amimotoでの設定

Amimotoでこのプラグインを使用するための設定は簡単です。

UAを判定するための設定を追加する。

/etc/nginx/conf.d/default.conf の17行目をアンコメントしてください。

修正前:

#include /etc/nginx/mobile-detect;

修正後:

include /etc/nginx/mobile-detect;

リバースプロキシからWordPressに対して判定結果を送信する設定を追加

/etc/nginx/nginx.conf に以下のように行を追加してください。

修正前:

proxy_set_header  X-Forwarded-For    $proxy_add_x_forwarded_for;
proxy_set_header  Accept-Encoding    "";

修正後:

proxy_set_header  X-Forwarded-For    $proxy_add_x_forwarded_for;
proxy_set_header  Accept-Encoding    "";
proxy_set_header  X-UA-Detect        $mobile; # この行を追加

wp-config.php に設定を追加

wp-config.php の上の方に以下の行を追加してください。

define('IS_AMIMOTO', true);

 

以上が完了してからテーマカスタマイザーへアクセスすると、以下のように携帯、スマフォ用のテーマを選択できるようになります。

Customize_Twenty_Thirteen_—_WordPress

 

というわけで、Amimotoを使うとこういう超ハイパフォーマンスかつエンタープライズな環境が簡単に構築できますので、ぜひぜひお試しください。

http://ja.megumi-cloud.com/

AWS___Nginx___WordPress_-_超高速_WordPress_AMI_網元