Windows Ribbon Framework ガイド

IronHSP の iron_ribbon_native.hsp + hspribbon.dll を使用して、 Office 風のネイティブリボン UI を HSP アプリケーションに組み込む方法を解説します。

1. 概要

Windows Ribbon Framework は Windows 7 以降に標準搭載されている UI コンポーネントです。 Office 2007 以降のリボンインターフェースと同じネイティブ品質で表示されます。

必要なもの

2. uicc.exe の入手方法

uicc.exe は Windows SDK に含まれています。

インストール方法

  1. Visual Studio Installer を開く
  2. 「個別のコンポーネント」タブを選択
  3. 「Windows 10 SDK」または「Windows 11 SDK」にチェック
  4. インストール

または Microsoft 公式サイトから単体でダウンロードできます。

パスの確認

C:\Program Files (x86)\Windows Kits\10\bin\10.0.XXXXX.0\x86\uicc.exe

複数バージョンがインストールされている場合は最新版を使用してください。

3. ワークフロー

┌──────────┐     uicc.exe      ┌──────────┐
│ ribbon.xml │ ──────────────→ │ ribbon.bml │  (バイナリマークアップ)
│ (XML定義)  │                  │ ribbon.rc  │  (リソーススクリプト)
│            │                  │ ribbon.h   │  (C/C++ ヘッダ)
└──────────┘                  └──────────┘
                                       │
                              hspribbon.dll が
                              自動的にリソース DLL を
                              生成してロード
                                       │
                                       ▼
                              ┌──────────────┐
                              │ リボン表示!     │
                              └──────────────┘
ポイント: rc.exe や link.exe は不要です。 hspribbon.dll が ribbon.bml + ribbon.rc + ribbon.h を読み取り、 UpdateResource API で一時 DLL にリソースを自動埋め込みします。

4. リボンマークアップ XML の書き方

4.1 基本構造

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://schemas.microsoft.com/windows/2009/Ribbon">

  <!-- コマンド定義 -->
  <Application.Commands>
    <Command Name="cmdNew" Id="101" LabelTitle="New" />
  </Application.Commands>

  <!-- ビュー定義 -->
  <Application.Views>
    <Ribbon>
      <Ribbon.Tabs>
        <Tab CommandName="cmdTabHome">
          <Group CommandName="cmdGrpFile">
            <Button CommandName="cmdNew" />
          </Group>
        </Tab>
      </Ribbon.Tabs>
    </Ribbon>
  </Application.Views>

</Application>

4.2 Command 要素の属性

属性説明例
Nameコマンド名 (必須、一意)"cmdNew"
Idコマンド ID (整数、HSP で識別に使用)"101"
LabelTitle表示テキスト"New"
TooltipTitleツールチップのタイトル"Create New File"
TooltipDescriptionツールチップの説明文"Creates a new document."
Keytipキーボードショートカット"N"

4.3 画像の指定

<Command Name="cmdNew" Id="101" LabelTitle="New">
  <Command.LargeImages>
    <Image Source="res\new32.bmp" />      <!-- 32x32 BMP -->
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="res\new16.bmp" />      <!-- 16x16 BMP -->
  </Command.SmallImages>
</Command>
画像フォーマット: 32bit BMP (BGRA) を使用します。PNG は使用できません。 サイズは 16x16 (Small) と 32x32 (Large) の 2 種類を用意してください。 高 DPI 対応が必要な場合は 20x20, 40x40, 48x48, 64x64 も追加できます。

4.4 コントロール種別

要素説明例
<Button>通常ボタンNew, Open, Save
<ToggleButton>トグル (ON/OFF)Bold, Italic
<CheckBox>チェックボックスRuler, Gridlines
<DropDownButton>ドロップダウンメニューFont Size
<SplitButton>分割ボタン (ボタン + ▼)Paste
<DropDownColorPicker>カラーピッカーFont Color
<Spinner>数値入力 (上下)Font Size
<ComboBox>コンボボックスFont Name
<InRibbonGallery>リボン内ギャラリーStyles
<DropDownGallery>ドロップダウンギャラリーShapes

4.5 SizeDefinition (グループ内レイアウト)

