従来の Blockly デベロッパー ツール

以前の Blockly デベロッパー ツールは、カスタムブロックの作成、ツールボックスの構築、Blockly ワークスペースの構成など、Blockly 構成プロセスの部分を自動化するウェブベースのデベロッパー ツールです。

このツールを使用する Blockly デベロッパー プロセスは、次の 3 つの部分で構成されています。

  • ブロック ファクトリとブロック エクスポーターを使用してカスタム ブロックを作成します。
  • Workspace Factory を使用してツールボックスとデフォルトのワークスペースを構築します。
  • Workspace Factory を使用してワークスペースを構成します（現在はウェブ専用の機能です）。

[ブロック] タブ

[ブロック ファクトリ] タブでは、カスタム ブロックのブロック定義とブロックコード ジェネレータを作成できます。このタブでは、カスタムブロックを簡単に作成、変更、保存できます。

ブロックを定義する

この動画では、ブロックを定義する手順について詳しく説明します。UI は古くなっていますが、ハイライト表示されているブロック機能は正確です。

ライブラリの管理

ブロックは名前で参照されるため、作成する各ブロックには一意の名前が必要です。UI でこれが適用され、新しいブロックを「保存」しているのか、既存のブロックを「更新」しているのかが明確になります。

ブロック名を含む [保存] ボタンと [削除] ボタンが表示された [ブロック ファクトリ] タブ。 ブロック名を含む [更新] ボタンと [削除] ボタンがある [ブロック ファクトリー] タブ。

以前に保存したブロックを切り替えたり、[ライブラリ] ボタンをクリックして新しい空のブロックを作成したりできます。既存のブロックの名前を変更することも、同様の定義を持つ複数のブロックをすばやく作成する方法の一つです。

[ブロック ライブラリ] プルダウンに、[新しいブロックを作成] と、以前に作成した 3 つのブロックの名前が表示されています。

ライブラリのエクスポートとインポート

ブロックはブラウザのローカル ストレージに保存されます。ブラウザのローカル ストレージをクリアすると、ブロックが削除されます。ブロックを無期限に保存するには、ライブラリをダウンロードする必要があります。ブロック ライブラリは XML ファイルとしてダウンロードされます。このファイルをインポートすると、ブロック ライブラリがファイルをダウンロードしたときの状態に設定されます。ブロック ライブラリをインポートすると現在のライブラリが置き換えられるため、最初にエクスポートすることをおすすめします。

インポート機能とエクスポート機能は、さまざまなカスタムブロックのセットを維持して共有する場合にも推奨される方法です。

[ライブラリをクリア]、[ブロック ライブラリをインポート]、[ブロック ライブラリをダウンロード] ボタン。

[Block Exporter] タブ

ブロックを設計したら、アプリで使用するためにブロック定義とジェネレータ スタブをエクスポートする必要があります。これは [Block Exporter]（ブロック エクスポーター）タブで行います。

ブロック ライブラリに保存されているすべてのブロックがブロック セレクタに表示されます。ブロックをクリックして、エクスポート対象として選択または選択解除します。ライブラリ内のすべてのブロックを選択する場合は、[選択] → [ブロック ライブラリに保存されているすべてのブロック] オプションを使用します。ワークスペース ファクトリー タブを使用してツールボックスを作成したり、ワークスペースを構成したりした場合は、[選択] → [ワークスペース ファクトリーで使用されているすべてのブロック] をクリックして、使用したすべてのブロックを選択することもできます。

[Block Exporter] タブの [Block Selector] 領域。ブロック ライブラリ内のすべてのブロックを選択するか、ワークスペース ファクトリーで使用されているすべてのブロックを選択するための [選択] ボタン、[選択をクリア] ボタン、個別に選択できるブロックのリストがあります。

書き出し設定では、ターゲットとする生成言語と、選択したブロックの定義、ジェネレータ スタブ、またはその両方を選択できます。選択したら、[エクスポート] をクリックしてファイルをダウンロードします。

[Block Exporter] タブ全体。ブロック選択エリア、エクスポート設定エリア、エクスポート プレビュー エリアがあります。

[Workspace Factory] タブ

Workspace Factory を使用すると、ワークスペースのツールボックスとデフォルトのブロックセットを簡単に構成できます。[ツールボックス] ボタンと [ワークスペース] ボタンを使用して、ツールボックスの編集と開始ワークスペースの切り替えを行うことができます。

ツールボックス ボタンとワークスペース ボタン。

ツールボックスの構築

このタブでは、ツールボックスの XML を作成できます。この資料は、ツールボックスの機能について理解していることを前提としています。ここで編集するツールボックスの XML がすでにある場合は、[Load to Edit] をクリックして読み込むことができます。

