7-1.Scratch3.0環境構築

2019年8月6日

Scratch3.0 利用環境

Scratch3.0を利用してプログラムを行うため、Scratch3.0サーバを構築します。教室などで利用する場合は各端末にScratch3.0を構築して利用しても良いですが、共通のサーバを室内の端末で利用することも可能です。
Scratch3.0サーバでプログラムした内容はWi-Fiを経由してリアルタイムで電子工作キットに伝達されキットの制御を行います。
Scratch3.0拡張機能「IoTスマートリモコン」を有効にすることで専用ブロックが利用できるようになります。

専用ブロックは以下となります。

Scratch3.0サーバの構築手順を以下に示します。

Scratch 3.0サーバ構築手順

Windows10端末とMacintosh端末の各々の構築方法を以下の通りとなりますので、構築する端末に応じて参照して実施してください。

Windows10端末へのScratch3.0サーバ構築手順

(1)Node.jsダウンロード
Node.jsはこちらへアクセスしダウンロードします。安定版「LTS」をダウンロードします。

(2)ダウンロードしたファイルをダブルクリックし「Next」

(3)ライセンスに合意して「Next」

(4)ディレクトリはそのまま「Next」

(5カスタム設定はそのまま「Next」

(6)「Install」をクリック

(7)インストールが完了するので「Finish」をクリック

Scratch3.0インストール

(8)コマンドプロンプトの起動
Windowsマーク+Rで検索窓に「cmd」を入力しリターンを押し以下のコマンド入力画面を表示します。

(9)Scratchディレクトリ作成(Usersディレクトリ配下に作成)
構築するディレクトリを作成し、その中で構築する準備をします。【(8)で表示したコマンド画面で以下のコマンドを入力します】

(10)Scratch3.0ファイルをダウンロード
githubからScratch3.0ファイルをダウンロードします。コマンド画面で以下の各行を1行づつ入力しダウンロードして下さい。

(11)サーバ環境を構築します。
以下のコマンドを入力しサーバを構築していきます。
(ディレクトリ「scratch-vm」に入りnpmにより必要なパッケージをインストールします。)
【”///”で始まる行は説明となりますので、コマンドは入力しないで下さい。】

引き続き、「scratch-gui」のサーバ環境構築を行います。
(ディレクトリ「scratch-gui」に入りnpmにより必要なパッケージをインストールします。)
【”///”で始まる行は説明となりますので、コマンドは入力しないで下さい。】

(12)SOCINNO拡張機能をダウンロードします。
「scratch-gui」から作成したディレクトリ「Scratch3」に戻り、拡張機能ファイルをダウンロードします。

(13)SOCINNO拡張機能をインストールします。
SOCINNO拡張機能ファイルをインストールします。
(ディレクトリ「scratch-socinno」に入りスクリプトにより必要なパッケージをインストールします。)

(14)Scratch3.0サーバ起動
「scratch-socinno」から作成したディレクトリ「scratch-gui」でnpmでScratch3.0サーバを起動。

「Comiled successfully.」が表示されれば起動に成功しています。

(15)Webブラウザで以下にアクセスし起動確認
サーバを構築した端末でChromeやEdgeなどのWebブラウザを起動し、以下にアクセスして下さい。

以下の画面が確認できればScratch3.0サーバの構築に成功しています。

また、サーバ構築端末のIPアドレスを指定して「http://192.168.1.100:8601」(例)に同じネットワーク内の端末からWebブラウザで利用可能です。

(16)Scratch3.0サーバ停止方法
サーバを起動中のコマンドプロンプトで、Ctrl+C(Cntrlボタンを押しながらcキーを押す)を押して、「バッチファイルを終了しますか?」と表示されるので「y」を入力し終了します。

上記で終了していますので、コマンドプロンプトの右上「×」ボタンで終了(画面を閉じる)してください。

Macintosh端末へのScratch3.0サーバ構築手順

(1)ターミナルを起動
LaunchPad内にあるターミナルアイコン(下図参照)をダブルクリックし、ターミナルを起動します。

ターミナルを起動すると以下の画面が表示されますので、コマンドを入力しサーバを構築していきます。

(2)Homebrewインストール
最初にmacOS用パッケージ管理「Homebrew」をインストールします。ターミナルで以下のコマンドを入力しインストールして下さい。

「Press RETURN to continue or any other key to abort」と表示されたらリターンキーを入力してください。
また、パスワードの入力を求められた場合は、Mac端末のログインパスワードを入力して下さい。
インストールが開始され「==> Installation successful!」が表示され

でバージョンが表示されれば、Homebrewインストール完了です。

(2)Yarnインストール
Javascript(node.js)のパッケージ管理「Yarn」をインストールします。ターミナルで以下のコマンドを入力しインストールして下さい。

インストールが完了すれば

でバージョンが表示されれば、yarnインストール完了です。

(3)Scratchディレクトリ作成(Usersディレクトリ配下に作成)
構築するディレクトリを作成し、その中で構築する準備をします。

(4)Scratch3.0ファイルをダウンロード
githubからScratch3.0ファイルをダウンロードします。コマンド画面で以下の各行を1行づつ入力しダウンロードして下さい。

(5)サーバ環境を構築します。
以下のコマンドを入力しサーバを構築していきます。以下の行を1行づつ入力して下さい。
【”///”で始まる行は説明となりますので、コマンドは入力しないで下さい。】

(6)SOCINNO拡張機能をダウンロードします。
「scratch-gui」から作成した上位ディレクトリ「Scratch3」に戻り、SOCINNO拡張機能ファイルをダウンロードします。

(7)SOCINNO拡張機能をインストールします。
ディレクトリ「Scratch3」で以下のコマンドを入力し拡張機能ファイルをインストールします。
【”///”で始まる行は説明となりますので、コマンドは入力しないで下さい。】

(8)Scratch3.0サーバ起動
「scratch-socinno」から作成したディレクトリ「scratch-gui」に移動し、yarnでScratch3.0サーバを起動。

「Comiled successfully.」が表示されれば起動に成功しています。

(9)Webブラウザで以下にアクセスし起動確認
サーバを構築した端末でChromeやSafriなどのWebブラウザを起動し、以下にアクセスして下さい。

以下の画面が確認できればScratch3.0サーバの構築に成功しています。

また、サーバ構築端末のIPアドレスを指定して「http://192.168.1.100:8601」(例)に同じネットワーク内の端末からWebブラウザで利用可能です。

(10)Scratch3.0サーバ停止方法
サーバを起動中のターミナルで、Ctrl+C(Cntrlボタンを押しながらcキーを押す)を押してサーバを終了します。
終了すればターミナルの左上「×」ボタンで終了(画面を閉じる)してください。