Scratchをローカルで動作させる

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の設定が出た場合には、【アクセスを許可】ボタンをクリックして選択してください。(2回目以降は表示されません)

現在はNode.js v18.14.2がインストールされているので、これの一つ前のLTSバージョン(Node.js 16.19.1)に変更します。以下のURLから検索するとNode.jsの過去リリースを使用する事ができます。

nodejs.org

nodejs.org

最新のNode.jsのLTSをアンインストールして、バージョンダウンを行います。

Node.jsのバージョンダウンが終了したら再度以下を実行して起動を行います。

> npm start

今回はエラーは発生せずにコンソール画面に以下の表示がでていれば起動成功です。

 「wdm」: Compiled successfully.

※起動時にFirewallの設定が出た場合には、【アクセスを許可】ボタンをクリックして選択してください。(2回目以降は表示されません)

あとはブラウザを開いて以下にアクセスをします。

http://localhost:8601

また、Windows Sandbox側のIPアドレスにポート指定を行うことでWindows側からもこの開発環境へアクセスすることができます。

IPアドレスはipconfigコマンドで調べて

IPアドレスとポートを指定することでブラウザ上で起動が行われます。

おわりに

これで、ネットワークを使用しないにScratchのローカル環境を作成することができました。 あとは、サーバ側の更新を行うことでオリジナルブロックを作成することができるので、その連携についても後日記載してみようと思います。

そちらについては今回のscratch-guiも使用していますが、サーバープロセス側を別のリポジトリscratch-vm)とリンクすることで使用できるというものです。

今回はNode.jsのバージョンによるエラーが発生してしまったためすんなりと行かなかったという事はありましたが、まあ、これくらいであれば…😂

/* -----codeの行番号----- */