Monaca クラウド IDEで簡単アプリ作成

どうも、こんにちは。エンジニアの大塚です。

今回はMonaca クラウド IDEを使用して、簡単にハイブリッドアプリを作成してみたいと思います。

Monacaとは?

まず初めに、Monacaとはアシアル社が提供するスマートフォン向けハイブリッドアプリの開発ツール&Webサービスです。

PhoneGap/Cordovaを採用しており、MonacaクラウドIDEや提供のツールを使うことで、XcodeやAndroid Studioなしにアプリ開発することが出来ます。

また、今回は触れませんがUIフレームワークとしてOnsenUIなども提供しています。

クラウドIDEでアプリを作成

Monacaが提供するアプリ開発環境は複数あります。

  • クラウドIDE
  • LocalKit
  • CLI
  • Visual Studio

クラウドIDE以外は、ローカルで使うものになります。
今回は、最もお手軽に利用できるクラウドIDEを使用します。

プロジェクトの作成

まずは、Monacaへサインアップ&ログインして下さい。

Monacaログイン
https://monaca.mobi/ja/login

ログインするとダッシュボードが表示されますので、新規プロジェクトの作成をクリックします。

テンプレート選択画面が開きます。
ここからプロジェクトで使用するテンプレートを選択するのですが、今回はサンプルアプリ JQuery TODO Appの作成クリックして下さい。

新規プロジェクトの画面が出たら、適当にプロジェクト名を入力し、プロジェクトを作成するをクリック。

プロジェクト一覧にJQuery TODO Appが追加されました。

このプロジェクトの開くをクリックすると、クラウドIDE画面が開きます。
画面右側にはプレビューウィンドウが表示され、アプリの表示を確認できます。

デバッガー

Monacaで作ったプロジェクトを実機でデバッグするためには、Monacaデバッガーというアプリを使用します。

これは、クラウドIDEとデバッガーがインターネットに接続されていれば、IDEで追加した変更がデバッガーに即座にプッシュされるという優れものです。
これによってリアルタイムにアプリの動作を確認しながら、開発することができます。

まず、Monacaデバッガーアプリをストアから端末にインストールします。

インストール出来たらアプリを起動して、Monacaにサインインします。

一覧にクラウドIDE上で作成したプロジェクトが表示されているので、これを選択します。

アプリが起動しデバッグすることが出来ます。

先程も述べましたが、クラウドIDEとデバッガーはリアルタイムで同期されるので、IDE上で変更があればデバッガーのアプリにも即座に反映されます。
もし反映されない場合は、デバッガーの更新ボタンを押すと反映されます。

以上で、簡単にアプリを作成する環境が整いました。

iOSのビルドにはiOS Developerへの登録が必要ですが、XcodeやAndroid Studioなしに実機で動作するアプリが作れるのは、中々面白いと思います。