HTML5+CSS3 |
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のエラーを
発見する
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の場合
>>目次に戻る