コードを取得する

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

Create-package スクリプト

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

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

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

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