サーバー構築不要!スマートフォンアプリ向けの新クラウド

トップ >ドキュメント >Monacaでクイズアプリを作る(前半):(JavaScript)

Monacaでクイズアプリを作る(前半)

ドキュメント内検索

このドキュメントは更新されていません。
こちらから最新版をご覧ください。

概要

ニフティクラウドmobile backendで提供しているJavaScript SDKを利用することで、
HTML5によるハイブリッドアプリ(Android/iOSなど複数のプラットフォームに対応したアプリ)
開発時にもmobile backendを利用することができます。

本チュートリアルでは、iOS/Android/Windows 8/Chrome App向け
ハイブリッドアプリ開発に対応したクラウド上のスマートフォンアプリ開発環境を
提供しているMonacaを利用して、mobile backendと連携したアプリを開発していきます。
Monacaを利用することで、ハイブリッドなアプリを開発するだけでなく、
HTML5の記述でスマートフォンのネイティブ機能(カメラなど)を利用できるのが特徴です。

チュートリアルは前半・後半の2部構成となっており、前半では主にMonacaで作成する
ハイブリットアプリからどのようにmobile backendの機能を利用していくのかを学んでいきます。

後半のチュートリアルでは、前半で学んだ使い方を活用して、
データストアと会員管理の機能を利用したクイズアプリを作成していきます。

