Skip to content

kobo0908/MonacaRouletteApp

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

246 Commits
readme-image
readme-image
 
 
slides
slides
 
 
README.md
README.md
 
 
index.html
index.html
 
 

Repository files navigation

name: inverse layout: true class: center, middle, inverse

【はじめてのスクリプト講座】

サーバーレスでルーレットアプリに
クーポン機能を実装してみよう！

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

.footnote[ 20191203作成 ]

layout: false

目次

1.作成するアプリについて
2.アプリ作成に使うツール
3.アカウント準備
4.ハンズオンの内容
5.ハンズオンの準備
6.ルーレット機能の作成
7.まとめと振り返り

layout: true class: center, middle, inverse

1.作成するアプリについて

layout: false

1.1 スクリプトとは

  • サーバーサイドにスクリプトを設置できる機能です
  • アプリ側に持たせたくないロジックをクラウド側に持たせることで、チート対策やアプリの軽量化にも繋がります .center[]

1.2 作成するアプリ概要

  • ニフクラ mobile backendの『スクリプト機能』を利用して
    サーバーレスでルーレットアプリにクーポン機能を実装します
  • 既にコーディングを完了させたサンプルアプリを使って作業していきます
  • このアプリは完成していますが、今回ポイントとなる「スクリプト」とアプリの連携方法については、実際に皆様が手を動かして体験していただきます

.center[]

  • サーバーレスとは?
    サーバーを用意しないで 、アプリのバックエンド機能を実装することです

layout: true class: center, middle, inverse

2.アプリ作成に使うツール

layout: false

2.1 Monaca 紹介

  • HTML5/JavaScript/CSS3でiOSとAndroidの両OSに対してスマホアプリが開発できる開発環境です
  • クラウド上で開発できます
  • 無料 で体験可能です

.center[]

  • MonacaはJavaScriptSDKを利用して、ニフクラ mobile backendと連携しています
  • 初めての方でも使いやすい開発環境なので今回のハンズオンに採用しました

2.2 ニフクラ mobile backend 紹介

  • スマートフォンアプリに必要なバックエンド機能が 開発不要で利用できる クラウドサービスです
  • クラウド上に用意された機能を APIを呼び出すだけで利用可能 です
  • 無料 で体験可能です
  • APIを利用するためのSDKは幅広く対応 (iOS(Obj-C,Swift) / Android / JavaScript / Monaca / Unity)
  • mobile Backend as a Service の頭文字を取って、通称 mBaaS と呼びます
  • この後 ニフクラ mobile backend を mBaaS と置き換えてお話しします

.center[]

2.3 MonacaとmBaaS(Script)を使用したときのイメージ

.center[]

2.3 MonacaとmBaaS(Script)を使用したときのイメージ

.center[]

layout: true class: center, middle, inverse

3.アカウント準備

layout: false

3.アカウント準備

layout: true class: center, middle, inverse

4.ハンズオンの内容

layout: false

4.1作成するアプリの内容

ルーレットを回してクーポンを獲得する簡単なデモゲームアプリを作ります

  • スクリプト機能 をはじめとするmBaaSの機能を使って
    アプリに ルーレット機能 を実装します
    画面遷移図は以下のようになっています

.center[]

  • スクリプト機能の説明をメインで、その他のコードの説明は割愛いたします

4.2ハンズオンの流れ

.size_large[

  • 5 ハンズオンの準備
    • 5.1【Monaca】アプリ側の準備
    • 5.2【mBaaS】サーバー側の準備
    • 5.3【Monaca】mBaaSを使うための準備
    • 5.4 動作確認①
  • 6 ルーレット機能の作成
    • 6.1 設定ファイルのDL
    • 6.2【mBaaS】クーポン画像の準備
    • 6.3【mBaaS】データストアにクラスを準備
    • 6.4【mBaaS】スーパーユーザーの準備
    • 6.5【mBaaS】参照権限（パーミッション）の設定
    • 6.6【mBaaS】スクリプト準備①SelectReward.js
    • 6.7【mBaaS】スクリプト準備②UserPost.js
    • 6.8【mBaaS】スクリプト準備③CouponGet.js
    • 6.9【Monaca】アプリからスクリプトを呼び出す
    • 6.10 動作確認② ]

layout: true class: center, middle, inverse

5.ハンズオンの準備

layout: false

5.1【Monaca】アプリ側の準備

  • プロジェクトのインポートとJavaScriptSDKをMonaca側に設定し連携します
  • プロジェクトのインポート
  • SDKの導入

.center[]

5.1【Monaca】アプリ側の準備

  • プロジェクトのインポートとJavaScriptSDKをMonaca側に設定し連携します
  • プロジェクトのインポート
  • SDKの導入

