1. #1 Android SDK 編
  2. #2 PhoneGap 編
  3. #3 実機にデプロイ編

はじめに

前回と前々回は、普通に Ubutu 上での Android アプリ開発環境構築についての記事となりましたが、今回はいよいよ IS01 についてです。
前回はエミュレータ上でアプリを実行してみましたが、今回は同じことを IS01 実機上にて行います。

IS01 実機の準備

まずは、 IS01 の設定をデバッグモードに変更します。
デバッグモードといっても、通常のアプリを扱っている分には特に関係ないので、常に On でも問題なさそうです。

IS01 メニュー

メニューから「設定」を選択する

メニューから「設定」→「アプリケーション」へ進みます。

Configuration Screen

「提供元不明のアプリ」にチェック

「提供元不明のアプリ」にチェックを入れたら、同じ画面の「開発」という項目を選択します。

Debug Mode

「USBデバッグ」にチェックを入れる

これで、 IS01 上の設定は完了です。

Ubuntu PC の設定

ここでは、 Android SDK の中に含まれる adb (Android Debug Bridge) というコマンドを使用します。
Android SDK のインストールについては Android SDK 編をご覧ください。

IS01 を USB で Ubuntu PC に接続します。
特に設定を行なっていない状態だと、デバッグ用のデバイスとして上手く認識されません。

$ adb devices
List of devices attached
????????????	no permissions

これを上手く認識させるには、 /etc/udev/rules.d/51-android.rules というテキストファイルを作成し、以下のように記述します。

SUBSYSTEM=="usb", SYSFS{idVendor}=="04dd", MODE="0666"

ただし、上記は IS01 用の設定なので、ご注意ください。
Ubuntu のバージョンや、 Android 端末の製造元によって書き換える必要があります。
詳しくは以下のページをご覧ください。
Developing on a Device Android Developers

念のため、全てのグループに読み込み権限を与えておきます。

sudo chmod a+r /etc/udev/rules.d/51-android.rules

これらが完了したら、 USB 接続をやり直し、再び以下のコマンドで、デバッグ用デバイスが認識されているか確認します。

$ adb devices
List of devices attached
SSHEX060626	device

上記のように出力されれば、設定は完了です。

IS01 実機へのデプロイ・実行

あとは、 PhoneGap 編で、エミュレータ上で実行したときと変わりません。
ただし、エミュレータは終了して、デバッグ端末は IS01 1 台のみ、という状態にしておきます。

PhoneGap アプリのあるディレクトリへ移動して、以下のコマンドを実行します。

$ ant debug install && adb logcat

上手くいけば、エミュレータのときと同様、メニューにアプリが追加されます。

example app is added.

メニューに example アプリが登録された

実行すると、以下のように表示されます。
これも、エミュレータのときと同様ですね。

Executed example app.

example アプリを起動

UUID の部分だけ隠しています。

そして、縦バージョン。

Rotated Ver.

縦にしてみる

まとめ

というわけで、全 3 回で、 Ubuntu 上に IS01 の開発環境を構築する方法について紹介してきました。
ここまでできれば、あとは HTML, CSS, JavaScript を駆使して、アプリの開発が楽しめることでしょう。

このブログでも、引き続き Android アプリの開発について書いていく予定です。
今回は PhoneGap の紹介になりましたが、使ってみておもしろければ Titanium 等の類似フレームワークについても紹介していければと思っています。

個人的には、今回初めて Android アプリをさわってみて、 HTML5 や CSS3 について興味を持てたことも面白かったです。
HTML や CSS を書く機会が普段あまり無いので、いい機会になりました。

本格的なアプリを作る場合は、 Java や Objective-C でゴリゴリ書いていくのがいい場合もあるでしょう。
しかし、スマートフォンアプリはほとんどがアイディアの勝負だと思うので、こういった間口の広い環境があるのは素晴らしいことだとおもいます。
プログラムを書いたことがある人も無い人も、楽しくアプリ開発しましょう !

See also

,
  1. #1 Android SDK 編
  2. #2 PhoneGap 編
  3. #3 実機にデプロイ編

PhoneGap とは

PhoneGap は、 HTML/CSS/JavaScript でスマートフォンアプリを開発するためのフレームワークです。複数のプラットフォームに対応しており、 Android だけでなく iPhone や iPad のアプリも開発できます。

PhoneGap が用意した API を、 JavaScript を通じて呼び出すことにより、より低レイヤの、位置情報やカメラにアクセスすることもできます。

