Monaca × ニフティクラウドmobile backendでさくっと作るスマホアプリ - ニフクラ mobile backend（mBaaS）お役立ちブログ

iOSアプリを開発するならObjective-C、Androidアプリを開発するならJavaを覚えるのが基本です。しかしこれらの言語を覚えたとしても作れるのはどちらかのアプリだけで、両方のプラットフォームにアプリを提供したいと思ったら片手落ちです。

それを解決してくれる技術がHTML/CSS/JavaScriptといったWeb技術でネイティブアプリを作れるフレームワークです。その一つであるMonacaは当ニフティクラウドmobile backendとシームレスに連携しています。Webサイトを開発したりしたことはあっても、スマートフォンアプリ開発はしたことがない…そんな初心者の方でもすぐに開発がはじめられます。開発環境を準備する必要すらなく、とても手軽にはじめられます！

ニフティクラウドmobile backendでアプリを作る

まずは管理画面にログインして、新規アプリを作成しましょう。

アプリの作成が終わるとこのような画面が表示されます。この時、下にある Monacaと連携する が注意点です。これをクリックします。なお、このアプリケーションキーとクライアントキーは後で使うので表示したままにしておくのが良いでしょう。

クリックするとMonacaの管理画面に飛びます。予めチュートリアルアプリが用意されています。アカウントをお持ちの方はそのままログインを、ない場合は無料で作成できます。

チュートリアルも用意されていて、これを読んでいくことで作り方が学べるようになっています。

設定をする

最初に設定として、ニフティクラウドmobile backendのアプリケーションキーおよびクライアントキーを /js/base.js 内に記述します。先ほどアプリを新規作成した際に表示されていたキーを使います。

window.APP_KEY = "";    // アプリケーションキー
window.CLIENT_KEY = ""; // クライアントキー

この二つを入力すれば準備は完了です。

ビューワーをダウンロードする

Monacaには専用のビューワーアプリがあります。これを使うとコンパイルすることなく、iOS/Android上で開発したコードの確認ができるようになります。ダウンロード&インストールしたら、起動してログインしましょう。

サンプルには TODOリスト、画像ギャラリー、ログイン・ログアウトの実装 の3つが登録されています。ニフティクラウドmobile backendとの繋がりとしては、

TODOリスト：データストア
画像ギャラリー：ファイルストア
ログイン・ログアウトの実装：会員管理

の3つが学べるようになっています。

TODOリスト

TODOリストはシンプルにタスクを登録できる機能です。

タスクのデータはニフティクラウドmobile backendに登録されますので、再読み込みしても消えるものではありません。

実際、コンソール画面に入るとデータが保存されているのが分かります。

画像ギャラリー

画像ギャラリーは写真やファイルなどのバイナリデータをファイルストアに保存します。画像をアップロードするとタップすると、アルバムにアクセスします。

写真を選択して少し待つとアップロードが完了して一覧表示されます。

ログイン・ログアウト

ログイン、ログアウトを試す場合はまずニフティクラウドmobile backend上でユーザを作成する必要があります。管理画面のユーザ管理でアカウントを作成してから試してください。

これらの機能を使うことで、JavaScriptを使ってネイティブアプリが誰でも作れるようになります。MonacaではWeb IDEを提供しているので、開発環境を構築する必要もなく、すぐに開発がはじめられるのが大きな利点です。

HTML5を使ったハイブリッドアプリの場合、ちょっとしたデータであればローカルストレージを使うこともできますが写真やユーザ管理のような機能は実現できません。さらにニフティクラウドmobile backendを使った場合は他のデバイス、他のユーザともデータ共有ができますのでアプリの幅が一気に広がるのではないでしょうか。ぜひニフティクラウドmobile backend × MonacaでWeb技術を使ったスマートフォンアプリ開発をはじめてください！