iPhone用に最適化したブログも構築する

movabletype iphone

iphoneでPCページが見れるのはうれしいのですが、無駄な通信に時間をとられたり、拡大縮小がこまめに必要だったりで、逆に効率が悪い場面も多いです。
ということで、通常のブログ構築と同時に、iPhone用に最適化したブログも同時に再構築する方法です。
iUIを使っていてPCからでもiPhoneチックに動作するので楽しいです。

ちなみに、Movable Type3.3xか4.0x〜4.1推奨のようですが、MTOS4.32でもできました。


１．ダウンロード
(1) テンプレート雛形とスキン

http://cremadesign.jp/blog/iphone/tpl-1.01.zip

(2) iUIライブラリ

http://code.google.com/p/iui/
http://iui.googlecode.com/files/iui-0.31.tar.gz

２．iphone用ディレクトリを設置する

i -+- iui
   |
   +- css
   |
   +- img

MT4iでMovableTypeのブログを携帯向けページと同期する - 焼肉開発日記の携帯向けと同期でも"i"を使ってしまったので"i"がかぶる。別名称にしたいところですが、固定パス記述がいくつかあったので念のため断念しておく。


３．テンプレートを作成
(1) iPhone用トップページ用
(2) iPhone 用個別ページ用
(3) アーカイブパス設定
基本的に雛形のコピペです。
インデックスから個別ページへのリンクはhtmlで決めうちのようですが、私の大元の個別ページは"php"設定なので、記述を少し修正ました→、"i/%c/%F.html"

４．".htaccess"でiPhone用リダイレクトを追加
iPhoneでトップページにアクセスした場合ジャンプさせます。

RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteRule ^$ http://www.example.com/i/index.html [R]

５．確認

http://www.yakedo.net/


★追記
つながった長い単語（URLなど）が本文にあると、横幅が広がってレイアウトがくずれてしまうため、
"i/css/style.css"のbodyに"word-wrap: break-word;"を追加。

body {
	background-color: #ffffff;
	font-family:ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";
	color: #000000;
	font-size: 20px;
	font-style: normal;
	font-weight: normal;
	line-height: 1.5;
        word-wrap: break-word;  
	-webkit-text-size-adjust:none;
}

参考サイト

http://cremadesign.jp/blog/iphone/iphone_template_for_mt.html
http://www.koikikukan.com/archives/2008/08/06-025555.php