Blockly を試す―環境整備

 　以下に、Blocklyのライブラリーを無料で利用するための手順をご紹介します。但し、ソフトウェア開発者の方で、Blockly をご利用になりたい場合を想定しています。Blocklyを使用したアプリを使いたいのであれば、Scratchなどを使ってください。また、私は、Windowsを使っていますので、その他のOSの方は、適時読み直してください。

まず、環境の確認をします。「Windows PowerShell」を管理者として実行してください。

node.jsとnpmを利用するので、これらがインストール済みかを確認します。下記のコマンドで、それぞれのバージョンが表示されれば、インストール済みです。

node -v
npm -v

そうでない場合は、「node.jsとnpm」をインストールしてください。

Downloading and installing Node.js and npm | npm Docs

それでは、下記の「Blocklyの公式サイト」にアクセスしてください。

Blockly  |  Google for Developers

すると、ブラウザのトップに、下記の部分が表示されます。「ガイド」をクリックして、内容を確認してください。

Blocklyの公式サイト

それでは、「コードを取得する」から、実際に作業を始めて行きましょう。すでに、環境は確認済みなので、「パッケージ作成スクリプト」から、見て行きます。下記の画像の右側をクリックすると、表示されているコードをコピーできます。

ツール

npx @blockly/create-package app hello-world

それでは、コードをコピーして、「Windows　PowerShell」で、実行してください。ここでは、「hello-world」というディレクトリに新しいアプリケーションを作成していますが、自由に変えても結構です。

ここでは、そのまま、実行していきます。次のようなメッセージが表示されたら、既にフォルダが作成済みなので、「hello-world」のフォルダを削除してから、もう一度実行してください。

Package directory C:\Windows\system32\hello-world already exists. Delete it and try again.

パッケージのインストールが始まります。終了するまでに、少し時間が掛かりますが、そのまま、待って下さい。

「Success!」と表示されると完了です。

もし、「TypeScript」で、記述したいのであれば、下記を実行してパッケージを作成してください。

npx @blockly/create-package app hello-world --typescript

ここでは、通常のJavaScriptで記述していきます。

終了画面にも、表示されていますが、実際に実行するには、下記を「Windows　PowerShell」で実行します。

cd hello-world
npm run start

暫くすると、ブラウザに、「Blockly」のワークスペースが現れます。