Lesson 09 スマートフォンサイトのデバッグ環境構築 - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

Smartphone編

	Lesson 9			スマートフォンサイトの デバッグ環境構築
	制作・文			たにぐち まこと（H2O Space.）

スマートフォンサイトを構築する場合、表示を確認したりJavaScriptのデバッグを行うにも、準備が必要となる。ここでは、それらのツール類を紹介していこう。

最終的な表示確認は、端末を実際に準備して確認するのがよいだろう。とはいえ、スマートフォンは端末代の他に月額の通信費用なども発生するため、簡単には所有できない。そこで、次のような端末を利用しよう。

まず、Appleの携帯音楽プレイヤーである「iPod touch」は、Webの閲覧環境としてみた場合はiPhoneとまったく違いがない。無線LAN環境下でしか利用できないが、表示確認をするという用途であれば十分といえるだろう。

Androidを搭載した端末で、気軽に入手できるものとしては、日本通信株式会社が販売している「IDEOS」及び「Light Tab」がある。プリペイド型の端末であるため、月額利用料などは不要だ。

端末が手元にない場合や、もっと手軽に表示を確認したいという場合には、シミュレータやエミュレータを利用するとよいだろう。

iPhone ／iPod touch向けには、Appleが配布している「iOS Simulator」【1】を利用する。ただし、Mac OS X向けにしか配布されていないので注意が必要だ。

このソフトは端末に比べて利用できるアプリが少なく、追加することもできない。しかしSafariは利用でき、インターネットにも接続できるため、Webサイトの確認などには利用できる。

端末を横にした場合や、ピンチイン・ピンチアウトといった操作も可能なので、シミュレーションは十分行える。

Windows 用でも、いくつかシミュレータソフトが提供されている。中でも「iBBDemo（http://labs.blackbaud.com/NetCommunity/article?artid=662）」【2】は使いやすいソフトの一つだろう。

ただし、このソフトはあくまでもWindows版Safariの画面サイズをiPhoneに合わせただけのものであるため、表示は必ずしも正確とはいえない。ある程度確認をしたら、実際の端末やMac版のiOSシミュレータでの確認が必要といえるだろう。

Android端末の表示確認には、Googleが提供している「Android Virtual Device」が利用できる（Windows/Mac/Linux）。まずは、Android Developers（http://developer.android.com/index.html）のページから、それぞれのOS向けに提供されている「SDK（Software Development Kit」をダウンロードする。

そして、Windowsの場合はスタートボタンから、「Android SDK Tools → SDK Manager」を起動すると【3】のような画面が表示される。Mac の場合は、ダウンロードして解凍したファイル群を適当のフォルダにコピーした後、「tools→android」ファイルをダブルクリックして起動しよう。【4】のような画面が表示される。

あとはパッケージをインストールしてバーチャルデバイスを作成すれば、【5】のように起動することができる。詳しくはドキュメントなどを参照しよう。


【1】iOS Simulator
iOS Dev Center（http://developer.apple.com/devcenter/ios/index.action）のサイトから無料で取得できるApple IDでログインし、「Downloads」のコーナーから、ダウンロードできる。セットアップをして、「Machintosh HD→Developer→Platforms→iPhoneSimulator.platform→Developer→Applications→iOSシミュレータ」を起動すれば、ソフトウェアが起動する



【2】iBBDemo
Adobe AIR（http://www.adobe.com/jp/products/air/）と、Windows版のSafari（http://www.apple.com/jp/safari/）をセットアップして、iBBDemoをセットアップする。起動直後はiPadの画面になってしまうが、「Ctrl+2」を押すことで、iPhoneのシミュレータに切り替わる。「Ctrl+→」で縦にすることも可能だ



【3】Windowsの場合



【4】Macの場合



【5】Android Virtual Device

スマートフォン向けにJavaScriptを開発する際、正常に動作しなかった場合には「デバッグ」を行わなければならない。ここではそんなデバッグ方法を紹介しよう。 iPhoneの設定で「Safari→デベロッパー→デバッグコンソール」をONにすると、Safariの上部に【6】のようなコンソールバーが表示される。JavaScriptでエラーが発生すると、【7】のようなメッセージが表示されるため、これをタップすると内容を確認することができる。シミュレータでも同様の操作が可能だ。

Androidの場合、JavaScriptエラーを確認するには端末側で設定から「アプリケーション→開発→USBデバッグ」のチェックをONにして、USBケーブルでPCと接続し、先にセットアップしたAndroid SDKに同梱されている「DDMS」【8】というツールで見るという方法になる。

端末上で確認するには「Logcat viewer」といった専用ツールをインストールする必要があり、かなり煩雑といえる。

このように、iPhone／Androidともに端末上でデバッグ作業を行うのは非常に困難だ。そこで、JavaScript開発をする際は、次のような手順で行うとよいだろう。

まず、PC上でFirefox（http://mozilla.jp/firefox/）とFirebug（https://addons.mozilla.org/ja/firefox/addon/firebug/）を利用して開発をしよう。Firebug【9】は、JavaScript開発には欠かせないアドオンの一つで、エラーメッセージの確認や「ブレイクポイント」「ウォッチ」といった多彩な機能が利用可能だ。

基本的に、JavaScriptの実行環境としては特殊なことをしなければ、iPhone／AndroidとFirefoxは同様の環境と考えてよい。ここでバグを取り除いておくと、後の開発が非常に楽になる。

続いて、PC向けのSafari及びChromeで動作確認をする。これらで動作が確認できれば、スマートフォン上でもほぼ問題なく動作するだろう。もし、Firebugで取り除ききれなかったバグがある場合には、Safariの場合は環境設定メニューから「詳細→メニューバーに"開発"メニューを表示」チェックを入れると、メニューバーに「開発」メニューが表示され、デバッグが可能になる【10】。こうして、確認ができたら実機で改めて確認しよう。

こうしてデバッグを行っても、やはり実機でしか確認ができないバグがあったり、動きがおかしくなってしまうことがある。そのような場合は、少しずつプログラムを変更しながら、何度も実機でリロードをして確認していくことになる。

このとき、毎回ファイルを変更してWebサーバにアップロードするのは手間がかかるため、少しでも軽減するように工夫しよう。たとえば、Windowsの場合はFTPソフトを「EmFTP」に、Mac OS Xの場合は「Transmit」を利用すると、サーバ上のファイルを直接エディタソフトで開いて編集することができる。保存すれば、その場でアップロードされる。また、Dreamweaver CS5の場合はサイト定義の際に、「詳細設定」をクリックして「保存時にファイルをサーバへ自動的にアップロード」にチェックを入れると同様にファイルが自動的に転送される【11】。

少しでも開発の手間を楽にして、スムーズなデバッグ環境を構築しよう。


【6】コンソールバーの表示



【7】エラーメッセージの表示



【8】DDMSツール



【9】Firebug



【10】Safariでの動作確認



【11】Dreamweaver CS5の場合