Scratch3.0からmobile backendが使えるブロックを追加してみました

はじめに

Scratch3.0の拡張機能を使って、ニフクラ mobile backendと連携たプログラミング学習コンテンツを作れないかな？と考えたのがこれを作り始めたきっかけです。一旦拡張が完成（まだ直すべきところはきっとたくさんあるけど…）したので公開したいと思います。

Scratch3.0とは

Scratch(スクラッチ)は、Scratch財団がマサチューセッツ工科大学メディアラボ ライフロングキンダーガーデングループ（MIT Media Lab Lifelong Kindergarten Group）と共同開発する、8〜16才のユーザーをメインターゲットにすえた無料の教育プログラミング言語である。
◇Scratch - Japanese Scratch-Wiki： https://ja.scratch-wiki.info/wiki/Scratch

ニフクラ mobile backend とは？

mBaaS（mobile backend as a Service）とは、スマートフォンアプリでよく利用される汎用的な機能をクラウドから提供するサービスです。
◇サービスサイト： https://mbaas.nifcloud.com/

色々とある機能の中で今回連携ブロックとして作成したのは、「データストア」という__クラウドデータベース__の部分です。Scratchからクラウドにデータを保存したり、条件を付けて取得したりすることが出来るようにしました。

拡張機能としてmobile backendが利用できるScratch3.0

こちらです▼
https://natsumo.github.io/scratch-gui/
※プロジェクトを開くには Google Chrome が必要です。

使い方

事前準備

基本的なScratchの使い方の学習

Scratchの使い方については今回の内容から逸れるので割愛しますが、それほど難しくないので、全くの初心者がいきなり使ってもなんとかなるとは思います👌

mobile backend の利用登録とアプリの新規作成

ニフクラ mobile backendは無料で利用できます。下記リンク先より会員登録（SNS ID）をしてアカウントを作成してください。
https://console.mbaas.nifcloud.com/signup

会員登録後、ログインをしてアプリの新規作成をしてください。（アプリ名は何でもOKです。）
アプリが新規作成されると__APIキー__（アプリケーションキーとクライアントキー）が発行されます。APIキーは後にScratchでコンテンツを作成する際に使います。（最初の画面を「OK」で閉じた後は、右上の「アプリ設定」から確認できます。）

Scratchに追加されたブロック一覧

全部で11ブロックあります。

• アプリケーションキー設定（処理ブロック）
• クライアントキー設定（処理ブロック）
• 保存（処理ブロック）
  • 値の設定
  • 保存処理の実行
• 取得（処理ブロック）
  • 検索条件：ソート（昇順・降順）の指定
  • 検索条件：取得件数の指定
  • 検索条件：取得開始位置の指定
  • 検索条件：指定する値と等しい
  • 取得処理の実行
• 取得データ（値ブロック）
  • 取得データの件数
  • 指定した取得データ

クイックスタート

ブロックの追加

https://natsumo.github.io/scratch-gui/develop/
プロジェクトを開いて、左下のアイコンをクリックします。

左上にあるNCMBの拡張機能を選びます。

追加されました。

APIキーの設定

トリガーが必要なので、「イベント」から「スペースキーが押された時」ブロックを取り出しましょう。その下に続けて、NCMBの「アプリケーションキーの設定」ブロックと「クライアントキーの設定」ブロックを配置します。

事前準備のmobile backend の利用登録とアプリの新規作成で取得したAPIキーをここに使用します。mobile backend の管理画面からコピーボタンでコピーして、それぞれ貼り付けてください。

これは保存するにも、取得するにも必ず必要な作業ですので、忘れずに実装しましょう。

保存する

APIキーの設定の下に次のように繋げます。

それぞれ値は変更してみてください。（そのまま実行することもできます。）
このまま「スペース」キーを押してプログラムを実行すると、mobile backend には次のようにデータが保存されます。

key（フィールド）はいくつでも増やすことができるので、次のように書くこともできます。

「スペース」キーを押してプログラムを実行すると、mobile backend には次のようにデータが保存されます。

※１つのデータに同じkeyは使えないので注意☝️

取得する

例として、 Scratch というクラスに次のようにデータが保存されているとします。¹

この値を取得してみます。次のようにすると全件取得ができます。取得は非同期処理です。完了までに少しかかるので、１秒待ってから（「制御」の中にブロックがあります）取得データの件数をしゃべらせてみます（「見た目」の中にブロックがあります）。

こんな感じです。

今度は条件を付けてデータを取得してみましょう。データの作成日時（createDate）の降順（新しい順）で取得して、その一番目（一番新しいデータ）の who の値をしゃべらせてみましょう。

こんな感じです。

検索条件は複数組み合わせることができます。データの途中から取得したり、取得する件数を指定したり・・・さて問題です。次の場合何をしゃべるでしょうか？

正解はこちら！

色々試してみてくださいね。

ログが見たいとき

一応少しはログが出るように作っているので何で動かないのかな？とか思ったらコンソールを開いてログを見てみてくださいね！参考になるかもしれません。

最後に

スプライトにしていた鳥のキャラクターですが、こちらはニフクラ mobile backend オリジナルキャラクターの「タカノくん」と言います。

タカノくんを是非使いたいという方はこちらからお持ちください。
また、設定は以下のようにできます。サイズは50くらいにするとちょうど良いですね。

1. これは「いつ・どこで・誰が・何をした」を想定したデータです。データの用意の仕方はブログ「【Scratch3.0】クラウドを活用して「いつ・どこで・誰が・何をした」ゲームを作る - Qiita」を参照してください。 ↩