はじめに

CustomUIで配置するボタンのイメージ指定の実装方法を記載

実装方法

ボタンのイメージ設定する方法は下記の２つ

1. コントロール「button」のプロパティ「imageMso」を指定する

Microsoft Officeの組み込みアイコンとして定義されたidを指定することにより、idに対応したイメージを使用することが可能

imageMsoのidは下記サイトで探すのがおすすめ

idはイメージの意味に由来するため、キーワード検索でボタンの役割の応じたイメージを探しやすい

例

customUI14.xml

<button id="testImageMso" label="①" size="large" imageMso="HappyFace" onAction="btnTestImageMso_Click" />

表示結果

2. コントロール「button」のプロパティ「Image」を指定する

PC内に格納されたイメージを使用することが可能
筆者の知る限りでは実装方法が２種類あるが、簡単な方だけ記載する

記載しない方は属性「customUI」にプロパティ「loadImage」を記述し、VBAモジュールに実装したプロシージャからイメージを１件ずつ読み込みする方法である。
読み込むパスにイメージが端末内に存在しないと実行時エラーが起きるため、他人に配布したい場合には向かず実装もやや面倒。

[手順]

※Custom UI Editor使用、ツール不使用の手順は後述

1. イメージ追加したいファイルを開き、ボタン「Insert Icons」を押下

2. イメージを選択

3. イメージが追加される
追加されたイメージ名がidとなるため、コントロール「button」のプロパティ「image」で指定する

例

customUI14.xml

<button id="testImage" label="②" size="large" image="test1" onAction="btnTestImage_Click"/>

表示結果

実装例

customUI14.xml

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
  <ribbon>
    <tabs>
      <tab id="sampleRibbon" label="サンプルリボン">
        <group id="imageTest" label="イメージテスト">
            <button id="testImageMso" label="①" size="large" imageMso="HappyFace" onAction="btnTestImageMso_Click"/> 
            <button id="testImage" label="②" size="large" image="test1" onAction="btntestImage_Click"/>  
        </group>
      </tab>
    </tabs>
  </ribbon>
</customUI>

ツール無しでの実装方法

実装例と同じ内容をツール無しで１から実装する

1. 空白のブックを作成（下記は新規作成してからブック名だけ変更）

2. 拡張子を「.zip」に変更

3. 解凍する

4. フォルダ配下のファイルを編集する

解凍後フォルダ階層

フォルダ	
	├[trash]	
	│　└0000.dat	
	├_rels	
	│　└.rels	　　　　　　 －4.1.で編集
    ├4.3.の手順でcustomUIを追加
	├docProps	
	│　├app.xml	
	│　└core.xml	
	├xl	
	│　├_rels	
	│　├theme	
	│　├worksheets	
	│　├styles.xml	
	│　└workbook.xml	
	└[Content_Types].xml    －4.2.で編集

4.1. > _rels > .rels の編集
下記内容に書き換える

.rels

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties" Target="docProps/app.xml"/>
<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties" Target="docProps/core.xml"/>
<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/>
<Relationship Id="rId0" Type="http://schemas.microsoft.com/office/2007/relationships/ui/extensibility" Target="customUI/customUI14.xml"/>
</Relationships>

編集内容について

属性「Relationships」の中に下記を追記する

.rels

<Relationship Id="rId0" Type="http://schemas.microsoft.com/office/2007/relationships/ui/extensibility" Target="customUI/customUI14.xml"/>

丸ごと書き換えではなく自身で編集する場合、まず事前に値の置換すると見やすくなる
検索対象「><」、置換文字列「>\r\n<」 ※正規表現有で検索、属性ごとに改行される

4.2. > [Content_Types].xml の編集
下記内容に書き換える

[Content_Types].xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>
<Default Extension="bin" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.printerSettings"/>
<Default Extension="ico" ContentType="image/ico"/>
<Default Extension="bmp" ContentType="image/bmp"/>
<Default Extension="png" ContentType="image/png"/>
<Default Extension="jpg" ContentType="image/jpg"/>
<Default Extension="tif" ContentType="image/tif"/>
<Default Extension="xml" ContentType="application/xml"/>
<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>
<Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>
<Override PartName="/xl/theme/theme1.xml" ContentType="application/vnd.openxmlformats-officedocument.theme+xml"/>
<Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/>
<Override PartName="/docProps/core.xml" ContentType="application/vnd.openxmlformats-package.core-properties+xml"/>
<Override PartName="/docProps/app.xml" ContentType="application/vnd.openxmlformats-officedocument.extended-properties+xml"/>
</Types>

編集内容について
属性「Types」内に下記の属性を追記する

.rels

<Default Extension="bin" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.printerSettings"/>
<Default Extension="ico" ContentType="image/ico"/>
<Default Extension="bmp" ContentType="image/bmp"/>
<Default Extension="png" ContentType="image/png"/>
<Default Extension="jpg" ContentType="image/jpg"/>
<Default Extension="tif" ContentType="image/tif"/>

Extention="bin"以外の属性について、使用しない拡張子は記載不要だが、あっても困らないので記載している

4.3. フォルダ階層(> customUI)の追加
3.で解凍したフォルダの直下に下記のフォルダ階層、ファイルを作成する

追加する階層

フォルダ	
　└ customUI
　　　├_rels
　　　│　└customUI14.xml.rels
　　　├ images
　　　│　└ test1.png
　　　└customUI14.xml

4.3.1. > _rels > customUI14.xml.rels の編集
必ずUTF-8で保存する

customUI14.xml.rels

<?xml version="1.0" encoding="utf-8"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="images/test1.png" Id="test1" />
</Relationships>

4.3.2. > images にアイコンを配置

> _rels > customUI14.xml.rels の参照情報に紐づけされているのでファイル名に注意
（ファイル名は属性「Relationship」のプロパティ「Target」で指定されている）

4.3.3. > customUI14.xml の追加
こちらも必ずUTF-8で保存する

customUI14.xml

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
  <ribbon>
    <tabs>
      <tab id="sampleRibbon" label="サンプルリボン">
        <group id="imageTest" label="イメージテスト">
            <button id="testImageMso" label="①" size="large" imageMso="HappyFace" onAction="btnTestImageMso_Click"/> 
            <button id="testImage" label="②" size="large" image="test1" onAction="btnTestImage_Click"/>  
        </group>
      </tab>
    </tabs>
  </ribbon>
</customUI>