htaccessによるデバイス別振り分けと表示切替 | 電脳備忘録

ブログ復旧ついでに懲りずにスマホ対応に着手しました。こんなブログ誰が読むんだとか言わないのがエチ(ry
以前対応した時はとりあえずjQueryMobieに対応させるのが精一杯で構造とかそういったものが全然アレだったような記憶があります。今回はサイト内の遷移とか無駄にスマホ用のテンプレートを作らないとか、そういったことに注意しながら作業しています。いずれ仕事でもやることになりそうですし。

PCとスマートフォンの表示切替

検索してみると下記の方法がいろいろなブログで紹介されていますね。
.htaccessファイルの設定。

RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android)
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^/$ /sp/ [R]

htmlに書く切り替え用のリンク

<a href="/?mode=pc">PCモード</a>

スマートフォン用のファイルに遷移させる

スマートフォン専用のディレクトリを作り、そこへリダイレクトさせようとしましたが、再構築時にファイルの先頭にSP_を付けたスマートフォン用のファイルを構築するようにして、スマートフォンからのアクセスの場合はSP_が付くファイルを呼び出すようにRewriteRuleを変えてみました。

RewriteEngine On
#トップ
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android)
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^([0-9A-Za-z)]+).php$ sp_$1.php [L]

MovableTypeだとほかにもこんな感じで設定できますね。

#カテゴリ
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android)
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^([0-9A-Za-z)]+)/([0-9A-Za-z)]+).php$ $1/$2/sp_$3.php [L]
#月別
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android)
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^([0-9A-Za-z)]+)/([0-9A-Za-z)]+)/([0-9A-Za-z)]+).php$ $1/$2/$3/sp_$4.php [L]

エントリーは「http://560days.com/diary/2012/04/000898.php」な感じで出力されるので、下記のようにして変更していますが、下記の設定をやってしまうとpcモードに切り替えても、スマートフォン用のエントリーにリダイレクトしてしまって意味がないですね。動作確認して気がつきました。

#エントリー
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android)
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^([0-9A-Za-z)]+)/([0-9A-Za-z)]+)/([0-9A-Za-z)]+)/([0-9A-Za-z)]+).php$ $1/$2/$3/$4/sp_$5.php [L]

書き方はもっとスマートな方法がありそうですが、今はとりあえず動いているのでこのままにしておいて、時間があったら調べてみようと思います。テスト的に運用してみて、運用が面倒くさそうだったら専用のディレクトリ下で運用する方法に変えてみるかな...。