Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@natsumoin富士通クラウドテクノロジーズ株式会社

はじめての Monaca と mobile backend ～DBの使い方練習～

Last updated at Posted at 2019-09-20

はじめに

はじめて Monaca で ニフクラ mobile backend を使ってみるという方向けの練習コンテンツです。手順に沿って取り組むだけで、mobile backend のDB機能の「保存」と「取得」の実装ができるようになります。

事前に必要な準備

1. Monacaの使い方練習

プロジェクトを作る

Monacaにログインして、「新しいプロジェクトを作る」から「最小限のテンプレート」を選んでプロジェクトを作成します。

画面表示の仕組みを知る

作成したプロジェクトを開きますす。
画面中央に index.html 、右にプレビュー画面が表示されています。
index.html を編集してアプリを作ります。作ったアプリはプレビュー画面に反映されるので確認しながら作ることができます。
（他、左にディレクトリ、下にデバッガー利用時のログが表示される個所があります。今回は触りません。）

デフォルトの index.html はこんな感じ。

index.html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
    </script>
</head>
<body>
	<br />
    This is a template for Monaca app.
</body>
</html>

デフォルトのプレビュー画面を見てみると、This is a template for Monaca app. と表示されています。これは index.html の body タグ内と同じことがわかりますね。

index.html
<body>
	<br />
    This is a template for Monaca app.
</body>

つまり、 body タグ内に記述した内容がアプリに表示されるというわけです。
試しに body タグ内をすべて消してみましょう。

index.html
<body>

</body>

プレビュー画面に反映させるには index.html を保存する必要があります。保存するには以下のいづれかを実施してください。

  • Monaca上部のタブ「設定」＞「保存」をクリックする
  • Windowsの場合：「Ctrl」+「s」キーを押す
  • Macの場合：「Command」+「s」キーを押す

正しく保存できると、プレビュー画面が真っ白になります。

入力フィールドとボタンを作る

body タグ内に入力フィールドとボタンを作ってみましょう。

index.html
<body>
<textarea>テキストエリア</textarea>
<button>ボタン</button>
</body>

保存するとプレビュー画面は次のようになります。

image.png

ボタンを押したらテキストフィールドに入力した内容がアラートで表示されるようにしてみましょう。
テキストエリアにID、ボタンにクリックイベントを追加しましょう。

index.html
<body>
<textarea id="message">テキストエリア</textarea>
<button onclick="pushButton();">ボタン</button>
</body>

ボタンを押したときの処理を pushButton() という関数を作って書いていきます。関数は bodyタグではなく、scriptタグに書きます。scriptタグはbodyタグの少し上にあります。

index.html
<script>
</script>

関数 pushButton() を作ります。（関数はJavaScriptで書きます。）

index.html
<script>
// ボタンが押されたときの処理
function pushButton() {

}
</script>

テキストエリアに書かれた内容を取得して、アラートで表示するコードを書いてみます。

index.html
<script>
// ボタンが押されたときの処理
function pushButton() {
// テキストエリアの値を取得する
var message = document.getElementById("message").value;
// アラートで表示する
alert(message);
}
</script>

ここまで書くと全体はこんな感じ。

index.html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
      // ボタンが押されたときの処理
      function pushButton() {
      // テキストエリアの値を取得する
      var message = document.getElementById("message").value;
      // アラートで表示する
      alert(message);
      }
    </script>
</head>
<body>
	<textarea id="message">テキストエリア</textarea>
  <button onclick="pushButton();">ボタン</button>
</body>
</html>

保存をして、プレビュー画面で動作確認をしてみましょう。

image.png

2. mobile backend に保存してみる

今度はボタンを押したら、テキストエリアに書いた内容が mobile backend （クラウド）保存されるようにしてみましょう。ボタンを押した後の処理だけを書き換えるので、script内を編集します。

index.html
<script>
// ボタンが押されたときの処理
function pushButton() {
// テキストエリアの値を取得する
var message = document.getElementById("message").value;
// アラートで表示する
alert(message);
}
</script>

ここで mobile backend を使うための準備をします。

2.1. mobile backend のSDKを Monaca に導入する

Monaca上部のタブ「設定」＞「JS/CSSコンポーネントの追加と削除」を開きます。コンポーネント名として「ncmb」で検索して、追加します。バージョンはデフォルトのまま（最新）で、読み込むファイルに必ずチェックを入れて保存してください。

