Google Blockly環境構築

Google Blocklyとは

Google BlocklyはGoogleがオープンソースとして提供しているライブラリです。
公式Web Siteはhttps://developers.google.com/blocklyです。
ビジュアルプログラミングとして有名なScratch(https://scratch.mit.edu/)は実行ファイルを作成しますが、Google Blocklyはソースコードを出力します。
ただし、Google BlocklyはJavaScriptの出力も行えますので、作成したソースコードをブラウザ上で実行することも可能です。

環境構築

環境構築といってもnpmに登録されているため、node.js環境があれば特に何もしなくてもすぐに構築できます。

docker環境構築、起動

私は独立環境が欲しかったため、docker上で環境作成していますが、Windows上のNode.jsでも問題ありません。すでにNode.js環境がある方はこの章はスキップしてください。

Dockerイメージ構築

最小限のNode.js環境とするため、alpineベースにします。

Dockerfile

FROM node:16-alpine

WORKDIR /app

RUN apk update && \
    apk add git  && \
    npm install -g npm

docker-compose.yml

version: '3'
services:
  app:
    build: .
    image: nodejs-blockly-image
    volumes:
      - ./app:/app
    ports:
      - "8100:8100"
    tty: true

イメージを構築します

mkdir app
docker-compose build
docker-compose up -d

Docker起動

構築されたコンテナ名を確認します。

docker-compose ps

確認したコンテナ名でShellを起動します。

docker exec -it docker_app_1 sh

docker環境構築(2)

Ubuntu環境で実行したときにエラーとなりましたので、Node.jsのバージョンアップの手順を含めた環境構築の方法も記述します。

Dockerイメージ構築

Ubuntu環境にします。

Dockerfile

FROM ubuntu:20.04

WORKDIR /app

ENV TZ=Asia/Tokyo
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
RUN apt update && apt upgrade
RUN apt install -y npm
RUN apt install -y git
RUN apt install -y curl

docker-compose.yml

version: '3'
services:
  app:
    build: .
    image: nodejs-blockly-image
    volumes:
      - ./app:/app
    ports:
      - "8100:8100"
    tty: true

イメージを構築します

mkdir app
docker-compose build
docker-compose up -d

Docker起動

構築されたコンテナ名を確認します。

docker-compose ps

確認したコンテナ名でShellを起動します。

docker exec -it ubuntu_app_1 bash

Node.jsのバージョン管理をnvmで行います。

curl -o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Blockly demo実行時にNode.jsのバージョンが12未満の場合にはエラーになりましたので、Node.jsをv12にアップデートします。

nvm install 12

Blockly環境構築

Node.js環境構築できたら、Blockly環境を構築します。
また、http-serverもインストールしておきます。

npm install --save blockly
npm install -g http-server

サンプルソースコード実行

githubからサンプルソースコードを取得します。

git clone https://github.com/google/blockly

サンプルソースコードをhttp-server上で実行します。

cd blockly
http-server -p 8100

ブラウザ表示

上記で指定したポートに接続します。

http://localhost:8100/demos/

Blockly > Demosが起動します。