テンプルナイツ、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/」にアクセスして、メールフォーム[email protected][email protected]お願いします。

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

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

参考図書・参考Webサイト

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

Breadcrumb Navigation with CSS Triangles

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

投稿者: (公開日:/最終更新日:)

テンプルナイツ記事別アクセスランキング

1位ネタバレしか存在しない『Fate/Zero』のその後の話2012年06月24日
2位画像を見るだけで分かる右脳派・左脳派チェック2007年10月10日
3位小説、ノベル、ゲームシナリオの書き方・作り方2005年10月29日
4位米マクドナルド、女性店員を全裸にして3時間半いやがらせ2007年10月08日
5位もう1つの第四次聖杯戦争『Fate/Accel Zero Order』内容と相違点2016年05月05日
6位『To LOVEる ダークネス画集 Harem Gold』に服が消えるARギミック2016年04月29日
7位PS3/Xbox 360で遊ぶことを前提とした液晶モニタの選び方2009年01月26日
8位TVアニメ『鋼の錬金術師』新シリーズは声優が11人も変更に!2009年03月06日
9位単語をバラバラにした「こんちには みさなん」が話題に2009年05月08日
10位『迷い猫オーバーラン!』のぺこさん降板は喧嘩ではない2012年02月16日