テンプルナイツ、iPhone/iPad最適化ページのお知らせ

　テンプルナイツ誕生10周年の際に予告した通り、iPhone/iPadに最適化したスマートフォン向けページを制作。本日よりiPhone/iPadからのアクセスをスマートフォン向けページに誘導するように致しました。

　また、いくつかのAndroid搭載スマートフォンでもチェックしています。Androidは機種が多いので判断し辛いですが、Android端末についても後日誘導を予定しています。

　誘導はサーバーの設定で行います。具体的には「mod_rewrite」で、iPhone/iPad端末からアクセスがあった場合のみアドレスを書き換えるので、いつも通り「http://temple-knights.com/」へアクセスすればスマートフォン向けページになります。ブックマーク、お気に入りの変更は必要ありません。

表示サンプル

iPhone/iPod touch TOPページ記事
 iPhone/iPod touch TOPページカテゴリー
 iPhone/iPod touch 個別記事
 iPad TOPページ
 iPad TOPページカテゴリー

iPhone・Android端末の割合

　3月上旬のアクセス解析データを見ると、テンプルナイツの閲覧に使われる端末はiPhoneが3.9%。Androidが1.6%となっています。アクセスカウンターを設置していた頃なら大体1,000から1,250アクセスがスマートフォンなパーセンテージ。最近ではMacよりiPhoneからのアクセスの方が多い状況です。ちなみに携帯電話向けページであるテンプルナイツ mobile ver.は統計に含まれていません。

技術面のお話

　iPhone/iPad用ページはHTML5+CSS3で構築しましたが、案の定、IE8は意図した表示にならず、Firefox 3.6.15も微妙な表示になっています。Safari 5.04とGoogle Chrome 10は良。IE9とFirefox 4に期待。

　ちなみに「○○○○○.temple-knights.com/」の丸の中に「iphone」と打てば、スマートフォン向けページに飛びます。興味がある方はご覧下さい。本文と画像はPC向けWebサイトと同じ。YouTubeのサイズはリサイズ、横幅の大きい画像はCSSのmax-widthプロパティで画面内に収まるようにしました。iPhoneとiPadはCSS3 media screenを使って、画面サイズに応じて、適用するスタイルシートの値を変更しています。この為、スマートフォンの画面サイズとタブレットの画面サイズで若干表示が異なります。

　現在のRewriteRuleの条件は「RewriteCond %{HTTP_USER_AGENT} iP(hone|od|ad) [NC]」。対象はiPhone、iPod touch、iPadです。

　Android端末をお持ちの方で、iPhone/iPad向けページ表示確認にご協力頂ける方は上記の「○○○○○.temple-knights.com/」にアクセスして、メールフォームかコメント欄かTwitterに「@kusima」でリプライして頂けると幸いです。表示の問題の有無と機種名をお願いします。