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