iPhone用ページに同一URLでリダイレクトするメモ

みなさん、こんにちは、まーしーです。

先日、「iPhone用にCSS/PHP/JavascriptでCSSを切り替える基本的な方法」というエントリーをかいて、WebサイトをiPhone対応用にする簡単な方法を紹介しました。

読み込むCSSを切り替えることを中心におくとこういう方法になるかとおもいますが、HTML部分をiPhone用とPC用で変えたい、と思う場合もあるでしょう。
そうなったときはiPhone用のHTMLとPC用のHTMLが２つ存在することになります。

たとえば
PC用：/hogehoge.html
iPhone用：/i/hogehoge.html
となっているとしましょう。

簡単に書くと.htaccessではこんなかんじですね。
（mod_rewriteがつかえるという前提です。）

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteCond %{REQUEST_URI} !^/i/
RewriteRule ^(.*)\.html$ /i/$1.html [L]

UAを判定してiPhoneで閲覧している場合は/hogehoge.htmlにアクセスすると/i/hogehoge.htmlの内容が表示されます。

サーバーによってはうまくいかない場合も？

テストで試したサーバー（heteml）では以下のようなかんじで書かないとうまく動きませんでした。

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteCond %{REQUEST_URI} !^/i/
RewriteRule ^(.*)\.html$ /i/$1.html [L]

Options +FollowSymLinks
の記述が必要でした。

これに加えてhttp://www.hoge.com/にアクセスするときにうまく動かなかったので

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{REQUEST_URI} !\.css$
RewriteCond %{REQUEST_URI} !\.js$
RewriteCond %{REQUEST_URI} !\.jpg$
RewriteCond %{REQUEST_URI} !\.gif$
RewriteCond %{REQUEST_URI} !\.png$
RewriteCond %{REQUEST_URI} !\.swf$
RewriteCond %{REQUEST_URI} !\.inc$
RewriteCond %{REQUEST_URI} !\.cgi$
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteCond %{REQUEST_URI} !^/i/
RewriteRule ^(.*)$ /i/$1 [L]

こんな感じでリダイレクトをかけて、リダイレクトさせないファイルを設定してみました。
一番最初の方法でうまくいく場合が多いと思われますが、なぜかうまくいかなかった場合の参考になればと思います。

リダイレクトさせて終わりではない

リダイレクトで表示させる方法だと、有無を言わさずiPhone用のページを見ることになってしまいます。

PC用のページをみる、という選択肢も残しておいた方が良いとおもいますので、そのあたりも調整しておく必要がありますね。