Logicky Blog

Logickyの開発ブログです

Monaca + Onsen UI + Reactの開発環境

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のドキュメントに説明があります。