windows10でMonaca + Onsen UI + Reactを使ってハイブリッドアプリをつくる

Monacaは日本製で便利です。無料で構築もできますが、色々便利なので今回はmonacaを使ってハイブリッドアプリを作成します。Onsen UIは、monacaを作った会社がつくったハイブリッドアプリ用のライブラリです。これを使うと、HTML5の技術で簡単にスマホアプリ的なインターフェースとアニメーションが実現できます。そしてmonacaを使えば、本物のスマホアプリに変換できます。実機デバッグやクラウド上での開発環境などもmonacaが用意してくれます。

今回はmonacaのクラウド環境での開発ではなく、CLI(コマンドラインインターフェース)での開発を行います。これには、monacaの無料版は対応しておりませんので、事前にmonacaの有料プランのGOLD以上に契約しておく必要があります。

参考：Onsen UIドキュメント 参考：monacaの料金体系

node.jsをインストールします

https://nodejs.org/ja/ バージョン6.7.0をインストールしました。コマンドプロンプトで、node -vとやるとバージョンが確認できます。npmというコマンドも普通にnode.jsをインストールすると合わせてインストールされます。npm -vとやるとバージョンが確認できます。私のバージョンは、3.10.3です。ただし、最新版にする必要があるので、下記を実行します。

npm install -g npm

これで、3.10.8になりました。

npmでmonacaをインストールします

コマンドプロンプト上で、下記を実行します。

npm install -g monaca

これでインストールが完了しました。monacaのバージョンは、monaca -vとやると出てきます。2.1.3でした。

monacaのプロジェクトを作成してみます

プロジェクトは、カレントディレクトリに作成されます。まずは、コマンドプロンプト上で、作成したいフォルダに移動します。cdコマンドでフォルダを移動できます。その後、下記を実行します。

monaca create helloworld

すると、使用するライブラリ等を選択するように言われます。

今回は、Onsen UIと、Reactを使うので、Onsen UI and Reactを選択します。その後に、今度はテンプレートを選択するように言われますので、今回は、Onsen UI V2 React Navigationを選択します。すると、プロジェクトが作成されます。

プロジェクトのプレビューをブラウザを確認する

プロジェクトのフォルダに移動して、下記を実行します。これで、ブラウザにプレビューが表示されます。

cd helloworld
monaca preview

実機でデバッグする

実機デバッグをするには、まず実機にmonacaデバッガーをインストールしておく必要があります。そして、開発PCとデバッグ端末を同じネットワークで接続しておく必要があります。ポケットwifiなどですと、同じネットワークでも接続できない場合もありますし、ファイヤーウォール等が有効な場合接続できない場合があります。必要に応じて、設定変更をする必要があります。

monacaにログインする

monaca login

emailとpasswordを入力して、ログインします。

実機デバッグを実行します

下記を実行します。

monaca debug