Home

throw Life

Chrome AppsをAndroid/iOSアプリとして動かす方法

Chrome AppsがAndroid/iOSアプリにパッケージングできるようになったので、早速試してみました。
開発ツールからシミュレータ/エミュレータでの実行、Android実機へのデプロイまでの方法をご紹介します。

手順は以下のサイトを参考に行いました。
https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Installation.md

サマリーは以下の3ステップです。とても簡単。
1. 開発環境を整える
2. アプリの開発(今回はプログラムを書きません)
3. アプリの実行(iOSとAndroidの両方を実行してみます)

1. まずは開発ツールのインストール
Install 1: Node.jsをインストール

Node.js version 0.10.0+がインストールされているか確認

% nvm version
v0.10.25

入っていなかったらインストール。

% curl https://raw.github.com/creationix/nvm/master/install.sh | sh
% source ~/.bash_profile || source ~/.profile || source ~/.bashrc
% nvm install 0.10
% nvm alias default 0.10
Install 2-a: Android開発環境をインストール

Androidアプリをビルドするなら以下の3つが必要。
1. Java JDK 7
2. Android SDK (version 4.4.2 higher /API Level 19)
3. Apache Ant

Install 2-b: iOS開発環境をインストール

iOSアプリをビルドするなら以下の3つが必要です。
1. Xcode 5
2. ios-deploy(iOSデバイスにデプロイするために必要)
コマンド一発で簡単にインストールできます。

% npm install -g ios-deploy

3. ios-sim(iOSシミュレータにデプロイするために必要)
こちらもコマンド一発。

% npm install -g ios-sim

Install 3: ccaをインストール

ccaというツールをインストール。
コレはMobile Chrome Appsの開発ツールっぽいです。npmのパッケージページはコチラ→(cca

% npm install -g cca

以下のコマンドで確認できます。

% cca checkenv
cca v0.0.3
## Checking that tools are installed
Android SDK detected.
Xcode detected.

Androidアプリだけの開発環境を整えていればXcode detectedの行は表示されないと思います。
逆にiOSアプリだけの開発環境を整えていればAndroidの行は表示されません。

2. アプリ開発

アプリのサンプルが大量に準備されているので、それが動くかを確認します。
https://github.com/GoogleChrome/chrome-app-samples#mobile-support

gitで全ソースを取ってきて以下に配置します。
(zipでDLしても同じです。)

% pwd
/Users/adam/dev/chrome/chrome-app-samples-master

サンプルは素(ス)のままで置いておきたいので、自分の開発スペースを作ります。

% cd ..
% mkdir workspace
% cd workspace
% pwd
/Users/adam/dev/chrome/workspace

サンプルからコピーしてMobile Chrome Appのプロジェクトを作ります。
今回は電卓(calculator)アプリを動かしてみます。

% pwd
/Users/adam/dev/chrome/workspace
% cca create MyCalc --copy-from=../chrome-app-samples-master/calculator/manifest.json
cca v0.0.3
## Checking that tools are installed
Android SDK detected.
Xcode detected.
 
#省略
 
prepare
Done!
 
Your project has been created, with web assets residing inside the `www` folder:
/Users/adam/dev/chrome/workspace/MyCalc/www
 
Remember to run `cca prepare` after making changes (full instructions: http://goo.gl/iCaCFG).

途中に「Permission not supported by cca: clipboardWrite (skipping)」なるWARNINGっぽい表示が出てきましたが、
それ以外は上手くいったようです。

なお、新規プロジェクトを作って新たなアプリを開発する場合は以下のコマンドです。

% cca create MyApp

#既存アプリをコピーしていません。

3. 実行

アプリを実行してみます。

まずiOSのシミュレータで起動してみます。

% cca emulate ios

サクッと起動しました。ちゃんと使えています。

次にAndroid。エミュレータで起動。

% cca emulate android &

こちらもサクッと起動し使えました。

Androidのエミュレータは初回起動が凄く重たいので、一瞬「あれ?」となりますが、
気長に待ちます。数分で起動するはずです。一度起動してしまえば、エミュレータを閉じない限りサクサク開発できます。

最後にAndroidの実機(Nexus5)で起動してみます。
Androidの実機をUSBでMacに繋げてUSBデバッグを許可した状態にして以下のコマンドを実行。

% cca run android

こちらもなんの問題もなく起動しました。

まとめ

Chrome AppsがAndroid/iOSアプリとしてパッケージングできるようになったので試してみました。
サンプルコードの電卓をコピーしてビルドしました。
あっけなくiOSとAndroidで動くことが確認できました。

なぜかレイアウトがズレていたりしますが、ひっかかることなくあっさりと動いて
これからの動向にwktkが止まりません。

Home

Author
Search
Feeds
Meta

Return to page top