Help us understand the problem. What is going on with this article?

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/develop/
※プロジェクトを開くには 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/
プロジェクトを開いて、左下のアイコンをクリックします。

ブロック追加1.png

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

ブロックの追加2.png

追加されました。

ブロックの追加3.png

APIキーの設定

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

APIキーの設定1.png

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

APIキーの設定2.png

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

保存する

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

スクリーンショット_2019-09-09_17_13_22.png

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

スクリーンショット 2019-09-09 17.13.04.png

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

スクリーンショット_2019-09-09_17_16_36.png

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

スクリーンショット 2019-09-09 17.17.22.png

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

取得する

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

スクリーンショット 2019-09-09 17.19.31.png

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

スクリーンショット_2019-09-09_17_35_44.png

こんな感じです。

スクリーンショット 2019-09-09 17.36.49.png

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

スクリーンショット_2019-09-09_17_41_03.png

こんな感じです。

スクリーンショット 2019-09-09 17.41.09.png

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

スクリーンショット_2019-09-09_17_45_48.png

正解はこちら!

スクリーンショット 2019-09-09 17.48.00.png

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

ログが見たいとき

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

スクリーンショット_2019-09-09_17_51_48.png

最後に

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

takano.png

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

スクリーンショット 2019-09-09 15.57.55.png


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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away