続・Scratchにデータベースが使える拡張ブロックを追加して活用してみた話

この記事はニフクラ 等を提供している、富士通クラウドテクノロジーズ Advent Calendar 2022 の 21日目の記事です。

前日は @yaaamaaaguuu さんの golangのnet/urlでhttpのURLをパースする際の細かい話 でした。
非エンジニアの私には難しすぎてタイトル時点で脱落仕掛けました（笑）
とは言え、それなりにコードも扱ったこともある身としては「parse」とかはなんとなくわかるような・・・データって型とか取扱いが難しいな～と思う場面にはちらほら直面するのですが、エンジニアになるとこういう感じで解決していくのですね！興味のある方は是非どうぞ

はじめに

すべての子どもたちにクラウドデータベース学習を！

もう結構前になりますが、最初にScratch3.0に拡張ブロックを追加できると知り、データベース機能を追加してみたのが2019年9月のことでした。

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

この時は単純にデータの保存（文字列型限定）と取得のみの最小限の実装でした。作ったゲームも単純なものでした。データベースに情報を複数入れておいて、ランダムにとってきてキャラクターにしゃべらせるというものです。

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

昨今、中学校の技術科や高等学校の情報科の学習指導要領が改定になり、プログラミング教育において 「ネットワーク双方向性コンテンツ」 の学習内容が追加されました。双方向性とは、クラウドデータベースのような、データのやり取り（保存・取得）ができることを意味しているようです。

こういった背景もあり、クラウドサービスを提供している我々としては、
より若年層からのプログラミング学習でデータベースを活用できるようにしていくことで、目に見えないクラウド・データベースに興味を持たせ、「もっと触ってみたい！知識を習得してみたい！」と思ってくれる人を増やすことが使命なのでは？？
と思うわけです。

既存のデータベース拡張ブロックでも「ネットワーク双方向性コンテンツ」の学習はできるのですが、実はこれだけだと「もう少しこういうことできたらいいのに・・・」に手が届かなかったんです。

そこで、

• これまでより「やりたいこと」を気軽に実現できるように
• データをもっと「気軽に扱いやすいもの」にするために

既存のScratchデータベース拡張ブロックに新ブロックを加え、新ブロックを活用したゲームアプリを新たに作ってみることにしました。

クラウドデータベース拡張ブロックが使えるScratch環境
https://natsumo.github.io/scratch-gui/

（参考）ScratchおよびScratchに追加した拡張ブロックに使用しているデータベースについて

Scratch3.0

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

この Scratch3.0 に、クラウドデータベース（下記「ニフクラ mobile backend」のデータベース機能）が利用できる拡張ブロックを追加して使用し、本ブログでご紹介しています。

ニフクラ mobile backend

スマホアプリ開発向けのバックエンドサービスで、データベース・ファイルストレージ・プッシュ通知・会員認証などの機能が開発不要で利用できるツールです。
REST API または各種アプリ開発プラットフォーム用に提供されている SDK を利用して機能の実装が可能です。

データベース拡張ブロック：機能一覧（新旧）

これだけ見ても何ができるのよ？って感じですよね。ひとまず書き出してみますが、使い方については次章を見てくださいね！

設定ブロック

Scratchとクラウドデータベースを連携するための設定（認証）ブロックです。クラウドデータベースブロックを使うには、必ず最初に設定する必要があるブロックです。

• アプリケーションキー設定
• クライアントキー設定

保存ブロック

クラウドデータベースにデータを保存するときに使うブロックです。

• 文字列データの設定
• 数値データの設定（NEW）
• 位置情報データの設定（NEW）
• 保存処理実行

取得ブロック

クラウドデータベースからデータを取得するときに使うブロックです。取得時にソートや件数などの条件を設定することができます。

• 取得条件：ソート（昇順・降順）設定
• 取得条件：取得件数設定
• 取得条件：skip設定（何件目から取得するか）
• 取得条件：equal設定（○○と等しいデータ）
• データの取得実行

値ブロック

クラウドデータベースから取得したデータの値をScratch上で扱う際に利用するブロックです。

• 取得したデータの数
• 取得したデータの値（文字列・数値）
• 取得したデータの値（位置情報：経度）（NEW）
• 取得したデータの値（位置情報：緯度）（NEW）

データベース拡張ブロックでできること

「NEW」がついていないブロックについては、過去ブログをご覧ください。
Scratch3.0からmobile backendが使えるブロックを追加してみました - Qiita
NEWのついているブロックの使い方を説明します。今回追加したブロックにより、

• 数値
• 位置情報（緯度経度）

の扱いがScratch上でできるようになりました！

クラウドデータベース拡張ブロックが使えるScratch環境
https://natsumo.github.io/scratch-gui/

【NEW】数値データの保存と取得

これまでも数値の保存は可能ではあったのですが、Scratch上で「数値」として保存したとしてもデータベース上では「文字列」として扱われる状況でした。一見支障が無いように見えますが、 ソートして取得する場合などに影響 がありました。。数値としてでなく文字列としてソートされるため、ゲームのスコアなどは少々扱いにくい状況でした。そこで数値として扱うブロックを１つ用意したわけですが、使い方は従来通りです。

例のようにゲームのスコアデータを保存して、降順（スコア高い順）で取得して1番目を取り出せば、一番高いスコアの数値を取ってこれますね！