(後半はこちら

mobile backendのアプリをMonacaと連携させる

ニフティクラウド mobile backendのサイトから、ダッシュボードにログインします。

※アカウント登録がまだの方は、こちらをご覧ください。

初めてログインした場合や、アプリを1つも作成していない場合は、
以下のように新規アプリ作成画面が表示されます。

アプリ名を入力し、登録ボタンを押してください。
するとアプリが作成され、アプリとmobile backendの連携に必要なAPIキーが表示されます。

アプリ作成完了画面の下型にある「Monacaと連携する」ボタンをクリックすることで、Monacaの画面に遷移します。
MonacaのIDEが表示されるとともに、ポップアップ画面にて新規登録かログインを求められるので、
以前からMonacaを利用していた場合はログインをし、初めてMonacaを開いた場合は新規登録を行います。

アプリ作成完了画面

新規登録・ログインに成功すれば、Monacaとmobile backendを連携するためのチュートリアルが表示されます。
このチュートリアルを進めていくことで、基本的な連携について素早く学習することも可能です。

今回はチュートリアルとは別のアプリを作成していくので、チュートリアルは閉じてください。

Monacaでのプロジェクト作成とバックエンド設定

Monacaのプロジェクトを新規に作成します。
IDEの左上にあるMonacaのロゴをクリックすると、現在のプロジェクト一覧が表示されます。
その中にある「プロジェクトの作成」をクリックしてください。

Monacaプロジェクト作成

プロジェクトのテンプレートが出てくるので、その中にある
「Onsen UI Sliding Menu」をクリックしてください。
プロジェクト名の入力画面が出てくるので、「mobile backend sample」という名前にして
プロジェクトを作成してください。

テンプレート選択

IDEを起動すると、左側にプロジェクトファイルの一覧が表示され、
右側にファイルの中身(ソースコード)が表示されます。

新しく作成したプロジェクトのバックエンドを、mobile backendに設定します。
雲のマークをしたバックエンドのタブを開き、設定メニューで「バックエンドの切り替え」をクリックします。

バックエンド切り替え

利用できるバックエンドの画面下側に、ニフティクラウド mobile backendのプロジェクトを選択する
部分があるので、先ほど作成したプロジェクトを選択して、「適用」をクリックしてください。

mobile backendを選択

IDEの左側に利用中のバックエンドが表示されます。

backendの設定完了

その下側にある「SDKダウンロード」のリンクをクリックすると、
mobile backendのJavaScript SDKダウンロードページが開きますので、
最新のJavaScript SDKをPCにダウンロードしておきましょう。

SDKダウンロード

MonacaのIDEに戻り、左メニューの「新規フォルダー」ボタンをクリックしてwww/jsフォルダを作成してください。
その中にダウンロードしたJavaScript SDKをアップロードし、新規に「app.js」作成してください。
app.jsはjsフォルダを右クリックすると作成できますし、
左メニューの「新規ファイル」ボタンをクリックすることでも作成できます。

前半のチュートリアルでは、app.jsに処理を記述していきます。

SDKをセット

メニューバーの「設定」から「JS/CSSコンポーネントの追加と削除」をクリックして、
jQuery (Monaca Version)のインストールを行ってください。

jQueryインストール

ここまでの設定が完了したら、プロジェクトをデバッグしてみましょう。
設定が正しく完了していれば、Sliding Menuテンプレートの動作を確認することができます。

データストアにデータの保存をする

サンプルコードを参考にして、
以下のファイルを書き換えてください。

  • index.html
  • page1.html
  • app.js

コーディングが終わったら、Monacaデバッガーで動作を確認してみてください。
下の画像のようにメッセージが表示されれば完了です。

保存完了

mobile backendのデータストアを開いてみてください。
データストアのDataクラスに1件登録されているはずです。

保存完了2

ここまでの解説

JavaScriptとHTMLの記述だけでデータストアにデータ保存ができた!

以下はmobile backendにデータを保存する部分のコードです。
はじめにクラス名を指定して、NCMB.Objectのインスタンスを作成しています。
extend("クラス名")という書き方は、Backbone.jsというJavaScriptの
フレームワークを利用していることによるものです。
作成したインスタンスにデータをセットする場合には、

instance.set("フィールド名", "保存するデータ");

という書き方をします。
データ部分は、"(ダブルクォーテーション)で囲むと文字列になり、数値をそのまま保存したい場合は
そのまま数値をセットします。ほかにも利用できるデータ型があるので、くわしくはドキュメントをご覧ください。

//クラス名を指定して新規クラスを作成
var Data = NCMB.Object.extend("Data");

//Dataクラスのインスタンスを作成
var data = new Data();

//作成したインスタンスのaisatsuというフィールドに文字データを設定
data.set("aisatsu", "hello, world!");

//設定したデータをmobile backendに保存
data.save(null, {
    success: function (){
    },
    error: function (obj, error){
    }
});

data.saveメソッドを実行するだけで、データベースへの保存が行われます。
裏側では、mobile backendのオブジェクト登録APIを実行しています。

本来であれば、

  • 保存先のデータベースサーバーを構築
  • サーバーにミドルウェアをインストール
  • サーバー側のプログラムを記述

といった準備が必要ですが、アプリから簡単にアクセスできるデータベースが
mobile backendのアプリ作成を行ったときに作成されました。
つまり、データベースの作成がブラウザ上の操作だけで完了しているのです。

提供されている機能をAPI(SDK)を介して利用するのがmobile backend(=mBaaS)を使ったアプリ開発の基本です!

機能が最初から用意されているので、データベースの用意や設計が不要になることが、
mobile backendを利用する大きなメリットとなります。

Onsen UIについて

Monacaでプロジェクトを作成した時に、「Onsen UI Sliding Menu」を選択することで、
左メニューから各ページに遷移できる状態のテンプレートが用意されました。

Onsen UIとは、このようにMonacaで作成するアプリのUIテンプレートを用意し、
より軽快なUIを簡単に実装できるようにしたものです。
(Onsen UI自体は、Monacaに限らず色々なところで活用できるように、オープンソース化されています。)

Onsen UIのSliding Menuでは、左メニューがタップ(クリック)された時に、
指定したページをメインページとして読み込んで表示するsetMainPageメソッドを利用して、
ページ遷移を実装しています。
後半のクイズアプリでは、Sliding Menuとは異なる形式でページ遷移を実現しますので、
ここでは説明を省きますが、OnsenUIのドキュメントに説明があります。

mobile backendに会員登録をしてみる

サンプルコードを参考にして、
以下のファイルを書き換えてください。

  • page2.html
  • app.js

コーディングが終わったら、Monacaデバッガーで動作を確認してみてください。
会員登録orログインに成功すると登録済みのユーザー名が表示されます。

また、mobile backendのダッシュボードから会員管理を開くと、
登録されたユーザーの一覧が表示されます。

会員登録画面

ここまでの解説

会員登録処理も簡単に実装できる

mobile backendの会員登録は、2ステップだけで登録処理が実装できます。

  1. ユーザー名・パスワードをセット
  2. signUpメソッドを実行

以下のコードが会員登録を実行するメソッドの部分です。
ユーザークラスのインスタンスにユーザー名やパスワードをセットする場合は、
フィールド名とセットする値を引数にして、setメソッドを呼び出します。
以下の例では、画面に入力されたユーザー名とパスワードが、
それぞれuserNameとpasswordの変数に入っているので、
それをuserクラスのインスタンスにセットし、会員登録を実行しています。

//ユーザークラスのインスタンスを作成
var user = new NCMB.User();

//インスタンスにユーザー名とパスワードを設定
user.set("userName", userName);
user.set("password", password);

//会員登録を行うsignUpメソッドを実行
user.signUp(null, {
    success: function (){
    },
    error: function (obj, error){
    }
});
(発展)メールアドレスも登録してみましょう

ダッシュボードの使い方:会員管理を参考に、
メールアドレスによる会員認証を設定したうえで、
アプリを修正して会員登録時にメールアドレスも設定するようにしてみましょう。

  • メールアドレスの入力画面を作成
  • メールアドレスをuserのインスタンスにセットする処理を追加

といった修正が必要です。
メールアドレスを入力してもう一度会員登録を行うと、
入力されたアドレス宛にメールアドレス確認メールが送信されます。

確認メールのURLをクリック(タップ)して認証を完了させると、
会員管理のmailAddressConfirmのフィールドが変化します。

このように、mobile backendの会員管理機能では、
メールアドレス確認時・パスワードリセット時のメール送信の仕組みも用意しています!

前半のチュートリアルは以上となります。
(後半)では、前半の内容をふまえてクイズアプリの作成を行っていきます。

お探しの内容が見つからなかった場合はユーザーコミュニティ もご活用ください。(回答保証はいたしかねます)
なお、 Expertプラン以上のお客様はテクニカルサポートにてご質問を承らせて頂きます。

推奨画面サイズ1024×768px以上

ページの先頭へ