Tscratch3LikeLib( Google FireBase Studio )

# Tscratch3LikeLibをクラウドで使おう

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

# 紹介動画YOUTUBE
[YOUBUBE](https://youtu.be/eNYibh1MWfM)

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

# Googleアカウントの作成
作成要領の説明ははしょります。

# FireBase-Studio

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/26c0d962-de39-4ab4-8e18-9726406d6eb0.png)

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

## 使ってみましょう
次のURLでアクセスしましょう。

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


## Get Started

クリックしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/ff160d07-cfbe-4f1b-8e51-d347b8a51e1f.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/e5f84000-44ee-4563-9104-5dc77397e00c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/f7503770-518e-4284-992a-4c47c8c40bf4.png)

## Workspaceを作る

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/9052d517-e477-4e32-87ce-09899022f158.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/aeeda870-29f6-49a7-94a7-9de58bd17ac2.png)

```
https://github.com/amami-harhid/templateTscrach3.git
```
このレポジトリＵＲＬを入れてください

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/9885844d-b8f6-47c0-becf-c18548585e73.png)

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

```
harhid-templateTscratch3.git
```
にしてみました。準備ができたら`Import`してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/df919c0e-fd3b-46e7-a56b-30a3ff6aeac5.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/fa7ee6cb-78ba-4779-8603-5e1dd15f0670.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/113c82fb-634c-4f3e-81d8-b6aa37212427.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/06ce451e-3731-4072-88f4-1ff87b4d1384.png)

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

## npm package を取り込む

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

`≡`→`Terminal`→`New Terminal`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/be7edbdc-6f90-4249-9f6e-1cde354e0c8a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/cace5f44-8c8f-4b62-bfc5-a479f698762f.png)

## ターミナルで npm ci

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

```
$ npm ci  ( +Enter )
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/a8610665-e993-490b-a30a-9517e7e8da98.png)

しばらく待つと終わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/3735d9e8-b0e8-459a-a2cc-3903fa84a728.png)

`Explore`をみると、`node_modules` ができています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/765dd87e-e9a3-4616-a2d4-c1ef435bcd38.png)



## Extension ( Live server / Eslint を入れる )

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/b8009f6d-990b-4e93-90e3-64cf733cc88b.png)

### Live server (ritwickdey) インストール

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/4f988e73-368d-49f9-8cfa-f9a239c2ad13.png)


### ESLint (dbaeumer)　インストール

```
ESLint
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/9878d1b0-4af6-490f-be9d-5acd76139dd3.png)




## ESLint Restart

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

`Ctl`+`Shift`+`P`キー と３つのキーを同時に押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/f7ceff4f-5824-439c-ae9f-f3a929372d12.png)


コマンド欄に `restart`といれて絞り込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/7978fa28-2ac9-4f98-9c70-dc5ee6760c51.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/12629723-ced4-411d-a8dd-42b4470a62cb.png)


`Tasks`のところから `ESLint`を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/3b1fdc76-b074-4f3d-9ab1-5557f0c23fd2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/bc58c238-6aeb-4d1e-8f50-2b97f99c4970.png)



出てこないときは、Extensions(ESLint)のところで次の順に実行してください。
`disable`-->`Reload Window`-->`enable`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/1f21f91a-e647-4c9f-9e03-455fe2f15b06.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/99c4749e-2ccf-4729-bb11-afc6fb172a73.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/e7adfd3d-91c4-42d2-b773-ca79add56810.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/2bccf2b7-6389-4706-94bc-f057ad0fa396.png)

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

# LiveServerで表示してみよう

## LiveServer起動

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/ef34214c-5416-46df-a07d-2682af63c8b2.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/320e37ec-60ff-4ea3-9021-a591c6024f7b.png)

## ブラウザでは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/279016e3-0fc3-4557-ae88-bd15eda4bbe9.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/606d48a3-f468-4658-8d23-7d1d2d6a3c34.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/9267d546-2f90-45bc-8c12-8eb13b06f285.png)

すると、予め用意してある「テンプレートページ」を表示するはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/ddb3a429-7652-4924-8314-86bb081fb2dc.png)

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

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

# コードを書こう

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/1bfbc5d8-cd8c-4cd7-9fc8-7163f8a20442.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/474c1557-9742-48eb-883c-08a6a283941c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/4484dae1-f2d8-4a11-9c1f-13c7e3ef557f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/e25de956-cb71-4c48-bb18-b8661bc05721.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/255e95d9-85d7-419d-9f3d-2f0f8f3f10c4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/70dae882-40a0-4fcc-9343-c93ea9bb0d4d.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/53ed6474-b5b2-487e-ba00-c2c4988bf27b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/4dfb54cc-39c9-4c73-8001-0fc957bf772e.png)

## scripts/script.ts を修正
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/a9fe2b28-59de-4eac-8e8b-5b88d8818ef5.png)

### ロード処理
```Typescript
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
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/f39f4606-6f1d-41f5-a7f8-2842686d6a2b.png)

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

### LiveServerで見てみると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/f622b7a8-f1a6-4c15-a54d-636a44eef1bd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/b65a659d-b6a7-48a7-92af-d1c393f5c7c3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/f1db3d27-734d-45e2-b3a8-dc1e41532593.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/f82a1b92-1a1a-4bf7-b48d-418f70d05d64.png)　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/cec4b3fe-5bb9-4b09-86e6-d3f71688ebfc.png)


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

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

```Typescript
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);
}
```
再度ビルドします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/96870755-33a4-4bd4-a694-9a1f248c4c89.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/bf022469-04f7-48b7-9208-d4a2492c0ccd.png)

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

### ステージ作成

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

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

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

```
$ node ./parceler.js practice01
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/aa5308e2-a690-475c-a1bc-99b9dcffc8fd.png)

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

### ステージで音を鳴らす

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

```Typescript
// 事前準備処理
Pg.prepare = async function() {
    stage = new Lib.Stage();
    await stage.Image.add(Jurassic);
    await stage.Sound.add(Chill);      // 追加
}
```
```Typescript
// イベント定義処理
Pg.setting = function() {
    stage.Event.whenFlag(async function*(this:S3Stage){
        // ずっと繰り返す
        for(;;){
            // 終わるまで鳴らす
            await this.Sound.playUntilDone(Chill);
            yield;
        }
    });
};
```
画像ではわかりませんが、ブラウザで実行すると音が鳴り始めました。

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

```Typescript
// スプライト（ネコ）の変数
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);            // 追加
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/e77cda3f-39d3-4b95-802c-6d21d05db817.png)

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

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

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

    // ネコの「旗を押したときの動作」を追加する
    cat.Event.whenFlag(async function*(this:S3Sprite){
        // 100回繰り返す
        for( const _ of Lib.Iterator(100)) {
            // 右方向へ5度ずつ回転
            this.Motion.Direction.degree += 5;
            yield;
        }
    })
};
```
ネコが５度ずつ回転を「１００回」繰り返します。
![tscratch3010.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/b7989e37-d5ce-42d8-96c4-0881c421a70f.gif)


# 最後に

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

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

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

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

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