※画像のAPIキーはダミーです。

【NEW】位置情報データの保存と取得

ニフクラ mobile backend のクラウドデータベースには位置情報（緯度経度）を保持できる機能があります。これをスクラッチ上のx座標とy座標によるキャラクターの位置情報に応用できそう！と思い追加したのがこれです。

例のように例えばキャラクターの現在地を保存しておいて、キャラクターが移動した後にデータを取得してキャラクターの位置を元の場所に戻すなんてことが可能です。

※画像のAPIキーはダミーです。

実はこのブロックには課題があります・・・
クラウドデータベース上に保存できるのはあくまで緯度経度の情報なので、経度は-180～180、緯度は-90～90の範囲でしか保存できないんです・・・。つまりScratch上だと、x座標は-180～180、y座標は-90～90の範囲以外は保存時にエラーとなってしまいますのでご注意ください。

作ってみました！「データベース拡張ブロックをフル活用して作った迷路ゲーム」

題して、カニにぶつからないようにしてゴールする迷路ゲーム です！

ゲーム画面上にある「緑の旗」マークをクリックするとゲームが始まります。
スタートボタンを押したら、壁とカニにぶつからないようにしてゴールまで行け！というゲームです。
ゴールに着くまでのタイムとユーザ－名を記録して、クラウドデータベースに保存するようになっています。
途中宝箱を取ると-5秒してくれる特典があります。

ゴールするかゲームオーバーになると、出てくるボタンを押すと、
1位のユーザー名とスコアを教えてくれます。また、ゲームオーバーになった地点も記録できるようにしているので、みんなの脱落地点を見ることもできます

ちなみに、ゲーム画面上にある「赤い丸」マークをクリックするとゲームを終了できます。

自分で考えたかのように書きましたが、すみません・・・下記の本をかなり参考にさせていただきました

というのもScratchの活用については超がつく初心者ですので、近くの公立図書館で「超入門」というワードに惹かれて借りた子ども向けの学習本を参考にさせていただきました。ありがとうございます！

参考文献
サイバーエージェント公式 こどもプログラミング 超入門 Scratchでつくろう!迷路ゲーム
Tech Kids School (著)
https://www.shogakukan.co.jp/books/09227195

この本かなりわかりやすく書かれているので、大人にもおすすめです。是非どうぞ！

遊んでみてね！1位でゴールできるかな？？

クラウドデータベース拡張ブロックが使えるScratch環境は、下記URLで公開しています。まずはこちらをブラウザで開いてください。

クラウドデータベース拡張ブロックが使えるScratch環境
https://natsumo.github.io/scratch-gui/

そして、カニにぶつからないようにしてゴールする迷路ゲーム を以下からダウンロードしてきてください。右の方に「Download」ボタンがあります。

ダウンロードしたら「クラウドデータベース拡張ブロックが使えるScratch環境」に読み込みます。左上の「ファイル」＞「コンピュータから読み込む」をクリックしてダウンロードしたファイル（.sb3）を選択して読み込んでください。

読み込むとゲームのプロジェクトが開くので、右側のゲーム画面（またはゲーム画面だけに拡大して）で遊んでくださいね！

※画像のAPIキーはダミーです。

ちょいバグなのか？？
最初は上手く動作しないかもしれません。原因は不明・・・何回か緑の旗→赤丸→緑の旗→赤丸と押してから遊ぶと正しく動作します。

自分のクラウドデータベース環境に保存するには？

配布しているゲームには私のクラウドデータベース環境が設定されています。既にデータが入っているのでこのまま遊ぶことは可能ですが、自分のクラウドデータベース環境を用意して遊んでみたい！という場合はニフクラ mobile backend に新規登録（無料）してください。登録にはSNS ID（Facebook,Twitter,Google）が必要です。

ニフクラ mobile backend 新規登録
https://console.mbaas.nifcloud.com/signup

登録できたらログインしましょう。

ニフクラ mobile backend ログイン
https://console.mbaas.nifcloud.com/

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

ニフクラ mobile backend で発行されたAPIキーは、Scratch側で設定が必要です。

タカノくんのスプライトを選択している状態で「アプリケーションキーの設定」ブロックと「クライアントキーの設定」ブロックを探してください。ダウンロードしたプロジェクトには私の環境のキーが設定されています。

※上記画像はキーを設定していない状態です。

「アプリケーションキーの設定」ブロックと「クライアントキーの設定」ブロックにそれぞれ自分のAPIキーを設定すれば利用できます！データがたまっていく様子は ニフクラ mobile backend 管理画面からも確認できますので、是非ご覧ください！！

おわりに

いかがでしたでしょうか？ひとまずゲームは遊んでもらえましたか？？
お子さんの「ネットワーク双方向性コンテンツ」の学習に活用いただけたら嬉しいです。
私の子どもたちはまだ未就学ですので小学校に上がったら使ってもらおう！と思っています。
きっと私なんかより子どもたちの方が数倍面白いゲームを作ってくれることでしょう

---

この記事は富士通クラウドテクノロジーズ Advent Calendar 2022 の 21日目の記事でした。

明日は @ystkfujii さんの Kubernetse Service HatobaでIstioを使用したMultiCluster Service Meshを構築してみたです。
自社サービスなのですが・・・、担当サービスが違うと全然内容がわからないのですこれを機に Hatoba 勉強します！！（笑）