
プロジェクト作成の手順
monaca、UIのOnsen UI、mBaasのNCMBのプロジェクトを新規作成してみます。
monacaって美味しいの?Onsen UIって気持ちいいの?という人の為に引用します。
Monacaは、クラウドベースの開発プラットフォームです。HTML5とJavaScriptを用いることで、iOSとAndroidの両OSに対応したクロスプラットフォームなアプリ開発を実現しました。
引用:アプリ開発プラットフォーム : Monaca | アシアル株式会社
モバイルアプリの開発に特化したUIコンポーネントの集まりです。
ネイティブなiOSとAndroidのデザインガイドに準拠したデザインと機能を持っています。
無料で利用でき、完全にオープンソースなソフトウェアです(Apache v2 license)
作業手順
monacaでOnsen UIフレームワークのプロジェクトを作成し、NCMBのコンポーネント追加の手順になります。
- monacaでOnsen UIプロジェクト作成
- NCMBコンポーネント追加
monacaでOnsen UIプロジェクト作成
monacaにログインをして、Dashboardより『新しいプロジェクトを作る』をクリック
ウィザードに従って必要な項目(プロジェクト設定内容参照)をクリック
選択肢が少ないのですぐにわかると思います。
プロジェクト設定内容
- テンプレートの種類:フレームワークテンプレート
- フレームワーク:Onsen UI
- テンプレート:Onsen UI V2 JS Minimum
- プロジェクトの情報:※適時入力

NCMBコンポーネント追加
前節で作成したプロジェクトを選択し、『クラウドIDEで開く』をクリック
メニューより『設定』-『js/cssコンポーネントの追加と削除』をクリック

コンポーネント名に『ncmb』と入力して『検索する』をクリック
候補一覧に『ncmb』が出てくるので『追加』をクリック
※NCMBコンポーネント情報が取得されます。
【JavaScript SDK for NIFCloud mobile backend】と表示されるので『インストール』をクリック
【読みこむファイルを選択してくださいncmb】
components/ncmb/ncmb.min.jsのチェックボックスを選択し、「保存」をクリック
components/loader.js内にロードするコードを記述してくれます
まとめ
このように環境構築は簡単です。フレームワークを選択して、後はコンポーネント追加で機能追加していくと様々は機能を持ったアプリ開発を行う事ができます。
OnsenUIは約半分が採用している統計もある、有名はフレームワークです。
web技術であるHTML5/css/javascriptでアプリ開発ができるmonacaは開発コスト削減につながると思います。
今回mBaasはNCMBを使用しましたが、monacaにも標準的なバックエンドがあります。一度試してみたいと思います。