.center[]

5.1【Monaca】アプリ側の準備

  • Monacaアプリケーションをインポートします
  1. Monaca(https://monaca.mobi/ja/signup) にログイン
  2. インポートリンク (http://bit.ly/import_20191203) をクリック
  3. インポート をクリック
  4. MonacaRouletteApp をクリック
  5. クラウドIDEで開く をクリック

.center[]

5.1【Monaca】アプリ側の準備

  • インポートに成功すると以下の画面が表示されます

.center[]

5.1【Monaca】アプリ側の準備

  • SDKの導入（コンポーネントの追加）をします
    1.メニューバーの 設定 をクリック
    2.JS/CSSコンポーネントの追加と削除 をクリック

.center[]

5.1【Monaca】アプリ側の準備

  • SDKの導入（コンポーネントの追加）をします
    3.コンポーネント名 に ncmb と入力
    4.検索する をクリック

.center[]

5.1【Monaca】アプリ側の準備

  • SDKの導入（コンポーネントの追加）をします
    5.ncmb が表示されるので 追加 をクリック

.center[]

5.1【Monaca】アプリ側の準備

  • SDKの導入（コンポーネントの追加）をします
    6.バージョンはそのままで、 インストール をクリック

.center[]

5.1【Monaca】アプリ側の準備

  • SDKの導入（コンポーネントの追加）をします
    7.必ず チェックボックスにチェックを入れて 、 保存 をクリック

.center[]

5.1【Monaca】アプリ側の準備

  • SDKの導入（コンポーネントの追加）をします
    8.一覧に ncmb が表示ていることを確認

.center[]

  • これでSDKの導入は完了です

5.2【mBaaS】サーバー側の準備

  • mBaaSにもアプリを作成し、払い出されるAPIキーをMonacaに設定
  • SDKの初期化を行うことで連携していきます

.center[]

5.2【mBaaS】サーバー側の準備

  • mBaaSにもアプリを作成し、払い出されるAPIキーをMonacaに設定
  • SDKの初期化を行うことで連携していきます

.center[]

5.2【mBaaS】サーバー側の準備

  • mBaaS(https://console.mbaas.nifcloud.com/) にログインします
    • 新しいアプリを作成します
    • アプリ名を Roulette と入力
    • 「 新規作成 」をクリック

.center[]

  • mBaaS を既に使用したことがある場合は、画面上方のメニューバーにある「 +新しいアプリ 」をクリックすると同じ画面が表示されます

.center[]

5.2【mBaaS】サーバー側の準備

  • アプリ作成が成功すると以下の画像が表示されます

.center[]

  • この アプリケーションキー と クライアントキー を合わせてアプリAPIキーと呼びます
  • ここまでで、mBaaS側の連携に必要なものを用意できました

5.3【Monaca】mBaaSを使うための準備

  • 5.2で発行されたAPIキーを設定します
  • www/js/app.js を開く
  • 左のファイル一覧より ▶ www の ▶ をクリック .center[]

5.3【Monaca】mBaaSを使うための準備

  • 5.2で発行されたAPIキーを設定します
    • 左のファイル一覧より ▶ js の ▶ をクリック .center[]

5.3【Monaca】mBaaSを使うための準備

  • 5.2で発行されたAPIキーを設定します
    • 左のファイル一覧より app.js をダブルクリック .center[]

5.3【Monaca】mBaaSを使うための準備

  • 5.2で発行されたAPIキーを設定します
    • 画面に app.js が表示されることを確認 .center[]

5.3【Monaca】mBaaSを使うための準備

  • 5.2で発行されたAPIキーを設定します
  • APPLICATION_KEY と CLIENT_KEY をAPIキー （アプリケーションキーとクライアントキー）に貼り替え
  • メニューバーの ファイル > 保存 をクリックしてプロジェクトを保存
  • Windowsでは__Ctrl + s__ 、Macは Command + s でも保存できる .center[]
  • 入力前
// 【NCMB】SDKの初期化
var ncmb = new NCMB("APPLICATION_KEY", "CLIENT_KEY");
  • 入力後
// 【NCMB】SDKの初期化
var ncmb = new NCMB("7612fe7----------------", "5a2efeb----------------");

5.3【Monaca】mBaaSを使うための準備

  • 設定完了後は以下の画像のようになります

.center[]

  • ここまでで、SDKの初期化 が完了しMonacaとmBaaSの連携が出来ました
  • mBaaSのAPIキーの画面は OK ボタンをクリックして閉じておきます

（参考）初回に表示されるAPIの画面を閉じてしまった場合は、右上の アプリ設定 から確認できます

.center[]

5.4 動作確認① (会員管理)

  • ここでログイン処理が正しく行われることでMonacaとmBaaSが連携できたことを確認していきます

.center[]

5.4 動作確認① (新規登録処理)

  • Monacaのプレビュー画面で動作確認をしましょう
  • プレビュー画面は赤枠部分です

.center[]

5.4 動作確認① (新規登録処理)

  • 新規ユーザー登録 をします
  • ユーザー名 、パスワード を好きな文字で入力
  • 新規ユーザー登録 をクリック

.center[]

5.4 動作確認① (新規登録処理)

  • 新規ユーザー登録 をします
  • ログイン処理後、表示されるルーレット画面では以下のようにErrorが出てきますが、ここではそのままで大丈夫です

.center[]

5.4 動作確認① (新規登録処理)

  • 登録された会員情報を確認します
  • mBaaSの管理画面を開く
  • 会員管理 をクリック

.center[]

5.4 動作確認① (新規登録処理)

  • 登録された会員情報を確認します
  • 会員情報が追加されていることを確認
  • Password はセキュリティ上 hidden と表示され確認不可

.center[]

layout: true class: center, middle, inverse

6.ルーレット機能の作成

layout: false

6.1 設定ファイルのDL

  • ファイルストアとスクリプトに今回使用するデータを用意します
  • 設定ファイルをダウンロード(http://bit.ly/download20191203)
  • ファイル構成は以下の通りです

.center[]

6.2【mBaaS】クーポン画像の準備

  • ファイルストアに今回使用するデータアップロードしていきます

.center[]

6.2【mBaaS】クーポン画像の準備

  • ファイルをアップロードします
  1. ファイルストアをクリック
  2. アップロードをクリック
  3. 6.1でダウンロードしたimgフォルダの画像ファイルを点線内に ドラッグ＆ドロップ または ファイルを選択 をクリックして指定
  4. アップロードする をクリック

.center[]

6.2【mBaaS】クーポン画像の準備

  • アップロードに成功すると以下のように表示されます

.center[]

  • 表示されない場合は 更新ボタン をクリックすると確認できます

6.3【mBaaS】データストアにクラスを準備する手順

  • データストアにクーポン画像や、確率、賞の値を持たせたクラス「Item」を準備します

.center[]

6.3【mBaaS】データストアにクラスを準備する手順

  • データストアに「Item」クラスを準備します
    1.データストア をクリック
    2.作成 をクリック
    3.新規作成 をクリック
    4.クラス名に Item と入力
    5.作成する をクリック

.center[]

6.3【mBaaS】データストアにクラスを準備する手順

  • データストアに「Item」クラスを準備します
    6.新しいフィールド をクリック
    7.フィールド名に rate と入力
    8.作成する をクリック
    9.この手順で、フィールド名 rewards と png も作成

.center[]

6.3【mBaaS】データストアにクラスを準備する手順

  • 3つのフィールドの作成に成功すると以下のように表示されます
  • それぞれフィールドには以下の値を格納します
  • rate: 確率
  • rewards: 賞の値
  • png: ファイルストアの画像名

.center[]

6.3【mBaaS】データストアにクラスを準備する手順

  • フィールドに値を用意します
    1. 新しいレコード をクリック
    2. png フィールドの　(undefined) をダブルクリックし配列値 ["one.png","two.png","three.png"] を入力
    3. 下に出てくるポップアップの 文字列▼ をクリックし 配列 に変更し Enter を押下
    4. 上記の手順と同様に、 rate には [0.2,0.3] 、rewardsには [1,2,3] を入力

.center[]

6.3【mBaaS】データストアにクラスを準備する手順

  • 登録が上手くいくと以下のように表示されます。

.center[]

  • 配列アイコン(緑の3本線)がない場合、右端の「型を表示」ボタンを押すと表示されます

.center[]

6.3【mBaaS】データストアにクラスを準備する手順

  • 当たったごとにユーザー名が登録されるクラス「Reward1」、「Reward2」、「Reward3」を準備します

.center[]

6.3【mBaaS】データストアにクラスを準備する手順

  • データストアに「Reward1」、「Reward2」、「Reward3」クラスを準備します
    1. データストア をクリック
    2. 作成 をクリック
    3. 新規作成 をクリック
    4. クラス名に Reward1 と入力
    5. 作成する をクリック
    6. 上記手順で同様に Reward2 と Reward3 も作成

.center[]

6.3【mBaaS】データストアにクラスを準備する手順

  • 作成に成功すると以下のように表示されます

.center[]

6.4【mBaaS】スーパーユーザーの準備

  • スーパーユーザーの役割
  • セキュリティを担保するために、特定のユーザーだけがアクセスできるように参照権限（パーミッション）を設定し、工夫しています

.center[]

6.4【mBaaS】スーパーユーザーの準備

  • Rewardクラスへの参照権限（パーミッション）を持ったスーパーユーザーを用意します
  • スーパーユーザーだけがアクセスできる参照権限（パーミッション）の設定を施します

.center[]

6.4【mBaaS】スーパーユーザーの準備

  • Rewardクラスへの参照権限（パーミッション）を持ったスーパーユーザーを用意します
  • スーパーユーザーだけがアクセスできる参照権限（パーミッション）の設定を施します

.center[]

6.4【mBaaS】スーパーユーザーの準備

  • Rewardクラスへの参照権限（パーミッション）を持ったスーパーユーザーを用意します
  • スーパーユーザーだけがアクセスできる参照権限（パーミッション）の設定を施します

.center[]

6.4【mBaaS】スーパーユーザーの準備

  • スーパーユーザーを用意する
    1.データストア をクリック
    2.新しい会員 をクリック
    3.新しい会員の新規作成 をクリック
    4.入力欄が表示されることを確認

.center[]

6.4【mBaaS】スーパーユーザーの準備

  • スーパーユーザーを用意する
    5. userName に superuser と入力し Enterを押下
    6. password に super と入力し Enterを押下

.center[]

  • 成功するとユーザーが追加され、password が hidden になります
  • objectId が自動で割り振られ、この値を参照権限（パーミッション）設定にて後ほど使用します
    • objectId : mBaaSのデータ1つ1つに払い出された、機能ごとに重複しないことになっているID

6.5【mBaaS】参照権限（パーミッション）の設定

  • 「Reward1」、「Reward2」、「Reward3」のクラスに参照権限（パーミッション）を設定します
  • パーミッション の設定をします
    1.会員管理 をクリック
    2.superuser の objectId をコピー

.center[]

6.5【mBaaS】参照権限（パーミッション）の設定

  • パーミッション の設定をします
    3.データストア をクリック
    4.Reward1 をクリック
    5.クラスの編集 をクリック
    6.パーミッションの設定 をクリック

.center[]

6.5【mBaaS】参照権限（パーミッション）の設定

  • パーミッション の設定をします
    7.新しいパーミッション をクリック
    8.全員 ▼ をクリック
    9.会員 を選択
    10.先ほどコピーした objectId をペースト
    11.変更を保存 をクリック

.center[]

6.5【mBaaS】参照権限（パーミッション）の設定

  • パーミッション の保存が成功すると緑のポップアップが右上に表示される .center[]
  • 設定されているか確認します
    1.データストア をクリック
    2.パーミッションの設定 をクリック
  • 登録されると次のように表示されます
    .center[]
  • 同じ手順を Reward2 、 Reward3 に対しても権限を設定する

6.6【mBaaS】スクリプト準備①SelectReward.js

.center[]

  • 処理内容
    1. Itemからルーレットの確率を取得
    2. その確率から1等,2等,3等を算出
    3. 当たった賞の値をItemから取得しMonaca側へ返す
  • Point
    • スクリプトを書き換えなくても確率の調整が可能
      • 1等が絶対に当たらない鬼畜設定も可能…

6.6【mBaaS】スクリプト準備①SelectReward.js

.center[]

  • 処理内容
    1. Itemからルーレットの確率を取得
    2. その確率から1等,2等,3等を算出
    3. 当たった賞の値をItemから取得しMonaca側へ返す

6.6【mBaaS】スクリプト準備①SelectReward.js

.center[]

  • 処理内容
    1. Itemからルーレットの確率を取得
    2. その確率から1等,2等,3等を算出
    3. 当たった賞の値をItemから取得しMonaca側へ返す

6.6【mBaaS】スクリプト準備①SelectReward.js

.center[]

  • 処理内容
    1. Itemからルーレットの確率を取得
    2. その確率から1等,2等,3等を算出
    3. 当たった賞の値をItemから取得しMonaca側へ返す

6.6【mBaaS】スクリプト準備①SelectReward.js

  • スクリプトファイルのコードを確認します
    • テキストエディタにて先ほどダウンロードしたフォルダ内にある js/SelectReward.js を開く
  • スクリプトの作法： Scriptを書くときに必要な宣言
module.exports = function (req, res) {
    
}

6.6【mBaaS】スクリプト準備①SelectReward.js

  • スクリプトからmBaaSを使う： SDKのインポートと初期化
    • Monaca で設定したのと同様、 APPLICATION_KEY と CLIENT_KEY をmBaaSから発行されたAPIキーに置き換え
    • テキストエディタにて保存
// 【NCMB】SDKインポート
var NCMB = require("ncmb");
// 【NCMB】SDKの初期化
var ncmb = new NCMB("APPLICATION_KEY", "CLIENT_KEY");

.center[]

6.6【mBaaS】スクリプト準備①SelectReward.js

  • Itemクラスから確率情報を取得して当たりを決定する
    • selectRewards() を呼び出す

.size_small_7[

/* 【NCMB】データストアから確率を取得する */
    // 保存先クラスの指定
    var Item = ncmb.DataStore("Item");
    // 全件取得
    Item.fetchAll()
        .then(function (results) {
            /* 取得成功時の処理 */
            // 確率によりクーポンを決定
            var rewardNum = selectReward(results[0].rate);

            // クーポン番号と画像情報を返却
            var stopNumber = results[0].rewards[rewardNum];
            var png = results[0].png[rewardNum];
            res.status(200).json({stopNumber,png});
        })
        .catch(function (error) {
            /* 取得失敗時の処理 */
            res.status(500).send("Error: " + error);
        });

]

.size_small_7[

  • スクリプトの作法： 返却値
    • res.status(status) :statusをアプリ側へ返す
    • res.send(data) :dataをアプリ側へ返す
    • res.json(data) :dataをjson形式にしてアプリ側へ返す
  • mBaaSの処理
    • Item.fetchAll() :Itemクラスにて全件取得
    • .then(function(result) {}) :コールバック（処理成功時）
    • .catch(function(error) {}) :コールバック（処理失敗時） ]

6.6【mBaaS】スクリプト準備①SelectReward.js

  • selectRewards() の処理： 乱数により当たりを決定
    • 何等賞が当たったかを算出して、1,2,3のいずれかをreturn
// クーポンの決定処理
function selectReward(probabilities) {    
    const p0 = Number(probabilities[0]); // rewards[0]が選択される確率
    const p1 = Number(probabilities[1]); // rewards[1]が選択される確率
    // 乱数の生成
    var randNum = Math.random();
    // クーポンの決定
    if (randNum <= p0) return 0;
    else if (randNum <= p0 + p1) return 1;
    else return 2;
}

6.6【mBaaS】スクリプト準備①SelectReward.js

  • SelectReward.jsをアップロードする
    1.スクリプト をクリック
    2.アップロード をクリック

.center[]

6.6【mBaaS】スクリプト準備①SelectReward.js

  • SelectReward.jsをアップロードする
    3.SelectReward.jsを ドラッグ＆ドロップ か ファイル選択
    4.メソッドは GET を選択
    5.ファイルの状態は__実行可能__ を選択
    6.アップロードする をクリック

.center[]

6.6【mBaaS】スクリプト準備①SelectReward.js

  • SelectReward.jsをテストしてみましょう
    7.SelectReward.jsがアップロードされていることを確認
    8.SelectReward.jsをクリック
    9.実行タブ をクリック
    10.実行 をクリック

.center[]

6.6【mBaaS】スクリプト準備①SelectReward.js

  • SelectReward.jsをテストしてみましょう
    11.以下の警告が出るが 実行する をクリック
    .center[] 12.実行ボタンの下に結果が出力されていることを確認
    13.当たった等(stopNumber)とクーポン画像名(png)が取れている
    .center[]
  • ここで上手くいかない場合は、データストアのクラス名やフィールド名に誤りがある可能性があります

6.7【mBaaS】スクリプト準備②UserPost.js

.center[]

  • 処理内容
    1. 当たった賞をqueryから取得
    2. スーパーユーザーでログイン
    3. 当たった賞のログにユーザーの名前があるか検索
    4. 無ければ登録する(クーポンを表示できるようになる)
  • Point
    • スーパーユーザーのみが登録できる仕組みなので、セキュリティ面も安心
    • 悪意のあるユーザーが勝手に登録すること防ぐ

6.7【mBaaS】スクリプト準備②UserPost.js

.center[]

  • 処理内容
    1. 当たった賞をqueryから取得
    2. スーパーユーザーでログイン
    3. 当たった賞のログにユーザーの名前があるか検索
    4. 無ければ登録する(クーポンを表示できるようになる)

6.7【mBaaS】スクリプト準備②UserPost.js

.center[]

  • 処理内容
    1. 当たった賞をqueryから取得
    2. スーパーユーザーでログイン
    3. 当たった賞のログにユーザーの名前があるか検索
    4. 無ければ登録する(クーポンを表示できるようになる)

6.7【mBaaS】スクリプト準備②UserPost.js

.center[]

  • 処理内容
    1. 当たった賞をqueryから取得
    2. スーパーユーザーでログイン
    3. 当たった賞のログにユーザーの名前があるか検索
    4. 無ければ登録する(クーポンを表示できるようになる)

6.7【mBaaS】スクリプト準備②UserPost.js

  • スクリプトファイルのコードを確認します
    • テキストエディタにて先ほどダウンロードしたフォルダ内にある js/UserPost.js を開く
  • スクリプトの作法： 引数の受け渡し
module.exports = function (req, res) {
    var name = String(req.query.user);
    var stopNumber = req.query.stopNumber;
    var className ="Reward" + String(stopNumber);
    
}
  • queryとして値を渡すことができます
    • ここではカレントユーザーのユーザー名と、当たった賞の番号を渡しています

6.7【mBaaS】スクリプト準備②UserPost.js

  • スクリプトからmBaaSを使う： SDKのインポートと初期化
    • 先ほどと同様、 APPLICATION_KEY と CLIENT_KEY をmBaaSから発行されたAPIキーに置き換え
    • テキストエディタにて保存
// 【NCMB】SDKインポート
var NCMB = require("ncmb");
// 【NCMB】SDKの初期化
var ncmb = new NCMB("APPLICATION_KEY", "CLIENT_KEY");

.center[]

6.7【mBaaS】スクリプト準備②UserPost.js

  • 6.4,6.5章で用意したスーパーユーザーでログイン
  • スーパーユーザーでログインをすることで、この後の検索や登録処理が行えます
// 【NCMB】あらかじめ準備したsuperuserユーザーでログイン
ncmb.User.login("superuser", "super")
    .then(function (superuser) {
        /* ログイン成功時の処理 */
    })
    .catch(function (err) {
        /* ログイン失敗時の処理 */
            
    });
  • mBaaSの処理
    • ncmb.User.login("USERNAME", "PASSWORD") :指定したユーザー名とパスワードでログイン

6.7【mBaaS】スクリプト準備②UserPost.js

  • ルーレットを回して当たったユーザーがすでに当たっているか検索
// 【NCMB】ルーレットの結果毎にユーザー名を保存する
// 保存先クラスの生成
var Reward = ncmb.DataStore(className);
// 一致する情報を取得する
Reward.equalTo("name", name)
      .fetchAll()
      .then(function(results) {
          /* 取得成功時の処理 */
          
      })
      .catch(function (error) {
          /* 取得失敗時の処理 */
          res.status(500).send("Error: " + error);
      };
  • mBaaSの処理
    • .equalTo("KEY", VALUE) :＜検索条件＞ KEYの値とVALUEが一致している

6.7【mBaaS】スクリプト準備②UserPost.js

  • すでに当たっている場合は objectId を取得
  • ルーレットに当たったユーザーの登録または更新処理
// 既存データ（objectId）の有無を確認
var objectId = "";
if (results[0]==="" || results[0]===undefined) {
    objectId = "";
}else{
    objectId = results[0].objectId;
}
// 新規登録または更新をする
var reward = new Reward();
reward.set("name", name);
(objectId == "" ? reward.save() : reward.set("objectId", objectId).update())
  • mBaaSの処理
    • .set() ：値をセットする
    • .save() ：.set()した値を保存する
    • .update() ：.set()した値でフィールドの値を更新する
  • JavaScriptの作法
    • (条件 ? 条件が真の場合の処理 : 条件が偽の場合の処理) :三項演算子

6.7【mBaaS】スクリプト準備②UserPost.js

  • UserPost.jsをアップロードする
    1.UserPost.jsを ドラッグ＆ドロップ か ファイル選択
    2.メソッドは POST を選択
    3.ファイルの状態は 実行可能 を選択
    4.アップロードする をクリック

.center[]

6.7【mBaaS】スクリプト準備②UserPost.js

  • UserPost.jsをテストしてみましょう
    5.UserPost.jsがアップロードされていることを確認
    6.UserPost.jsをクリック
    7.実行タブ をクリック
    8.queryの欄に user=name&stopNumber=1 を入力(nameは好きな文字、stopNumberは1,2,3のどれかを指定)
    9.実行 をクリック

.center[]

6.7【mBaaS】スクリプト準備②UserPost.js

  • UserPost.jsのテストをしてみましょう
    10.以下の警告が出るが__実行する__ をクリック
    .center[]
  • UserPost.jsを実行
    11.実行ボタンの下に結果が出力されていることを確認
    .center[]
  • POST data successfully! と出力されていれば成功です

6.7【mBaaS】スクリプト準備②UserPost.js

  • UserPost.jsのテストをしてみましょう
    13.データストア をクリック
    14.stopNumberを1とした場合、 Reward1 をクリック .center[]
  • 指定したユーザー名が登録されていれば成功です

6.8【mBaaS】スクリプト準備③CouponGet.js

.center[]

  • 処理内容
    1. 同期処理を開始し、スーパーユーザーでログイン
    2. 次にReward1にユーザーが登録されているかどうか検索
    3. 存在していれば画像名をItemから取得
    4. 2,3が終了後Reward2,Reward3と順に同様処理を実行
  • Point
    • 同期処理を使用
    • 処理が重ならずに全ての処理の終了後に値が返される

6.8【mBaaS】スクリプト準備③CouponGet.js

.center[]

  • 処理内容
    1. 同期処理を開始し、スーパーユーザーでログイン
    2. 次にReward1にユーザーが登録されているかどうか検索
    3. 存在していれば画像名をItemから取得
    4. 2,3が終了後Reward2,Reward3と順に同様処理を実行

6.8【mBaaS】スクリプト準備③CouponGet.js

.center[]

  • 処理内容
    1. 同期処理を開始し、スーパーユーザーでログイン
    2. 次にReward1にユーザーが登録されているかどうか検索
    3. 存在していれば画像名をItemから取得
    4. 2,3が終了後Reward2,Reward3と順に同様処理を実行

6.8【mBaaS】スクリプト準備③CouponGet.js

.center[]

  • 処理内容
    1. 同期処理を開始し、スーパーユーザーでログイン
    2. 次にReward1にユーザーが登録されているかどうか検索
    3. 存在していれば画像名をItemから取得
    4. 2,3が終了後Reward2,Reward3と順に同様処理を実行

6.8【mBaaS】スクリプト準備③CouponGet.js

.center[]

  • 処理内容
    1. 同期処理を開始し、スーパーユーザーでログイン
    2. 次にReward1にユーザーが登録されているかどうか検索
    3. 存在していれば画像名をItemから取得
    4. 2,3が終了後Reward2,Reward3と順に同様処理を実行

6.8【mBaaS】スクリプト準備③CouponGet.js

  • スクリプトファイルのコードを確認します
    • テキストエディタにて先ほどダウンロードしたフォルダ内にある js/CouponGet.js を開く
  • スクリプトからmBaaSを使う： SDKのインポートと初期化
    • 先ほどと同様、 APPLICATION_KEY と CLIENT_KEY をmBaaSから発行されたAPIキーに置き換え
    • テキストエディタにて保存
// 【NCMB】SDKインポート
var NCMB = require("ncmb");
// 【NCMB】SDKの初期化
var ncmb = new NCMB("APPLICATION_KEY", "CLIENT_KEY");

.center[]

6.8【mBaaS】スクリプト準備③CouponGet.js

  • あらかじめ各クラスを生成
// 【NCMB】各種保存先クラスの生成
var Item = ncmb.DataStore("Item");
var Reward1 = ncmb.DataStore("Reward1");
var Reward2 = ncmb.DataStore("Reward2");
var Reward3 = ncmb.DataStore("Reward3");

6.8【mBaaS】スクリプト準備③CouponGet.js

  • 同期処理（promise）を開始し、スーパーユーザーでログイン
// 【NCMB】あらかじめ準備したsuperuserユーザーでログイン
const promise = new Promise((resolve, reject) => {
    ncmb.User.login("superuser", "super")
        .then(function (superuser) {
            /* ログイン成功時の処理 */
        })    
        .catch(function (error) {
            /* ログイン失敗時の処理 */
            
        });
    });
}

6.8【mBaaS】スクリプト準備③CouponGet.js

  • 当たった賞のRewardクラスに名前があるか検索
  • 存在していれば、クーポン名を取得
Reward1.equalTo("name", name)
       .fetchAll()
       .then(function (reward1) {
           if(reward1[0]==="" || reward1[0]===undefined){
               png1 = "";
           }else{
               // 【NCMB】Itemクラスを全件検索する
               Item.fetchAll()
                   .then(function (result1) {
                       png1 = result1[0].png[0];
                   })
           }
       })
       .catch(function (error) {
           res.status(500).send("Error: " + error);
       });
// 以下Reward2,Reward3クラスも同様に

6.8【mBaaS】スクリプト準備③CouponGet.js

  • 同期処理（promise）の結果（クーポン名）をまとめて返す
promise.then(() => setTimeout(function () {
    res.status(200).json({png1,png2,png3});
}, 1000));
  • スクリプトの作法： 返却値
    • res.json({A,B,C}) :json形式でA,B,Cを返す

6.8【mBaaS】スクリプト準備③CouponGet.js

  • CouponGet.jsをアップロードする
    1.CouponGet.jsを ドラッグ＆ドロップ か ファイル選択
    2.メソッドは__GET__ を選択
    3.ファイルの状態は__実行可能__ を選択
    4.アップロードする をクリック

.center[]

6.8【mBaaS】スクリプト準備③CouponGet.js

  • CouponGet.jsをテストしてみましょう
    5.CouponGet.jsがアップロードされていることを確認
    6.CouponGet.jsをクリック
    7.実行タブ をクリック
    8.queryの欄に user=name を入力(nameは好きな文字列)
    9.実行 をクリック

.center[]

6.8【mBaaS】スクリプト準備③CouponGet.js

  • CouponGet.jsをテストしてみましょう
    10.以下の警告が出るが 実行する をクリック
    .center[]
    11.実行ボタンの下に結果が出力されていることを確認
    .center[]
  • 6.7 で1を指定した場合は one.png が結果として取得できている

6.9【Monaca】アプリからスクリプトを呼び出す

  • アプリからスクリプトを呼び出すコードを確認します
    • js/app.js を開く
    • Ctrl + F にて検索窓で「 //MARK 」と検索
  • それぞれ以下の内容を確認していきます
    1. スクリプト①: SelectReward.js の呼び出し
    2. スクリプト②: UserPost.js の呼び出し
    3. スクリプト③: CouponGet.js の呼び出し

6.9【Monaca】アプリからスクリプトを呼び出す

  • スクリプト①: SelectReward.js を呼び出すコードを確認します
    • 同期処理
    • GETメソッドを使用
//MARK: 【NCMB】スクリプト①：ルーレットの当たりを取得
ncmb.Script.exec("GET", "SelectReward.js")
           .then(function (res) {
               /* スクリプトの実行成功時の処理 */
               
           })
           .catch(function (err) {
               /* スクリプトの実行失敗時の処理 */
               
           });
  • ncmb.Script.exec("メソッド", "ファイル名") : スクリプトの呼び出し

6.9【Monaca】アプリからスクリプトを呼び出す

  • スクリプト②: UserPost.js を呼び出すコードを確認します
    • queryを指定して
    • POSTメソッドを使用
//MARK: 【NCMB】スクリプト②：当たり状況の登録
ncmb.Script.query({"user": user.userName,"stopNumber": stopNumber})
           .exec("POST", "UserPost.js")
           .then(function (res) {
               /* スクリプトの実行成功時の処理 */
           })
           .catch(function (err) {
               /* スクリプトの実行失敗時の処理 */
           });
  • .query({JSON}) : クエリの指定

6.9【Monaca】アプリからスクリプトを呼び出す

  • スクリプト③: CouponGet.js を呼び出すコードを確認します
    • 同期処理
    • queryを指定して
    • GETメソッドを使用
//MARK: 【NCMB】スクリプト③：当たったクーポン画像を取得
ncmb.Script.query({"user": user.userName})
           .exec("GET", "CouponGet.js")
           .then(function (res) {
               /* スクリプトの実行成功時の処理 */
               
            })
            .catch(function (err) {
                /* スクリプトの実行失敗時の処理 */
                
            });

6.10 動作確認②

  • Monacaのプレビュー画面で動作確認をしましょう
    1.動作確認①で作成したアカウント情報を入力し ログイン

.center[]

6.10 動作確認②

  • Monacaのプレビュー画面で動作確認をしましょう
    2.ルーレット画面に遷移
    3.スタートボタン を押してルーレット開始

.center[]

6.10 動作確認②

  • Monacaのプレビュー画面で動作確認をしましょう
    4.ルーレット回転(この時回転までに数秒の間があります)
    5.ルーレット停止すると結果を表示

.center[]

6.10 動作確認②

  • Monacaのプレビュー画面で動作確認をしましょう
    6.クーポンページに遷移
    7.Reload ボタンを押す
    8.当たったクーポンが表示される

.center[]

6.10 動作確認②

  • Monacaのプレビュー画面で動作確認をしましょう
    9.mBaaS管理画面にて該当する賞のクラスを確認
    10.名前が登録されていることを確認

.center[]

layout: true class: center, middle, inverse

7.まとめと振り返り

layout: false

まとめと振り返り

  • このハンズオンセミナーで学んだこと
  • スクリプトの基本（作法）を学んだ
  • スクリプトからmBaaSの利用方法がわかった
  • 参照権限（パーミッション）について学んだ
  • mBaaSを活用したチート対策の手法を学んだ

まとめと振り返り

お疲れさまでした。

スクリプト機能の基本的な使い方や、メリットについて理解いただけたのではないかと思います。

以下の公式ホームページにもスクリプトの基本的な使い方についての説明が掲載されていますので、復習の意味を込めてお時間のある時に見返していただけたらと思います。導入は他の機能に比べて敷居は高いかもしれませんが、セキュリティの向上をするうえでは必須の機能でもあります。自分なりにスクリプト機能を使うことを主としたアプリ開発をしてみると面白いかもしれません。

今後ともニフクラ mobile backendをどうぞよろしくお願いいたします。

スクリプト（Monaca）基本的な使い方(https://mbaas.nifcloud.com/doc/current/script/basic_usage_monaca.html)

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages