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

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

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

---

## 変更点

---

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

[ベース](https://monaca.mobi/ja/directimport?pid=6013a950e78885cc561cfd49)

---

## ライブラリの追加

- NCMB
- jQuery

---

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

```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の初期化予定処理を追加

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

// NCMBを初期化する
```

---

### イベント処理追加

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

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

---

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

game.js#38

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

---

## ランキング表示処理を追加

game.js#125

```js
// ランキングを記録する処理
saveRanking(Score.score);
```

---

## 実行する関数の追加

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

---

## NCMBの初期化処理

`www/src/game.js` #5

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

---

## 匿名認証を有効にする

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/e4e6fde1-c9c2-4d10-94b4-7ad6c4f60108.png)

---

## 匿名認証の実装

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

---

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

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

---

## 匿名認証の実行

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

---

## ランキング保存処理の実行

```js
// 名前を取得と保存
const player = null;
// ↓
// 名前を取得と保存
const player = ncmb.User.getCurrentUser();
```

---

## 入力された名前の保存

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

---

## ランキングデータの準備

```js
// ランキングデータの準備
const Ranking = ncmb.DataStore('Ranking');
const ranking = new Ranking;
```

---

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

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

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

---

## 保存の実行

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

## 順位のチェック

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

---

## ランキングの表示

ランキングクラスからデータを取得します。

```js
// ランキングクラスを準備
const Ranking = ncmb.DataStore('Ranking');
// スコア順（降順）で上位10件を取得
const rankings = await Ranking
  .order('score', true)  // スコア順（降順）
  .limit(10)             // 上から10件取得
  .fetchAll();
```

---

ここまででゲームデータの保存、ランキングの表示が行われました。