scratch-vm (Scratch 3.0 ?) を動かしてみました

2016-18_28_58-scratch

Make: Japan | 「Scratch Conference 2016」を終えて — Scratch 3.0、日本のアクティブ・ラーニングの進め方：阿部和広さんインタビュー（後編）という記事を読んでいたら、Scratch 3.0 について話されていました。ソースコードが GitHub にあるということでしたので実際に動くのかどうか試してみました。

今回使った環境
手順
こんな感じです。

今回使った環境

Windows 10 Pro 64bit
MSYS2
- gitコマンドなどは、全て MSYS2のターミナルから行います。

手順

1. 開発中の Scratch について下調べします

Make: Japan | 「Scratch Conference 2016」を終えて — Scratch 3.0、日本のアクティブ・ラーニングの進め方：阿部和広さんインタビュー（後編）を出発点にして、いろいろ情報を収集しました。

プロジェクトの全体像を知るためのウェブサイト

Scratch for Developers
- 現在、開発中の Scratch についてのページです。
Lifelong Kindergarten Group
- Scratch を作っているグループは、MIT Media Lab. の Lifelong Kindergarten :: Homepage というグループなのですが、このグループの GitHub レポジトリ一覧ページです。
npm – @scratch
- Scratch が npm に登録しているパッケージの一覧ページです。
- ここにあるパッケージは、npmコマンドでインストールすることができます。

GitHub のレポジトリ

Lifelong Kindergarten Group が管理しているレポジトリはいろいろありますが、今回関係してそうな主なものを挙げると、

scratch-blocks
- Scratch のブロックの部分を作成するライブラリのようです。
- scratch-vm の中で使用されています。
- JavaScript を使っています。
scratch-vm
- これが、Scratch 3.0 のメインプログラムのようです。
- JavaScript を使っています。
- npm にもパッケージとして登録されています。
  - npm – scratch-vm
scratch-www
- 「Scratch のスタンドアローンウェブクライアント」と説明されています。
- 中身を少し見てみましたが、node.js を使って実行するアプリケーションになっており、オフラインで動作するようです。Scratch 1.4 の代わりに用意されているのでしょうか。
scratch-flash
- Scratch 2.0 のレポジトリ
- Flashを使っています。

だいたいこのあたりでしょうか（4はおまけです）。Scratch 3.0 は JavaScript を使ったイマドキな作りになっていることが分かりました。

今回は、この中から scratch-vm を動かしてみます。

2. scratch-vm をダウンロードします

scratch-vm に、インストールの方法が２つ書いてあります。npm コマンドでインストールする方法と、git close する方法なのですが、今回は後者で行います。

$ git clone https://github.com/LLK/scratch-vm.git

生成されたフォルダーに移動しておきます。

$ cd scratch-vm

3. scratch-vm が使用している npmパッケージをインストールします

$ npm install

ちなみに、package.json 内の “devDependencies” は以下のようになっていました。
（使用している npmパッケージが分かります）

  "devDependencies": {
    "babel-eslint": "7.0.0",
    "copy-webpack-plugin": "3.0.1",
    "eslint": "3.8.1",
    "eslint-config-scratch": "^2.0.0",
    "expose-loader": "0.7.1",
    "gh-pages": "0.11.0",
    "highlightjs": "8.7.0",
    "htmlparser2": "3.9.0",
    "json": "9.0.4",
    "json-loader": "0.5.4",
    "lodash.defaultsdeep": "4.6.0",
    "minilog": "3.0.1",
    "promise": "7.1.1",
    "scratch-blocks": "latest",
    "scratch-render": "latest",
    "script-loader": "0.7.0",
    "stats.js": "0.16.0",
    "tap": "5.7.1",
    "travis-after-all": "1.4.4",
    "webpack": "1.13.0",
    "webpack-dev-server": "1.14.1"
  }

ref: https://github.com/LLK/scratch-vm/blob/1b4a1ca1bcb3502a23d6b5d965055b84fd5186d6/package.json

4. ローカル上でウェブサーバーを起動します

$ npm start

これは、webpack-dev-server を起動しているだけです。

5. ブラウザで Scratch にアクセスします

ブラウザを起動して、http://localhost:8080/webpack-dev-server/ にアクセスします。

※ 2017年02月09日追記： 2016年11月22日から、ポート番号が8080から8073に変更されています。(参照： Fix dev port number · LLK/scratch-vm@5b36e3c)

こんな感じです。

以下のようになりました。画像をクリックすると動いているところが見られます。

画面を見るとまだ開発途中なことが分かりますが、少しブロックを変えたりする分にはちゃんと動いていました。

ここからどのように進化していくのか楽しみです。