Asial Blog

Recruit! Asialで一緒に働きませんか?

Monaca CLIでローカル開発を進めよう!

カテゴリ :
Monaca
タグ :
CLI
node.js

Monacaを使ってハイブリッドアプリ開発を行う場合、Monaca IDEまたはLocalKitを使うのが一般的でした。LocalKitを使えばWebベースのIDEを使わずにローカルで開発が可能でしたが、それをさらに一歩推し進める存在としてMonaca CLIをリリースしました。



今回はそのMonaca CLIの使い方を紹介します。



インストール



Monaca CLIはnpmを使ってインストールします。別途node.jsのインストールが必要です。



  1. $ npm install -g monaca # Mac OSXの場合
  2. $ npm install monaca # Windowsの場合

インストールが終わったら、まずはヘルプを表示してみます。これで実装されているコマンドが確認できます。



  1. $ monaca --help
  2.  __  __                             
  3. |  \/  | ___  _ __   __ _  ___ __ _ 
  4. | |\/| |/ _ \| '_ \ / _` |/ __/ _` |
  5. | |  | | (_) | | | | (_| | (_| (_| |
  6. |_|  |_|\___/|_| |_|\__,_|\___\__,_|
  7.  Version 1.0.6
  8. Usage: monaca command [args]
  9. Description:
  10.   Monaca command-line interface.
  11.   To learn about a specific command type:
  12.   $ monaca  help
  13. Commands:
  14.   create  ........  create a new Monaca project
  15.   info  ..........  show info about Cordova environment
  16.   platform  ......  add, update and remove platforms
  17.   plugin  ........  manage installed plugins
  18.   prepare  .......  prepare project for build
  19.   compile  .......  build the project
  20.   run  ...........  deploys project on a device / emulator
  21.   build  .........  shortcut for compile, then prepare
  22.   emulate  .......  run project in emulator
  23.   serve  .........  runs a local web server for assets
  24.   login  .........  sign in to Monaca Cloud
  25.   logout  ........  sign out from Monaca Cloud
  26.   clone  .........  clone project from the Monaca Cloud
  27.   upload  ........  upload project to Monaca Cloud
  28.   download  ......  download project from Monaca Cloud
  29.   livesync  ......  starts a server that waits for connections from Monaca Debugger
  30.   multiserve  ....  serves several projects to the Monaca Debugger
  31.   remote build  ..  build project on Monaca Cloud
  32.   proxy  .........  configure proxy to use when connecting to Monaca Cloud
  33. Examples:
  34.   $ monaca create myproject
  35.   $ cd myproject
  36.   $ monaca build
  37.   $ monaca run android

基本的にはプロジェクトを作り、runコマンドでAndroid/iOSなどを指定してシミュレータ/エミュレータで実行できます。




プロジェクトのベース

プロジェクトのベース




シミュレータで実行

シミュレータで実行



ローカル開発を進める



ローカルで開発を進める際には2つの方法があります。まずデスクトップのブラウザを使ってHTML5ベースでの開発を行う場合にはserveを使います。



  1. $ monaca serve

これでWebサーバが立ち上がりますので、Webアプリケーションを作る感覚でどんどん開発が進められます。




デスクトップを使った開発

デスクトップを使った開発



次にMonacaデバッガーを使った開発です。これはlivesyncを使います。



  1. $ monaca livesync

このコマンドを使う場合、デスクトップとMonacaデバッガーを立ち上げているスマートフォンが同じネットワーク(LAN)内にいる必要があります。実際の開発はファイルを更新する度に自動的に再読込されるので、高速に開発が行えます。




Monacaデバッガーで実行

Monacaデバッガーで実行



ビルドはリモートで



そしてアプリが完成したらMonacaを使ってリモートビルドができます。そのためにはまずログインをします。



  1. $ monaca login
  2. Email address: atsushi@moongift.jp
  3. Password: 
  4. Successfully signed in as atsushi@moongift.jp.

そしてremote buildを実行すると、Monacaの画面が開きますので、そこでリモートビルドを進められるようになります。




リモートビルド 

リモートビルド 






Monacaアプリの構造はPhoneGap/Cordova互換となっていますので、そのままローカルでXcodeやEclipse/Android Studioを使ったコンパイルもできます。リモートビルドの場合、コンパイル環境の整備は不要ですし、WindowsマシンでもiOSアプリのコンパイルを指定できるのが利点です。他にもプラグインのインストールやプロジェクトのクローンなど多くの機能があります。詳しくはMonaca CLIのドキュメントをご覧ください。



Monaca CLIを使えばMonacaのWebサイトを殆ど見ることなくローカルだけで開発が進められるようになります。手元の開発環境そのままにアプリ開発を行ってください!



Monaca CLI - Monacaドキュメント