ぷよぷよアプリにランキング機能を追加しよう #NCMB

ベースになるプログラムは「ぷよぷよプログラミング」サポートページ | Monaca Educationを実装し終えたプロジェクトになります。なお、実装済みであれば、レベルは「初級」「中級」「上級」のどれでも構いません。

今回はすでに実装済みのものをベースとしています。

変更点

ベースになるプログラムに対してすでにいくつかの変更が加えられています。

ライブラリの追加

NCMB
jQuery

index.html にランキング表示用モーダル追加

        <div id="showRanking" style="display:none; position:absolute;z-index:1;padding:1em;text-align: center;bottom:30px">
            <img src="img/ranking.png" style="width: 70%" />
        </div>
        <section id="modalArea" class="modalArea">
            <div id="modalBg" class="modalBg"></div>
            <div class="modalWrapper">
                <div class="modalContents">
                    <h1>ランキングトップ10！</h1>
                    <p>
                        <ul id="ranking">
                        </ul>
                    </p>
                </div>
                <div id="closeModal" class="closeModal">
                ×
                </div>
            </div>
        </section>

game.jsの変更点

game.js#1にNCMBの初期化予定処理を追加

// NCMB初期化用変数（管理画面から取得してください）
const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';

// NCMBを初期化する

イベント処理追加

game.js#15〜18にイベント処理追加

// ランキングを表示するイベント
$('#showRanking').on('click', showRanking);
// モーダルを閉じるイベント
$('#closeModal, #modalBg').on('click', closeModal);

ゲーム初期化時に匿名認証処理を追加

game.js#38

// 匿名認証を行う
anonymousLogin();

実行する関数の追加

匿名認証： anonymousLogin #138
ランキング保存： saveRanking #154
ランキング表示： showRanking #175

NCMBの初期化処理

www/src/game.js #5

// NCMBを初期化する
const ncmb = new NCMB(applicationKey, clientKey);

匿名認証を有効にする

ニフクラ mobile backendの管理画面にて、アプリ設定の中にある匿名設定を有効にします。

匿名認証の実装

// 現在のログイン情報
const currentUser = null;
// ↓
// 現在のログイン情報
const currentUser = ncmb.User.getCurrentUser();

セッションの有効性チェック

// セッションの有効性確認
return await ncmb.DataStore('Test').fetch();

匿名認証の実行

// ログインしていない場合、セッションが切れている場合を
// 含めて匿名認証実行
await ncmb.User.loginAsAnonymous();

入力された名前の保存

player.set('name', playerName).update(); // 処理確認を待つ必要はないので先に進める

ACL（アクセス権限の設定）

読み込みは誰でも。編集は本人のみ。

// 権限を設定する
const acl = new ncmb.Acl;
acl
    .setUserWriteAccess(player, true)
    .setPublicReadAccess(true);

保存の実行

// 値を保存する
await ranking
    .set('playerName', playerName)
    .set('score', score)
    .set('acl', acl)
    .save();

順位のチェック

// 順位を調べる
const result = await Ranking.greaterThan('score', score).count().fetchAll();
const number = result.count + 1;
alert(`${playerName}さん、おめでとうございます！ランキングは${number}位です！`);

ぷよぷよアプリにランキング機能を追加しよう

変更点