image.png

一覧に追加されていればOKです。

2.2. mobile backend でアプリを作成

mobile backend にログインをして管理画面を開きます。管理画面から、アプリを１つ作ります。（アプリ名はなんでもOKです）アプリを作成すると、 APIキー（アプリケーションキーとクライアントキー） が発行されます。

2.3. mobile backend を使うために最初にやること

まず、２つのAPIキーを scriptタグ内に記入していきます。

index.html
<script>
// APIキー
var applicationKey = "******";
var clientKey = "******";

// ボタンが押されたときの処理
function pushButton() {
// テキストエリアの値を取得する
var message = document.getElementById("message").value;
// アラートで表示する
alert(message);
}
</script>

****** の部分に mobile backend の管理画面からコピーした アプリケーションキーとクライアントキーを、それぞれ貼り付けます。

  • APIキーの確認方法
    • 管理画面右上の「アプリ設定」の中にあります。

次に、入力したAPIキーで１つ前に導入したSDKを初期化します。APIキーに続け次のように書きます。

index.html
<script>
// APIキー
var applicationKey = "******";
var clientKey = "******";
// SDKの初期化
var ncmb = new NCMB(applicationKey, clientKey);

// ボタンが押されたときの処理
function pushButton() {
// テキストエリアの値を取得する
var message = document.getElementById("message").value;
// アラートで表示する
alert(message);
}
</script>

これで mobile backend が使える状態になりました。

2.4. mobile backend にデータを保存する

いよいよボタンを押したらテキストエリアに入力した値を mobile backend に保存するコードを書いてみましょう。
alert の下に続けて書きます。

index.html
<script>
// APIキー
var applicationKey = "******";
var clientKey = "******";
// SDKの初期化
var ncmb = new NCMB(applicationKey, clientKey);

// ボタンが押されたときの処理
function pushButton() {
// テキストエリアの値を取得する
var message = document.getElementById("message").value;
// アラートで表示する
alert(message);

/** mobile backend に保存する **/
// 保存先クラスの生成
var MessageClass = ncmb.DataStore("MessageClass");
// クラスインスタンスの生成
var messageClass = new MessageClass();
// データを設定して保存する
messageClass.set("message", message).save();
}
</script>

保存をして、プレビュー画面で動作確認をしてみましょう。mobile backend の管理画面を開いてみましょう。

image.png

「データストア」に「MessageClass」ができて、その中に入力した内容が保存されたことが確認できます。
何回か記入内容を変えてボタンを押してみましょう。管理画面は左上の「更新」ボタンを押すと最新の状態を確認できます。

3. mobile backend の管理画面からデータを保存してみる

おみくじアプリを作ってみましょう。まずは、おみくじデータをmobile backend 上に用意してみます。
mobile backend の管理画面からデータストアを開きます。

「＋作成▼」＞「新規作成」をクリックします。

image.png

クラス名を「Omikuji」にしましょう。

image.png

クラスが作成されたらデータを作っていきます。

上部にある「＋新しいフィールド」をクリックします。フィールド名を「result」（おみくじを引いたときの”結果”の意味）にしましょう。

フィールドができたらデータを入れるレコードを作ります。「＋新しいレコード」をクリックすると次のようになります。

image.png

resultに値を入れてみます。まずは「大吉」を入れましょう。ダブルクリックすると入力できるようになります。

image.png

「大吉」と書いて「Enter」キーを押すとデータが作成されます。

image.png

同様にしてフィールドを追加し、「中吉」「小吉」「吉」「凶」「大凶」などなど入れてみましょう。

image.png

4. mobile backend からデータを取得してみる

保存したおみくじデータを使っておみくじアプリを作ってみましょう。
まずはボタンと結果を表示するための場所を用意します。
次のコードを bodyタグの最後に追加します。

</br>
<button onclick="omikuji();">おみくじを引く</button>
結果：<span id="result"></span>

こんな感じです。

index.html
<body>
<textarea id="message">テキストエリア</textarea>
<button onclick="pushButton();">ボタン</button>
</br>
<button onclick="omikuji();">おみくじを引く</button>
結果：<span id="result"></span>
</body>

保存するとプレビュー画面はこんな感じです。

image.png

