スマートフォン/タブレット向けにWebサイトを製作するにあたり、欠かせないのがiOSシミュレータ・Androidエミュレータと、Webブラウザのデベロッパーツール(Webインスペクタ)です。これらのツールを上手に活用することで、よりスピーディで質の高いWebサイトの制作が可能になります。今回は、iOSシミュレータ、Androidエミュレータのインストール、使い方などをご紹介します。

iOSシミュレータ、Androidエミュレータのインストール、使い方

スマートフォン/タブレット向けのサイト作成にあたり、欠かせないのが各種エミュレータです。最終的に実機で確認する必要はありますが、ある程度Webサイトを作成するまでは、各種エミュレータを使って確認と修正を繰り返し、最後に実機で確認・微調整をおこなうのが良いでしょう。

iPhone / iPadの場合、iOSシミュレータと呼ばれるエミュレータが用意されています。Mac OS X限定、Apple IDの登録が必要になりますが、無償にて利用できます。Android端末の場合は、Androidエミュレータを利用するのがよいでしょう。AndroidエミュレータはJavaで実装されていますので、Javaの動作する環境であればOSは問いません。こちらも無償にて利用できます。

iOSシミュレータでマイナビクリエイターのWebサイトを表示

AndroidエミュレータでマイナビクリエイターのWebサイトを表示

この2種類のエミュレータのインストール、使い方を把握しておきましょう。ここでの動作環境は次のとおりです。

iOSシミュレータ

項目 内容
OS Mac OS X 10.8.2 (Moutain Lion)
Xcode 4.5.1

iOSシミュレータは、App Store経由でインストールをおこないます。App StoreでXcodeを検索し、インストールをおこないます。Xcodeをインストールすると、アプリケーション(/Applications/)ディレクトリ以下に展開されます。iOSシミュレータはXcodeパッケージに内包されています。Xcodeを右クリックし、[パッケージの内容を表示]を選択することでパッケージ内のファイルを表示できます。

App StoreでXcodeをインストール

Xcodeパッケージの内容

iOSシミュレータ

Contents > Applicationsディレクトリ以下に、iPhone Simulator.appのエイリアスが配置されています。ダブルクリックして、iOSシミュレータを起動します。頻繁に利用する場合は、Dockに追加しておくと便利です。

Androidエミュレータ

動作環境は次のとおりです。

項目 内容
OS Windows 7 Professional (32bit)
Xcode 4.2
Java Java SE JDK 7u11

Androidエミュレータを動作させるには、JDKのインストールが必要です。Java SE Downloadsより、最新のJDKをダウンロードしてインストールをおこないます。JDKのインストール後、Android SDK | Android Developersより、最新のAndroid SDKをダウンロードします。

Java SE DownloadsよりJDKをダウンロード

利用規約に同意し、使用しているOSに合ったバイナリファイルを選択

Android SDK Managerをダウンロード

Android SDK Managerを実行し、Android SDKをダウンロード・インストールします。ここでは、[Tools]以下すべて、[Android 4.2 (API 17)]以下すべて、[Extras]以下の[Google USB Driver]にチェックを入れて、インストールをおこないます。

Android SDK Manager

Android SDKのインストールが完了

Android SDKをインストール後、スタートメニューよりAVD(Android Virtual Device) Managerを起動します。初回起動時は仮想デバイスが用意されていません。はじめにAndroidの仮想デバイスを用意する必要があります。右上の[New]ボタンをクリックして、仮想デバイスを作成します。

Android Virtual Device Manager

仮想デバイス作成画面

それぞれの項目の意味は次のとおりです。

項目 内容
Name 仮想デバイスの名前を入力します
Target Androidのバージョンを決定します
Skin スキンを設定します。画面サイズの設定もここからおこないます
Hardware ハードウェアの種類や値を設定します。Targetを選択した際に自動で入力されます。機能を追加する場合は、[New]ボタンから設定をおこないます

それぞれの情報を入力後、[Create AVD]ボタンをクリックして仮想デバイスを作成します。作成した仮想デバイスを選択し、[Start]ボタンをクリックしてAndroidエミュレータを起動します。

仮想デバイス作成

起動オプション設定画面

Androidエミュレータが起動した

Webブラウザの開発ツールを使用した、DOMツリー/CSSスタイル/JavaScriptのステップ実行

モダンなWebブラウザに標準で搭載されている開発ツールを使うことで、DOMツリーやCSSスタイル、JavaScriptのステップ実行が可能です。実機のiOSやAndroidでも、これらのWebインスペクタをリモートで利用できます。

PC上のWebブラウザでおこなう場合、Google Chromeではメニューより、[ツール] → [デベロッパー ツール]を選択して起動します。Safariでは、開発メニューを有効にした上で[開発] → [Webインスペクタ]を選択して起動します。

Mac版Google Chromeのデベロッパー ツール

ここでは、Google Chromeに搭載されている開発ツールの使い方について、一部をご紹介します。

