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

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

プロジェクト作成の手順

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

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

monacaとは

Monacaとは?
Monacaは、クラウドベースの開発プラットフォームです。HTML5とJavaScriptを用いることで、iOSとAndroidの両OSに対応したクロスプラットフォームなアプリ開発を実現しました。

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

Onsen UIとは

Onsen UIは、下のような特徴を持つライブラリです。
モバイルアプリの開発に特化したUIコンポーネントの集まりです。
ネイティブなiOSとAndroidのデザインガイドに準拠したデザインと機能を持っています。
無料で利用でき、完全にオープンソースなソフトウェアです(Apache v2 license)。。

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

作業手順

  1. monacaでOnsen UIプロジェクト作成
  2. NCMBコンポーネント追加

monacaでOnsen UIフレームワークのプロジェクトを作成し、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にも標準的なバックエンドがあります。一度試してみたいと思います。

Follow me!