Monacaは、cordovaを使った、ハイブリッドアプリ開発ツール。クラウドIDEもあるし、デバッグ・ビルドも簡単にできる。
Onsen UIは、ハイブリッドアプリ向けの、スタイルとかアニメーションとかが簡単にかっこよくできる、bootstrapみたいなやつ。monacaと同じ会社が作成しているので、monacaとの相性は抜群なはず。また、monaca + onsen ui は、reactにも標準対応しているので、reactを使って作成することも簡単にできる。
開発環境のセットアップ
以下は、monaca CLIを使っているので、monacaのGOLDプラン以上で契約する必要があります。
node.jsとnpmをインストールして最新版にしたら、下記でmonacaをインストールできる。
$ npm install -g monaca
createコマンドでプロジェクト作成できて、previewコマンドでブラウザでのプレビュー確認。debugで実機デバッグが可能になります。
$ monaca create hoge $ cd hoge $ monaca preview $ monaca login $ monaca debug
実機デバッグをするためには、開発PCと実機を同じネットワークにつなげる必要があり、ファイヤーウォールが有効な場合接続できない可能性があります。また、実機にはmonacaデバッグアプリをインストールして、開発PCと同じmonacaアカウントでログインしておく必要があります。実機でアプリを開いていれば、monaca debugを実行したら、勝手にペアリング先のPCを検知して通知してきます。もし通知されない場合は、手動ペアリングが必要になります。
Onsen UI + Reactの使い方
簡単なのは、monaca createでプロジェクトを作成する際に、Onsen UI + Reactを使うことが前提のプロジェクトを作成することです。これによって、自動的にonsen ui + reactを組み込んだ状態でプロジェクトを作成してくれます。あるいは、onsen uiのドキュメントに説明があります。
