ICT教育

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

投稿日:2016年10月28日 更新日:

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、日本のアクティブ・ラーニングの進め方:阿部和広さんインタビュー(後編) を出発点にして、いろいろ情報を収集しました。

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

  1. Scratch for Developers
    • 現在、開発中の Scratch についてのページです。
  2. Lifelong Kindergarten Group
  3. npm – @scratch
    • Scratch が npm に登録しているパッケージの一覧ページです。
    • ここにあるパッケージは、npmコマンドでインストールすることができます。

GitHub のレポジトリ

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

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

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

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

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

scratch-vm に、インストールの方法が2つ書いてあります。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)

こんな感じです。

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

scratch-vm

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

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

📂-ICT教育
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ブラウザの自動入力機能が抱えるリスク

主要なWebブラウザには、フォームに入力した文字列を記憶して、それ以後はその文字列を自動でセットしてくれる機能がついています。 この機能は大変便利なのですが、個人情報やパスワードなどがブラウザに記憶さ …

no image

「mstdn.jp」を立ち上げた大学院生のインタビュー記事を読みました

以下の記事を読みました。最近話題になっているマストドンのサーバーをたてた大学院生(ぬるかるさん)のインタビュー記事です。非常に興味深い内容になっています。 世界最大の「mstdn.jp」を立ち上げた大 …

ICTリテラシー

Adobe Acrobat Reader DC や Adobe Flash Player のインストールでは提供オプションに気を付けましょう

Adobe Acrobat Reader DC や Adobe Flash Player といった Adobe製品をインストールする際には、気を付けていないと Acrobat Reader Chrom …

no image

パソコンのメモリは多目に積んでおきましょう

もし、今使っているパソコンの動作が遅いと感じている方がいましたら、できるだけ早くメモリを増設することをお勧めします(*1)。今だと 8GBは欲しいところです。 動作が遅いと不快ですし、実際に作業効率が …

no image

悩ましい電子メールの誤送信

文部省で起きた、メール誤送信のニュースを読みました。 文科省 人事案を全職員に誤送信 | NHKニュース 「電子メールの誤送信」は、なかなか悩ましい問題です。 電子メールのデータが送受信される経路に関 …