ブログをiPhoneに対応させました
このブログ、PCからは当然見れるとして、
携帯用には MT4i を入れていたんだけど、
iPhoneにも対応させちゃいました(*'-')
iPhoneのブラウザはSafariなので、
PC用が見れると言っちゃえば見える。
ただ、非常に見にくかったりするので、
iPhone用のテンプレートを入れました。
これで iPhone用ブログ のできあがり♪
使ったのは iPhoneテンプレートfor MT です。
別途 iUIライブラリ も入手しなくちゃだったり、
何かと手間はかかるけど導入できましたよ\(^O^)/
readmeを読めば設置だけはすんなりいきます。
以下、うちがちょっと困ったことを書いておきます。
導入前に読んでおくと幸せになれるかも(笑)
まずTOPにアクセスするとタイトルが何か殺風景。
タイトルと最新ブログ記事xx件の背景がないです。
これはiUIライブラリを利用しているけど、
画像の参照をテンプレート側がしてるから。
iui/t の中にあるdefaultとipdcの画像を
全部imgにコピーすれば表示されます。
同じくTOPページのデザインを変えるときも、
css/style.css ではなく、iui/iui.css です。
ここらへんなんとかしてほしかったなー。
このブログは 携帯からのアクセスをMT4iに転送 してるけど、
この方法はiPhoneでも使うことができました\(^O^)/
個別エントリーは出力フォーマットによって変わり、
iPhone用テンプレート側も変更が必要になるので、
まずはテンプレート側から変えていきます。
アーカーイブテンプレート>ブログ記事 の
アーカイブマッピングをメモっておいてください。
うちは archives/%y/%m_%f にしていました。
それに合わせ、iPhone用個別ページのマッピングは
archives を i に変え i/%y/%m_%f としました。
これで、PC用とiPhone用の記事ファイル名が同じになります。
http://www.ryoko.st/blog/archives/2010/08_2010_bang_thei.php
http://www.ryoko.st/blog/i/2010/08_2010_bang_thei.php
iPhoneテンプレートのreadmeの6-4部分を変更したので、
iPhone用トップページテンプレートも合わせて変更させます。
最新のブログ記事20件を出力する aタグ を下記にします。
<$MTBlogArchiveURL$>i/<$MTEntryDate format="%Y"$>/<$MTEntryDate format="%m"$>_<$MTEntryBasename$>.php
これでTOPページから個別記事へのリンクがつながります。
ちなみにデフォルトでは拡張子がhtmlになっていますが、
うちはphpで出力してるのでそこも書き換えてます。
次にiPhone用個別ページの次の記事、前の記事のURLも変えます。
<$MTBlogArchiveURL$>i/
を
<$MTBlogArchiveURL$>i/<$MTEntryDate format="%Y"$>/<$MTEntryDate format="%m"$>_<$MTEntryBasename$>.php
にしました。
ここまでできて、iPhoneを転送させる準備が完了です。
iPhone振り分け個別エントリーの飛ばす先のURLを下記にし、
判別するDoCoMoやJ-PHONEをiPhoneとiPodにすればおけ。
<?php
$link = "Location: http://www.ryoko.st/blog/i/<$MTEntryDate format="%Y"$>/<$MTEntryDate format="%m"$>_<$MTEntryBasename$>.php";
$ua = $_SERVER["HTTP_USER_AGENT"];
if(ereg("iPhone",$ua)){
header($link);exit;
}
elseif(ereg("iPod",$ua)){
header($link);exit;
}
?>
TOPページ用は http://www.ryoko.st/blog/i/ だけなので簡単。
後はマニュアル通りに進めて全部再構築すれば完成\(^O^)/











