UserAgentを判定して携帯用ページに誘導するには？

A-Form PC/Mobile（フィーチャーフォン対応版）は提供終了しました。

概要

まずは、ケータイキットのごく簡単な説明をします。
（詳細はリンク先をご覧ください。）

MovableTypeで書いたエントリーをPC用と携帯用で別々のファイルにパブリッシュすることができ、かつ携帯用の方は半角カタカナなどを自動変換してくれる、そんなプラグインがケータイキットです。

ただし「UserAgentで判定して自動的に携帯用のページに誘導する」という機能は付いていないので、今回は .htaccess でそれを対応します。

対応したサンプルとしては、弊社デモ環境をご覧ください。

A-Form PC/Mobileデモサイト PC版 PC版 A-Form PC/Mobileデモサイト Mobile版 a-formpcmobiledemosite_Mobile.jpg

モバイルのUserAgentでPC版にアクセスしても、Mobile版が表示されるようにリダイレクト設定がしてあります。

https://www.ark-web.jp/movabletype/demo/aform_pcmobile/
　↓
https://www.ark-web.jp/movabletype/demo/aform_pcmobile/m/

以下、まずはこの設定がサーバーに適用できるかどうかの動作確認と、実際の適用について書いています。サーバーに適用できるかどうかを確認されたい場合はそのまま読み進めてください。実際の設定を確認したい場合は「MTのテンプレートの設定」まで読み飛ばしてください。

動作環境

この対応をするには若干サーバー側の設定確認が必要です。
以下の 3点を確認してください。

  • .htaccess が使えるかどうかを確認する
  • mod_rewrite が使えるかどうかを確認する
  • .html でPHPを実行できるかどうかを確認する

確認方法は以下にて順番に説明します。

.htaccess が使えるかどうかを確認する

  • 適当なディレクトリ(一般に公開していないディレクトリが良いです)に、
    .htaccess という名前のファイルを作る
  • .htaccessには「dummy」とだけ記述して保存する
  • ブラウザからアクセスする
    • →「Internal Server Error」が表示された場合は .htaccess が ''有効'' です
    • →「forbidden」など表示された場合は .htaccess が ''無効'' です
例：
hoge.example.com というサーバーにFTPで
/http/test/.htaccess をアップロードしたとして、
ブラウザから http://hoge.example.com/test/ にアクセスしてどうなるか。

mod_rewrite が使えるかどうかを確認する

  • 先程の .htaccess に「dummy」と書いたのは削除して、下記を記述して保存する 
     RewriteEngine On
 RewriteRule ^(.*)$ http://google.com/ [L]
  • ブラウザからアクセスする
    • →Googleに遷移した場合は mod_rewrite が ''有効'' です
    • →「Internal Server Error」が表示された場合は mod_rewrite が ''無効'' です
例：
hoge.example.com というサーバーにFTPで
/http/test/.htaccess をアップロードしたとして、
ブラウザから http://hoge.example.com/test/ にアクセスしてどうなるか。

.html でPHPを実行できるかどうかを確認する

  • 先程の .htaccess に、書いたのをすべて削除して、下記を記述して保存する 
    ▼PHP4の場合
 AddType application/x-httpd-php .html
▼PHP5の場合
 AddHandler php5-script .html
  • info.html という名前のファイルを作る
  • info.html には「<?php echo "test"; ?>」とだけ記述して保存する
  • ブラウザからアクセスする
    • →testと書かれたページが表示されたら ''有効'' です
    • →「Internal Server Error」等の場合は ''無効'' です
例：
hoge.example.com というサーバーにFTPで
/http/test/.htaccess をアップロードし、
/http/test/info.html をアップロードしたとして、
ブラウザから http://hoge.example.com/test/info.html にアクセスしてどうなるか。


動作確認結果

以上について、すべて問題なければ先に進んでください。
無効な結果があった場合は、サーバー担当者にご相談ください。

最後の「.html でPHPを実行できるかどうか」については、
「Movable Type の PHP化（その2：.html のままPHPを有効にする）」の
「３．AddHandler ディレクティブと Action ディレクティブによる設定」という対応で設定できるかもしれません。


MTのテンプレートの設定

ケータイキットが既にインストールされている前提で進めます。
インストール方法については、下記参照。

ケータイキット チュートリアル/インストール
http://mt.keitaikit.jp/index.php/チュートリアル/インストール

また、下記のデフォルトテンプレートが既に対応済みという想定で進めます。

スマートフォン対応3G携帯電話端末用テンプレート(Ver.6)
http://www.keitaikit.jp/download/template.php#link_01

デフォルトインストールからの変更点

  • MTの管理画面から、デザイン＞テンプレート＞テンプレートモジュール＞携帯用設定を開き、.phpを.htmlにします 
    <!-- 携帯用拡張子 -->
