ブロックに関するヘルプ

ブロックに関するヘルプは、ツールチップとヘルプ URL の形式で提供できます。

ツールチップ

ツールチップは、ユーザーがブロックにカーソルを合わせたときにすぐに表示されるヘルプです。テキストが長い場合は、自動的に折り返されます。

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

JavaScript API では、ツールチップを静的文字列ではなく関数として定義することもできます。これにより、動的ヘルプが可能になります。選択したプルダウン オプションに応じて変化するツールチップの例については、math_arithmetic をご覧ください。

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_ADD'],
        'MINUS': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MINUS'],
        'MULTIPLY': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MULTIPLY'],
        'DIVIDE': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_DIVIDE'],
        'POWER': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_POWER']
      };
      return TOOLTIPS[mode];
    });
  }
};

JavaScript API を使用すると、ブロックで、ツールチップ文字列を返す静的文字列ではなく、関数を指定できます。これにより、動的なツールチップが可能になります。math_arithmetic の例をご覧ください。

カスタマイズ

カスタム レンダリング関数を指定することで、ツールチップの外観をカスタマイズすることもできます。2 つのパラメータを受け入れる関数を作成します。

  • まず、コンテンツをレンダリングする <div> 要素
  • 2 つ目は、マウスオーバーしている実際の要素で、ツールチップを表示する要素です。

関数本体で、任意のコンテンツを div にレンダリングできます。マウスオーバーされたブロックで定義されたツールチップ文字列を取得するには、Blockly.Tooltip.getTooltipOfObject(element); を呼び出します。ここで、element は上記の 2 番目のパラメータです。

最後に、Blockly が適切なタイミングで呼び出せるように、この関数を登録します。

Blockly.Tooltip.setCustomTooltip(yourFnHere);

例については、カスタム ツールチップのデモをご覧ください。

ヘルプの URL

ブロックにはヘルプページを関連付けることができます。ブロックを右クリックし、コンテキスト メニューから [ヘルプ] を選択すると、この機能が表示されます。この値が null の場合、「ヘルプ」アイテムは表示されません。

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

JavaScript API を使用すると、ブロックで URL 文字列を返す静的文字列ではなく関数を指定できるため、動的ヘルプが可能になります。