Tscratch3LikeLibをクラウドで使おう

『Tscratch3LikeLib』をお手元のPCで利用するためにはNodeJSやGitを仕込んだりする必要があります。
この環境準備の『壁』を脅威に感じる方も多かろうと推測いたしますので、ブラウザとGoogleアカウントがあれば使えてしまう便利な開発環境をご紹介したいと思います。

必要なもの

Googleアカウント
Chromeが使えるデバイス
必要なのはこれだけです！
ちなみに他のブラウザでも使えると思いますけど、ご紹介したい開発環境はGoogle提供サービスですので、Chromeを利用するほうが何かと安心でしょう。

Googleアカウントの作成

作成要領の説明ははしょります。

FireBase-Studio

FireBase-StudioはGoogleが提供する『クラウドベースの開発環境』です。PCへ特別なソフトウェアをインストールする必要はなく、ブラウザだけでプログラミングができるものです。その他同種のサービスがありますがFireBase-StudioはPC上でのMicroSoft Visual Codeと同じようなことができる有難いサービスです。

無料で使える開発環境
Npm,Gitは始めから仕込み済
無料で使えるWorkSpace数には制限ありだが、学習用途なら問題なし
Workspaceは保存されるのでいつでもすぐに続きができる

使ってみましょう

次のURLでアクセスしましょう。

https://studio.firebase.google.com/

Get Started

クリックしましょう。

ChoromeでGoogleにログインしていないときは、アカウントを選択してね！と言われますので、適切なアカウントでログインしてください。

ログインできていれば FireBase StudioのTOPページにたどり着きます。

Workspaceを作る

Tscratch3LikeJsのテンプレートレポジトリをImportしてみます。

https://github.com/amami-harhid/templateTscrach3.git

このレポジトリＵＲＬを入れてください

Name your workspaceのところが自動で表示されますので、わかりやすいように変えてもＯＫです。私の場合は自分の名前をつけて

harhid-templateTscratch3.git

にしてみました。準備ができたらImportしてください。

Workspaceを作成し始めますので少し待ちましょう。

開発環境が表示されました。GoogleのAI(Gemini)のタブが見えますが私は使わないクチ(邪魔に思うタイプ)なのですぐにタブを消してしまいます。

Workspaceを作った最初にやること

npm package を取り込む

左側の『≡』メニューよりターミナルを表示しましょう

≡→Terminal→New Terminal

ターミナルで npm ci

workspaceを作った直後に１回だけ実行すればＯＫです。

$ npm ci  ( +Enter )

しばらく待つと終わります。

Exploreをみると、node_modules ができています。

Extension ( Live server / Eslint を入れる )

Workspaceを作るたびに入れる必要があります。

Live server (ritwickdey) インストール

live server

で絞り込み　『Live Server (ritwickdey)』をインストールしてください。

ESLint (dbaeumer)　インストール

ESLint

ESLint Restart

次に ESLintサービスを再起動させます。

Ctl+Shift+Pキーと３つのキーを同時に押します。

コマンド欄に restartといれて絞り込みます。

Restart ESLint Serverの行をクリックして、OUTPUTを表示します。

Tasksのところから ESLintを選びます。

出てこないときは、Extensions(ESLint)のところで次の順に実行してください。
disable-->Reload Window-->enable

この後、ESLintサービスを再起動させてください。

Server process exited successfullyと表示されていたら問題はありません。

LiveServerで表示してみよう

LiveServer起動

Go Liveをクリックしてください。

