※弊社記事はたぶんにPRが含まれますので
話半分で受け取ってください。

Ktai Style と jQuery mobile と Nginxのリバースプロキシ と

 前に、「WordPressでKtaiStyleとjQuery Mobileを使ってスマホ対応サイトを作る方法」なんて記事を書いたように、icoroではWPtouchではなくKtai StyleとjQuery Mobileを使って、スマホ表示に対応しています(正確には「していました」)。

 そんなわけで、をかもと(@wokamoto)さんの

WordPress.com でやってるメモブログの方にも書いたんですが、WordPress プラグイン WPtouch を使用しているサイトで Nginx リバースプロキシを利用する際の Tips です。

WPTouch と Nginx リバースプロキシ | dogmap.jp

 って、記事も「うちにはあんま関係ないかもー」なんて気軽に読み始めてみたら、あら大変。Ktai Styleでも同じ問題起きるし。なんなら、うち、対応してなかったし。おうふwww

 ということは、ウェブサーバをNginxにしてからなので、かれこれ半年弱、スマホでの表示がおかしかった(おかしくなることがあった)ことになるのである。笑うしかないぜ。

修正してやるー

 調べてみたら、Ktai Styleの場合は、PC表示にするとCOOKIEに「ktai_pc_view」という名前のデータを保存するみたいです。なので、COOKIEにこの値がある場合は、別でproxy_cache_keyを設定することにします。

server {
  listen       80;
  server_name  example.com;
  location /wp-admin { proxy_pass http://backend; }
  location ~ .*\.php { proxy_pass http://backend; }
  location / {
    set $mobile "";
    if ($http_user_agent ~* '(DoCoMo|J-PHONE|Vodafone|MOT-|UP\.Browser|DDIPOCKET|ASTEL|PDXGW|Palmscape|Xiino|sharp pda browser|Windows CE|L-mode|WILLCOM|SoftBank|Semulator|Vemulator|J-EMULATOR|emobile|mixi-mobile-converter|PSP)') {
        set $mobile "@ktai";
    }
    if ($http_user_agent ~* '(iPhone|iPod|Opera Mini|Android.*Mobile|NetFront|BlackBerry)') {
        set $mobile "@mobile";
    }
    if ($http_cookie ~* "ktai_pc_view") {
        set $mobile "@mobile.off";
    }
    if ($http_cookie ~* "comment_author_|wordpress_(?!test_cookie)|wp-postpass_" ) {
      set $do_not_cache 1;
    }
    proxy_no_cache     $do_not_cache;
    proxy_cache_bypass $do_not_cache;
    proxy_cache czone;
    proxy_cache_key "$scheme://$host$request_uri$is_args$args$mobile";
    proxy_cache_valid  200 301 302 10m;
    proxy_cache_valid  404 5m;
    proxy_pass http://backend;
  }
}

 はい、お察しの通り、WPtouchの「wptouch_switch_cookie」と置き換えただけです。
 FirefoxのFireMobileSimulatorで確認した限りでは問題なさそげ。

そんな感じ

 過去ログによると、うちがスマホ対応したのは去年のことで、サーバをApacheからNginxにリプレイスしたのは、今年に入ってからだったみたいです。逆だったらもうちょっと早く気が付いたかもしれない、という言い訳。

 ついでに言うと、実は昨日の夜から、スマホとPCで別のテーマを使うのをやめてたりします。。
 WordPressに初めから入ってる「Twenty Eleven」というテーマの中身を見て知ったのですが、CSS3のMedia Queries(メディアクエリ)とかいうのを使えば、PCとスマホ、両方で(絵的に)見られるテーマが作れますよ。「ガラケーに対応するだけでめんどいのに、この上スマホもかよ……」と思っている自分のようなめんどくさがりにはぴったりです。

 ガラケーもこれからは減る一方だと思うので、ワンソースでPCも携帯(スマホ)も対応出来るという未来も近いかもしれませんね。iモードの登場から13年。世の中変わるものですね。
 ちなみにicoroのアクセス解析によると、ガラケーからのアクセス数とスマホからのアクセス数は、だいたい同じくらいになっています。

参考

nginx実践入門 WEB+DB PRESS plus

  • メーカー:技術評論社
  • カテゴリ:Kindle版
  • 発売日:2018/11/14

関連する記事