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

非推奨: このドキュメントのツールは非推奨になりましたが、このドキュメントは参照用に残されています。以前のツールは Blockly v10 以前にのみ対応しています。ブロック定義を Blockly v11 以降に移行する場合は、こちらの手順に沿って、新しいツールにブロック定義を読み込みます。

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

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

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

[ブロック] タブ

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

ブロックを定義する

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

ライブラリの管理

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

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

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

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

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

[Block Exporter] タブ

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

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

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

注: Mac で保存ダイアログを使用している場合は、一度に 1 つのファイルのみダウンロードできます。

[Workspace Factory] タブ

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

ツールボックスの構築

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

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

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

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

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

注: 標準カテゴリとツールボックスには、プレイグラウンドのすべてのブロックが含まれています。このブロックのセットはほとんどのアプリには適していないため、必要に応じて削除する必要があります。また、一部のブロックはモバイルではまだサポートされていません。

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

高度なブロック

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

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

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

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

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

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

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

エクスポート

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

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