コードを取得する

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

create-package スクリプト

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

これには、次のコマンドを実行する前に node.js と npm をインストールする必要があります。

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

npx @blockly/create-package app hello-world

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

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

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

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

cd hello-world
npm run start

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

Unpkg

アイデアを試すだけで、完全なアプリケーションをブートストラップしたくない場合は、スクリプトタグを使用して 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 のモンキーパッチではなく、プラグインの使用を推奨します。

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);