メインコンテンツまでスキップ

リボン

  • リボンの UI 構成をマニフェストで拡張できます。
  • リボンのタブやグループを自由に構成して、そのリボン上にコマンドを呼び出すボタンやON/OFF状態を表示・変更するチェックボックスを配置できます。

リボンの要素

エクステンションで拡張可能なリボンの要素は次の通りです。

  • タブ
  • グループ
  • 単一コントロール
    • ボタン
    • チェックボックス
    • セパレータ
  • 複合コントロール
    • ボタングループ
    • スタックパネル
    • メニュー
    • スプリットボタン

要素ごとの詳細

タブ (tabsの要素)

  • リボンを構成するタブ

    リボンタブ

  • プロパティ

    キー説明値域必須か
    idタブを一意に識別するID。リボンの全構成要素でユニークな文字列。1ID を表す文字列必須
    labelタブのラベル任意の文字列必須
    orderBefore/orderAfterタブを追加する相対的な位置を示すリボン要素の ID。2
    未指定の場合は [ヘルプ] タブの前に追加されます。同じ ID のタブが既に存在する場合、新たなタブは追加されず、既存のタブの位置のままとなります。
    システム標準の組込みリボン要素の ID は リボン要素の ID を参照してください。    		ID を表す文字列-
    visible対象要素の表示状態。省略または true を指定すると表示。falseを指定すると非表示。"true", "false"-
    groupsタブを構成するグループの配列オブジェクト配列-

  • 子要素の種類

    • グループ

グループ (groupsの要素)

  • リボンタブ内を区分けするグループ

    グループ

  • プロパティ

    キー説明値域必須か
    id対象要素を一意に識別するID。リボンの全構成要素でユニークな文字列。1ID を表す文字列必須
    labelグループのラベル任意の文字列必須
    orderBefore/orderAfter対象要素を追加する相対的な位置を示すリボン要素の ID。2
    システム標準の組込みリボン要素の ID は リボン要素の ID を参照してください。    		ID を表す文字列-
    visible対象要素の表示状態。省略または true を指定すると表示。falseを指定すると非表示。"true", "false"-
    controlsグループ内に配置するコントロールの配列オブジェクト配列-

  • 子要素として配置できるコントロールの種類

    • Button
    • CheckBox
    • Separator
    • ButtonGroup
    • StackPanel
    • Menu
    • SplitButton

ボタン (type: Button)

  • リボン上のコマンド実行ボタン

    ボタン

    • ボタンを押下時に実行するコマンドを割り付けできます。
    • ボタンの有効／無効状態やトグル状態は割り付けられたコマンドと連動します。

  • プロパティ

    キー説明値域必須か
    type要素のタイプ。"Button"必須
    id対象要素を一意に識別するID。リボンの全構成要素でユニークな文字列。1ID を表す文字列必須
    labelボタンのラベル任意の文字列必須
    descriptionツールチップに表示される説明任意の文字列-
    orderBefore/orderAfter対象要素を追加する相対的な位置を示すリボン要素の ID。2ID を表す文字列-
    visible対象要素の表示状態。省略または true を指定すると表示。falseを指定すると非表示。"true", "false"-
    isEnabledボタンの有効／無効状態を保持するプロパティ名。省略すると割り付けたコマンドの状態に連動。プロパティ名を表す文字列-
    imageSmallボタンに表示する小さいアイコンの PNG ファイルパス。3相対パスを表す文字列-
    imageLargeボタンに表示する大きいアイコンの PNG ファイルパス。3相対パスを表す文字列-
    commandボタンに割り付けるコマンドの ID。ID を表す文字列必須

チェックボックス (type: CheckBox)

  • チェックボックス

    チェックボックス

    • isChecked プロパティで関連付けたプロパティの値に応じてチェックボックスの表示が変化します。
    • チェックボックスを操作すると関連付けたプロパティの値が更新されます。

  • プロパティ

    キー説明値域必須か
    type要素のタイプ。"CheckBox"必須
    id対象要素を一意に識別するID。リボンの全構成要素でユニークな文字列。1ID を表す文字列必須
    labelチェックボックスのラベル任意の文字列必須
    orderBefore/orderAfter対象要素を追加する相対的な位置を示すリボン要素の ID。2ID を表す文字列-
    visible対象要素の表示状態。省略または true を指定すると表示。falseを指定すると非表示。"true", "false"-
    isCheckedチェック状態を保持するプロパティ名プロパティ名を表す文字列必須