port 5500を使ってアクセス可能となりました。(番号は変わることがあります）

ブラウザでは？

プロジェクトのトップが表示されていますので、build==>templateの順にクリックしましょう。

すると、予め用意してある「テンプレートページ」を表示するはずです。

これが出たら、適切に環境を用意できたことになります。準備完了です。

Workspaceを削除しない限り、準備を繰り返す必要はありません。お疲れ様でした。

コードを書こう

新しいフォルダーを作る

トップにある srcフォルダーの中にtemplateフォルダーがありますので、それをコピーしてsrcの下に別のフォルダーを作りましょう。

注意点

新しいフォルダーを作るときは、LiveServerを停止しておくことをおすすめします。LiveServer動作中にはフォルダやファイルの名前を変えることができないからです。

scripts/script.ts を修正

ロード処理

const Jurassic = 'Jurassic'; // 追加
const Cat = 'Cat';           // 追加
const Chill = 'Chill';       // 追加

// 事前ロード処理
Pg.preload = async function(this:S3PlayGround) {
    this.Image.load('../../assets/jurassic.svg', Jurassic); // 追加
    this.Image.load('../../assets/cat.svg', Cat);           // 追加
    this.Sound.load('../../assets/Chill.wav', Chill);       // 追加
}

コンパイルする

$ node ./parceler.js practice01

buildフォルダにビルド結果が入りました。

LiveServerで見てみると

大文字と小文字を間違えていますね。

jurassic.svg-->Jurassic.svg へ変更します。

const Jurassic = 'Jurassic'; // 追加
const Cat = 'Cat';           // 追加
const Chill = 'Chill';       // 追加

// 事前ロード処理
Pg.preload = async function(this:S3PlayGround) {
    this.Image.load('../../assets/Jurassic.svg', Jurassic);
    this.Image.load('../../assets/cat.svg', Cat);
    this.Sound.load('../../assets/Chill.wav', Chill);
}

再度ビルドします。

ロード処理が成功したようです。

ステージ作成

ステージを作り、背景を設定します。

// ステージの変数
let stage: S3Stage;       // 追加

// 事前準備処理
Pg.prepare = async function() {
    stage = new Lib.Stage();
    await stage.Image.add(Jurassic);
}

$ node ./parceler.js practice01

背景(Jurassic)を表示できました。

ステージで音を鳴らす

ずっと繰り返して Chillを鳴らします（終わるまで鳴らす）

// 事前準備処理
Pg.prepare = async function() {
    stage = new Lib.Stage();
    await stage.Image.add(Jurassic);
    await stage.Sound.add(Chill);      // 追加
}

// イベント定義処理
Pg.setting = function() {
    stage.Event.whenFlag(async function*(this:S3Stage){
        // ずっと繰り返す
        for(;;){
            // 終わるまで鳴らす
            await this.Sound.playUntilDone(Chill);
            yield;
        }
    });
};

画像ではわかりませんが、ブラウザで実行すると音が鳴り始めました。

スプライト（ネコ）を作成する

// スプライト（ネコ）の変数
let cat: S3Sprite;            // 追加

// 事前準備処理
Pg.prepare = async function() {
    stage = new Lib.Stage();
    await stage.Image.add(Jurassic);
    await stage.Sound.add(Chill);
    cat = new Lib.Sprite('catTest');     // 追加
    await cat.Image.add(Cat);            // 追加
}

スプライト（ネコ）が中央に表示されました。位置のデフォルトは (x,y)=(0,0) です。

スプライト（ネコ）を回転させる

// イベント定義処理
Pg.setting = function() {

    // ネコの「旗を押したときの動作」を追加する
    cat.Event.whenFlag(async function*(this:S3Sprite){
        // 100回繰り返す
        for( const _ of Lib.Iterator(100)) {
            // 右方向へ5度ずつ回転
            this.Motion.Direction.degree += 5;
            yield;
        }
    })
};

ネコが５度ずつ回転を「１００回」繰り返します。

最後に

今回はGoogle FireBase Studioを利用してプログラミングをする簡単な事例をご紹介しました。

Google FireBase Studioを使えば、ブラウザだけで、Scratch3風のTypescript Programmingを簡単に楽しむことができます。是非使ってみてください。

Google FireBase Studioを使えば、MS VSCodeでできることはほとんどできてしまうようです。

しかも無償で利用できて、お手元のPCへ面倒な環境設定をする必要もなく、わりとすぐに使いだせます。

残念ながら、日本語化はまだ対応されていないようです（待っていたらできるようになるかも）。