DokuWikiを携帯電話からの閲覧に対応させる
DokuWikiをはじめ多くのWikiは、PCから利用することを前提に作られていて、基本的に携帯電話から閲覧することはあまり考えられていません。普通はそれで問題ないと思いますが、ウチの場合、現というか旧というか、このブログを引き継ぐ関係で、ブログ記事を携帯電話からも閲覧できるようにしておきたいわけです。そこで、DokuWikiの記事を携帯電話から閲覧することができるように改造してみました。
概要
PCからのアクセスと携帯電話からのアクセスは.htaccessで振り分けることができます。ならば、「PC用テンプレート」と「携帯用テンプレート」の２つを作成しておき、.htaccessでテンプレートを切り替えればいいじゃん！という発想から改造を思いつきました。
DokuWikiは
- 使用するテンプレートファイル名をconf/local.phpに保存している
- conf/local.phpはinc/init.phpが呼び出している
- inc/init.phpはdoku.phpが呼び出している
という相関関係のもとに動いていますので、これらのファイルセットを「携帯用」として複製＆改変しておき、.htaccessでどちらのファイルセットを使うかを振り分けようというわけです。
DokuWikiをケータイ対応させるための手順
その1 必要なファイルを複製する
携帯電話用のファイルセットとして必要なものは、次の3つです。
- doku.php
- inc/init.php
- conf/local.php
これら3つのファイルを複製し、適当にリネームします。ここでは末尾に「_i」を付け、元ファイルと同じディレクトリに設置するという設定で話を進めます。
- doku_i.php
- inc/init_i.php
- conf/local_i.php
その2 複製したファイルを編集する
doku.phpがinc/init.phpを呼び出し、inc/init.phpがconf/local.phpを呼び出しています。従って、doku_i.phpがinc/init_i.phpを呼び出し、inc/init_i.phpがconf/local_i.phpを呼び出すように、それぞれのファイルを編集します。
その3 携帯電話用のテンプレートを作成する
lib/tpl/内に、携帯電話用のテンプレートを保存するためのフォルダを作成し、その中に「main.php」という名前でテンプレートファイルを作成します。ウチでは、次のものを使っています。
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="http://studio-arz.com/lib/tpl/studioarz_i/design.css" media="handheld, tty" /> <?php if (file_exists(DOKU_PLUGIN.'displaywikipage/code.php')) include_once(DOKU_PLUGIN.'displaywikipage/code.php'); ?> <title>ﾓﾊﾞｲﾙStudio-ARZ</title> </head> <body bgcolor="#FFFFFF" style="background: #fff;"> <?php tpl_content(false)?> <br /><br /> <div class="more2">[ <a href="http://331-1833.com/m/">中西進学塾</a> | <a href="http://studio-arz.com">Studio-ARZ</a> ]</div> </body> </html>
携帯電話用なんで、非常にシンプルですねw。
その4 conf/local_i.phpを編集する
conf/local_i.php内に、先ほどつくった携帯電話用のテンプレートを呼び出すように「$conf['template'] = '';」の部分を編集します。この行がなければ作成します。
その5 .htaccessを編集する
これは下手するとサーバ内の全てのアクセスがおかしくなりますので、きちんと理解できる人のみ自己責任で実践してください！！ ウチの.htaccessの内容を載せておきます。参考にされてください。
RewriteEngine on # RewriteBase / # Mixi Mobile RewriteCond %{HTTP_USER_AGENT} mixi-mobile-converter RewriteRule ^$ doku_i.php?id=mixi-mobile-converter.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} mixi-mobile-converter RewriteRule .* doku_i.php?id=mixi-mobile-converter.html [QSA,L] # DoCoMo RewriteCond %{HTTP_USER_AGENT} DoCoMo RewriteRule ^$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} DoCoMo RewriteRule ^index.html$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} DoCoMo RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku_i.php?id=$1 [QSA,L] # Softbank RewriteCond %{HTTP_USER_AGENT} J-PHONE RewriteRule ^$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} J-PHONE RewriteRule ^index.html$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} J-PHONE RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku_i.php?id=$1 [QSA,L] RewriteCond %{HTTP_USER_AGENT} Vodafone RewriteRule ^$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} Vodafone RewriteRule ^index.html$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} Vodafone RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku_i.php?id=$1 [QSA,L] RewriteCond %{HTTP_USER_AGENT} SoftBank RewriteRule ^$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} SoftBank RewriteRule ^index.html$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} SoftBank RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku_i.php?id=$1 [QSA,L] # AU KDDI RewriteCond %{HTTP_USER_AGENT} KDDI RewriteRule ^$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} KDDI RewriteRule ^index.html$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} KDDI RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku_i.php?id=$1 [QSA,L] RewriteCond %{HTTP_USER_AGENT} UP.Browser RewriteRule ^$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} UP.Browser RewriteRule ^index.html$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} UP.Browser RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku_i.php?id=$1 [QSA,L] # DDI Pocket RewriteCond %{HTTP_USER_AGENT} DDIPOCKET RewriteRule ^$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} DDIPOCKET RewriteRule ^index.html$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} DDIPOCKET RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku_i.php?id=$1 [QSA,L] # WILLCOM RewriteCond %{HTTP_USER_AGENT} WILLCOM RewriteRule ^$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} WILLCOM RewriteRule ^index.html$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} WILLCOM RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku_i.php?id=$1 [QSA,L] # WILLCOM RewriteCond %{HTTP_USER_AGENT} PDA RewriteRule ^$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} PDA RewriteRule ^index.html$ doku_i.php?id=bliki:index_i.html [QSA,L] RewriteCond %{HTTP_USER_AGENT} PDA RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku_i.php?id=$1 [QSA,L] # PC RewriteRule ^_media/(.*) lib/exe/fetch.php?media=$1 [QSA,L] RewriteRule ^_detail/(.*) lib/exe/detail.php?media=$1 [QSA,L] RewriteRule ^_export/([^/]+)/(.*) doku.php?do=export_$1&id=$2 [QSA,L] RewriteRule ^$ doku.php [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule (.*) doku.php?id=$1 [QSA,L]
ちなみに、ウチのサイトの場合は、「bliki/index_i.html」に、携帯用のトップページファイルを置いていますので、携帯からはそこに転送させるようにしているわけです。
問題点と今後の課題
文字コードについて
とりあえず、これで携帯電話からDokuWikiサイトを閲覧することができるようになりましたが、文字コードがUTF-8であるために、古いタイプの携帯電話では文字化けすると思われます。
画像ファイルの大きさについて
また、そのままでは画像ファイルが大きすぎて携帯電話では表示されません。そこもうまく対応させることができたら完璧ですね！
mixiモバイルゲートウェイについて
Discussion
- 何かありましたらログインしてご自由に書き込んでください。
