ブログをiPhoneに対応させる

最近iPhoneで表示した時に見やすくなるよう、PC用ページとは別にiPhone専用ページを設けるサイトが増えた。

私のブログはiPhoneで見ると、表示されるまで何秒も時間が掛かるし、その上字が小さいので拡大しなければ読むことは不可能だ。

5年前にブログを始めた頃はデザインやパーツにも凝ったが、最近はiPhoneやRSSリーダーで見て下さる方も多いので、余りデザインに凝っても仕方がないと思うようになった。

アメーバブログなどの既製のブログだと、サービス提供者がiPhone対応ページを用意してくれる様だが、私はレンタルサーバーにMovable Typeでブログを設置しているので、iPhone対応ページも自分で準備しなくてはならない。

WEBを検索したところ、必要なものはすぐ見つかった。crema designという所が作ってくれた『iPhoneテンプレートfor MT』というテンプレートだ。

これだけではダメで、下記の『iui』というJavaScriptライブラリやCSS、imageファイルのセットも必要だ。

早速ダウンロードして、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を検索すると、次のページが見つかった。

JavaScriptを書いてサーバーにアップロードし、HTMLヘッダーのテンプレートモジュールに手を加えて再構築すれば良い。

私のブログのページにiPhoneでアクセスすると、「iPhone向けのページを表示しますか？」と聞いてくる。

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

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

これで当ブログのiPhone/iPod対応は完成した。スクリプトの設置やテンプレートの作成はあっと言う間に終わったが、最近サーバーの調子が悪く、再構築に時間が掛かった。

追伸：
上記JavaScriptは、このブログのどのページにiPhoneでアクセスしても、全てhttp://durianjp.com/mt/i/のホームページにリダイレクトされるという問題点があることに気が付いた。

個別ページのiPhone対応ページにリダイレクトさせる為には書き換えが必要だ。JavaScriptをもう一度勉強しよう。

トラックバック(0)