Born Too Late

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

はじめに

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

IS01 実機の準備

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

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

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

これで、 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

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

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

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

そして、縦バージョン。

まとめ

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

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

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

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

See also

• Developing on a Device Android Developers
  Ubuntu PC の設定についてはこのページを参考にしました。
• IS01 のスクリーンショットと壁紙 コムギドットネット
  IS01 実機のスクリーンショットの撮影について参考にしました。

Android, PhoneGap

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 に接続していると上手くいかないことがあるようなので、一旦外しておいてください。
実機上でのアプリの動作については、次回以降紹介する予定です。

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

ただし、これでは普通のアプリをインストールしたのと、違いがわからないと思うので、ソースを見てみましょう。
アプリのソースは、 ./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 実機上へのアプリのデプロイ・実行について紹介する予定です。

Android, PhoneGap

このブログでは、記事中のプログラムの文法ハイライトに、 Syntax Highlighter and Code Colorizer for WordPress というプラグインを使用しています。 JavaScript と CSS で、プログラムを見易くしてくれる素敵なプラグインなのですが、 JavaScript ファイルだけで 1 度に 18 ものファイルを読むのが気になるところです。

外部のリソースが増えると、当然 HTTP リクエストも増え、ページ全体の表示時間に影響が出ます。

というわけで、以下のようなスクリプトを用意しました。

使い方

まずは、上記 Ruby スクリプトを syntax-highlighter-minimizer.rb といった適当な名前で保存します。

このスクリプトの動作には、 JSMin という Rubygems が必要なので、インストールします。

$ gem install jsmin --no-rdoc --no-ri

スクリプトは以下のように使用します。

$ ruby syntax-highlighter-minimizer.rb /path/to/syntax-highlighter-and-code-prettifier/script

プログラムの引数として、 sh***.js といったファイルの含まれるディレクトリのパスを渡して実行します。すると、ディレクトリ内に以下のようなファイルが保存されます。

• syntax-highlighter-all.js … sh***.js をすべて結合したもの
• syntax-highlighter-all-min.js … ***.js をすべて結合し、難読化したもの

仕上げとして、 JavaScript ファイルの読み込み部分を書き換え、ファイルを結合・難読化したものと置き換えます。

./wp-content/plugins/syntax-highlighter-and-code-prettifier/syntax-highlighter.php

18 もあった JavaScript ファイルがひとつにまとまりました !

難読化とは

文字通りに言えば、プログラムを読みにくくすることですが、実際はソースコードの圧縮が目的です。インデント等を極力少なくすることで、圧縮されます。

どれぐらいの効果があるか

以下のようなページを作って測定してみました。

• default.html … 元の 18 の JavaScript が読み込まれる
• all.html … 18 の JavaScript を 1 つのファイルに結合したものが読み込まれる
• all-min.html … 1 つのファイルに結合したのち、難読化したものが読み込まれる

いずれも、 script タグにより JavaScript が読み込まれるだけのシンプルなページです。 FireFox で Ctrl + F5 の強制更新で、 onload イベントの発生までの時間を計測しています。

	default.html	all.html	all-min.html
1	379ms	140ms	180ms
2	375ms	148ms	168ms
3	556ms	131ms	133ms
4	365ms	135ms	124ms
5	370ms	146ms	137ms
6	363ms	128ms	133ms
7	370ms	257ms	132ms
8	397ms	122ms	133ms
9	411ms	127ms	136ms
10	362ms	135ms	135ms
Avg.	394.8ms	146.9ms	141.1ms

難読化による効果は誤差程度に止まりましたが、 JavaScript ファイルをまとめることは、絶大な効果があるようです。今回の例でいえば、 2.8 倍近い高速化が実現できました。

ただし、実際のウェブサイトは、 JavaScript 以外にもたくさんの要素を含み、キャッシュ等の要因も絡むため、ここまでのインパクトは無いと思いますが、ページの表示時間が気になるときは、是非検討してみるべきでしょう。

今後の予定

今回は特定のプラグインに標的を絞りましたが、 WordPress といった CMS を使用する場合、プラグインで JavaScript や CSS の数がもの凄いことになっていた ! というのはよくあると思います。それらを 1 つ 1 つ潰していくことで、案外バカにできない効果が期待できそうです。

あと、 JavaScript ファイルを減らそう ! とかいいながら、この記事には GitHub の Gist が 2 つも貼り付けられています。これらは JavaScript の外部リソースによるものなので、ページ全体の読み込み時間に影響します。ページの読み込み時に読み込むのではなく、「このコードは読んでみたいな」と思ってクリックするまで、読み込みを遅延させる、という仕組みもアリかもしれません。

参考文献

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

Yahoo ! のフロントエンド最適化チームによるノウハウ集で、 JavaScript の結合・難読化についてはほとんどこの書籍に書いてあります。

その他にも様々なテクニックが紹介されていますが、その中でも特に敷居が低いのが、この JavaScript についての最適化です。

是非試してみてはいかがでしょうか。

JavaScript, Optimization, Web