Blockly Developer Tools
は、カスタム ブロックの作成、ツールボックスの構築、ウェブ Blockly ワークスペースの構成など、Blockly の構成プロセスの一部を自動化するウェブベースのデベロッパー ツールです。
Blockly のツールを使用したデベロッパー プロセスは、次の 3 つの部分で構成されています。
- ブロック ファクトリとブロック エクスポータを使用してカスタム ブロックを作成します。
- Workspace Factory を使用してツールボックスとデフォルトのワークスペースを作成します。
- Workspace Factory（現在はウェブのみの機能）を使用してワークスペースを構成します。
ブロック ファクトリー タブ
[ブロック ファクトリ] タブでは、カスタム ブロックのブロック定義とブロックコード生成ツールを作成できます。このタブでは、カスタム ブロックを簡単に作成、変更、保存できます。
ブロックの定義
この動画では、ブロックを定義する手順を詳しく説明しています。UI は最新ではありませんが、ハイライト表示されているブロック対象物は依然として正確です。
ライブラリの管理
ブロックは名前で参照されるため、作成する各ブロックには一意の名前を付ける必要があります。UI ではこれが適用され、新しいブロックを「保存」するのか、既存のブロックを「更新」するのかが明確に示されます。
[Library] ボタンをクリックして、以前に保存したブロックを切り替えたり、新しい空のブロックを作成したりできます。既存のブロックの名前を変更すると、類似の定義を持つ複数のブロックをすばやく作成できます。
ライブラリのエクスポートとインポート
ブロックはブラウザのローカル ストレージに保存されます。ブラウザのローカル ストレージを消去すると、ブロックが削除されます。ブロックを無期限に保存するには、ライブラリをダウンロードする必要があります。ブロック ライブラリが XML ファイルとしてダウンロードされます。これをインポートすることで、ブロック ライブラリをファイルをダウンロードしたときの状態に設定できます。ブロック ライブラリをインポートすると、現在のライブラリが置き換えられるため、最初にエクスポートすることをおすすめします。
異なるカスタム ブロックのセットを維持、共有する場合は、インポート機能とエクスポート機能を使用することをおすすめします。
[Block Exporter] タブ
ブロックを設計したら、アプリで使用するためにブロック定義とジェネレータ スタブをエクスポートする必要があります。この操作は [ブロック エクスポータ] タブで行います。
ブロック ライブラリに保存されているすべてのブロックがブロック セレクタに表示されます。ブロックをクリックすると、エクスポート対象として選択または選択解除できます。ライブラリ内のすべてのブロックを選択する場合は、[Select] → [All Stored In Block Library] オプションを使用します。[Workspace Factory] タブを使用してツールボックスを構築するか、ワークスペースを構成した場合は、[Select] > [Allused In Workspace Factory] をクリックして、使用するすべてのブロックを選択することもできます。
エクスポート設定では、対象とする生成言語と、選択したブロックに対して定義、ジェネレータスタブ、またはその両方を使用するかどうかを選択できます。選択したら、[エクスポート] をクリックしてファイルをダウンロードします。
[Workspace Factory] タブ
ワークスペース ファクトリを使用すると、ワークスペースのツールボックスとデフォルトのブロック セットを簡単に構成できます。[ツールボックス] ボタンと [ワークスペース] ボタンを使用して、ツールボックスの編集と最初のワークスペースを切り替えることができます。
ツールボックスの構築
このタブは、ツールボックスの XML の作成に役立ちます。このガイドは、ツールボックスの機能に精通していることを前提としています。ここで編集するツールボックスの XML がすでにある場合は、[Load to Edit] をクリックして読み込むことができます。
カテゴリなしのツールボックス
ブロックがいくつかあり、カテゴリなしで表示する場合は、ワークスペースにドラッグすると、ブロックがプレビューのツールボックスに表示されます。
カテゴリ付きのツールボックス
カテゴリごとに表示ブロックを設定する場合は、[+] ボタンをクリックして新しいカテゴリのプルダウン項目を選択します。カテゴリリストにカテゴリが追加され 選択と編集が可能になります[Standard Category]（標準カテゴリ）を選択して個別の標準の Blockly カテゴリ（ロジック、ループなど）を追加するか、[Standard Toolbox] を選択してすべての標準の Blockly カテゴリを追加します。矢印ボタンを使用して、カテゴリを並べ替えます。
選択したカテゴリの名前や色を変更するには、[カテゴリを編集] プルダウンを使用します。ワークスペースにブロックをドラッグすると、選択したカテゴリにブロックが追加されます。
高度なブロック機能
デフォルトでは、標準ブロックまたはライブラリ内の任意のブロックをツールボックスに追加できます。JSON で定義したブロックがライブラリにない場合は、[Import Custom Blocks] ボタンを使用してインポートできます。
一部のブロックは一緒に使用するか、デフォルトを含める必要があります。これはグループとシャドウを使用して行います。エディタで接続されているブロックは、グループとしてツールボックスに追加されます。子ブロックを選択して [シャドウを作成] ボタンをクリックすることで、別のブロックに適用されているブロックもシャドウ ブロックに変更できます。注: シャドウ ブロックに変更できるのは、変数を含まない子ブロックのみです。
ツールボックスに変数または関数ブロックを含める場合は、ツールボックスに「変数」または「関数」のカテゴリを含めると、ユーザーがブロックを最大限に活用できるようになります。詳しくは、「変数」または「関数」のカテゴリをご覧ください。
ワークスペースの設定（ウェブ向け Blockly）
ワークスペースのさまざまな部分を構成するには、[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 では、次のエクスポート オプションを利用できます。
- スターター コード: スターター html と JavaScript を生成し、カスタマイズした Blockly ワークスペースを挿入します。
- Toolbox: ツールボックスを指定するための XML を生成します。
- ワークスペース ブロック: ワークスペースに読み込める XML を生成します。