Blockly デベロッパー ツール

Blockly Developer Tools は、カスタム ブロックを作成してアプリケーションに組み込むことを支援するウェブベースのデベロッパー ツールです。

注: このドキュメントでは、Blockly v10 以降と互換性のある Blockly デベロッパー ツールの新しいバージョンについて説明します。以前のツールをお探しの場合は、以前のドキュメントをご覧ください。

ブロックを定義する

Block Factory ワークスペースは空の構成ブロックで始まります。ツールボックス内のそれぞれのカテゴリからブロックをドラッグすることで、入力とフィールドをブロックに追加できます。構成ブロックを変更することで、ブロックのツールチップ テキスト、ヘルプ URL、色、接続チェックを設定することもできます。

ブロック ファクトリで一度に作成できるブロックのタイプは 1 つのみです。互いに接続された複数のブロックを設計する場合は、ブロックを個別に設計し、ツールボックスの定義で接続する必要があります。また、ブロックにはミューテータなどの高度な機能を含めることができますが、こうした高度な機能を Factory で作成することはできません。ブロックの基本フォームを作成した後、ドキュメントに従ってブロック定義を変更する必要があります。

ワークスペースで構成ブロックを変更すると、ブロックのプレビューが自動的に更新されます。アプリに追加するコードも 自動的に更新されます

出力設定

Blockly は、ブロックを定義するさまざまなメソッド、Blockly 自体を読み込む方法、複数の組み込みコード ジェネレータ言語をサポートしています。ブロックとブロックコード ジェネレータの定義方法は、これらの要因によって異なるため、ブロック ファクトリで設定するとコード出力を変更できます。

ブロックリー インポートの形式

Blockly は、HTML で <script> タグを使用して読み込むことができます。アプリケーションでビルドツールを使用する場合は import ステートメントを使用して読み込むこともできます。この選択は、Blockly API の特定の部分の参照方法に影響します。どちらを選択するかについては、Blockly の読み込みに関するドキュメントをご覧ください。どの方法を使用する場合でも、アプリに追加するコードがアプリにとって正確になるように、対応する選択肢を [Block Factory] で必ず選択してください。

ブロック定義の形式

Blockly では、JSON または JavaScript でのブロックの定義がサポートされています。JSON 形式が推奨されますが、ミューテータなどの高度な機能を追加する場合は、JavaScript 形式を使用できます。

コード生成言語

Blockly には複数のコード生成言語が付属しています。対応するブロックコード ジェネレータ スタブを表示するために必要な言語を選択します。カスタム言語生成ツールを使用する場合は、コードをアプリケーションにコピーした後にカスタム CodeGenerator クラスの名前を変更できます。

コードの出力

Block Factory の次のセクションでは、作成したブロックを読み込むためにアプリにコピーする必要があるコードを示します。コードをコピーする場所はアプリケーションの構造によって異なりますが、通常は、定義とブロックコード ジェネレータの前にコード ヘッダー、ツールボックスで使用する前にブロック定義、ワークスペース用のコードを生成する前にブロックコード ジェネレータを実行する必要があります。各セクションのコピーボタンを使用して、そのセクションのコードブロック全体をコピーできます。

コード出力の使用方法についてご不明な点がある場合は、サンプルアプリをご覧ください。カスタム ブロックとブロックコード ジェネレータの例が含まれています。

コードヘッダー

[Code Headers] セクションには、Blockly のコア ライブラリを読み込むために必要なコードと、選択した言語生成ツールが表示されます。他の構成が存在する場合もあります。たとえば、ブロックに含めるフィールドの中には、Blockly プラグインからのものなどがあります。これらのプラグインには独自の import ステートメントがあり、フィールドを初期化するために実行する必要があるその他のコードもあります。このコードは、どのコード セクションよりも前に配置する必要があります。

ブロックの定義

ブロック定義は、ブロックの形状（フィールドと入力、色など）を Blockly に伝える方法です。このコードを実行すると、Blockly は type のみに基づいてブロックの作成方法を認識します。

サンプルアプリを使用している場合は、blocks/ ディレクトリのファイルにこのコードを追加できます。独自のアプリケーション構造がある場合は、ツールボックスの定義などでブロックを名前で参照する前に、このコードを必ず含めてください。いずれの場合も、このコードを含むファイルにコードヘッダーが存在することを確認してください。

Generator スタブ

ブロックコード ジェネレータは、ブロックに対して生成するコードを記述する手段です。ブロック ファクトリによって作成されたジェネレータ スタブは、ブロック上の入力とフィールドの値を取得するための基本的なコードを提供します。これらの値は、生成される最終的なコードに自由に組み合わせることができます。

サンプルアプリを使用している場合は、generators/ ディレクトリのファイルにこのコードを追加できます。独自のアプリケーション構造がある場合は、カスタム ブロックを含むワークスペースのコードを生成する前に、必ずこのコードを含めてください。いずれの場合も、このコードを含むファイル内にコードヘッダーが存在することを確認してください。

解説動画

この動画では、ブロックを定義する手順について詳しく説明します。UI は古いですが、強調表示されているブロック機能は依然として正確です。

ライブラリをブロック

ブロックは、変更するたびにブラウザのローカル ストレージに自動的に保存されます。上部のツールバーにある対応するボタンをクリックすると、新しいブロックを作成するか、ローカル ストレージから既存のブロックを読み込むことができます。

以前のブロック ファクトリからインポート

以前のブロック ファクトリを使用していて、既存のブロック定義を新しいツールに移行する場合は、次の手順を行います。

1. 以前のブロック ファクトリで、ツールバーの Export Block Library ボタンをクリックします。すべてのブロック定義を含むファイルがダウンロードされます。

   

2. 新しいブロック ファクトリで、ツールバーの Load block ボタンをクリックします。

3. メニューの [Import from Block Factory] を選択します。

   

4. ステップ 1 でダウンロードしたファイルをアップロードします。

5. ブロック定義は新しい形式に自動的に変換され、Load block メニューから使用できるようになります。既存のブロックと競合していた場合は、ブロック名が変更されている可能性があります。

6. ブロックの解析中にエラーが発生した場合は、読み込めません。ブロック中のサンプルに対してバグを報告し、解析されないファイルをお知らせください。