|
Webデザイン |
 |
| Lesson05 | スマートフォンサイトの デバッグ環境を構築する |
| 制作・文 | 樋山 淳 |
 |
スマートフォン用のページを作成する際は、表示などが正しいかどうかをテストする必要が出る。実機を導入しなくても、SDKを利用すればパソコン上でデバッグすることができる。 |
01
まずはiPhone 用のデバッグ環境の構築方法を紹介しよう。最初にAppleのDeveloperに登録する必要がある【1-1】。登録手続きをしたら、SDKというツール群をダウンロードする【1-2】。
SDKが動く環境だが、OSXが乗るIntel Macのみとなっており、Windowsなど他のOSは対応していない。契約には、今回利用する無償のDeveloper 契約と、実機テストやStoreにアプリを登録できる有償契約の2種類がある。
【1-1】Developerの登録はhttp://developer.apple.com/programs/register/から行う
【1-2】登録が終わったら、https://developer.apple.com/devcenter/ios/index.actionからXcode 3.2.5 and iOS SDK 4.2（2010年12月現在）をDownloadする
SDKが動く環境だが、OSXが乗るIntel Macのみとなっており、Windowsなど他のOSは対応していない。契約には、今回利用する無償のDeveloper 契約と、実機テストやStoreにアプリを登録できる有償契約の2種類がある。
【1-1】Developerの登録はhttp://developer.apple.com/programs/register/から行う
【1-2】登録が終わったら、https://developer.apple.com/devcenter/ios/index.actionからXcode 3.2.5 and iOS SDK 4.2（2010年12月現在）をDownloadする
02
Developer サイトからSDKをダウンロードしてきたら、実際にインストールしてみよう。インストール自体は簡単に行え、ほどなく終了する【2-1】【2-2】。正しくインストールが行われなかった場合は、ターミナルから$ sudo /Developer/Library/uninstall-devtools --mode=allを実行して、Developer ツール群をいったん削除したあとで、もう一度インストールを試してみよう【2-3】。
【2-1】ダウンロードしてきたファイルを解凍し、Xcodeand iOS SDKをダブルクリックする
【2-2】インストールで気をつけることはそれほどなく、指示に従っていけばインストールできる
【2-3】
【2-1】ダウンロードしてきたファイルを解凍し、Xcodeand iOS SDKをダブルクリックする
【2-2】インストールで気をつけることはそれほどなく、指示に従っていけばインストールできる
【2-3】
03
実際にiOSシミュレータを起動してみよう。iOSシミュレータは/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/に存在する。起動してシミュレータ内でSafariを立ち上げ、Webページに接続できることを確認してみてほしい【3-1】【3-2】。
【3-1】Webに関しては基本的に実機と同じように表示される
【3-2】iOSシミュレータではiPhoneだけでなく、iPadも表示できる
【3-1】Webに関しては基本的に実機と同じように表示される
【3-2】iOSシミュレータではiPhoneだけでなく、iPadも表示できる
04
Androidのデバッグ環境の構築はiPhone よりも複雑なので、よく読みながら構築 してほしい。
まずは、AndroidのSDK関連をGoogleの Developer サイトからダウンロードして くる 【4-1】。次に開発環境としてEclipse をEclipseのサイトからダウンロードして くる【4-2】。
【4-1】AndroidのSDKはhttp://developer.android.com/sdk/index.htmllからダウンロードできる。自分の環境に合わせたSDKを入手しよう
【4-2】実際の開発環境としてEclipse をhttp://www.eclipse.org/downloads/からダウンロードしてくる。入手するファイルはEclipse Classicだ
まずは、AndroidのSDK関連をGoogleの Developer サイトからダウンロードして くる 【4-1】。次に開発環境としてEclipse をEclipseのサイトからダウンロードして くる【4-2】。
【4-1】AndroidのSDKはhttp://developer.android.com/sdk/index.htmllからダウンロードできる。自分の環境に合わせたSDKを入手しよう
【4-2】実際の開発環境としてEclipse をhttp://www.eclipse.org/downloads/からダウンロードしてくる。入手するファイルはEclipse Classicだ
05
いよいよ開発環境を構築する。
まずダウンロードしてきたAndroid SDKとEclipseの開発環境を解凍して、インストールする。その際の展開場所はProgramフォルダにしておくとよいだろう。
OS Xの場合は、ダウンロードフォルダに自動解凍されてしまうため、そこで開発環境を構築するとややこしくなる。
解凍とインストールが終わったらEclipseを立ち上げ、Androidの開発環境を読み込み、最終的にAndroidエミュレータを起動するように設定する【5-1】～【5-5】 。AndroidのSDKの保存場所は、Eclipseのフォルダ内にしておけば、管理が簡単になる。
インストールと設定が正しくできれば、あとは毎回「Opens the Android SDK and AVD Manager」からエミュレーションを立ち上げ、シミュレータを利用することができる【5-6】。
また、Androidシミュレータは起動に少々時間がかかるので、遅いからといって途中で終了しないようにしよう。筆者のCore i7 2.93GHzのマシンでも起動に1～2分程度かかる。Core Duoの2.4GHz のマシンだとその倍程度の起動時間がかかる場合があるようだ 。
【5-1】まず、EclipseのAndroid用プラグインをインストールする。メニューから"Help/Install New Software..."を選択し、Installダイアログの「Add...」ボタンをクリック、「Add Repository」ダイアログの「Name」に「Android」と入れて、「Location：」に「http://dl-ssl.google.com/android/eclipse」と入力して、「OK」ボタンをクリックする
【5-2】【5-1】の設定が終わるとInstall画面に「Developer Tools」という項目が出てくるので、チェックして「Next」ボタンをクリックする。後はInstall途中で何度か質問に答えていき、最後に「Finish」ボタンをクリックすればInstall作業は終了する
【5-3】【5-2】の設定が終わったら環境設定を開く。「Android」グループの「SDK Location」設定に、先ほど解凍した「Android SDK」のフォルダを指定して「OK」ボタンをクリックする
【5-4】ツールバーにある「Opens the Android SDK and AVD Manager」アイコンをクリックすると出てくるウィンドウで「Available Packages」を選択し、リストメニューから「SDK Platform Android 2.2,API 8, revision 2」にチェックを入れ、「[Install Selected」ボタンをクリックするとパッケージがInstallされる
【5-5】【5-4】が終わったら、同じウィンドウの左リストから「Virtual Devices」を選択し、右端にある「New」ボタンをクリック、「Creat newAndroid Virtual Device」ウィンドウを開く。次に「Name：」に適当な名前をつけ、「Taget：」に「Android 2.0 - API Level 8」を選んで「Create AVD」ボタンをクリックする
【5-6】【5-5】の設定が終わり、ウィンドウを見ると「Android Virtual Device」が追加されたのがわかる。右メニューから「Start」ボタンをクリックするとAndroidシミュレータが立ち上がる。あとは適当にブラウザ画面からURLを入力してテストしてみよう
まずダウンロードしてきたAndroid SDKとEclipseの開発環境を解凍して、インストールする。その際の展開場所はProgramフォルダにしておくとよいだろう。
OS Xの場合は、ダウンロードフォルダに自動解凍されてしまうため、そこで開発環境を構築するとややこしくなる。
解凍とインストールが終わったらEclipseを立ち上げ、Androidの開発環境を読み込み、最終的にAndroidエミュレータを起動するように設定する【5-1】～【5-5】 。AndroidのSDKの保存場所は、Eclipseのフォルダ内にしておけば、管理が簡単になる。
インストールと設定が正しくできれば、あとは毎回「Opens the Android SDK and AVD Manager」からエミュレーションを立ち上げ、シミュレータを利用することができる【5-6】。
また、Androidシミュレータは起動に少々時間がかかるので、遅いからといって途中で終了しないようにしよう。筆者のCore i7 2.93GHzのマシンでも起動に1～2分程度かかる。Core Duoの2.4GHz のマシンだとその倍程度の起動時間がかかる場合があるようだ 。
【5-1】まず、EclipseのAndroid用プラグインをインストールする。メニューから"Help/Install New Software..."を選択し、Installダイアログの「Add...」ボタンをクリック、「Add Repository」ダイアログの「Name」に「Android」と入れて、「Location：」に「http://dl-ssl.google.com/android/eclipse」と入力して、「OK」ボタンをクリックする
【5-2】【5-1】の設定が終わるとInstall画面に「Developer Tools」という項目が出てくるので、チェックして「Next」ボタンをクリックする。後はInstall途中で何度か質問に答えていき、最後に「Finish」ボタンをクリックすればInstall作業は終了する
【5-3】【5-2】の設定が終わったら環境設定を開く。「Android」グループの「SDK Location」設定に、先ほど解凍した「Android SDK」のフォルダを指定して「OK」ボタンをクリックする
【5-4】ツールバーにある「Opens the Android SDK and AVD Manager」アイコンをクリックすると出てくるウィンドウで「Available Packages」を選択し、リストメニューから「SDK Platform Android 2.2,API 8, revision 2」にチェックを入れ、「[Install Selected」ボタンをクリックするとパッケージがInstallされる
【5-5】【5-4】が終わったら、同じウィンドウの左リストから「Virtual Devices」を選択し、右端にある「New」ボタンをクリック、「Creat newAndroid Virtual Device」ウィンドウを開く。次に「Name：」に適当な名前をつけ、「Taget：」に「Android 2.0 - API Level 8」を選んで「Create AVD」ボタンをクリックする
【5-6】【5-5】の設定が終わり、ウィンドウを見ると「Android Virtual Device」が追加されたのがわかる。右メニューから「Start」ボタンをクリックするとAndroidシミュレータが立ち上がる。あとは適当にブラウザ画面からURLを入力してテストしてみよう