カテゴリのないツールボックス

ブロックがいくつかあり、カテゴリなしで表示したい場合は、ワークスペースにドラッグするだけで、プレビューのツールボックスにブロックが表示されます。

[ツールボックス] ボタンが選択された [ワークスペース ファクトリー] タブ。左側にはツールボックスでブロックを選択するための Blockly エディタ、中央にはツールボックスにカテゴリを追加するためのカテゴリ領域、右側には作成したツールボックスを表示するためのプレビュー領域があります。左側のワークスペースに 3 つのブロックがドラッグされています。これにより、右側に表示されるフライアウト ツールボックスが作成されます。

カテゴリ付きツールボックス

カテゴリにブロックを表示する場合は、[+] ボタンをクリックして、新しいカテゴリのプルダウン項目を選択します。これにより、カテゴリ リストにカテゴリが追加され、選択して編集できるようになります。[標準カテゴリ] を選択して個々の標準 Blockly カテゴリ（[論理]、[ループ] など）を追加するか、[標準ツールボックス] を選択してすべての標準 Blockly カテゴリを追加します。矢印ボタンを使用してカテゴリを並べ替えます。

[Workspace Factory] タブのカテゴリ領域。カテゴリの現在のリストと、カテゴリの追加と削除、リスト内での上下移動を行うボタンが表示されます。カテゴリを追加するために [+] ボタンが選択されています。

選択したカテゴリの名前や色を変更するには、[カテゴリを編集] プルダウンを使用します。ブロックをワークスペースにドラッグすると、選択したカテゴリに追加されます。

[カテゴリを編集] プルダウン。カテゴリの名前と色を変更するフィールドが表示されています。

高度なブロック

デフォルトでは、標準ブロックまたはライブラリ内のブロックをツールボックスに追加できます。ライブラリにないブロックが JSON で定義されている場合は、[カスタム ブロックをインポート] ボタンを使用してインポートできます。

一部のブロックは一緒に使用するか、デフォルトを含める必要があります。これは、グループとシャドウを使用して行われます。エディタで接続されているブロックは、グループとしてツールボックスに追加されます。別のブロックに接続されているブロックも、子ブロックを選択して [シャドーにする] ボタンをクリックすることで、シャドー ブロックに変更できます。注: 変数を含まない子ブロックのみをシャドー ブロックに変更できます。

変数ブロックまたは関数ブロックをツールボックスに含める場合は、ユーザーがブロックを最大限に活用できるように、ツールボックスに [変数] カテゴリまたは [関数] カテゴリを含めます。詳しくは、「変数」または「関数」カテゴリをご覧ください。

ワークスペースを構成する

ワークスペースのさまざまな部分を構成するには、[Workspace Factory] タブに移動して [Workspace] を選択します。

Workspace のオプションを選択する

構成オプションにさまざまな値を設定し、プレビュー領域で結果を確認します。[グリッド] または [ズーム] を有効にすると、構成できるオプションがさらに表示されます。また、カテゴリの使用に切り替えるには、通常、より複雑なワークスペースが必要です。最初のカテゴリを追加すると、ゴミ箱とスクロールバーが自動的に追加されます。

[Workspace Factory] タブで [Workspace] ボタンが選択されている状態。カテゴリ エリアが、選択可能なワークスペース オプションのリストに置き換えられました。

ワークスペースに事前読み込み済みブロックを追加する

これは省略可能ですが、ワークスペースに一連のブロックを表示する場合は必要になることがあります。

  • アプリケーションの読み込み時。
  • イベント（レベルアップ、ヘルプボタンのクリックなど）がトリガーされたとき。

ブロックを編集スペースにドラッグすると、ワークスペースのプレビューに表示されます。ブロック グループの作成、ブロックの無効化、特定のブロックの選択時のシャドー ブロック化を行うことができます。

[Workspace Factory] タブで [Workspace] ボタンが選択されている状態。左側の Blockly エディタのワークスペースにブロックがドラッグされています。これらは、右側の Blockly エディタのワークスペースにプリロードされたブロックとして表示されます。

これらのブロックは 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);

このサンプルコードでは、ワークスペースに 1 つの math_number ブロックを追加します。

エクスポート

Workspace Factory には、次のエクスポート オプションがあります。

[Workspace Factory] タブの上部にある [Export] プルダウン。スターター コード、ツールボックス、プリロードされたワークスペース ブロック、またはこれらすべてをエクスポートするオプションがあります。

  • スターター コード: カスタマイズした Blockly ワークスペースを挿入するためのスターター HTML と JavaScript を生成します。
  • ツールボックス: ツールボックスを指定する XML を生成します。
  • Workspace Blocks: ワークスペースに読み込むことができる XML を生成します。