セパレータ (type: Separator)

  • セパレータ。

    セパレータ

  • プロパティ

    キー説明値域必須か
    type要素のタイプ。"Separator"必須
    idタブを一意に識別するID。リボンの全構成要素でユニークな文字列。1ID を表す文字列必須

ボタングループ (type: ButtonGroup)

  • 複数のボタンをツールバーのように横に並べて表示するコンテナ

    ボタングループ

  • プロパティ

    キー説明値域必須か
    type要素のタイプ。"ButtonGroup"必須
    id対象要素を一意に識別するID。リボンの全構成要素でユニークな文字列。1ID を表す文字列必須
    orderBefore/orderAfter対象要素を追加する相対的な位置を示すリボン要素の ID。2ID を表す文字列-
    visible対象要素の表示状態。省略または true を指定すると表示。falseを指定すると非表示。"true", "false"-
    controls並べて配置するコントロールの配列オブジェクト配列-

  • 子要素として配置できるコントロールの種類

    • Button（小）
    • Separator

スタックパネル (type: StackPanel）

  • 複数のボタンを縦に並べて表示するコンテナ

    スタックパネル

    • 小さいイメージのボタンを縦に並べて表示させたい場合に使用します。

  • プロパティ

    キー説明値域必須か
    type要素のタイプ。"StackPanel"必須
    id対象要素を一意に識別するID。リボンの全構成要素でユニークな文字列。1ID を表す文字列必須
    orderBefore/orderAfter対象要素を追加する相対的な位置を示すリボン要素の ID。2ID を表す文字列-
    visible対象要素の表示状態。省略または true を指定すると表示。falseを指定すると非表示。"true", "false"-
    controls並べて配置するコントロールの配列。最大3つのコントロールまで配置可能。オブジェクト配列-

  • 子要素として配置できるコントロールの種類

    • Button（小）
    • SplitButton（小）
    • CheckBox

メニュー (type: Menu)

  • 複数のボタンをプルダウンメニュー形式で表示するコンテナ

    メニュー

  • プロパティ

    キー説明値域必須か
    type要素のタイプ。"Menu"必須
    id対象要素を一意に識別するID。リボンの全構成要素でユニークな文字列。1ID を表す文字列必須
    orderBefore/orderAfter対象要素を追加する相対的な位置を示すリボン要素の ID。2ID を表す文字列-
    visible対象要素の表示状態。省略または true を指定すると表示。falseを指定すると非表示。"true", "false"-
    imageLargeボタンに表示するアイコンの PNG ファイルパス。相対パスを表す文字列-
    controls並べて配置するコントロールの配列オブジェクト配列-

  • 子要素として配置できるコントロールの種類

    • Button（小）
    • Separator

スプリットボタン (type: SplitButton)

  • それ自身を押下してコマンドを実行できるボタンの機能を持ち、さらにプルダウンメニュー形式で別のボタンも表示するコンテナ

    スプリットボタン

  • プロパティ

    キー説明値域必須か
    type要素のタイプ。"SplitButton"必須
    id対象要素を一意に識別するID。リボンの全構成要素でユニークな文字列。1ID を表す文字列必須
    labelボタンのラベル任意の文字列必須
    descriptionツールチップに表示される説明任意の文字列-
    orderBefore/orderAfter対象要素を追加する相対的な位置を示すリボン要素の ID。2ID を表す文字列-
    visible対象要素の表示状態。省略または true を指定すると表示。falseを指定すると非表示。"true", "false"-
    isEnabledボタンの有効／無効状態を保持するプロパティ名。省略すると割り付けたコマンドの状態に連動。プロパティ名を表す文字列-
    imageSmallボタンに表示する小さいアイコンの PNG ファイルパス。3相対パスを表す文字列-
    imageLargeボタンに表示する大きいアイコンの PNG ファイルパス。3相対パスを表す文字列-
    commandボタンに割り付けるコマンドの IDID を表す文字列必須
    controls並べて配置するコントロールの配列オブジェクト配列-

  • 子要素として配置できるコントロールの種類

    • Menu

多言語対応

  • label, description プロパティの値も多言語対応（ローカライズ）できます。
  • プロパティの値に表示文字列を指定する代わりに、"%リソース文字列名%" のように指定することで、ローカライズされたロケールファイル中のリソース文字列に置き換えられます。
note

多言語対応の詳細については、 高度なトピック > 多言語対応 を参照してください。

リボンの定義例

manifest.json
{
  "name": "My Extensition",
  "main": "main.cs",
  "lifecycle": "project",
  "baseprofile": "MBD",
  "extensionPoints": {
    "ribbon": {
      "tabs": [
        {
          "id": "MBD",
          "label": "MBD",
          "orderAfter": "System.View",
          "groups": [
            {
              "id": "MbdSync",
              "label": "ブロック",
              "controls": [
                {
                  "id": "MbdSync.CreateBlock",
                  "type": "Button",
                  "label": "ブロックの作成",
                  "imageLarge": "resources/createBlock.png",
                  "command": "myExtension.createBlock"
                },
                {
                  "id": "MbdSync.Menu",
                  "type": "Menu",
                  "label": "ブロックの更新",
                  "imageLarge": "resources/blocks.png",
                  "controls": [
                    {
                      "id": "MbdSync.UpdateAllBlocks",
                      "type": "Button",
                      "imageSmall": "resources/updateAllBlocks.png",
                      "label": "一括更新",
                      "description": "ブロックを一括更新します",
                      "command": "myExtension.updateAllBlocks"
                    },
                    {
                      "id": "MbdSync.Separator",
                      "type": "Separator"
                    },
                    {
                      "id": "MbdSync.UpdateBlock",
                      "type": "Button",
                      "imageSmall": "resources/updateBlock.png",
                      "label": "更新",
                      "description": "選択されたブロックを更新します",
                      "isEnabled": "IsBlockSelected",
                      "command": "myExtension.updateBlock"
                    }
                  ]
                },
                {
                  "id": "MbdSync.StackPanel",
                  "type": "StackPanel",
                  "controls": [
                    {
                      "id": "MbdSync.UpdateAllBlocks",
                      "type": "Button",
                      "imageSmall": "resources/updateAllBlocks.png",
                      "label": "ブロックの一括更新",
                      "description": "ブロックを一括更新します",
                      "command": "myExtension.updateAllBlocks"
                    },
                    {
                      "id": "MbdSync.UpdateBlock",
                      "type": "Button",
                      "imageSmall": "resources/updateBlock.png",
                      "label": "ブロックの更新",
                      "description": "選択されたブロックを更新します",
                      "isEnabled": "IsBlockSelected",
                      "command": "myExtension.updateBlock"
                    }
                  ]
                }
              ]
            },
            {
              "id": "CodeGen",
              "label": "コード生成",
              "controls": [
                {
                  "id": "CodeGen.GenerateCode",
                  "type": "Button",
                  "label": "コード生成",
                  "imageLarge": "resources/generate.png",
                  "command": "myExtension.generateCode"
                }
              ]
            }
          ]
        }
      ]
    },
    "commands": [
      {
        "id": "myExtension.createBlock",
        "execFunc": "createBlock"
      },
      {
        "id": "myExtension.updateAllBlocks",
        "execFunc": "updateAllBlocks"
      },
      {
        "id": "myExtension.updateBlock",
        "execFunc": "updateBlock"
      },
      {
        "id": "myExtension.generateCode",
        "execFunc": "generateCode"
      }
    ]
  }
}
  1. 既存の構成要素と同じIDを指定すると、同じ構成要素に統合されます。それ以外の場合は新規の構成要素が作成されます。↩
  2. 相対的な位置を示す兄弟要素の ID を指定できます。 指定した要素の前（orderBefore)か、その後ろ（orderAfter）のいずれかを指定できます。 タブ以外の要素に対して未指定の場合は兄弟要素の末尾に追加されます。↩
  3. imageSmall, imageLarge のいずれか一方を設定します。表示されるアイコンのサイズはリボン内のレイアウトに応じて調整されます。StackPanel の要素には imageSmall を設定します。↩
に最終更新