Blockly デベロッパー ツール
は、カスタム ブロックの作成、ツールボックスの作成、Blockly ワークスペースの構成など、Blockly 構成プロセスの一部を自動化するウェブベースのデベロッパー ツールです。
このツールを使用する Blockly デベロッパーのプロセスは、次の 3 つの部分で構成されています。
- Block Factory と Block Exporter を使用してカスタム ブロックを作成する。
- Workspace Factory を使用してツールボックスとデフォルトのワークスペースを作成する。
- Workspace Factory（現在はウェブ専用機能）を使用してワークスペースを構成します。
[Block Factory] タブ
[ブロック ファクトリー] タブでは、カスタム ブロックのブロック定義とブロックコード生成ツールを作成できます。このタブでは、カスタム ブロックを簡単に作成、変更、保存できます。
ブロックの定義
この動画では、ブロックを定義する手順について詳しく説明します。UI は古くなっていますが、ハイライト表示されるブロック機能は引き続き正確です。
ライブラリの管理
ブロックは名前で参照されるため、作成する各ブロックに一意の名前を付ける必要があります。UI では、新しいブロックを「保存」しているときと既存のブロックを「更新」しているときが明確に区別されます。
ライブラリ ボタンをクリックすると、以前に保存したブロックを切り替えたり、新しい空のブロックを作成したりできます。既存のブロックの名前を変更することも、同様の定義を持つ複数のブロックをすばやく作成する方法の一つです。
ライブラリのエクスポートとインポート
ブロックはブラウザのローカル ストレージに保存されます。ブラウザのローカル ストレージを消去すると、ブロックが削除されます。ブロックを無期限に保存するには、ライブラリをダウンロードする必要があります。ブロック ライブラリは XML ファイルとしてダウンロードされます。このファイルをインポートすると、ブロック ライブラリをファイルのダウンロード時の状態に設定できます。ブロック ライブラリをインポートすると、現在のブロック ライブラリが置き換えられるため、最初にエクスポートすることをおすすめします。
インポートとエクスポート機能は、さまざまなカスタム ブロックのセットを維持して共有する場合にも推奨されます。
[Block Exporter] タブ
ブロックを設計したら、ブロック定義と生成ツールのスタブをエクスポートしてアプリで使用する必要があります。これは [Block Exporter] タブで行います。
ブロック ライブラリに保存されているすべてのブロックがブロック選択ツールに表示されます。ブロックをクリックして、エクスポートするブロックを選択または選択解除します。ライブラリ内のすべてのブロックを選択するには、[選択] > [ブロック ライブラリに保存されているすべて] オプションを使用します。[Workspace Factory] タブを使用してツールボックスを作成またはワークスペースを構成した場合は、[選択] > [Workspace Factory で使用されているすべてのブロック] をクリックして、使用したブロックをすべて選択することもできます。
エクスポート設定では、ターゲットとする生成言語と、選択したブロックに定義、ジェネレータ スタブ、またはその両方を生成するかどうかを選択できます。選択したら、[エクスポート] をクリックしてファイルをダウンロードします。
[Workspace Factory] タブ
ワークスペース ファクトリーを使用すると、ワークスペースのツールボックスとデフォルトのブロックセットを簡単に構成できます。ツールボックスの編集と開始ワークスペースを切り替えるには、[ツールボックス] ボタンと [ワークスペース] ボタンを使用します。
ツールボックスの作成
このタブは、ツールボックスの XML の作成に役立ちます。この資料は、ツールボックスの機能に精通していることを前提としています。編集するツールボックスの XML がすでにある場合は、[編集用に読み込む] をクリックして読み込むことができます。
カテゴリのないツールボックス
いくつかのブロックがあり、カテゴリなしで表示する場合は、ブロックをワークスペースにドラッグするだけです。プレビューのツールボックスにブロックが表示されます。
カテゴリのあるツールボックス
ブロックをカテゴリに表示する場合は、[+] ボタンをクリックして、新しいカテゴリのプルダウン アイテムを選択します。これにより、選択して編集できるカテゴリがカテゴリリストに追加されます。個々の標準 Blockly カテゴリ（論理、ループなど）を追加するには [標準カテゴリ] を選択し、すべての標準 Blockly カテゴリを追加するには [標準ツールボックス] を選択します。矢印ボタンを使用してカテゴリを並べ替えます。
選択したカテゴリの名前や色を変更するには、[カテゴリを編集] プルダウンを使用します。ブロックをワークスペースにドラッグすると、選択したカテゴリに追加されます。
高度なブロック
デフォルトでは、標準ブロックやライブラリ内のブロックをツールボックスに追加できます。ライブラリにないブロックが JSON で定義されている場合は、[カスタム ブロックをインポート] ボタンを使用してインポートできます。
一部のブロックは一緒に使用するか、デフォルトを含める必要があります。これは、グループとシャドウを使用して行います。エディタで接続されたブロックは、グループとしてツールボックスに追加されます。別のブロックに接続されているブロックは、子ブロックを選択して [シャドウにする] ボタンをクリックすることで、シャドウ ブロックに変更することもできます。注: シャドー ブロックに変更できるのは、変数を含まない子ブロックのみです。
ツールボックスに変数ブロックまたは関数ブロックを含める場合は、ユーザーがブロックを最大限に活用できるように、ツールボックスに [変数] または [関数] カテゴリを含めます。詳しくは、[変数] または [関数] カテゴリをご覧ください。
ワークスペースの構成
ワークスペースのさまざまな部分を構成するには、[Workspace Factory] タブに移動して [Workspace] を選択します。
ワークスペース オプションを選択する
構成オプションに異なる値を設定し、プレビュー領域で結果を確認します。[グリッド] または [ズーム] を有効にすると、構成できるオプションがさらに表示されます。また、カテゴリを使用するように切り替えると、通常はワークスペースが複雑になります。最初のカテゴリを追加すると、ゴミ箱とスクロールバーが自動的に追加されます。
プリロード済みブロックをワークスペースに追加する
これは省略可能ですが、ワークスペースにブロックのセットを表示する場合は必要になる場合があります。
- アプリの読み込み時。
- イベント（レベルの進展、ヘルプボタンのクリックなど）がトリガーされたとき。
ブロックを編集スペースにドラッグすると、プレビューのワークスペースに表示されます。ブロックグループを作成したり、ブロックを無効にしたり、特定のブロックを選択したときにブロックをシャドウ ブロックにしたりできます。
これらのブロックは XML としてエクスポートできます（下記を参照）。ワークスペースを作成した直後に、Blockly.Xml.domToWorkspace を使用してワークスペースに追加します。
var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);
このサンプルコードでは、単一の math_number ブロックをワークスペースに追加します。
エクスポート
Workspace Factory には、次のエクスポート オプションがあります。
- スターター コード: カスタマイズした Blockly ワークスペースを挿入するためのスターター HTML と JavaScript を生成します。
- ツールボックス: ツールボックスを指定する XML を生成します。
- ワークスペース ブロック: ワークスペースに読み込むことができる XML を生成します。