SizeDefinition説明
OneButtonボタン 1 個
TwoButtonsボタン 2 個
ThreeButtonsボタン 3 個
ThreeButtons-OneBigAndTwoSmall大 1 + 小 2
FourButtonsボタン 4 個
FiveButtonsボタン 5 個
(未指定)自動レイアウト

4.6 ApplicationMenu (ファイルメニュー)

<Ribbon.ApplicationMenu>
  <ApplicationMenu>
    <MenuGroup>
      <Button CommandName="cmdNew" />
      <Button CommandName="cmdOpen" />
      <Button CommandName="cmdSave" />
    </MenuGroup>
    <MenuGroup>
      <Button CommandName="cmdExit" />
    </MenuGroup>
  </ApplicationMenu>
</Ribbon.ApplicationMenu>

4.7 Quick Access Toolbar

<Ribbon.QuickAccessToolbar>
  <QuickAccessToolbar>
    <QuickAccessToolbar.ApplicationDefaults>
      <Button CommandName="cmdSave" />
      <Button CommandName="cmdUndo" />
      <Button CommandName="cmdRedo" />
    </QuickAccessToolbar.ApplicationDefaults>
  </QuickAccessToolbar>
</Ribbon.QuickAccessToolbar>

4.8 ColorTemplate (カラーピッカー)

<DropDownColorPicker CommandName="cmdFontColor" ColorTemplate="ThemeColors" />

ColorTemplate: ThemeColors / StandardColors / HighlightColors

5. コンパイル手順

uicc.exe ribbon.xml ribbon.bml /header:ribbon.h /res:ribbon.rc
出力ファイル説明
ribbon.bmlバイナリマークアップ (必須)
ribbon.rcリソーススクリプト (STRINGTABLE + BITMAP 参照)
ribbon.hコマンド ID の C/C++ ヘッダ
重要: ribbon.bml だけでなく、ribbon.rc と ribbon.h も 同じフォルダに配置してください。hspribbon.dll がこれらを読み取って テキストと画像を自動的にリソース DLL に埋め込みます。

6. HSP からの使い方

6.1 基本

#include "iron_ribbon_native.hsp"

screen 0, 1024, 600

; 初期化
ribbon_native_init

; BML ロード (.rc + .h + res/*.bmp も同じフォルダに必要)
ribbon_native_load_bml dir_cur + "\\ribbon.bml"

; イベントモード ON (メッセージ ID はユーザーが自由に設定可能)
ribbon_native_set_event_mode 1, 0x80C8

; oncmd でコマンドを受信
oncmd gosub *on_ribbon, 0x80C8
stop

*on_ribbon
    cmd_id = wparam    ; コマンド ID (ribbon.xml の Id 属性)
    cmd_verb = lparam  ; 0=Execute, 1=Preview, 2=CancelPreview
    mes "CMD=" + cmd_id
    return

6.2 API リファレンス

命令/関数説明
ribbon_native_initRibbon Framework 初期化
ribbon_native_load_bml "path"BML ファイルからリボンをロード
ribbon_native_load_xml "xml", "sdk_bin"XML から自動コンパイル&ロード (uicc.exe パス指定)
ribbon_native_set_event_mode sw, wm_idイベント通知 ON/OFF + メッセージ ID 設定
ribbon_native_pollポーリング方式でコマンド取得
ribbon_native_cmd_id()最後のコマンド ID
ribbon_native_cmd_verb()最後の verb (0/1/2)
ribbon_native_last_int()Toggle/Checkbox の値
ribbon_native_height()リボンの高さ (px)
ribbon_native_minimize swリボン最小化 (1) / 復元 (0)
ribbon_native_set_modes maskアプリケーションモード (32bit マスク)
ribbon_native_set_bgcolor r,g,b背景色変更
ribbon_native_destroy終了処理

7. トラブルシューティング

症状原因対策
リボンが表示されないBML ファイルが見つからないフルパスで指定する
テキストが表示されない.rc / .h ファイルが不足BML と同じフォルダに配置
画像が表示されないBMP ファイルが見つからないres/ フォルダに 32bit BMP を配置
load_bml が -6 を返すリソース DLL のロード失敗アンチウイルスの一時除外を確認
タブが「Yu Gothic UI」と表示古い BML を使っているuicc で再コンパイル

8. 参考リンク