【Scratch3.0】クラウドを活用して「いつ・どこで・誰が・何をした」ゲームを作る

# はじめに
## 拡張機能を使ってScratch3.0にクラウドデータベースを連携しました

クラウドデータベースとして、[ニフクラ mobile backend](https://mbaas.nifcloud.com/)を使用しています。GUIはGitHubに公開していますので、ご自由にお使いください。ここで作るゲームにも使用します。

###クラウドデータベースを連携したScratch3.0▼

https://natsumo.github.io/scratch-gui/develop/

### 使い方（クイックスタート）▼
[Scratch3\.0からmobile backendが使えるブロックを追加してみました \- Qiita](https://qiita.com/natsumo/items/0bed8b1854fe83a10822)

## 事前準備

1. 一つ前の章の「使い方（クイックスタート）」に記載のブログを参考にして、環境の準備をしてください。
    * [ニフクラ mobile backend のアカウント作成](https://console.mbaas.nifcloud.com/signup)（無料:SNSIDの場合）
    * ブラウザ環境[Google Chrome](https://www.google.com/chrome/)の準備

1. Google Chrome を開いて、以下２つのタブを開いておきましょう。
    * ニフクラ mobile backend にログイン後の管理画面
    * [クラウドデータベースを連携したScratch3.0](https://natsumo.github.io/scratch-gui/develop/)

1. 事前に以下を実施してあると理解が早いと思います。
    * [Scratch3\.0からmobile backendが使えるブロックを追加してみました \- Qiita](https://qiita.com/natsumo/items/0bed8b1854fe83a10822)

# 「いつ・どこで・誰が・何をした」ゲームを作る

準備ができたら早速作りましょう！

## 完成イメージ

クラウドデータベース上に準備した「いつ・どこで・誰が・何をした」のデータを、ランダムに呼び出してスプライト（キャラクター。ここではタカノくん[^1]を使用しています。）にしゃべらせるゲームを作ります。

![ScratchGameDemo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/313b3d08-ee0b-1b93-825c-b3e7cbc3bc37.gif)

[^1]: タカノくんは、ニフクラ mobile backend のオリジナルキャラクターです。

## 作業手順
### 1. クラウドデータベース側作業

* mobile backend にログインして管理画面を開く
* アプリを新規作成する
    * APIキー（アプリケーションキー、クライアントキー）が作成されます
* ダッシュボード＞データストアにクラス「Scratch」を作成する
    * データは以下のように準備します
        * フィールド「When」「where」「who」「what」を追加
        * ダブルクリックして値を入力します
        * レコード５つ分作成すればOKです
        <img width="1119" alt="スクリーンショット 2019-10-09 17.21.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/b948e8f9-1170-1023-d4bc-225a13287489.png">
    * 時間がない方は下のJSONファイルをインポートすることで同じデータの入ったクラスを作成できます
        * https://natsumo.github.io/demoData.json からJSONファイルをDLする
        * JSONファイルを mobile backend のデータストアにインポートする
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/ea0398f7-66f3-fd84-8dc0-9869471da2a9.png)

#### 参考
JSONファイルの中身はこんな感じです。

```json:demoData.json
{
  "results":[
    {
      "what":"縄跳び",
      "when":"昨日",
      "where":"会社",
      "who":"Scratchくん"
    },
    {
      "what":"引っ越し",
      "when":"今日",
      "where":"自宅",
      "who":"ニフクラさん"
    },
    {
      "what":"逆立ち",
      "when":"３年前",
      "where":"トイレ",
      "who":"NCMBさん"
    },
    {
      "what":"フルマラソン",
      "when":"生まれてすぐ",
      "where":"新宿",
      "who":"タカノくん"
    },
    {
      "what":"木登り",
      "when":"20才の誕生日",
      "where":"学校",
      "who":"見知らぬ人"
    }
  ]
}
```

### 2. Scratchプロジェクト作業

* 完成プロジェクトを用意したので、下記のリンクからDLしてGUI上で開く
    * https://natsumo.github.io/ScratchSample.sb3
    <img width="1438" alt="スクリーンショット 2019-10-09 17.28.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/d2c86a72-b131-eb92-d6bc-34186a479554.png">
    * APIキーを貼り付ける
    <img width="698" alt="スクリーンショット_2019-10-09_16_59_52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/7ffa2cb6-494a-a3f5-aea0-04c06a686b52.png">
    * スプライト（タカノくん）を押すと完成イメージのようにしゃべります

## 解説

キーの設定までは「[Scratch3\.0からmobile backendが使えるブロックを追加してみました \- Qiita](https://qiita.com/natsumo/items/0bed8b1854fe83a10822)」を参照してください。

「Scratch」クラスから全件取得した後の構成について解説します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/4c68513a-3778-56eb-62ad-70c7c58e9af8.png)

それぞれのフィールド（when/where/who/what）から値を取得してタカノ君がしゃべるようしています。４つとも構成は同じなので、最後の「what」に注目して説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/477b9294-2b19-175b-e3fc-7ddace486054.png)

まず既存ブロック：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/fe82e80a-e478-1f55-d216-8da162554672.png)

を組み合わせて話す言葉を組み立てています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/e4fb84a6-1161-4169-b3f0-884d5a7b0aed.png)


「whatの値（何）」のところに クラウドデータベースと連携した拡張ブロック：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/01beec13-f8ee-6e99-c2de-74fafc8644d6.png)

を入れます。どんな文章になるかわからないのが「いつ・どこで・誰が・何をした」ゲームの醍醐味なので、 __乱数__ を使ってどれが出るかわからないようにしたいですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/22f01482-a405-f7c1-aed4-27e6c2da5117.png)

乱数には次の既存ブロックを使います：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/93b35d88-5657-5109-6992-6c982a84667f.png)

[1.クラウドデータベース側作業](#1.クラウドデータベース側作業) で用意したデモデータは５行分の用意なので「１～５」の範囲で乱数を発生さればいいですね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/27b5b122-819a-5fc8-f643-6509d9fbbed9.png)

これをつなげることで文章ができあがっているわけです。

## 応用編

### データを増やしてみよう！

[1.クラウドデータベース側作業](#1.クラウドデータベース側作業) で用意した「Scratch」クラスにデータを追加してみましょう！追加した分だけ乱数の発生範囲を広くすることで「いつ・どこで・誰が・何をした」の組み合わせが増えていきます。

### Scratchからデータを増やしてみよう！

[Scratch3\.0からmobile backendが使えるブロックを追加してみました \- Qiita](https://qiita.com/natsumo/items/0bed8b1854fe83a10822) を参考にして、Scratchからデータを追加してみましょう！追加もゲーム感覚でできると面白いですね。ぜひ作ってみてください👍


クラウドデータベースブロックを活用して、どんどん遊んでみましょう♪