• HOME
 >
• PC
 >
• Apple・iPhone
 >
• テンプルナイツ、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」でリプライして頂けると幸いです。表示の問題の有無と機種名をお願いします。

作っていて思ったこと＝愚痴

　携帯電話対応もスマートフォン対応も全部自動的にやってくれるレンタルブログって凄く便利なサービスだね(苦笑)。

参考図書・参考Webサイト

HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

Breadcrumb Navigation with CSS Triangles

1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI

投稿者:九嶋秀二郎 (公開日：2011年3月21日 21:30/最終更新日：2017年11月15日 17:32)

記事別アクセスランキング(2020年3月-2021年3月)