最近iPhoneで表示した時に見やすくなるよう、PC用ページとは別にiPhone専用ページを設けるサイトが増えた。
私のブログはiPhoneで見ると、表示されるまで何秒も時間が掛かるし、その上字が小さいので拡大しなければ読むことは不可能だ。

5年前にブログを始めた頃はデザインやパーツにも凝ったが、最近はiPhoneやRSSリーダーで見て下さる方も多いので、余りデザインに凝っても仕方がないと思うようになった。
アメーバブログなどの既製のブログだと、サービス提供者がiPhone対応ページを用意してくれる様だが、私はレンタルサーバーにMovable Typeでブログを設置しているので、iPhone対応ページも自分で準備しなくてはならない。
WEBを検索したところ、必要なものはすぐ見つかった。crema designという所が作ってくれた『iPhoneテンプレートfor MT』というテンプレートだ。
「iPhoneテンプレートfor MT」を公開いたします。|iPhone|東京Webデザイナー日記リターンズ|crema design
これだけではダメで、下記の『iui』というJavaScriptライブラリやCSS、imageファイルのセットも必要だ。
iui - Project Hosting on Google Code
早速ダウンロードして、http://durianjp.com/mt/ の下に『i』というフォルダを新たに作ってアップロードした。
テンプレートは、MTの管理画面からトップページ用のインデックス・テンプレートと、個別ブログ記事用のアーカイブ・テンプレートをcopy&pasteで作成し再構築する。
これで、http://durianjp.com/mt/i/にアクセスするとiPhone用のページを表示することができるようになった。
だが、PC用のページにiPhoneで飛んできた方を、どうやってiPhone対応ページに誘導するかが問題だ。
.htaccessというファイルの中に、User-AgentがiPhoneやiPodの場合に自動的にiPhone対応ページに誘導するコードを書く手があるが、それだとPC用ページも見てみたいという方の自由を奪うことになる。
ということで、またWEBを検索すると、次のページが見つかった。
Mercurius Rising:池田冬彦のログ: ブログがiPhone対応になりました
JavaScriptを書いてサーバーにアップロードし、HTMLヘッダーのテンプレートモジュールに手を加えて再構築すれば良い。
私のブログのページにiPhoneでアクセスすると、「iPhone向けのページを表示しますか?」と聞いてくる。

『OK』を押すとiPhone対応ページが、『キャンセル』を押すとPC用ページが表示される。それでは『OK』を押してみよう。

iPhoneライクなトップページが表示されるので、個別ページのタイトルをタッチするとそのページに飛んでいく。

これで当ブログのiPhone/iPod対応は完成した。スクリプトの設置やテンプレートの作成はあっと言う間に終わったが、最近サーバーの調子が悪く、再構築に時間が掛かった。
追伸:
上記JavaScriptは、このブログのどのページにiPhoneでアクセスしても、全てhttp://durianjp.com/mt/i/のホームページにリダイレクトされるという問題点があることに気が付いた。
個別ページのiPhone対応ページにリダイレクトさせる為には書き換えが必要だ。JavaScriptをもう一度勉強しよう。
最近のコメント
by 胡桃
by durian
by 胡桃
ブログを始めてまる4年
by Erlang
コメント歓迎
by Erlang
by durian
by Erlang
ブログ名刺
by たかみちえ
by durian
外人さんお断り?
by terimakasih
ドメイン更新
by ktym
by durian
喜ぃさん
by Kiasu
祝賀!
by Kiasu