全国のYeomanの服をきて街をさっそうと歩きたい皆様こんにちは大橋です。
一部で話題が起こってるChrome Apps for Mobileですが試しましたか？
Chrome Apps作るついでにAndroid向けのも作れるなら素敵すぎますよね。
でもまだChrome Apps for Desktop自体作ったことが無い方も非常に多い気がするので今回はYeomanを使ってChrome Appsのひな形を作り、そこからChrome Apps for Mobileのアプリケーションを作ってみたいと思います。
なお、以下の記事を参考にさせていただきました。
Chrome Apps for mobileの開発方法(天使やカイザーと呼ばれて)
どうなる？
最終的にYeomanでChrome Apps for Mobileの開発が開始できるようになります。
環境
以下初期状態です。
- PC : Mac OSX 10.9.1
- Node : v0.10.16
- Android周りの開発環境
- 4.4.2が入ってました。
- Ant : 1.9.3
- 最初からは入ってなかったのでbrew経由で入れた。
- Yeoman : 1.1.2
- npm経由で。
準備
Yeomanのchrome apps generatorを入れる
Chrome Appsのひな形を作るYeoman Generator、generator-chromeappを入れます。
最近のYeomanはyoだけコマンドを打つとインタラクティブにやれて素敵です。
yoコマンドを打つと、次にやることを効かれるのでInstall a generatorを選択してください。
もろもろ聞かれるgenerator-chromeappを探してインストールして下さい。
$ yo
[?] What would you like to do? Install a generator
[?] Search NPM for generators: chrome
[?] Here's what I found. Install one: generator-chromeapp
ccaコマンドラインツールを入れる
Chrome AppsをAndroidやiOSのプロジェクト化するccaをnpm経由で入れます。
$ npm install -g cca
プロジェクトの作成
yeoman経由でChrome Appsのひな形を作ります。
まず適当なプロジェクト用のディレクトリを切ります。
$ mkdir my-chrome-apps
$ cd my-chrome-apps
作成したらChrome Apps開発プロジェクトのひな形を作ります。
$ yo
[?] What would you like to do? Run the Chromeapp generator (0.2.5)
Make sure you're in the directory you want to scaffold into.
This generator can also be run with: yo chromeapp
[?] What would you like to call this application? my chrome apps
[?] How would you like to describe this application? My Chrome App
create package.json
create bower.json
create .bowerrc
~以降続く~
途中Chrome Appsで利用する名称や、パーミッションなどが聞かれますが、
任意で答えて下さい。
すべて作り終わると、以下の感じの構成になります。
my-chrome-apps
├── Gruntfile.js
├── app
│ ├── _locales
│ │ └── en
│ ├── bower_components
│ ├── images
│ │ ├── icon-128.png
│ │ └── icon-16.png
│ ├── index.html
│ ├── manifest.json
│ ├── scripts
│ │ ├── chromereload.js
│ │ ├── index.js
│ │ └── main.js
│ └── styles
│ └── main.css
├── bower.json
├── node_modules
│ └── (パッケージ)
├── package.json
└── test
├── app
│ └── manifest.json
├── bower.json
├── bower_components
│ ├── chai
│ └── mocha
├── index.html
└── spec
└── test.js
一旦Chrome Apps for Desktopで動かしてみる。
せっかくChrome Appsを作ったのでChrome上で動かしてみます。
Chromeを開いて設定から拡張機能ページを開いて下さい(chrome://extensions)
拡張機能ページが開いたら「パッケージ化されていない拡張機能を読み込む」を選択します。
ディレクトリの選択ダイアログが表示されるので、
先ほど作成したプロジェクトのappディレクトリを選択して下さい。
以下のようにChrome Appが取り込まれていれば成功しています。
「起動」リンクを押下するとChrome Appsが起動します。
Android用のプロジェクトを作成する。
Chrome Appが作成できたのを確認したら、これをccaを使ってAndroidで動くプロジェクトに変換したいと思います。
以下のコマンドでMyAndroidAppディレクトリが作成され、その中にAndroidプロジェクトが作成されます。app/manifest.jsonは上記で作ったプロジェクトのmanifest.jsonを指して下さい。
$ cca create MyAndroidApp --link-to=app/manifest.json
Android用プロジェクトを起動する。
エミュレータで起動
エミュレータで起動する場合はcca emulate androidコマンドを使います。
$ cd MyAndroidApp
$ cca emulate android
これでAndroidエミュレータが起動し、対象のChrome Appsが確認できます。
なお当然AVDを作ってないとエラーが出ます。
実機で起動
実機で起動する場合は、実機を接続しcca run androidを叩きます。
$ cd MyAndroidApp
$ cca run android
これで実機にアプリケーションが配置され、実行可能になります。
アプリケーションを更新したら？
cca prepareで更新されるようですがまだよくわかってないです。
まとめ
yeomanでAndroidやiOSのアプリケーションが開発可能になったと言っても過言ではない状況ですね
もう少し追っていきたいと思います。