掲載日： 2008年 07月 19日
iPhone 3G用のWebページを作る1
iPhone 3G用のWebページを作る
1: ユーザーエージェントを確認
2: とりあえず動かしてみる
3: ビューポート
4: ビューポートを指定しない場合
5: width=device-width; initial-scale=1.0;
6: width=320; initial-scale=2.0;
今回は特別に、今月(2008年7月11日)発売されたばかりの話題の携帯 iPhone 3G 用にWebページを作る際のポイントをみてみたいと思います。
iPhone 3Gについてのニュースは各所で伝えられていますので、ここでは、いきなりWebページ作成の知識に絞り込んで取り上げます。 より詳しい仕様や実装などについての資料は下記をご参照ください。
資料 ::
- Designing Content(日本語)
- Safari Web Content Guide for iPhone
- Safari CSSリファレンス
- Safari HTML Reference
- Web Kit DOMプログラミング
- Mac OS XにおけるJavaScriptコーディングのガイドライン
- Dynamic HTMLとXML：XMLHttpRequestオブジェクト
- Safari FAQ
ユーザーエージェントを確認
iPhoneのような携帯のブラウザは一般のPCとは動作が大きく異なりますので、互換用のページを苦労して作成するよりも、一気に別のページに分岐してしまった方が、それぞれのブラウザの長所を生かした管理しやすいページを作ることができたりします。そこで役に立つ方法のひとつがユーザーエージェントによる分岐です。
iPhoneで利用できるWebブラウザは、Mac OSXのデフォルトブラウザSafariをベースとしています。 SafariのオープンソースレンダリングエンジンWebkitは、 LinuxのKDEプロジェクトで開発されたKHTMLを利用しています。
まず、このiPhone 3G用ブラウザSafariのユーザーエージェント文字列を確認し、今までのiPhoneやiPod touchとの違いを見ておきます。
この文字列のチェック方法はいろいろありますが、JavaScriptならたとえば次のようにしてnavigatorオブジェクトのuserAgentプロパティから取り出すことができます。
document.write(navigator.userAgent);では、みてみましょう。
iPhone 3G
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A345 Safari/525.20
以前のiPhone
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3
以前のiPod touch
Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A100a Safari/419.3
iPhoneとiPod touchでの違いは、文字通り「iPhone」「iPod」という文字列の有無ですが、 以前のiPhoneと今回のiPhone 3Gとの違いは「iPhone OS 2_0」の有無となっています。
少し注意が必要なのは、iPhone,iPod touchともにバージョンアップの可能性があり、たとえば、以前のiPod touchでも2.0への バージョンアップ後には、下記のようなユーザーエージェント文字列となります。
2.0へバージョンアップ後のiPod touch
Mozilla/5.0 (iPod; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A347 Safari/525.20
2.0へバージョンアップすれば、当然ながら「iPhone OS 2_0」となり、AppleWebKitバージョンもSafariバージョンも新しくなります。それらが新しくなれば、動作するJavaScriptもそのバージョンに見合ったものになっています。
さて、これらの文字列の意味を簡単に分類すると次のようになります。
(iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp)
iPhoneプラットフォーム文字列 (ja-jpなら日本版)
AppleWebKit/525.18.1
Web Kitエンジンのビルドナンバー
Version/3.1.1
サファリバージョン
Mobile/5A345
モバイルバージョン
Safari/525.20
サファリのビルドナンバー
これらの組み合わせによってユーザーエージェントつまりブラウザが特定されるわけです。 もし、作成するページを、iPhone OS 2_0 に限定したいなら、現在はたとえば、次のようなコードで分岐が可能です。 (注意 : 将来の各種ブラウザのユーザーエージェントがどうなるかは不明ですのであくまでも現状での分岐での分岐方法とお考えください)
if(navigator.userAgent.indexOf('iPhone OS 2_0')!=-1){
//iPhone 3G用のコード
} else {
//上記以外のコード
//たとえば、iPhone OS 2_0 以外専用ページへ飛ばしてしまう
location.href='http://non-iphone-3g.jsgt.org/';
}
簡単に解説すると、navigator.userAgentは、ユーザーエージェント文字列を返すプロパティで、それに続けて.indexOf('iPhone OS 2_0')と書くことで、ユーザーエージェント文字列内の'iPhone OS 2_0'という文字の位置を返します。無ければ、-1を返します。
そこで、iPhone 3Gならこの場合28文字目に'iPhone OS 2_0'がありますから「28」を返すのですが、-1ではないので、前のブロックが実行され、iPhone 3Gでなければ「-1」を返すので次のブロックが実行されるという分岐処理になっており、ここでは、 iPhone 3G以外専用ページへ飛ばしてしまいます。
ちなみに、iPhone 3Gが実装した Safari 3.1.2は、HTML5の使用に含まれるJavaScript SQLデータベースストレージやiPhoneの特徴的インターフェイスであるマルチタッチイベントなどが実装されていますので、作り方によって、他のブラウザでは期待する動作をしない可能性があります。
そんなときは、上記のようなコードで一気にブラウザを分岐することが必要な場合もあるわけです (もちろん、たとえば、if(window.openDatabase){...}などのように個々のオブジェクト毎に細かく分岐する方法などもありますが、それは後日個々に紹介したいと思います)。
次ページでは、とりあえず簡単なサンプルを試します。