<$mt:SetVar name="keitai_ext" value=".php"$>
　↓
<$mt:SetVar name="keitai_ext" value=".html"$>
  • MTの管理画面からデザイン＞テンプレート＞インデックステンプレート＞携帯用メインページを開き
    「テンプレートの設定」にある「出力ファイル名」を
    「m/index.php」から「m/index.html」にします
  • MTの管理画面からデザイン＞テンプレート＞アーカイブテンプレート＞携帯用ブログ記事を開き
    「テンプレートの設定」にある「出力ファイル名」を
    「m/%y/%m/%-F.php」から「m/%y/%m/%-F.html」にします
  • MTの管理画面からデザイン＞テンプレート＞アーカイブテンプレート＞携帯用月別ブログ記事リストを開き
    「テンプレートの設定」にある「出力ファイル名」を
    「m/%y/%m/%I.php」から「m/%y/%m/%I.html」にします
  • MTの管理画面からデザイン＞テンプレート＞アーカイブテンプレート＞携帯用カテゴリ別ブログ記事リストを開き
    「テンプレートの設定」にある「出力ファイル名」を
    「m/%-c/%I.php」から「m/%-c/%I.html」にします
  • MTの管理画面からデザイン＞テンプレート＞アーカイブテンプレート＞携帯用ウェブページを開き
    「テンプレートの設定」にある「出力ファイル名」を
    「m/%-c/%-F.php」から「m/%-c/%-F.html」にします


.htaccessの設定

PC用とモバイル用が、↓このように構築されている例の対応について書きます。

対象 URL ファイルパス
PC用 http://domain.example.com/2011/08/hoge.html /http/2011/08/hoge.html
モバイル用 http://domain.example.com/m/2011/08/hoge.html /http/m//2011/08/hoge.html

※PC用とモバイル用は同じエントリーでパブリッシュ先が異なる


/http/m/.htaccess の設定

モバイル用の.htaccessは下記のどちらか一方をPHPのバージョンに合わせて記述して保存して、アップロードします。

# ▼PHP4の場合
AddType application/x-httpd-php .html
# ▼PHP5の場合
AddHandler php5-script .html

テスト：下記URLにアクセスして携帯用のページが表示されること

http://domain.example.com/m/2011/08/hoge.html


/htdocs/.htaccess の設定

ここには携帯のUserAgentだったら、m/ 配下に自動転送するように記述して保存して、アップロードします。

# .htaccess
# 携帯からアクセスすると m フォルダに自動転送
<IfModule mod_rewrite.c>


# 画像生成や検索はリダイレクトさせない (2011/09/01追記)

RewriteRule mtkkimage.php - [last]

RewriteRule search.cgi - [last]

 

# DoCoMo

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} DoCoMo

RewriteCond %{REQUEST_URI} /

RewriteCond %{REQUEST_URI} !/m/

RewriteRule ^(.*)$ /m/$1 [R=302,L,QSA]

 

# Softbank

RewriteCond %{HTTP_USER_AGENT} (J-PHONE|Vodafone|SoftBank)

RewriteCond %{REQUEST_URI} /

RewriteCond %{REQUEST_URI} !/m/

RewriteRule ^(.*)$ /m/$1 [R=302,L,QSA]

 

# AU KDDI

RewriteCond %{HTTP_USER_AGENT} (KDDI|UP.Browser)

RewriteCond %{REQUEST_URI} /

RewriteCond %{REQUEST_URI} !/m/

RewriteRule ^(.*)$ /m/$1 [R=302,L,QSA]

 

# DDI Pocket

RewriteCond %{HTTP_USER_AGENT} DDIPOCKET

RewriteCond %{REQUEST_URI} /

RewriteCond %{REQUEST_URI} !/m/

RewriteRule ^(.*)$ /m/$1 [R=302,L,QSA]

 

# WILLCOM

RewriteCond %{HTTP_USER_AGENT} WILLCOM

RewriteCond %{REQUEST_URI} /

RewriteCond %{REQUEST_URI} !/m/

RewriteRule ^(.*)$ /m/$1 [R=302,L,QSA]

 

# iPad

RewriteCond %{HTTP_USER_AGENT} iPad

RewriteCond %{REQUEST_URI} /

RewriteCond %{REQUEST_URI} !/m/

RewriteRule ^(.*)$ /m/$1 [R=302,L,QSA]

 

# iPhone

RewriteCond %{HTTP_USER_AGENT} iPhone

RewriteCond %{REQUEST_URI} /

RewriteCond %{REQUEST_URI} !/m/

RewriteRule ^(.*)$ /m/$1 [R=302,L,QSA]

 

# WILLCOM

RewriteCond %{HTTP_USER_AGENT} PDA

RewriteCond %{REQUEST_URI} /

RewriteCond %{REQUEST_URI} !/m/

RewriteRule ^(.*)$ /m/$1 [R=302,L,QSA]

</IfModule>

テスト：下記URLにアクセスしてPC用ではなく携帯用(m/の方)のページが表示されること

http://domain.example.com/2011/08/hoge.html
　↓
http://domain.example.com/m/2011/08/hoge.html
対象製品
対象バージョン
すべてのバージョン
記事更新日
2013年7月 1日