ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

Monaca × ニフティクラウドmobile backendでさくっと作るスマホアプリ

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

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

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

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

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

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

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

チュートリアルのスライド
チュートリアルのスライド

設定をする

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

js/base.jsの画面
js/base.jsの画面

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

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

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

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

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

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

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

TODOリスト

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

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

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

画像ギャラリー

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

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

写真表示
写真表示

ログイン・ログアウト

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

ログイン成功
ログイン成功


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

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