Android エミュレータでサイト制作

Android シミュレータでサイト制作

AndroidではWindows、Mac OS X 、Linuxで利用できる Android SDK が公開されており、SDKに含まれるAndroid エミュレータを利用することで効率よくサイト作成を行うことができます。

ダウンロードとインストール

Android SDKからSDKファイルをダウンロードしてインストールを行います(今回はWindowsの「installer_r09-windows.exe」を利用します)。ダウンロード後はウィザードにそってインストールを進めます。(JDK(Java SE Development Kit )がインストールされていない場合は、事前にJDKをインストールする必要があります。)

20110211_07.png

インストール後に「Android SDK and AVD Manager」が立ち上がり、パッケージにインストールが求められるので「Install」を押します。

Android SDK and AVD Manager

インストール途中に止まってしまう事がよくあります。様子を見て止まっているようでしたら「Cancel」を押してインストールを中断し、「Update All...」から再インストールしてください。インストールが終了したら左メニューの「Virtual devices」を選択し、右にある「New...」から新規でAVD(Android Virtual Device)を作成します。

20110211_10.png

AVD作成時には次の項目を設定します。

Name : AVDの名前
Target : 利用するAndroidのバージョン。GALAXY Sを想定する場合「Android 2.2」
SD Card : Android アプリ開発時にSDカードの容量を指定できます。Web制作だと無視して大丈夫。
Snapshot : エミュレータでスナップショットが利用できます。スナップショットとは終了時の状態を保存しておき、次回起動時にその状態で起動します。終了に時間がかかりますが起動は速くなります。
Skin : エミュレータで使用するスキンを指定できます。たとえばGALAXY Sを想定する場合「WVGA800」
HardWare : ハードの設定ができます。「Device ram size」でメモリが設定できますのでこれは指定しておきましょう。GALAXY Sを想定する場合「512」

設定が終了したら「Create AVD」からAVDを作成します。

20110211_11.png

作成したAVDを選択して「Start」をおします。

20110211_12.png

「Launch Options」でエミュレータの起動設定を行えます。「Scale display to real size」でデバイスのサイズから実寸表示が可能になります。

Screen Size : デバイスのスクリーンサイズ。GALAXY Sを想定する場合「5」
Monitor dpi : 表示しているディスプレイのdpi。「?」ボタンからディスプレイのインチサイズと解像度から自動計算もできます。(スマートフォンよりディスプレイのほうが目から距離があり同じサイズだと小さくみえてしまいます。少し大きめに設定したほうがよいでしょう)

Android エミュレータは起動が遅いので「Save to snapshot」にチェックを入れ、初回起動以降は「Lounch from snapshot」にチェックを入れてスナップショットから起動するのが良いでしょう。
(不正終了などでスナップショットが壊れることがあります。その場合は「Lounch from snapshot」のチェックを外して通常起動してください。)

これらを設定したら「Launch」からAndroid エミュレータを起動します。

Android エミュレータの利用

20110211_13.png

左画面の右下の地球アイコンボタンからAndroidブラウザの立ち上げが可能です。

右画面がハードウェア機能です。デバイスにより利用していたりしていなかったしするのですが、基本的にAndroid端末のほとんどに、「ホーム」ボタンと「MENU」ボタン、「戻る」ボタンはハードウェアボタンとして搭載されていますので、これらを利用して操作する前提と考えてください。

その他の操作としては、「CTRL」+「F11」キーをでエミュレーターの画面の向きを表現できます。

Android エミュレータを縦向き

残念ながらマルチタッチに対応しおらず、シングルタッチのみ検証できます。また、非常に重いです。基本はSafariなどで開発を行い、最後に確認用に利用すると良いでしょう。(実機があれば実機のほうが検証しやすいです。)

ホスト側の開発環境を見せる場合にはサーバーを構築する必要があります。

私の場合はVMware Player2で作業環境を構築している為、VMware Player2に割り振ったIPアドレス(192.168.1.xx)をAndroid エミュレータから参照することができます。(エミュレータでOS2つ立ち上げてる状態なのでPCがすごく不安定)

XAMPPなどでホストPCに直接サーバーをインストールしている場合は「10.0.2.2」でホストPCのIPに直接アクセスできます。

関連エントリー

Androidの画面サイズとDPI
Androidブラウザでviewportのwidth指定
Android端末のdevicePixelRatio
Androidの「target-densitydpi」でviewportの調整
Androidにおけるコンテンツフィットと「overflow:hidden」

スポンサードリンク

«4月のセミナー情報 [大阪] | メイン | iPhone/AndroidでURLスキームを利用したアプリ起動»