ツール - Glyph Browser - 指定フォント文字コード一覧

## はじめに

お世話になったツールの紹介をしようと思います。
フォントフォールバック グリフがグレーアウトで識別できる、指定フォント グリフを文字コード一覧で表示するツールです。

## Glyph Browser

https://apps.microsoft.com/detail/9wzdncrdlxt7?hl=ja-jp&gl=JP

Microsoft Store で公開されているフリーソフトです。
指定したフォントで、文字コード一覧を表示します。
Microsoft Store の説明を見ると「Segoe UI Symbol」Windows アイコングリフを調べるために開発したとのこと。


### 基本操作

起動すると、スプラッシュ表示して、Calibri フォントで文字コード一覧を表示します。

![GlyphBrowser-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/05cb9612-eb44-40a4-a3b5-7d5d67b712a3.png)

![GlyphBrowser-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/c43cada6-58c4-4ad0-baa1-b797b558cc12.png)

右上フォント名を選択すると、フォント一覧が表示されて、フォントを選択できます。

![GlyphBrowser-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/2c02bfed-c198-4754-8510-5442093d56bc.png)

![GlyphBrowser-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/de8f6b56-6ab0-4bf3-b6a0-9046dfb78291.png)

左端中央/右端中央を選択（もしくは、マウススクロール）でページ送りができ、左上コード範囲を選択すると、表示するコード範囲を選択できます。

![GlyphBrowser-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/5d2e462d-56d7-4aec-901a-10953b1d4e20.png)

![GlyphBrowser-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/6b52efed-43b8-42a6-8147-eda8c4e879cd.png)

### フォールバック適用確認

Glyph Browser の良い点は、対象フォントにグリフ（字形）登録されていない文字コードについて、グレーアウト表示でフォールバック適用（代替フォント利用）グリフが表示されることです。
対象フォントに存在しない文字コードのフォールバック グリフをグレーアウト表示してくれるので、どの文字が存在しないかを視覚的に確認できます。

::: note
「IMEパッド - 文字一覧」右上でフォントを選択でも、対象フォントで文字コード一覧表示できますが、フォールバック適用を確認することができません。
:::

例えば OCRB フォントでは、U+2202, U+2206,... とオレンジ系背景色の文字コードが、対象フォントにグリフ登録されている文字コードです。
グレーアウトされている U+2200, U+2201, U+2203,... は、対象フォントにグリフ登録されていない文字コードです。

![GlyphBrowser-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/dcdbc3c9-f71d-4496-8f55-75107410a99c.png)


### フォント毎のグリフ確認

フォント一覧で、任意の文字コードを選択すると、対象文字コードについて、フォント毎のグリフを確認することができます。
例えば、U+2264 を選択すると、対象文字コードのフォント毎のグリフ一覧画面となります。

![GlyphBrowser-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/bff355c9-9e76-43d6-be96-c609a04a1357.png)

![GlyphBrowser-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/428c7266-e119-4ae6-bba8-ba644f327123.png)

オレンジ系背景色の字形は、対象フォントのグリフです。
背景色なしは、対象フォントに該当文字コードのグリフが存在していません。

::: note
「HG正楷書体-PRO」「HG行書体」などは、フォールバック適用されていますが、「MS Outlook」などではフォールバック適用されず、指定フォントに存在しない文字コードは四角表示となっています。
※ソース公開されていないので、どのような判断かは確かではありません。
:::

### Windows アイコングリフ

冒頭に記載した Glyph Browser 開発目的の Windows アイコンフォントは下記です。

| アイコンフォント | 対象                                              |
| --------------- | ------------------------------------------------ |
| Segoe UI Symbol     |  Windows 7/8/8.1 デザインガイドに沿ったアイコン |
| Segoe MDL2 Assets   |  Windows 10 デザインガイドに沿ったアイコン      |
| Segoe Fluent Icons  |  Windows 11 デザインガイドに沿ったアイコン      |

アイコングリフは「Private Use Area（E000-F8FF）」に存在します。
E000 から E5FF はレガシー（Segoe UI Symbol）領域で、Segoe MDL2 Assets, Segoe Fluent Icons は E700 以降が対象です。

::: note
C# ツールなどで、Button フォントを Segoe Fluent Icons にして、button1.Text = "\uE715" のように使うこともありました。
:::

**Microsoft サイトの情報**

https://learn.microsoft.com/ja-jp/typography/font-list/segoe-ui-symbol

https://learn.microsoft.com/ja-jp/windows/apps/design/style/segoe-ui-symbol-font

https://learn.microsoft.com/ja-jp/windows/apps/design/style/segoe-fluent-icons-font

**ツールでの表示**

![GlyphBrowser-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/e7507c13-7c1a-4985-a3ed-f0c3ad28ca4d.png)

![GlyphBrowser-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/d33d3293-bb30-4b4b-af8e-853632c67719.png)

![GlyphBrowser-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/aa09aab2-b4b0-423f-be55-568fb8ed2307.png)


## 類似ツール

フォント格納グリフの一覧表示ツールも掲載しておきます。

### charmap

```
C:\Windows\System32\charmap.exe
```

Windows 標準搭載ツールで、選択したフォントに登録されているグリフを一覧表示します。  
本ツールでの表示は、登録されているグリフを文字コード順で列挙しています。  
このため、有効な文字コードでも、該当フォントにグリフ登録されていない場合は、詰めて表示されます。  

![charmap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/6c913bc2-4921-4da8-955b-ed38f5deb645.png)

選択したグリフの文字コードは、下部ステータスバーに表示されます。


### Charctor Map UWP

https://apps.microsoft.com/detail/9wzdncrdxf41?rtc=1&hl=ja-jp&gl=jp

https://github.com/character-map-uwp/Character-Map-UWP

Microsoft Store、GitHub で公開されているフリーソフトです。  
基本的な機能は、前述 charmap と同等で、こちらのほうが使い勝手は良いです。 

![CharctorMapUWP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963267/fff1b6b5-7ee7-4267-b2e8-04c7874edc2e.png)