調査アンケート: Blockly のご利用体験についてお聞かせください

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

プルダウンフィールド

プルダウンフィールドには、値として文字列が、テキストとして文字列が格納されます。「 value は言語に依存しないキーで、テキストと Blockly を言語間で切り替えたときには翻訳されません。テキストはユーザーに表示される、人が読める形式の文字列。

プルダウンフィールド

エディタが開いた状態のプルダウンフィールド

折りたたまれたブロックのプルダウンフィールド

作成

プルダウンコンストラクタは、メニュージェネレータとオプションのバリデータ。メニュー生成ツールには基本的には複数のオプションからなり、各オプションにはそして言語に依存しない文字列です

シンプルなテキストプルダウン

2 つのテキストオプションを含むプルダウンを開く

JSON

{
  "type": "example_dropdown",
  "message0": "drop down: %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "FIELDNAME",
      "options": [
        [ "first item", "ITEM1" ],
        [ "second item", "ITEM2" ]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['example_dropdown'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('drop down:')
        .appendField(new Blockly.FieldDropdown([
            ['first item', 'ITEM1'],
            ['second item', 'ITEM2']
        ]), 'FIELDNAME');
  }
};

人が読める形式の情報と言語に依存しない鍵を分けるを使用すると、言語間でプルダウンメニューの設定を維持できます。対象ブロックの英語バージョンでは [['left', 'LEFT'], ['right', 'RIGHT]] が定義され、同じブロックのドイツ語バージョンでは [['links', 'LEFT'], ['rechts', 'RIGHT]] が定義されます。

画像のプルダウン

プルダウンメニューのオプションは、テキストではなく画像にすることもできます。イメージオブジェクトは src、width、height、alt の各プロパティで指定されています。

なお、プルダウンにはテキストオプションと画像のオプションを混在させることができますが、現在、個々のオプションに画像とテキストの両方を含めることはできません。

画像とテキストを含むプルダウンフィールド

JSON

{
  "type": "image_dropdown",
  "message0": "flag %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "FLAG",
      "options": [
        ["none", "NONE"],
        [{"src": "canada.png", "width": 50, "height": 25, "alt": "Canada"}, "CANADA"],
        [{"src": "usa.png", "width": 50, "height": 25, "alt": "USA"}, "USA"],
        [{"src": "mexico.png", "width": 50, "height": 25, "alt": "Mexico"}, "MEXICO"]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['image_dropdown'] = {
  init: function() {
    var input = this.appendDummyInput()
        .appendField('flag');
    var options = [
        ['none', 'NONE'],
        [{'src': 'canada.png', 'width': 50, 'height': 25, 'alt': 'Canada'}, 'CANADA'],
        [{'src': 'usa.png', 'width': 50, 'height': 25, 'alt': 'USA'}, 'USA'],
        [{'src': 'mexico.png', 'width': 50, 'height': 25, 'alt': 'Mexico'}, 'MEXICO']
    ];
    input.appendField(new Blockly.FieldDropdown(options), 'FLAG');
  }
};

動的なプルダウン

曜日のプルダウンフィールド

JSON

{
  "type": "dynamic_dropdown",
  "message0": "day %1",
  "args0": [
    {
      "type": "input_dummy",
      "name": "INPUT"
    }
  ],
  "extensions": ["dynamic_menu_extension"]
}

Blockly.Extensions.register('dynamic_menu_extension',
  function() {
    this.getInput('INPUT')
      .appendField(new Blockly.FieldDropdown(
        function() {
          var options = [];
          var now = Date.now();
          for(var i = 0; i < 7; i++) {
            var dateString = String(new Date(now)).substring(0, 3);
            options.push([dateString, dateString.toUpperCase()]);
            now += 24 * 60 * 60 * 1000;
          }
          return options;
        }), 'DAY');
  });

これには JSON 関数を使用して拡張機能:

JavaScript

Blockly.Blocks['dynamic_dropdown'] = {
  init: function() {
    var input = this.appendDummyInput()
      .appendField('day')
      .appendField(new Blockly.FieldDropdown(
        this.generateOptions), 'DAY');
  },

  generateOptions: function() {
    var options = [];
    var now = Date.now();
    for(var i = 0; i < 7; i++) {
      var dateString = String(new Date(now)).substring(0, 3);
      options.push([dateString, dateString.toUpperCase()]);
      now += 24 * 60 * 60 * 1000;
    }
    return options;
  }
};

静的なリストの代わりに、関数でプルダウンを指定することもできます。オプションです。これにより、オプションを動的に設定できます。この関数は同じ [human-readable-value, language-neutral-key] 内のオプションの配列静的オプションとしてエクスポートできます。プルダウンがクリックされるたびにオプションが再計算されます

シリアル化

JSON

プルダウンフィールドの JSON は次のようになります。

{
  "fields": {
    "FIELDNAME": "LANGUAGE-NEUTRAL-KEY"
  }
}

ここで、FIELDNAME はプルダウンフィールドを参照する文字列です。 value は、フィールドに適用する値です。この値は言語に依存しないオプションキー。

XML

プルダウンフィールドの XML は次のようになります。

<field name="FIELDNAME">LANGUAGE-NEUTRAL-KEY</field>

フィールドの name 属性にプルダウンを参照する文字列が含まれる場合フィールド、内部テキストはフィールドに適用する値です。内部言語に依存しない有効なオプションキーにする必要があります。

カスタマイズ

プルダウン矢印

Blockly.FieldDropdown.ARROW_CHAR プロパティを使用すると、プルダウン矢印を表す Unicode 文字。

カスタム矢印が付いたプルダウンフィールド

ARROW_CHAR プロパティの既定値は、Android では \u25BC（↓）、\u25BE（▾）です。できません。

これはグローバルプロパティであるため、設定されるとすべてのプルダウンフィールドが変更されます。

メニューの高さ

Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH プロパティを使用すると、メニューの最大の高さ。これはビューポートの割合として定義され、ビューポートがウィンドウになります

MAX_MENU_HEIGHT_VH プロパティのデフォルト値は 0.45 です。

これはグローバルプロパティであるため、設定されるとすべてのプルダウンフィールドが変更されます。

接頭辞/接尾辞の一致

すべてのプルダウンメニューのオプションに共通の接頭辞や接尾辞が使われている場合これらの単語は自動的に除去され、静的なテキストとして挿入されます。たとえば、同じブロックを作成する方法は 2 つあります（1 つ目はが次が含まれ、2 番目は次が指定されます）。

サフィックスマッチングを使用しない場合:

JSON

{
  "type": "dropdown_no_matching",
  "message0": "hello %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        ["world", "WORLD"],
        ["computer", "CPU"]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['dropdown_no_matching'] = {
  init: function() {
    var options = [
      ['world', 'WORLD'],
      ['computer', 'CPU']
    ];

    this.appendDummyInput()
        .appendField('hello')
        .appendField(new Blockly.FieldDropdown(options), 'MODE');
  }
};

サフィックスマッチングを使用する場合:

JSON

{
  "type": "dropdown_with_matching",
  "message0": "%1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        ["hello world", "WORLD"],
        ["hello computer", "CPU"]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['dropdown_with_matching'] = {
  init: function() {
    var options = [
      ['hello world', 'WORLD'],
      ['hello computer', 'CPU']
    ];

    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown(options), 'MODE');
  }
};

プルダウンフィールド

このアプローチの利点の一つは、ブロックを他の言語にも対応しています。前のコードには、文字列 'hello'、'world'、および 'computer'。修正されたコードには文字列 'hello world' と 'hello computer'。翻訳者はフレーズを翻訳するのに使用できます。

このアプローチのもう一つの利点は、単語の順序が対応しています。'world hello' と 'computer hello' を使用する言語を想像してみてください。サフィックスマッチングアルゴリズムが共通の 'hello' を検出して表示しますプルダウンから選びます

ただし、接頭辞/接尾辞の一致は失敗することがあります。一部のケースでは 2 つの単語は常に一緒になり、接頭辞は除外されません。たとえば、'drive red car' と 'drive red truck' は、間違いなく 'drive red' ではなく 'drive' を除算します。Unicode の非互換性通常のスペースの代わりにスペース '\u00A0' を使用すると、一致します。したがって、上記の例は、次のコマンドで修正できます。 'drive red\u00A0car' と 'drive red\u00A0truck'。

接頭辞/接尾辞のマッチングが失敗するもう一つの問題は、単語をスペースで区切ることができます。中国語が良い例です。文字列 '訪問中國' は 'visit China' を意味します。単語間にスペースがないことに注意してください。まとめると、最後の 2 文字（'中國'）は 'China' を指す単語です。分割する場合はそれぞれ 'centre' と 'country' を意味します。中国語などの言語では、接頭辞/接尾辞のマッチングが機能します。必要な部分にスペースを挿入しますたとえば、'訪問中國' と '訪問美國' は "visit [China/USA]" になりますが、'訪問中國' と '訪問美國' は "visit [centre/beautiful] country" になります。

プルダウンバリデータを作成する

プルダウンフィールドの値は言語に依存しない文字列であるため、バリデータはすべて文字列を受け入れ、使用可能なオプションである文字列、null、または undefined。

バリデータによって他の値が返された場合、Blockly の動作は未定義となり、プログラムがクラッシュする可能性があります。

たとえば、3 つのオプションと 1 つのプルダウンを含む使用します。

validate: function(newValue) {
  this.getSourceBlock().updateConnections(newValue);
  return newValue;
},

init: function() {
  var options = [
   ['has neither', 'NEITHER'],
   ['has statement', 'STATEMENT'],
   ['has value', 'VALUE'],
  ];

  this.appendDummyInput()
  // Pass the field constructor the options list, the validator, and the name.
      .appendField(new Blockly.FieldDropdown(options, this.validate), 'MODE');
}

validate は常に渡された値を返しますが、ヘルパーを呼び出します。プルダウンに基づいて入力を追加または削除できる関数 updateConnection value:

updateConnections: function(newValue) {
  this.removeInput('STATEMENT', /* no error */ true);
  this.removeInput('VALUE', /* no error */ true);
  if (newValue == 'STATEMENT') {
    this.appendStatementInput('STATEMENT');
  } else if (newValue == 'VALUE') {
    this.appendValueInput('VALUE');
  }
}

プルダウン フィールド

プルダウン フィールド

エディタが開いた状態のプルダウン フィールド

折りたたまれたブロックのプルダウン フィールド

作成

シンプルなテキスト プルダウン

JSON

JavaScript

画像のプルダウン

JSON

JavaScript

動的なプルダウン

JSON

JavaScript

シリアル化

JSON

XML

カスタマイズ

プルダウン矢印

メニューの高さ

接頭辞/接尾辞の一致

JSON

JavaScript

JSON

JavaScript

プルダウン バリデータを作成する

プルダウンフィールド

プルダウンフィールド

エディタが開いた状態のプルダウンフィールド

折りたたまれたブロックのプルダウンフィールド

シンプルなテキストプルダウン

プルダウンバリデータを作成する