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

テーマ

テーマは、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'
   }
}

カテゴリのスタイル

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

Colour（必須） - ツールボックスのカテゴリの色。通常、これらの色は、カテゴリ内の大半のブロックの 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 を直接設定すると、以前の接続や出力の接続がないすべてのブロックに帽子が追加されます。どのブロックが帽子になるかを厳密に制御する場合は、代わりに block style のプロパティを使用します。

カスタムテーマ

Blockly アプリにテーマを追加する手順は次のとおりです。

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

テーマを作成する

テーマは、コンストラクタを使用するか、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 の使用例をご覧ください。

スタイル名を追加

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

ブロック

ブロックの定義方法によって、スタイル名の追加方法が決まります。ブロックの定義の詳細については、カスタムブロックのページをご覧ください。テーマの blockStyles プロパティで定義したブロックスタイルのいずれかをブロックに割り当てます。

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

テーマを設定する

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

最初のテーマ

初期テーマを設定するおすすめの方法は、挿入呼び出しに options.theme を含めることです。テーマは JSON または JavaScript で指定できます。

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

JavaScript

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

オプションの詳細については、構成ページをご覧ください。テーマが指定されていない場合、デフォルトでクラシックテーマが使用されます。

ダイナミックテーマ

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

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

Blockly は色相または 16 進値のマップを受け取り、それらの第 2 色と第 3 色を計算するスクリプトを提供します。スクリプトは、scripts/themes フォルダにあります。

組み込みのテーマ

Blockly にはユーザー補助のテーマが数多く用意されており、特に特定の種類の色覚障がいがあります。

その他:

クラシックテーマ
最新
ダークモード

テーマ

テーマのプロパティ

ブロックのスタイル

カテゴリのスタイル

コンポーネント スタイル

フォント スタイル

スタート帽子

カスタムテーマ

テーマを作成する

スタイル名を追加

Categories

ブロック

JSON

JavaScript

テーマを設定する

最初のテーマ

JSON

JavaScript

ダイナミック テーマ

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

組み込みのテーマ

コンポーネントスタイル

フォントスタイル

ダイナミックテーマ

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