Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
39
Help us understand the problem. What is going on with this article?
@soundTricker

YeomanでChrome Apps for Mobileを作ってみるお

More than 5 years have passed since last update.

全国の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が取り込まれていれば成功しています。

スクリーンショット 2014-02-06 10.13.03.png

「起動」リンクを押下するとChrome Appsが起動します。

スクリーンショット 2014-02-06 10.16.00.png

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を作ってないとエラーが出ます。

スクリーンショット 2014-02-06 10.34.15.png

実機で起動

実機で起動する場合は、実機を接続しcca run androidを叩きます。

$ cd MyAndroidApp
$ cca run android

これで実機にアプリケーションが配置され、実行可能になります。

2014-02-06 10.32.43.png

アプリケーションを更新したら?

cca prepareで更新されるようですがまだよくわかってないです。

まとめ

yeomanでAndroidやiOSのアプリケーションが開発可能になったと言っても過言ではない状況ですね
もう少し追っていきたいと思います。

39
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
soundTricker
Google API、GSuite、GCP、Angular(1&2)、Google Apps Scriptらへんの人 一応Google Developer Expert(Apps Script)です。 https://developers.google.com/community/experts/directory/profile/profile-keisuke_oohashi

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
39
Help us understand the problem. What is going on with this article?