Blockly を入手する

Blockly コードを取得する方法はいくつかあり、入手後に読み込む方法もいくつかあります。

パッケージ作成スクリプト

Blockly にはスターター アプリケーションをブートストラップするスクリプトが用意されており、その後で変更できます。webpack や eslint などの一般的なウェブ開発ツールを使用しますが、React や Angular などのフレームワークは含まれていません。

そのためには、以下のコマンドを実行する前に node.js と npm をインストールする必要があります。

JavaScript で記述されたアプリケーションを新しい hello-world ディレクトリに作成するには:

npx @blockly/create-package app hello-world

新しい hello-world ディレクトリに TypeScript でアプリケーションを作成するには:

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

これにより、パッケージ ターゲットをインポートするパッケージが作成されます。また、package.json ファイルを使用して依存関係を管理するため、Blockly の最新バージョンを簡単に最新の状態に保つことができます。

また、ブラウザでプロジェクトをローカルでテストするためのスクリプトなど、便利なスターター スクリプトも用意されています。

cd hello-world
npm run start

生成された package.json ファイルは、他のコマンドで確認できます。

パッケージ化なし

アイデアを試しながらアプリケーション全体をブートストラップしたくない場合は、script タグを使用して unpkg から Blockly を読み込むことができます。

HTML ページに以下を追加すると、その HTML をブラウザで直接開いて Blockly を試すことができます。

<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>

これは、Webpack などのバンドラには対応していないため、Blockly を買収するための長期的なソリューションとはいえませんが、プロトタイピングとテストには適しています。

コードを取得する

コードを取得して Blockly を実行する方法はいくつかあります。

Blockly チームは、次の理由により、パッケージ マネージャー（NPM や Yarn など）で Blockly を必須にすることを推奨しています。

  • Blockly の最新情報を把握しやすくなった
  • Blockly の monkeypatching ではなくプラグインを使用することを推奨しています。

NPM

npm install blockly --save

Yarn

yarn add blockly

GitHub

GitHub リリースから圧縮コードをダウンロードすることもできます。ただし、Blockly の最新のアップデートと修正を受け取るには、定期的にコードを手動でダウンロードする必要があります。

コードを読み込む

コードを取得したら、いくつかの方法でコードからアクセスできます。

スクリプトタグ

<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>

スクリプトタグを使用すると、グローバル名前空間からインポートにアクセスできます。

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

インポート

// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';

メッセージ ファイルを読み込むときは、そのファイルも適用する必要があります。

Blockly.setLocale(En);

必要

// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} =  require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');

メッセージ ファイルが必要な場合は、それらも適用する必要があります。

Blockly.setLocale(En);