用意されている機能は次のとおりです。

・Elements
・Resources
・Network
・Sources
・Timeline
・Profiles
・Audits
・Console

Elements

画面左側には現在表示しているHTMLのDOMツリーが。画面右側には画面のスタイルやJavaScriptで設定しているイベントリスナ、DOMのブレークポイントができます。DOMツリーはツリーの展開のほか、ノードや属性値の追加・編集・削除がおこなえます。

Elements

Network

Webページを構成しているHTML、JavaScript、CSS、画像ファイルなどのリソース一覧と、ロードに要した時間を確認できます。

Network

各項目の意味は次のとおりです。

項目 内容
Name / Path リクエストしたファイル名/ファイルパスを表示します
Method メソッドの種類を表示します
Status / Text HTTPステータスコードと内容を表示します
Type MIMEタイプを表示します
Initiator 該当リソースがどのファイルから読み込まれているかを表示します
Size / Content ダウンロードしたファイルのサイズを表示します。ローカルキャッシュを読み込んだ場合は(from cache)と表示されます
Time / Latency ロードに要した時間を表示します
Timeline ロードに要した時間を時系列で表示します。どこに読み込み時間のボトルネックがあるかを確認する際に最適です

読み込むファイルが多ければ多いほど、ファイルサイズが大きければ大きいほど、ユーザがWebページを表示するまでに待たされる時間が長くなるということになります。JavaScriptファイル、CSSファイルはなるべくひとまとめにし、コードの圧縮を。画像ファイルはCSS Spriteといったテクニックを用いることで、ロード回数を減らし、リクエスト総数を減らすことができます。

Sources

Webページを構成しているHTML、JavaScript、CSSの一覧を確認できます。別ドメインからリソースを取得している場合は、ドメインごとに区分けされます。

Sources

CSS、JavaScriptファイルの場合、オンザフライでコードの編集が可能です。変更をおこなうと、即座に画面に反映されます。プレビューで実際のスタイルを確認しながら微調整をおこない、満足いく結果になった時点で実際のCSSファイルを変更、といった作業が可能になります。

JavaScriptの場合、これに加えてブレークポイントを仕掛けることが可能です。JavaScript中の処理と処理の間にブレークポイントを仕掛けることで、処理の一時停止やステップ実行ができます。一時停止中に変数やオブジェクトの中身を確認からデバッグ作業をおこなうことで、トラブル時の原因切り分けが簡単になります。

JavaScriptのデバッグで確認・監視できるパラメータは次のとおりです。

項目 内容
Watch Expressions 任意の式や変数の確認・監視をおこないます
Call Stack コールスタックの確認をおこないます。各関数を選択すると、関数内におけるスコープを確認できます
Scope Variables アクセスできる変数スコープの確認がおこなえます。グローバルスコープ、ローカルスコープ、クロージャの分類で確認可能です
Breakpoints スクリプト中にしかけたブレークポイントの確認をおこないます
DOM Breakpoints ElementsタブでDOMにブレークポイントをしかけた一覧の確認をおこないます
XHR Breakpoints XHRのsendリクエストが送られたタイミングでブレークします
Event Listener Breakpoints イベントの発生時にブレークします
Workers Web Workersによるデバッグができます

Console

JavaScriptのコンソールを開きます。JavaScriptから出力されるログや、Webブラウザが出力する警告やエラーなどのログはここに表示されます。

Console

対話型のインターフェースを備えており、JavaScriptを直接実行できます。各種変数やオブジェクトの中身を確認したい場合は、console.log(Object);と入力することでパラメータ値を確認できます。

オープンソースライブラリを使って、デザインを簡単に

オープンソースのライブラリを用いることで、デザインの作業を簡単におこなえます。前述のjQuery MobileやDojo Mobile、Kendo UIにはPC/モバイル向けの多彩なデモが用意されています。

jQuery Mobile Demos

Kendo UI Demo

Kendo UI Demo

jQuery MobileではCodiqaと呼ばれる、ドラッグ&ドロップでページのレイアウトがおこなえ、HTMLソースをダウンロードできるWebサービスが用意されています。また、ThemeRoller for jQuery Mobileを利用することで、各種ボタンやアイコンの基調色を自由に変更できます。

Codiqaでレイアウトを作成、ソースコードを生成

ThemeRollerでデザインを調整

上手に活用することで、スマートフォン/タブレット向けWebサイトの高速開発が期待できます。

各種ライブラリと開発ツールを利用することで、制作時間や検証・修正時間のサイクルを縮めることが可能になります。Webサイト制作の際には、ぜひこれらのツール群を活用できるようにしておきたいところです。

富田宏昭 Hiroaki Tomida
「株式会社キクミミ」でFileMakerやオープンソース言語などを用いた、Webアプリ開発 企業の業務改善のためのシステム開発や環境構築を行っている。主な著書に「HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門」(マイナビ)など。