YeomanでChrome Apps for Mobileを作ってみるお
全国の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のアプリケーションが開発可能になったと言っても過言ではない状況ですね
もう少し追っていきたいと思います。
Author And Source
この問題について(YeomanでChrome Apps for Mobileを作ってみるお), 我々は、より多くの情報をここで見つけました https://qiita.com/soundTricker/items/db78b99de7753215cc7c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .