事始め

今年、弊社内ではゲーム制作コンテストが開催されており、私は運営チームとしてScratchのサポートを担当しています。Scritchの自主練をしていたところ、楽しそうな記事を見つけました。

Scratch 3.0でオリジナルブロックをつくろう - @Hiroyuki_OSAKI

そんなことができるのですね！

そしたら、Realtime Databaseのブロックとかつくって、ネットワークゲームも制作できるようになる......!!!

これはやるしかないでしょ、ということで。

やってみたいぃぃい✨

Scratch 3.0 で Web API 呼び出しの拡張ブロックを作る、の手始め - https://t.co/oJ6pjzKviS
— kami_teru (@kami_teru) February 22, 2021

やってみた事とその結果をまとめます。
なおNode.jsは今回初めて触りましたので、変な事していたらそこは温かい目で見守っていただければ幸いです。

環境構築

Windows上で行います。作業ディレクトリは次の場所にしました。

mkdirC:\Users\kami_teru\source\repos\scratch\cdC:\Users\kami_teru\source\repos\scratch\

以下の記事を参考に、Node.jsをインストールし、scratch-gui をlocalhostで起動できるようにしました。

Scratch3.0 拡張機能を作って GitHub Pagesで公開する手順メモ - @natsumo

一つだけ注意点。私のWindows環境では npm run deployを実行したとき、次のエラーが出ました。

powershell

PSC:\Users\kami_teru\source\repos\scratch\scratch-gui>npmrundeploy>scratch-gui@0.1.0deployC:\Users\kami_teru\source\repos\scratch\scratch-gui>touchbuild/.nojekyll&&gh-pages-t-dbuild-m"Build for $(gitlog--pretty=format:%H-n1)[skipci]"

'touch' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

touchコマンドは、Git for Windowsをインストールしている方なら、次のようにすれば利用可能になります。

powershell

$ENV:Path+=";c:\Program Files\Git\usr\bin"

さてさてこれで、Scratchを試せるようになりました。

Scratch 3.0 GUI - 127.0.0.1:8601 Image may be NSFW.
Clik here to view.

次は、Realtime Database の準備を行います。

Realtime Database のセットアップ

1) Firebase プロジェクトの作成

Firebaseコンソールにアクセスし、プロジェクトを追加します。

設定項目	値
名前	(任意の名前)
Google アナリティクス	無効にする

アナリティクスは有効にすると、これから作る拡張ブロックの利用頻度などが取得できるようになるのでお勧めですが、本記事に関係のない情報なので無効にします。

2) Firebase プロジェクトに Webアプリを追加

Scratch 3.0はNode.jsで動作するクライアントサイドのWebアプリなので、次のようにします。

設定項目	値
アプリのニックネーム	(任意の名前)
Firebase Hosting	設定しない

LLK/scratch-gui は、Github Pages にデプロイする仕組みを備えており、本記事もそれを利用します。よって Firebase Hosting は設定しません。

Webアプリを登録すると、 Firebase SDK の追加のページで「この作業は Firebase サービスを使用する前に行ってください。」という情報が表示されますが、あとで拡張ブロックからやるので、ここではスキップしました。

3) Firebase プロジェクトに Realtime Database を追加

Firebase コンソールの構築メニューから Realtime Database を選択。「データベースを作成」をクリックします。

設定項目	値
Realtime Databaseのロケーション	米国 (us-central1)
セキュリティルール	テストモードで開始

拡張ブロックの動作確認までがとりあえずの目的なので、セキュリティルールはテストモードにしました。

4) Realtime Database への接続情報の確認

「プロジェクトの設定」ページを開くと、全般タブの「マイアプリ」セクションに作成した Webアプリがあります。それを選択すると、 Firebase SDK snippet 欄に次のような接続情報が表示されます。

<!-- The core Firebase JS SDK is always required and must be listed first --><script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script><!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries --><script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-analytics.js"></script><script>// Your web app's Firebase configuration// For Firebase JS SDK v7.20.0 and later, measurementId is optionalvarfirebaseConfig={apiKey:"AI***********************************WQ",authDomain:"************.firebaseapp.com",databaseURL:"https://************-default-rtdb.firebaseio.com"projectId:"************",storageBucket:"************.appspot.com",messagingSenderId:"************",appId:"1:************:web:**********************",measurementId:"G-**********",};// Initialize Firebasefirebase.initializeApp(firebaseConfig);firebase.analytics();</script>

※***の部分が、作成したFirebaseプロジェクト固有の部分。

以上で準備完了！では Realtime Database 拡張ブロックづくりへ。

Realtime Database 拡張ブロックの作成

Scratch に Realtime Database 拡張機能を追加

Scratch で Realtime Database 拡張ブロックを表示できるようにするための機能情報を記述するために、C:\Users\kami_teru\source\repos\scratch\scratch-guiのソースを編集します。

機能名は　realtimedbとします。
src/lib/libraries/extensions/index.jsxに以下を追加。

src/lib/libraries/extensions/index.jsx

...(中略)...importrealtimedbIconURLfrom'./realtimedb/realtimedb.png';importrealtimedbInsetIconURLfrom'./realtimedb/realtimedb-small.png';exportdefault[...(中略)...{name:'Realtime Database',extensionId:'realtimedb',iconURL:realtimedbIconURL,insetIconURL:realtimedbInsetIconURL,description:(<FormattedMessagedefaultMessage="Connect to Realtime Database."description="Realtime Database"id="gui.extension.realtimedb.description"/>),featured:true,internetConnectionRequired:true}]

src/lib/libraries/extensions/realtimedb/配下に、画像ファイルを配置。
Firebaseブランドガイドラインから適当なものをピックアップ＆サイズを調整。

realtimedb.png
Image may be NSFW.
Clik here to view.
realtimedb-small.png
Image may be NSFW.
Clik here to view.

Realtime Database 拡張機能の最低限の実装

いよいよ拡張ブロックの実装です。C:\Users\kami_teru\source\repos\scratch\scratch-vmのソースを編集。

まずは SDKの組み込み。Node.js から Realtime Database を利用する場合、Firebase SDK が便利です。
次のようにして、Firebase SDK をインストール。

powershell

cdC:\Users\kami_teru\source\repos\scratch\scratch-vmnpminstallfirebase--save

次に、Webサイトの Firebase認証を済ませるための最低限の実装を行います。
こんなブロックを実装していきます。
Image may be NSFW.
Clik here to view.

src/extensions/scratch3_realtimedb/index.js

constArgumentType=require('../../extension-support/argument-type');constBlockType=require('../../extension-support/block-type');constCast=require('../../util/cast');constlog=require('../../util/log');constfirebase=require('firebase/app');//require('firebase/analytics');require('firebase/database');constfirebaseConfig={};classScratch3Realtimedb{constructor(runtime){this.runtime=runtime;this._firebaseApp=undefined;this._realtimedb=undefined;}getfirebaseApp(){if(this._firebaseApp==undefined){this._firebaseApp=firebase.default.initializeApp(firebaseConfig);//firebase.default.analytics();}returnthis._firebaseApp;}getrealtimeDb(){if(this._realtimedb==undefined){this._realtimedb=this.firebaseApp.database();}returnthis._realtimedb;}getInfo(){return{id:'realtimedb',name:'Realtime Database',blocks:[{opcode:'setApiKey',blockType:BlockType.COMMAND,text:'【設定1】apiKey は [TEXT] を使う',arguments:{TEXT:{type:ArgumentType.STRING,defaultValue:"Firebase SDK snippetから貼り付けてね"}}},{opcode:'setAuthDomain',blockType:BlockType.COMMAND,text:'【設定2】authDomain は [TEXT] を使う',arguments:{TEXT:{type:ArgumentType.STRING,defaultValue:"Firebase SDK snippetから貼り付けてね"}}},{opcode:'setDatabaseURL',blockType:BlockType.COMMAND,text:'【設定3】databaseURL は [TEXT] を使う',arguments:{TEXT:{type:ArgumentType.STRING,defaultValue:"Firebase SDK snippetから貼り付けてね"}}},{opcode:'setProjectId',blockType:BlockType.COMMAND,text:'【設定4】projectId は [TEXT] を使う',arguments:{TEXT:{type:ArgumentType.STRING,defaultValue:"Firebase SDK snippetから貼り付けてね"}}},{opcode:'setStorageBucket',blockType:BlockType.COMMAND,text:'【設定5】storageBucket は [TEXT] を使う',arguments:{TEXT:{type:ArgumentType.STRING,defaultValue:"Firebase SDK snippetから貼り付けてね"}}},{opcode:'setMessagingSenderId',blockType:BlockType.COMMAND,text:'【設定6】messagingSenderId は [TEXT] を使う',arguments:{TEXT:{type:ArgumentType.STRING,defaultValue:"Firebase SDK snippetから貼り付けてね"}}},{opcode:'setAppId',blockType:BlockType.COMMAND,text:'【設定7】appId は [TEXT] を使う',arguments:{TEXT:{type:ArgumentType.STRING,defaultValue:"Firebase SDK snippetから貼り付けてね"}}},{opcode:'setMeasurementId',blockType:BlockType.COMMAND,text:'【設定8】measurementId は [TEXT] を使う',arguments:{TEXT:{type:ArgumentType.STRING,defaultValue:"Firebase SDK snippetから貼り付けてね"}}},{opcode:'setText',blockType:BlockType.COMMAND,text:'[PATH] の [VALUENAME] に [TEXT] をセット',arguments:{PATH:{type:ArgumentType.STRING,defaultValue:"データパス"},VALUENAME:{type:ArgumentType.STRING,defaultValue:"データ項目名"},TEXT:{type:ArgumentType.STRING,defaultValue:"データ値"}}}],menus:{}};}setApiKey(args){firebaseConfig.apiKey=Cast.toString(args.TEXT);}setAuthDomain(args){firebaseConfig.authDomain=Cast.toString(args.TEXT);}setDatabaseURL(args){firebaseConfig.databaseURL=Cast.toString(args.TEXT);}setProjectId(args){firebaseConfig.projectId=Cast.toString(args.TEXT);}setStorageBucket(args){firebaseConfig.storageBucket=Cast.toString(args.TEXT);}setMessagingSenderId(args){firebaseConfig.messagingSenderId=Cast.toString(args.TEXT);}setAppId(args){firebaseConfig.appId=Cast.toString(args.TEXT);}setMeasurementId(args){firebaseConfig.measurementId=Cast.toString(args.TEXT);}setText(args){constpath=Scratch3Realtimedb.parsePathInput(args.PATH);constvalueName=Cast.toString(args.VALUENAME);consttext=Cast.toString(args.TEXT);vardata={};data[valueName]=text;this.realtimeDb.ref(path).set(data);}}module.exports=Scratch3Realtimedb;

