ワークスペースのコメント

ワークスペースのコメントは、テキストを入力できるグラフィック要素です。通常は、テキストベースのプログラミング言語のコメントと同様に、コードに関する情報を文書化するために使用されます。

ワークスペースのコメント

ワークスペースのコメントを有効にする

アプリケーションでワークスペースのコメントを有効にするには、コメントを作成するための手段をユーザーに提供する必要があります。そのための 1 つの方法は、ワークスペースのコメントを作成するコンテキストメニュー項目を追加することです。次のコードを使用して、デフォルトのコンテキストメニュー項目を登録して、ワークスペースのコメントを作成、削除、複製できます。

// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();

独自のコンテキストメニューオプションを作成したり、ユーザーがワークスペースのコメントを追加する別の方法を追加したりすることもできます。コンテキストメニューのオプションについて詳しくは、コンテキストメニューをご覧ください。

コメントを視覚的にカスタマイズする

ワークスペースのコメントの外観は、いくつかの方法でカスタマイズできます。これらのアセットでは CSS を使用し、テーマは使用しません。コメントのさまざまな部分の色とサイズの大部分は制御できますが、配置方法には影響しません。

CSS 変数の色を設定する

commentFillColour css 変数を設定すると、テキスト領域の背景色を変更できます。commentBorderColour css 変数を設定すると、コメントの上部バーとコメントの枠線の色を変更できます。

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

色が変更されたワークスペースのコメント

CSS クラス

コメントビューの各要素には、さまざまな CSS クラスが割り当てられており、要素のスタイルを変更できるようになっています。

CSS クラス	画像
blocklyComment、blocklyDraggable
blocklySelected、 blocklyCommentHighlight
blocklyCollapsed
blocklyCommentTopbar
blocklyFoldoutIcon
blocklyCommentPreview、 blocklyText
blocklyDeleteIcon
blocklyText
blocklyResizeHandle

CSS の基本的な使用方法

ほとんどの場合、適切な CSS クラスを使用してカスタム属性を適用できます。

.blocklyCommentTopbarBackground {
  height: 50px;
}

上部バーが高くなったワークスペースのコメント

テキスト用 CSS

ただし、テキストの場合は、レンダラによって生成された CSS をオーバーライドするために、より具体的にする必要があります。

/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: blue;
}

/* Modifies the input text. */
.blocklyComment .blocklyText {
  color: blue;
}

青色のプレビューテキスト付きのワークスペースのコメント

青色の入力テキストが付いたワークスペースのコメント

選択したハイライトの CSS

また、選択時にコメントをハイライト表示するには、コメントが折りたたまれているかどうかに応じて、CSS が適用されるオブジェクトが変わります。折りたたまれているときに CSS を blocklyCommentTopbarBackground に適用し、それ以外の場合は blocklyCommentHighlight に適用します。

/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
  stroke: #fc3;
  stroke-width: 3px;
}

/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
  stroke: none;
}

/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
  stroke: #fc3;
  stroke-width: 3px;
}

アイコン

blocklyFoldoutIcon クラス、blocklyDeleteIcon クラス、blocklyResizeHandle クラスはすべて <image> 要素に適用されます。つまり、アイコンの色や形を変更する場合は、メディアフォルダに別の画像を含めることができます。

イメージ名	画像
foldout-arrow.svg
delete-icon.svg
resize-handle.svg

削除アイコン

削除アイコンはデフォルトで非表示になっています。有効にする場合は、CSS を使用して表示する必要があります。

.blocklyDeleteIcon {
  display: block;
}