MTでPC用とiPhone用のページのアドレスを同じにする

先日、CSS Nite LP8に参加した際に、アップルップルの山本氏から、以下のような質問をいただきました。

Movable Typeで、PC用ページとiPhone用ページを同じアドレスで公開するには、どうすれば良いの?

方法はいろいろ考えられますが、WebサーバーがApacheで、かつmod_rewriteが使えるなら、.htaccessとmod_rewriteを使うのが手っ取り早いでしょう。
その方法を紹介します。

1.iPhone用のページのアドレスを決める

後で、mod_rewriteを使ってURLを書き換えます。
その処理を行いやすくするために、PC用とiPhone用のページのアドレスがほぼ共通になるようにします。

ここでは、以下のように、ドメインの後に「i/」を入れることにします。

PC用ページhttp://ドメイン/ディレクトリ/ファイル名.html
iPhone用ページhttp://ドメイン/i/ディレクトリ/ファイル名.html

こうすれば、「iPhoneでPC用のアドレスにアクセスされたときには、ドメイン名の後に『i/』を入れたアドレスにリダイレクトする」という処理で、PC用とiPhone用のページのアドレスを同じにすることができます。

2.iPhone用のページを出力する

Movable Typeでは、テンプレートの数は自由に増やすことができます(ただし、その分再構築の負荷は増えますが)。
PC用とiPhone用の2種類のテンプレートを作れば、それぞれのページを出力することができます。

例えば、個々のブログ記事のページを、PC用とiPhone用で出力したいとします。
また、ページのアドレスは記事の日付から決めるとします。
1.で示したようなアドレスにするなら、ページのアドレスが以下のようになるようにすれば良いでしょう。

PC用ページhttp://ドメイン/年/月/日-時分秒.html
iPhone用ページhttp://ドメイン/i/年/月/日-時分秒.html

上のようにするには、2つのブログ記事アーカイブテンプレートを作り、それぞれのアーカイブパスを以下のように設定します。

PC用ページ%y/%m/%d-%h%n%s%x
iPhone用ページi/%y/%m/%d-%h%n%s%x

PC用/iPhone用ページのアーカイブパスの設定

3.mod_rewriteでリダイレクトする

次に、ドメインのルートに対応するディレクトリに.htaccessファイルを作り、mod_rewriteでURLを書き換えるようにします。

iPhone(またはiPod)からアクセスがあった場合、すべて「http://ドメイン/i/・・・」に転送するなら、.htaccessファイルの内容を以下のようにします。
iPhoneでアクセスすると、UserAgentに「iPhone」が含まれます(iPodでは「iPod」)。それを条件判断に利用します。

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteRule ^i/(.*)$ - [L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteRule ^(.*)$ i/$1 [L]

ただ、上の書き方だと、HTMLだけでなく、画像等へのアクセスもすべて「http://ドメイン/i/・・・」にリダイレクトされます。
拡張子を限定する場合は、書き方を若干工夫します。

例えば、~.htmlと~.phpへのアクセスだけをリダイレクトするなら、.htaccessを以下のように書きます。

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteRule ^i/(.*)$ - [L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteRule ^(.*)\.(html|php)$ i/$1.$2 [L]

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください