拙著「WordPress Web開発逆引きレシピ」が発売されました。
WordPressの様々なカスタマイズについて、逆引きの形式で取り上げています。
PHP 7.0での動作確認も行っています。
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 |
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]