おみくじボタンを押すと、ボタンの横に結果を表示することが最終目的ですが、まずはボタンを押したらボタンの横に何か文字が表示されるようにしてみましょう。

scriptタグの一番下に omikuji() 関数を書きます。

index.html
<script>
// APIキー
var applicationKey = "******";
var clientKey = "******";
// SDKの初期化
var ncmb = new NCMB(applicationKey, clientKey);

// ボタンが押されたときの処理
function pushButton() {
/** 省略 **/
}

// おみくじボタンが押されたときの処理
function omikuji() {
        
}
</script>

omikuji() 関数内に次のように書きます。

// おみくじボタンが押されたときの処理
function omikuji() {
// 結果（テスト）
var result = "テストです";
// 画面に結果を表示
document.getElementById("result").innerText = result;     
}

保存をして、プレビュー画面で動作確認をしてみましょう。

image.png

ボタンを押すと、

image.png

「テストです」と表示されればOKです。
では、いよいよ mobile backend からデータを取得して表示するようにしてみましょう。

取得は次のようなコードで行います。fetchAll で全件取得することができ、取得に成功した場合は objects にデータが入ります。（データは１つ１つがオブジェクト型で、全件取得の場合は配列として取得されます。）
取得したデータの処理は★に書きます。

/** mobile backend に取得する **/
// 保存先クラスの生成
var Omikuji = ncmb.DataStore("Omikuji");
// 取得処理
Omikuji.fetchAll()
       .then(function(objects){
           /* 取得成功時の処理 */
           // ★
       })
       .catch(function(error){
           /* 取得失敗時の処理 */
           alert("Error: " + error.code);
       });

今回はおみくじなので、複数ある結果のデータの中からランダムで１件だけ選び表示したいので、次のように★のところの処理を書きます。

/** mobile backend に取得する **/
// 保存先クラスの生成
var Omikuji = ncmb.DataStore("Omikuji");
// 取得処理
Omikuji.fetchAll()
       .then(function(objects){
          /* 取得成功時の処理 */
          // データ数内で乱数を作成
          var random = Math.floor(Math.random()*objects.length);
          // 乱数番目のデータ
          var object = objects[random];
          // 「result」フィールドの値を取得
          var result= object.get("result");
          // 画面に結果を表示
          document.getElementById("result").innerText = result;
       })
       .catch(function(error){
          /* 取得失敗時の処理 */
          alert("Error: " + error.code);
       });

先ほどテストで書いた以下のコードを削除して、一度 omikuji() 関数を空にしてから、↑の内容を書いていきます。

// 結果（テスト）
var result = "テストです";
// 画面に結果を表示
document.getElementById("result").innerText = result;

そうすると次のようになります。

index.html
<script>
  // APIキー
  var applicationKey = "******";
  var clientKey = "******";
  // SDKの初期化
  var ncmb = new NCMB(applicationKey, clientKey);

  // ボタンが押されたときの処理
  function pushButton() {
  // テキストエリアの値を取得する
    var message = document.getElementById("message").value;
    // アラートで表示する
    alert(message);

    /** mobile backend に保存する **/
    // 保存先クラスの生成
    var MessageClass = ncmb.DataStore("MessageClass");
    // クラスインスタンスの生成
    var messageClass = new MessageClass();
    // データを設定して保存する
    messageClass.set("message", message).save();
  }

  // おみくじボタンが押されたときの処理
  function omikuji() {
    /** mobile backend に取得する **/
    // 保存先クラスの生成
    var Omikuji = ncmb.DataStore("Omikuji");
    // 取得処理
    Omikuji.fetchAll()
           .then(function(objects){
             /* 取得成功時の処理 */
             // データ数内で乱数を作成
             var random = Math.floor(Math.random()*objects.length);
             // 乱数番目のデータ
             var object = objects[random];
             // 「result」フィールドの値を取得
             var result= object.get("result");
             // 画面に結果を表示
             document.getElementById("result").innerText = result;
          })
          .catch(function(error){
             /* 取得失敗時の処理 */
             alert("Error: " + error.code);
          });
  }
</script>

保存をしたらプレビュー画面で動作確認をしてみましょう。

image.png

mobile backend 側のデータを変える（追加、変更、削除）とおみくじの結果も変わるのでぜひ試してみましょう！

6
6
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?