iPad向けWebアプリケーション開発テクニック

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

後藤大地　 [2010/04/09]

印刷

Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT.

3日(米国時間)、米国においてiPadの販売が開始された。アーリーユーザやメディアが一斉に体験談を発表しており、どの発表も好意的だ。新しいユーザ体験をもたらすとか、マウス以来の新しいデバイスの登場だとみるユーザもいる。日本における販売は4月末になる見通し。

iPadがiPhoneやiPod touchの数に匹敵するほど販売されることになれば、WebデベロッパやWebデザイナとしては対応するブラウザに「iPad Safari」を加えなければならなくなる。そして現実にそうなりそうだ。そうした場合に使えるテクニックをNicholas C. Zakas氏がiPad web development tips - NCZOnlineにおいて紹介している。iPadとiPhone/iPod touchの切り分け方法が簡潔にまとまっており参考になる。紹介されているテクニックは次のとおり。

User-AgentによるiPadの検出

iPad、iPhone、iPod touchに搭載されているSafariはそれぞれ違うUser-Agent文字列を採用している。これを利用してデバイスを切り分ける。今のところiPhoneという文字列はすべてのデバイスに共通して含められているため、iPhoneの文字列を切り分けに使う場合にはどこの文字列を判定したか注意深くチェックしておく必要がある。

Safari	User-Agent文字列
iPad Safari (正式版)	Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
iPad Safari (開発中)	Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
iPhone Safari	Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
iPod Safari	Mozilla/5.0 (iPod; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

JavaScriptにおけるiPadの検出

JavaScriptでiPadかそうでないかを切り分けるもっとも簡単な方法はnavigator.platformの値を調べること。iPadではnavigator.platformの値が常にiPadになっているため、これを利用する。ブラウザのUser-Agentが変わってもnavigator.platformの値はiPadに固定されている。

iPaf Safari JavaScript変数	内容
navigator.platform	iPad

function isIPad(){
    return navigator.platform == "iPad";
}

スクリーン解像度によるiPadの検出

iPadとiPhone/iPod touchではスクリーンの解像度(1024x768、480x320)が異なっている。これを利用して切り分ける。screen.widthとscreen.heightはデバイスが垂直方向になっているか水平方向になっているかに関わらず固定値。なお、水平垂直の方向はwindow.orientationで判定できる。

Safari	JavaScript	内容	備考
iPad Safari	screen.width	768	デバイスの垂直水平関係なく固定値
	screen.height	1024	デバイスの垂直水平関係なく固定値
	window.orientation	0	デバイス垂直時
	window.orientation	90	左へ90度回転させて水平にした場合
	window.orientation	-90	右へ90度回転させて水平にした場合
	orientationchange	回転時イベント	windowsに発生
iPhone Safari	screen.width	320	デバイスの垂直水平関係なく固定値
	screen.height	480	デバイスの垂直水平関係なく固定値
iPod Safari	screen.width	320	デバイスの垂直水平関係なく固定値
	screen.height	480	デバイスの垂直水平関係なく固定値

Mobile Safariとしての基盤は共通

前述したように種々の違いはあるものの、iPad SafariもiPhone/iPod touch SafariもMobile Safariであることには違いがなく、基盤部分は同じになっている。このため、これまでiPhone/iPod touch Safari向けに培ってきたテクニックはそのままiPad Safariにも適用できる。