ブログをiPhoneに対応させました

 Twitterでつぶやく はてなブックマークに追加 

このブログ、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/<$MTCategoryBasename$>/<$MTEntryBasename$>.html

<$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^)/

トラックバックURL
当サイトへのリンクがないトラックバックは、迷惑トラックバックと判断されます

コメントを投稿する





コメントはありません