テーマ

テーマを使用すると、Blockly の外観をカスタマイズできます。ブロックの色、カテゴリの色、特定のコンポーネントは、Themes クラスでカスタマイズできます。追加のコンポーネントをカスタマイズする場合は、テーマ名を挿入 div のクラスとして指定します。これにより、ユーザーは CSS を使用してサポートされていないコンポーネントの外観を変更できます。テーマを作成する主な目的は、デベロッパーがよりアクセスしやすい Blockly エクスペリエンスを作成できるようにすることです。

テーマのプロパティ

テーマは、拡張するベーステーマ、ブロック、カテゴリ、コンポーネント、フォント用のスタイル オブジェクト、開始ブロックにハットを使用するかどうかなど、いくつかのプロパティを持つオブジェクトです。

ブロックスタイル

ブロック スタイルは次の 4 つのフィールドで構成されます。

  • colourPrimary（必須）- ブロックの背景色。
  • colourSecondary（省略可）- ブロックがシャドウ ブロックの場合の背景色。
  • colourTertiary（省略可）- ブロックの枠線またはハイライトの色。
  • hat（省略可）- 値が cap に設定されている場合、ブロックに帽子を追加します。ハットの詳細を学習する。

プライマリ カラー、セカンダリ カラー、ターシャリ カラーを指す矢印のあるブロック

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

テーマには、ブロックスタイル名とブロックスタイル オブジェクトのマッピングが含まれます。

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

カテゴリ スタイル

カテゴリ スタイルには、色のプロパティのみが保持されます。

  • 色（必須） - ツールボックスのカテゴリの色。通常、これらの色は、カテゴリ内のほとんどのブロックの colourPrimary と同じにする必要があります。これにより、ユーザーは特定のカテゴリに属するブロックを簡単に把握できます。

カテゴリごとに色が異なるツールボックスのスクリーンショット

const mathCategory = {
   'colour':'290'
}

テーマには、カテゴリ名とカテゴリ スタイル オブジェクトのマッピングが含まれます。

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

コンポーネント スタイル

テーマでは、以下のコンポーネントの色または値を設定できます。

  • workspaceBackgroundColour: ワークスペースの背景色
  • toolboxBackgroundColour: ツールボックスの背景色
  • toolboxForegroundColour: ツールボックス カテゴリのテキストの色
  • flyoutBackgroundColour: フライアウトの背景色
  • flyoutForegroundColour: フライアウト ラベルのテキストの色
  • flyoutOpacity: フライアウトの不透明度
  • scrollbarColour: スクロールバーの色
  • scrollbarOpacity: スクロールバーの不透明度
  • insertionMarkerColour: 挿入マーカーの色（色名は使用できません）
  • insertionMarkerOpacity: 挿入マーカーの不透明度
  • markerColour: キーボード ナビゲーション モードで表示されるマーカーの色
  • cursorColour: キーボード ナビゲーション モードで表示されるカーソルの色

他のほとんどのコンポーネントは、CSS でテーマ名を使用して変更できます。ただし、このリストにまだ含まれていないコンポーネントを変更したい場合や、CSS を使用して変更できないコンポーネントを変更したい場合は、詳細情報を添えて問題を報告してください。

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

フォント スタイル

フォント スタイルは、フォントのファミリー、ウェイト、サイズを保持するオブジェクトです。

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

スタート ハット

テーマ オブジェクトで startHats: true を直接設定すると、前方または出力接続のないすべてのブロックにハットが追加されます。帽子をつけるブロックをより細かく制御したい場合は、代わりに ブロック スタイル プロパティを使用できます。

カスタムテーマ

Blockly アプリケーションにテーマを追加するには、次の操作を行います。

  1. テーマを作成する
  2. スタイル名を追加する
  3. ワークスペースにテーマを設定する

テーマを作成する

テーマは、コンストラクタまたは defineTheme を使用して作成できます。defineTheme を使用すると、既存のテーマを簡単に拡張し、単一のオブジェクトですべての値を設定できます。テーマには名前があり、上記のブロックスタイル、カテゴリスタイルなどのプロパティを持つオブジェクトです。

テーマにはベーステーマを設定することもできます。ベーステーマには、カスタムテーマで指定されていない値のデフォルト値が設定されます。

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

defineTheme の使用例を次に示します。

スタイル名を追加する

テーマを作成したので、ブロックとカテゴリの定義にスタイルの名前を追加する必要があります。

カテゴリ

テーマの categoryStyles で定義されたカテゴリ スタイルのいずれかを使用するには、カテゴリ定義に追加します。

JSON

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

XML

<category name="Logic" categorystyle="logic_category"></category>

Blocks

テーマの blockStyles で定義されているブロックスタイルのいずれかを使用するには、ブロック定義に追加します。

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

テーマを設定する

また、使用するテーマを Blockly に指定する必要があります。同じブロックスタイルとカテゴリ名を使用する複数のテーマを定義することで、ユーザーが自分に最適なテーマを選択できるようにし、ブロック定義自体を変更しなくても動的に変更できるようにします。

初期テーマ

初期テーマを設定する最善の方法は、Blockly.inject の呼び出しに theme 構成オプションを含めることです。テーマは JSON または JavaScript で指定できます。

JSON

Blockly.inject('blocklyDiv', {
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   },
   ...
});

JavaScript

Blockly.inject('blocklyDiv', {
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   }),
   ...
});

テーマが指定されていない場合は、デフォルトでクラシック テーマが使用されます。

動的テーマ

テーマを動的に変更する場合（ユーザーがプルダウン メニューからテーマを選択できるようにする場合など）は、yourWorkspace.setTheme(theme) を呼び出します。

ブロックスタイル スクリプトを作成する

Blockly には、色相または 16 進数値のマップを受け取って、それらの二次色と三次色を計算するスクリプトが用意されています。スクリプトは scripts/themes フォルダにあります。

組み込みのテーマ

Blockly には、ユーザー補助向けのさまざまなテーマが用意されています。特に、特定の種類の色覚異常に対応しています。

また、