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にも適用できる。