テンプルナイツ、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対応
HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

Breadcrumb Navigation with CSS Triangles

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

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

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

1位ネタバレしか存在しない『Fate/Zero』のその後の話2012年06月24日
2位もう1つの第四次聖杯戦争『Fate/Accel Zero Order』内容と相違点2016年05月04日
3位TVアニメ『鋼の錬金術師』新シリーズは声優が11人も変更に!2009年03月06日
4位小説、ノベル、ゲームシナリオの書き方・作り方2005年10月29日
5位FGO 英霊剣豪七番勝負の『魔界転生』パクリ騒動に思うこと2017年10月22日
6位『HUNTER×HUNTER』の冨樫義博先生が離婚したらしい2010年08月23日
7位米マクドナルド、女性店員を全裸にして3時間半いやがらせ2007年10月08日
8位少年マガジン『デスノート』のパクリを認め、正式に謝罪!2007年12月22日
9位機動戦士ガンダムSEED DESTINY COMPLETE BESTでキラの階級が判明!2005年10月15日
10位ここ20年の放送自粛アニメ一覧2008年1月16日