Scratchは基本的にはWeb経由やWindowsストアにあるローカルアプリを使用することで使用するのが一般的です。

アプリ版Scratch

ですが、カスタムのブロックなどを開発したいというときには、この使用用途ではこのような環境を使用するのは難しいかと思います。そこで、今回はGitHubに公開されているソースコードからScratchを起動させる事ができます。ということでまず今回はGitHubに公開されたscratch-guiを使用してローカル環境にScratchを起動させてみようと思います。

とはいえ、現在使用しているPCでやるのは色々な開発環境もあるため素の状態から始めたほうがいいかなと思います。

ということで今回は以前紹介したWindows Sandboxを使用して素の状態から開始をしてみようと思います。

WindowsSandboxについて【参考】

uepon.hatenadiary.com

Windows SandBoxの環境設定（事前のインストール作業）

Windows Sandboxは全くの素の状態（ネットワーク接続まではできています）なので、少しだけ開発環境の準備をします。

必要になるのは以下のものでしょうか。

VisualStudioCode（厳密にはいらない）
Node.js
Git

これらをWindows Sandbox上にインストールしておきます。Windowsでなければこのあたり全く不要かも… それぞれ以下からダウンロードしてインストールを行います。

VisualStudioCode

code.visualstudio.com

Node.js

nodejs.org

Git

git-scm.com

下記のファイルをダウンロードしてインストールしておきました。

ターミナルでバージョンを確認して以下のようになっています。

scratch-guiのインストール

開発環境準備ができたらscratch-guiをインストールします。

github.com

単にインストールを行うだけをするのであれば以下で良いのですが

> npm install https://github.com/LLK/scratch-gui.git

今後開発するのであれば以下で実行してインストールします。 ※公式サイトのGitのコマンドには--depth 1が入っていませんが、最新のリポジトリだけで良いと思いますので追加しておきます。むしろ入れないとものすごく時間がかかります。

You may want to add --depth=1 to the git clone command because there are some large files in the git repository history.

> cd 【インストールパス】
> git clone  --depth 1 https://github.com/LLK/scratch-gui.git
> cd scratch-gui
> npm install

これでインストールは完了します。

scratch-guiの実行

今回使用しているscratch-guiはリポジトリ名にはguiと含まれているのですが実際にはサーバープロセスになるので起動によってブラウザが立ち上がってくることはありません。ブラウザを別途起動してURLを開く必要があります。Windows Sandbox内の環境であればhttp://localhost:8601を開くことになります。

サーバープロセスは以下のように起動します。

> npm start

ですが、起動すると以下のようなエラーが発生し起動ができません。Node.jsでエラーが出ているような雰囲気なのでバージョンを変えて（バージョンダウンして）再度試してみます。※このとき、Firewallの設定が出た場合には、【アクセスを許可】ボタンをクリックして選択してください。（２回目以降は表示されません）