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

トップ >ドキュメント >チュートリアル（JavaScript & Monaca）:Monacaでクイズアプリを作る（前半）のサンプルコード

チュートリアル（JavaScript & Monaca）

Monacaでクイズアプリを作る（前半）のサンプルコード

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

以下の3つのファイルについて、
コメントが記載されている箇所を書き換えてください。

index.html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();
    </script>
    <!-- JavaScriptの読み込みを設定 -->
    <script src="js/app.js"></script>
</head>
<body>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
</body>
</html>
page1.html
<ons-navigator>
 <ons-page>
     <ons-toolbar>
         <div class="left">
            <ons-toolbar-button onclick="fn.open()">
                <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
            </ons-toolbar-button>
         </div>
         <!-- ツールバーの文言を変更 -->
         <div class="center">データ保存</div>
     </ons-toolbar>

     <div style="text-align: center">
         <!-- タイトルの文言を変更 -->
         <h1>データ保存</h1>
         <!-- ボタンがクリックされた時にsaveDataメソッドを呼び出す -->
         <ons-button onclick="saveData()">
             データを保存する
         </ons-button>
         <div id="message"></div>
     </div>

 </ons-page>
</ons-navigator>
app.js

YOUR_APPLICATION_KEY、YOUR_CLIENTKEYの部分には、自分のアプリケーションキー・クライアントキーを設定してください。

mobile backendの管理画面を開き、
左メニューの「設定」をクリックするとキーが表示されます。

// This is a JavaScript file
//mobile backendのAPIキーを設定
var ncmb = new NCMB("YOUR_APPLICATION_KEY","YOUR_CLIENTKEY");


//データをmobile backendに保存するメソッド
function saveData(){
    //クラス名を指定して新規クラスを作成
    var Data = ncmb.DataStore("Data");

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

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

    //設定したデータをmobile backendに保存
    data.save()
        .then(function(object) {
              //成功する時の処理
              $("#message").html("<p>データ保存に成功!</p>");
          })
        .catch(function(error) {
              //エラーが発生する時の処理
              $("#message").html("error:" + error.message);
          });
}

会員登録をしてみる

以下のファイルについて、
コメントが記載されている箇所を書き換えてください。

page2.html
<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-toolbar-button onclick="fn.open()">
                <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
            </ons-toolbar-button>
        </div>
        <!-- ツールバーの文言を変更 -->
        <div class="center">会員登録してみる</div>
    </ons-toolbar>

    <div style="text-align: center">
    <!-- タイトルの文言を変更 -->
        <h1>会員登録してみる</h1>
        <p>
        <!-- ユーザー名とパスワードを入力するテキストボックスを用意 -->
            ユーザー名<br/>
            <input type="text" id="user_name"/><br/>
            パスワード<br/>
            <input type="text" id="password"/><br/>
        </p>
    <!-- 会員登録するボタンが押されたらloginメソッドを呼び出す -->
        <ons-button onclick="login()">会員登録する</ons-button>

    <!-- ログインしている会員のユーザー名を表示する段落を用意 -->
        <p id="current_user">
        </p>
    </div>
</ons-page>
app.js

saveDataメソッドの下に追記してください。

//mobile backendへの会員登録を行うメソッド
function login (){
    //テキストボックスからユーザー名とパスワードを取得
    var userName = $("#user_name").val();
    var password = $("#password").val();

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

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

    //会員登録を行うsignUpByAccountメソッドを実行
    user.signUpByAccount()
        .then(function (object){
            //成功する時の処理
            ncmb.User.login(userName, password)
                     .then(function(data){
                        // ログイン後処理
                        getCurrentUser();              
                     })
                     .catch(function(err){
                        // エラー処理
                        console.log("error:" + error.message);
                     });
        })
        .catch(function (error){
            //エラーが発生する時の処理
            console.log("error:" + error.message);
        });
}

//ログイン中のユーザー名を取得して画面に表示する
function getCurrentUser(){
    //ログイン中の会員を取得
    var user = ncmb.User.getCurrentUser();

    //取得した会員のユーザー名を表示する
    $("#current_user").text("ログイン中のユーザー名："　+ user.get("userName"));
}

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

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

ページの先頭へ