この記事では、前回の #1 Android SDK 編から引き続き、 Ubuntu で Au の IS01 上で動作する Android アプリを構築する上での、環境構築について紹介します。
今回は PhoneGap をインストールし、アプリをエミュレータ上で実行するところまでやります。

必要パッケージ

PhoneGap/Android をインストールする前に、以下のものが必要になります。

  • Android SDK
  • Java JDK 1.5
  • Apache ANT
  • Ruby

私の場合は、どれも既に入っていたようで、今回は特に作業を行っていないので、手順は省略します。
Android SDK のインストールについては前回の記事で紹介しています。
他は、基本的に aptitude 等のパッケージマネージャで簡単にインストールできると思います。

PhoneGap/Android のインストール

GitHub から最新の安定版をダウンロードします。 2010 年 11 月 23 日現在は、 0.9.2 が最新のようです。

phonegap’s phonegap-android at master – GitHub

ダウンロードしたら、展開して、 /opt といったディレクトリにインストールしましょう。

$ tar xvzf phonegap-phonegap-android-0.9.2-0-gf725404.tar.gz
$ sudo mv phonegap-phonegap-android-e1560e0/ /opt/phonegap-android

~/.bashr 等に以下の行を足して、パスを通します。

# PhoneGap/Android
export PATH=$PATH:/opt/phonegap-android/bin

保存したら、以下のコマンドで ~/.bashrc を再読み込みし、反映させます。

$ source ~/.bashrc

これで、 droidgap というコマンドが有効になっているはずです。

スケルトンアプリの生成

以下のコマンド、スケルトンが生成されます。ここで生成されるコードを元に開発していくことになります。

$ droidgap gen example

example というディレクトリが生成され、中は以下のような構成になっているとおもいます。

$ cd example
$ ls -l
合計 40
-rw-r--r-- 1 yuya yuya 2000 2010-11-23 13:54 AndroidManifest.xml
drwxr-xr-x 3 yuya yuya 4096 2010-11-23 13:54 assets
drwxr-xr-x 2 yuya yuya 4096 2010-11-23 13:54 bin
-rw-r--r-- 1 yuya yuya  697 2010-11-23 13:54 build.properties
-rw-r--r-- 1 yuya yuya 3202 2010-11-23 13:54 build.xml
-rw-r--r-- 1 yuya yuya  380 2010-11-23 13:54 default.properties
drwxr-xr-x 2 yuya yuya 4096 2010-11-23 13:54 libs
-rw-r--r-- 1 yuya yuya  419 2010-11-23 13:54 local.properties
drwxr-xr-x 7 yuya yuya 4096 2010-11-23 13:54 res
drwxr-xr-x 3 yuya yuya 4096 2010-11-23 13:54 src

スケルトンアプリをエミュレータ上で起動する

ターミナルをもうひとつ起動し、そちらで android コマンドから Android SDK and AVD Manager を起動し、エミュレータを起動します。
ここの手順についても、前回の記事で紹介した通りなので省略します。

エミュレータが起動したら、以下のコマンドで example アプリをビルドし、エミュレータ上で起動します。
コマンドは example ディレクトリの中で実行してください。

$ ant debug install && adb logcat

上手くいけば、アプリがエミュレータ上にインストールされるとともに、デバッグログがターミナル上に流れます。

なお、このとき IS01 実機を USB で PC に接続していると上手くいかないことがあるようなので、一旦外しておいてください。
実機上でのアプリの動作については、次回以降紹介する予定です。

アプリはメニューから起動できます。

Android Emulator

メニューを持ち上げます

example app is added

example アプリがメニューに追加されている

Executed example app.

example アプリを起動する

ただし、これでは普通のアプリをインストールしたのと、違いがわからないと思うので、ソースを見てみましょう。
アプリのソースは、 ./assets/www/ ディレクトリ内にあります。

$ cd assets/www/
$ ls -l
合計 100
-rw-r--r-- 1 yuya yuya  4581 2010-11-23 13:54 index.html
-rw-r--r-- 1 yuya yuya  1612 2010-11-23 13:54 master.css
-rw-r--r-- 1 yuya yuya 87949 2010-11-23 13:54 phonegap.js

ごらんの通り、 HTML と CSS と JavaScript ですね !
中身のソースも、ウェブアプリを作ったことのある人であれば、比較的馴染みのあるものだとおもいます。

まとめ

今回は、 PhoneGap/Android のインストール方法と、スケルトンを生成し、エミュレータ上で実行する方法について紹介しました。
次回は IS01 実機上へのアプリのデプロイ・実行について紹介する予定です。

,