技術情報

アプリ開発はこれだけ!?NCMB・monaca・Onsen UIを使う

NCMB x monaca x Onsen UIでプロジェクトを作る

プロジェクト作成の手順

monaca、UIのOnsen UI、mBaasのNCMBのプロジェクトを新規作成してみます。

monacaって美味しいの?Onsen UIって気持ちいいの?という人の為に引用します。

引用:アプリ開発プラットフォーム : Monaca | アシアル株式会社

引用:Onsen UI イントロダクションより

作業手順

monacaでOnsen UIフレームワークのプロジェクトを作成し、NCMBのコンポーネント追加の手順になります。

作業手順の紹介
  1. monacaでOnsen UIプロジェクト作成
  2. NCMBコンポーネント追加

monacaでOnsen UIプロジェクト作成

monacaにログインをして、Dashboardより『新しいプロジェクトを作る』をクリック
ウィザードに従って必要な項目(プロジェクト設定内容参照)をクリック
選択肢が少ないのですぐにわかると思います。

プロジェクト設定内容

  • テンプレートの種類:フレームワークテンプレート
  • フレームワーク:Onsen UI
  • テンプレート:Onsen UI V2 JS Minimum
  • プロジェクトの情報:※適時入力
monacaでonsenuiプロジェクト作成

NCMBコンポーネント追加

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

monacaでjs/cssコンポーネントの追加と削除

コンポーネント名に『ncmb』と入力して『検索する』をクリック
候補一覧に『ncmb』が出てくるので『追加』をクリック
※NCMBコンポーネント情報が取得されます。

【JavaScript SDK for NIFCloud mobile backend】と表示されるので『インストール』をクリック
JavaScript SDK for NIFCloud mobile backendのインストール

【読みこむファイルを選択してくださいncmb】
components/ncmb/ncmb.min.jsのチェックボックスを選択し、「保存」をクリック
NCMB.jsのオートロード設定をする

components/loader.js内にロードするコードを記述してくれます

まとめ

このように環境構築は簡単です。フレームワークを選択して、後はコンポーネント追加で機能追加していくと様々は機能を持ったアプリ開発を行う事ができます。

OnsenUIは約半分が採用している統計もある、有名はフレームワークです。

web技術であるHTML5/css/javascriptでアプリ開発ができるmonacaは開発コスト削減につながると思います。

今回mBaasはNCMBを使用しましたが、monacaにも標準的なバックエンドがあります。一度試してみたいと思います。