【Excel】【CustomUI】任意のイメージをアイコンに指定する方法

<H1>はじめに</H1>
CustomUIで配置するボタンのイメージ指定の実装方法を記載

<H1>実装方法</H1>

ボタンのイメージ設定する方法は下記の２つ
<H3>1. コントロール「button」のプロパティ「imageMso」を指定する</H3>

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

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

https://ymrt.jp/imagemso/   

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

**例**
```xml:customUI14.xml
<button id="testImageMso" label="①" size="large" imageMso="HappyFace" onAction="btnTestImageMso_Click" /> 
```

表示結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/bea77b6a-e293-cd0b-c9e9-fd0431949007.png)

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

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

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

<H4>[手順]</H4>
※Custom UI Editor使用、ツール不使用の手順は後述


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

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/ad196303-84d9-7ec4-fc3a-8482d34348c8.png">

2\. イメージを選択

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/fd5f4cb3-b95d-4180-f5e2-ebe631dd004d.png">

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

<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/d3b2895f-7140-d87a-64a1-168dae44e4f4.png">

**例**
```xml:customUI14.xml
<button id="testImage" label="②" size="large" image="test1" onAction="btnTestImage_Click"/>  
```

表示結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/1ef05480-2672-6806-3977-1f76f7ba2253.png)


<H1>実装例</H1>

```xml: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>
```

<img width="650" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/f781411b-1585-4d69-688d-860328af083a.png">

<H1>ツール無しでの実装方法</H1>

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

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

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/75767549-ca22-b093-fc29-73301d36f07c.png">

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

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/f153ebc1-c4e5-ba2d-4f6b-356a3ed4ea64.png">

3\. 解凍する

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/d912353d-d47a-b03b-7108-0ccf99e59f3d.png">

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

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/8e63fdf0-c63d-eb0c-e636-c56a46dfd325.png">

```xml:解凍後フォルダ階層	
フォルダ	
	├[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 の編集
下記内容に書き換える

```xml:.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>
```

:::note info
編集内容について

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

```xml:.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 の編集
下記内容に書き換える

```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>
```
:::note info
編集内容について
属性「Types」内に下記の属性を追記する

```xml:.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.で解凍したフォルダの直下に下記のフォルダ階層、ファイルを作成する

```xml:追加する階層
フォルダ	
　└ customUI
　　　├_rels
　　　│　└customUI14.xml.rels
　　　├ images
　　　│　└ test1.png
　　　└customUI14.xml
```

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

```xml: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」で指定されている）

<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/608c9197-20ae-7203-c976-ae3fed86e6b9.png">

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

```xml: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>
```
4.4. フォルダ階層を全選択し、圧縮する

<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/eff9d88c-48b3-d0ba-f12b-2900fb8decd9.png">

　　　　　　　　　　　　　↓

<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/a8a287f6-22db-efa1-e91a-3b631c052cdc.png">

4.5. 圧縮したファイルの拡張子を「*.xlsx」に戻して開く
※下記は「[trash].zip」を「【CustomUI】任意のイメージをアイコンに指定する方法_aft.xlsx」に名前変更している

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/caaee69c-1965-c8c6-b408-90e18a092674.png">

完成
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/d05e5128-10c1-ba1a-290b-39e8ff1acafc.png">

Custom UI Editor無しで実装する場合は、各手順で些細なミスがあるだけで表示されなくなることが多々ある
よくある作業ミスは下記のとおり

* zipファイルの解凍を端折る（zipファイルに直接編集後ファイルを入れる）
* プロパティ名を誤る（大文字小文字の区別もあります）
* 文字コードを誤って保存する
* 存在しないidをプロパティ「image」で指定する

<H1>おまけ</H1>
自作アイコンの背景透過させる方法は次のリンクを参照<br>
ツール無しでも可能なのがありがたい

https://allabout.co.jp/gm/gc/54197/

今回作成したファイルは下記に配置してるので、参考までに

https://github.com/J-Tam/VBA/tree/main/sample/%E3%80%90Qiita%E3%80%91%E3%80%90CustomUI%E3%80%91%E4%BB%BB%E6%84%8F%E3%81%AE%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95