アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

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



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



インストール



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





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


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





$ monaca --help
 __  __                             
|  \/  | ___  _ __   __ _  ___ __ _ 
| |\/| |/ _ \| '_ \ / _` |/ __/ _` |
| |  | | (_) | | | | (_| | (_| (_| |
|_|  |_|\___/|_| |_|\__,_|\___\__,_|

 Version 1.0.6

Usage: monaca command [args]

Description:

  Monaca command-line interface.

  To learn about a specific command type:

  $ monaca <command> help

Commands:

  create  ........  create a new Monaca project
  info  ..........  show info about Cordova environment
  platform  ......  add, update and remove platforms
  plugin  ........  manage installed plugins
  prepare  .......  prepare project for build
  compile  .......  build the project
  run  ...........  deploys project on a device / emulator
  build  .........  shortcut for compile, then prepare
  emulate  .......  run project in emulator
  serve  .........  runs a local web server for assets
  login  .........  sign in to Monaca Cloud
  logout  ........  sign out from Monaca Cloud
  clone  .........  clone project from the Monaca Cloud
  upload  ........  upload project to Monaca Cloud
  download  ......  download project from Monaca Cloud
  livesync  ......  starts a server that waits for connections from Monaca Debugger
  multiserve  ....  serves several projects to the Monaca Debugger
  remote build  ..  build project on Monaca Cloud
  proxy  .........  configure proxy to use when connecting to Monaca Cloud

Examples:

  $ monaca create myproject
  $ cd myproject
  $ monaca build
  $ monaca run android


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





プロジェクトのベース





シミュレータで実行



ローカル開発を進める



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





$ monaca serve


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





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



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





$ monaca livesync


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





Monacaデバッガーで実行



ビルドはリモートで



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





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


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





リモートビルド 






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



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



Monaca CLI - Monacaドキュメント