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

Blockly デベロッパー ツール Blockly の構成の一部を自動化するウェブベースのデベロッパー ツールです。 カスタム ブロックの作成、ツールボックスの構築、 ウェブの Blockly ワークスペースの構成を行います

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

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

工場タブをブロック

[Block Factory] タブは、ユーザーが作成する ブロック定義と ブロックコード ジェネレータ ご覧くださいこのタブでは、キャンペーンを簡単に作成、変更、保存できます。 使用できます。

ブロックの定義

この動画では、ブロックを定義する手順について詳しく説明します。UI が登場しました ハイライト表示されたブロック対象物は依然として正確です。

ライブラリの管理

ブロックは名前で参照されるため、作成する各ブロックには必ず 一意の名前です。UI で強制適用され、保存中であることが明示されます。 新しいブロックの作成ブロックを解除できます

以前に保存したブロックを切り替えたり、新しい空のブロックを作成したりできます ブロックすることもできます。既存のブロックの名前を変更すると 似た定義を持つ複数のブロックをすばやく作成する別の方法です。

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

ブロックはブラウザのローカル ストレージに保存されます。ブラウザのローカル設定をクリアする ブロックが削除されます。ブロックを無期限に保存するには、 ライブラリをダウンロードします。ブロック ライブラリが XML としてダウンロードされます。 ファイルをインポートして、ブロック ライブラリを 表示されます。ブロック ライブラリをインポートすると、 そのため、最初にエクスポートすることをおすすめします。

インポートとエクスポートの機能は、Google Cloud で カスタム ブロックのセットを共有することもできます。

[ブロック エクスポータ] タブ

ブロックを設計したら、ブロック定義をエクスポートする必要があります。 ジェネレータスタブが含まれていますこれは [Block Exporter] タブ。

ブロック ライブラリに保存されているすべてのブロックがブロック セレクタに表示されます。 エクスポートするブロックをクリックすると、そのブロックを選択または選択解除できます。「新規顧客の獲得」目標を ライブラリ内のすべてのブロックを確認するには、[選択] → [すべてブロックに保存] を選択します。 選択します。ツールボックスの構築またはワークスペースの構成に 使用するすべてのブロックを選択することもできます。 [Select] → [All used In Workspace Factory] をクリックするだけです。

エクスポートの設定では、ターゲットにする生成された言語を選択できます 定義とジェネレータ スタブ、またはその両方を ブロックを解除します。オプションを選択したら [エクスポート]をダウンロード できます。

[Workspace Factory] タブ

Workspace Factory を使用すると、ツールボックスとデフォルトのツールを簡単に構成できる ブロックのセットです。ツールボックスの編集と 「ツールボックス」からワークスペースを開始しますと「Workspace」できます。

ツールボックスの構築

このタブは、ツールボックスの XML を作成する際に活用できます。本資料は、 Toolbox の機能に習熟していること。 ここで編集するツールボックスの XML がすでにある場合は、 [Load to Edit（編集して読み込み）] をクリックして読み込みます。

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

複数のブロックがあり、カテゴリなしで表示したい場合は、 ワークスペースにドラッグすると、作成したブロックがツールボックスに表示されます。 。

カテゴリを含むツールボックス

ブロックをカテゴリ別に表示するには、[+] ボタンをクリックして 新しいカテゴリを選択しますカテゴリリストにカテゴリが追加されます 選択して編集できます[Standard Category] を選択して個別の 標準の Blockly カテゴリ（Logic、Loops など）、または [Standard Toolbox] を選択して ブロックします。矢印ボタンを使用してカテゴリを並べ替える。

選択したカテゴリの名前や色を変更するには、[カテゴリを編集] を使用します。 選択します。ブロックをワークスペースにドラッグすると、選択した あります。

高度なブロック

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

一部のブロックは併用するか、デフォルトを含める必要があります。これには、 グループとシャドウについて説明します。制限なし エディタ内で接続されたブロックが、グループとしてツールボックスに追加されます。 別のブロックに取り付けられたブロックをシャドウ ブロックに変更することもできます 子ブロックを選択して [Make Shadow] をクリックし、] ボタンを離します。 注: シャドウに変更できるのは、変数を含まない子ブロックのみです。 ブロックします。

ツールボックスに変数や関数ブロックを含める場合は、 ツールボックス内の「変数」または「関数」カテゴリで、 ブロックを使用します。詳細: 「変数」または「関数」。

ワークスペースの構成（ウェブの Blockly 用）

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

ワークスペース オプションの選択

異なる値を設定: 構成オプション プレビュー領域で結果を確認します有効化 grid または zoom は、設定するその他のオプションを表示します。 また、カテゴリの使用に切り替えるには、通常、より複雑な手続きが必要になります 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 ブロックを 1 つ追加します。

エクスポート

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

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