Android対応
スマートフォン版Yahoo! JAPANトップでは、歴代のiPhone、iPod touchだけではなく、現在日本で発売されているAndroid（一部機種を除く）にも対応しています。AndroidはiPhoneと同じWebKitブラウザが標準で備わっていますが、細かな仕様においてiPhone、iPod touchとは異なっています。いくつか特徴的な面を挙げていきます。
iPhoneではデフォルトの状態では、リンクや、タップ可能な要素（formパーツや、onclickイベントが定義されている要素）にタッチをすると、グレーの半透明の「ハイライト」が表示され、離すと消えます。これは、指という「カーソル」が、リンクにピンポイントでタップするのが難しいために表現されている仕組みですが、Androidのフォーカスは若干異なります。iPhoneではタップしやすい領域を確保するために、以下のようにa要素のスタイルで、displayプロパティを標準の "inline" から "block" にすることがよくあります。こうすることで、要素全体が指のタップとして認識され、ユーザビリティが向上します。
<a style="display: block; height: 30px;">ボタン</a>
ところが、Androidではブロック要素になったa要素も、インラインのフォーカスとして扱われてしまいます。また、スタイルを"opacity: 0"のように透明にしてしまった場合はタップしたときのフォーカス枠すら表示されなくなります。ただしタップは正常に動作するので、指を離したときに正常な動作が行われます。
iPhoneのようなグラフィックエンジンで処理されるなめらかな動きにはならず、動きがカクカクしています。ただし、Android OSがバージョンアップされるごとにパフォーマンスが向上されているようですので、今後さらなる改善にも期待できるでしょう。
iPhoneではwindowのorientationchangeイベントを検知して、縦・横に応じたレイアウトなどの微調整をすることができますが、Androidではorientationchangeイベントは発行されません。ただし、window.orientationプロパティは取得できるので、以下のようにすれば擬似的にイベントを検知できます。
function orientationChange () {
// 縦横が切り変わると実行される関数
}
if( typeof window.onorientationchange === "undefined" ) {
// for Android.
// 500ミリ秒おきに window.orientation の値を監視し、変わっていたら関数を呼び出す。
var currentOrientation = window.orientation;
setInterval(function() {
if(currentOrientation !== window.orientation) {
orientationChange();
}
}, 500);
} else {
// for iPhone.
window.addEventListener("orientationchange", orientationChange, false);
}
AndroidにはiPhoneと同じようにGPSが搭載されており、ブラウザのJavaScriptからもそれを利用することが可能です。Android バージョン2.1以降である「X06HT - HTC Desire」ではW3C勧告の仕様に沿ったGeoLocation APIが搭載されているためiPhoneとまったく同じコードで動作します。ところがAndroid 1.6の「Xperia SO-01B」、「HT-03A」などはそれらのAPIが実装されていないため、Google Gearsという内部APIを経由して位置情報を取得する必要があります。
var geo = false;
if ( navigator.geolocation ) {
// geolocationを利用して位置情報の取得
geo = navigator.geolocation;
} else if ( window.google && google.gears ) {
// gearsを利用して位置情報を取得
geo = google.gears.factory.create("beta.geolocation");
}
if (geo) {
geo.getCurrentPosition(callback);
}
- フォーカスの違い
- CSSアニメーション、CSSトランスフォーム
- イベント
- 位置情報取得
画面サイズの違い
基本的には、HTML＋CSSをリキッドレイアウトで組んでいれば表示崩れは起きません。参考までに主要な端末の画面サイズをまとめておきます。
| キャリア | デバイス | OS | 解像度 | ブラウザ表示サイズ（縦） | ブラウザ表示サイズ（横） |
| SoftBank | iPhone 3G／3GS | iOS 2x～4x | 320x480 | 320x416 | 480x268 |
| SoftBank | iPhone 4 | iOS 4x | 640x960 | 320x416 | 480x268 |
| SoftBank | X06HT - HTC Desire | Android 2.1 | 480x800 | 320x533 | 533x320 |
| au | IS03 | Android 2.1 | 640x960 | 320x455 | 480x295 |
| NTTドコモ | Xperia SO-01B | Android 1.6（2.1） | 480x854 | 314x525 | 563x275 |
| NTTドコモ | HT-03A | Android 1.6 | 320x480 | 314x430 | 474x270 |
| NTTドコモ | GALAXY S SC-02B | Android 2.2 | 480x800 | 320x508 | 533x295 |
「ブラウザ」とはデバイスに標準でインストールされているブラウザを指しています。「ブラウザ表示サイズ」はURLバーのサイズは含まれていません。本データはヤフー株式会社で独自に調査した内容となり、本データの内容が正確であることについては一切保証できかねます。
まとめ
今回紹介したように、最新のスマートフォン端末では大変多くの先進的な機能が実装されています。先進的な機能を使うには対象ブラウザごとによる作り分けなどが必要になる場合が多いですが、対象をiPhoneやAndroidなどのWebKitベースの端末に限定することで、多くの最新機能を共通で利用することができます。これらを有効に活用することで今までにないリッチな表現やユーザビリティの高いUIを、非常に効率的に開発することができるでしょう。
