このページは Cloud Translation API によって翻訳されました。

ブロックの構造

このドキュメントでは、ブロックのさまざまな部分について説明します。

接続

接続は、ブロックを接続できる場所と、接続できるブロックの種類を定義します。

接続には次の 4 種類があります。

接続タイプ	画像
出力接続
入力接続
以前の接続
次の乗り換え

出力接続と入力接続は相互に接続でき、次の接続と前の接続も相互に接続できます。接続チェックを使用して、接続をさらに制限できます。

カスタムレンダラを使用して、接続の形状をカスタマイズできます。

最上位の接続

ブロックには 3 つの接続があり、その使用は任意です。

ブロックには、ブロックの先端にあるオス型のジグソーコネクタとして表される単一の出力接続がある場合があります。出力接続は、ブロックの値を別のブロックに渡します。出力接続のあるブロックは、値ブロックと呼ばれます。

math_number ブロック。

ブロックの上部には前の接続（ノッチとして表示）があり、下部には次の接続（タブとして表示）がある場合があります。これにより、ブロックを縦に積み重ねて、一連のステートメントを表すことができます。出力接続のないブロックはステートメントブロックと呼ばれ、通常は前後の接続があります。

variables_set ブロック。

詳細については、トップレベルの接続をご覧ください。

フィールド

フィールドは、ブロック内の UI 要素の大部分を定義します。これには、文字列ラベル、プルダウン、チェックボックス、画像、文字列や数値などのリテラルデータの入力が含まれます。たとえば、このループブロックでは、ラベルフィールド、プルダウンフィールド、数値フィールドを使用しています。

複数のフィールドを含むブロック。

Blockly には、テキスト入力、カラー選択ツール、画像など、多くの組み込みフィールドが用意されています。独自のフィールドを作成することもできます。

詳細については、フィールドをご覧ください。

入力

入力は、フィールドと接続のコンテナです。ブロックは、入力が 1 つ以上の行にレンダリングされて作成されます。

入力には 4 種類あり、すべてにフィールド（ラベルを含む）を含めることができます。そのうちの 2 つには単一の接続が含まれます。カスタムレンダリングをサポートするカスタム入力を作成することもできます。

入力タイプ	接続タイプ	画像
ダミー入力	なし
行末の入力	なし
値の入力	入力接続
明細書の入力	次の乗り換え

これらの入力については、一連の例を通して説明します。ブロックを構成する入力、接続、フィールドの定義については、JSON のブロック構造と JavaScript のブロック構造をご覧ください。

ダミー入力

ダミー入力は、フィールドのコンテナにすぎません。接続はありません。たとえば、次の数値ブロックには、1 つの数値フィールドを含む 1 つのダミー入力があります。

ダミー入力と数値フィールドを含む数値ブロック。

より複雑な例として、2 つの数値を加算するブロックについて考えてみましょう。これは、3 つのフィールド（数値、ラベル、数値）を持つ単一のダミー入力から構築できます。

3 つのフィールドを持つダミー入力から構築された加算ブロック。

または、それぞれ 1 つのフィールドを持つ 3 つのダミー入力:

3 つのダミー入力から構築された加算ブロック。各入力は 1 つのフィールドで重み付けされます。

行末の入力

Blockly は、ヒューリスティックを使用して、すべての入力を 1 行でレンダリングするか、各入力を独自の行でレンダリングするかを決定します。入力が新しい行で始まるようにするには、前の入力として行末入力を使用します。

ダミー入力と同様に、行末入力にはフィールドを含めることができますが、接続はありません。たとえば、次の例は、2 つのフィールドを持つ行末入力と 1 つのフィールドを持つダミー入力から構築された加算ブロックです。行末の入力により、ダミー入力が新しい行にレンダリングされます。

行末入力によって 2 行に分割された追加ブロック。

値の入力

フィールドで受け入れられるものには制限があります。たとえば、数値フィールドには数値のみを入力できます。では、2 つの変数を足し合わせる場合はどうすればよいでしょうか？または、プロシージャ呼び出しの結果を別の計算の結果に追加しますか？この問題を解決するには、フィールドではなく入力接続を使用します。これにより、ユーザーは値ブロックを入力値として使用できます。

値入力には 0 個以上のフィールドが含まれ、入力接続で終わります。次のブロックは、加算ブロックの数値フィールドを入力接続に置き換えます。これは 2 つの値入力から構築されます。1 つ目はフィールドを含まず、2 つ目はラベルフィールドを含みます。どちらも入力接続で終わります。

2 つの値入力を持つ加算ブロック。

ステートメントの入力

最後の入力タイプはステートメント入力です。これには 0 個以上のフィールドが含まれ、次の接続で終わります。次の接続を使用すると、ステートメントブロックのスタックをブロック内にネストできます。たとえば、次の繰り返しブロックについて考えてみましょう。このブロックの 2 行目は、単一のラベルフィールドと次の接続を含むステートメント入力で構成されています。

ステートメント入力を含む繰り返しブロック。繰り返しステートメントをネストします。

ステートメントの入力は常に独自の行でレンダリングされます。次の if-then-else ブロックでは、最初の行に値の入力、次の 2 行にステートメントの入力があります。

then ステートメントと else ステートメントの入力が別々になっている if-then-else ブロック。

インライン入力と外部入力

入力はインラインまたは外部でレンダリングできます。これにより、値入力のコネクタがブロック内（インライン）または外側の端（外部）にレンダリングされるかどうか、入力が同じ行または異なる行にレンダリングされるかどうかを制御します。

同じブロックがインライン入力と外部入力で 1 回ずつレンダリングされています。

カスタムブロックを作成するときに、使用するブロックを指定することも、Blockly に決定させることもできます。詳細については、インライン入力と外部入力をご覧ください。

遊びに行こう！

入力、フィールド、接続について学ぶ最良の方法は、Blockly デベロッパーツールでブロックを作成し、inputs プルダウン（automatic、external、inline）でさまざまな設定を選択することです。

アイコン

入力、接続、フィールドに加えて、ブロックには 1 つ以上のアイコンを含めることができます。これらは、警告の表示、ブロックレベルのコメントの入力、ミューテーター UI の表示など、さまざまな用途で使用されます。たとえば、コメントアイコンとその関連エディタを含むブロックは次のようになります。

詳細については、Iconsをご覧ください。

ブロックと JavaScript オブジェクト

ブロック、入力、接続、フィールド、アイコンはすべて JavaScript オブジェクトです。

Blockly コンポーネント	基本クラス	サブクラス
ブロック	`Block`	`BlockSvg`
入力	`Input`	`DummyInput`
		`EndRowInput`
		`ValueInput`
		`StatementInput`
		カスタム入力
接続	`Connection`	`RenderedConnection`
フィールド	`Field`	`FieldTextInput`
		`FieldNumber`
		`FieldLabel`
		カスタムフィールド
		その他
アイコン	`Icon`	`CommentIcon`
		`MutatorIcon`
		`WarningIcon`
		カスタムアイコン

ブロック内のオブジェクトは、ツリー型のオブジェクトを形成します。ブロックのグラフィカル表現がこのツリーにどのように対応しているかを理解しておくと、ブロックをプログラムで操作するコードを記述する際に役立ちます。たとえば、controls_for ブロックは次のようになります。

変数フィールド、to、from、by の値入力、繰り返されるステートメントのステートメント入力を含むループブロック。

は、次の JavaScript オブジェクトのツリーに対応します。

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}