※アナリティクスを利用する場合はコメントアウトの箇所を有効にします。

最低限の実装ができたら、それを機能の一覧に登録するために記述を追加。

src/extension-support/extension-manager.js

constbuiltinExtensions={...(中略)...realtimedb:()=>require('../extensions/scratch3_realtimedb')};

では、ローカルで動作確認してみます。ビルドしてスタート。

powershell

cdC:\Users\kami_teru\source\repos\scratch\scratch-vmyarninstall;yarnlinkcdC:\Users\kami_teru\source\repos\scratch\scratch-guiyarnlinkscratch-vm;yarninstallyarnstart

Realtime Database 拡張機能が表示されていますね！
Image may be NSFW.
Clik here to view.
Firebase認証を通すためのプログラムを作って、一度実行。※アナリティクスを利用する場合は、設定8も実行します。
Image may be NSFW.
Clik here to view.
※上記の認証情報は記事公開時点で削除しているので利用できません。

一度目はFirebase認証を通すだけになるので、Realtime Databaseへの書き込みは失敗するようです。
でもこれでWebサイトとしての認証が通りました。

以降は次の設定だけのプログラムで、RealtimeDatabaseに接続できます。
Image may be NSFW.
Clik here to view.
ちゃんと書き込めていますね！
Image may be NSFW.
Clik here to view.

これと同じ手順を、Github Pagesでも行います。デプロイ。

powershell

yarnrunbuildyarnrundeploy

同じように、Github Pagesに公開した Scratch からも Realtime Database に書き込めることが確認できました。

Realtime Database 拡張機能の本実装

以下の技術情報を参考に、さらに機能を付け加えていきます。

以下、実装コードは、github のリンクから併読ください。

機能	ブロックイメージ	ブロック情報	実装
データ階層の表現	Image may be NSFW. Clik here to view.	getInfo	concatPath
文字データの送信	Image may be NSFW. Clik here to view.	getInfo	setText
データ変更の監視	Image may be NSFW. Clik here to view.	getInfo	listen
データ追加の監視	Image may be NSFW. Clik here to view.	getInfo	listenChildAdd
データ受信の判定	Image may be NSFW. Clik here to view.	getInfo	whenReceived
文字データの取得	Image may be NSFW. Clik here to view.	getInfo	receiveText
追加された子階層名の取得	Image may be NSFW. Clik here to view.	getInfo	receiveChildKey