Font Viewer を作りました
以下の Github にて公開していますので、ダウンロードして使ってみてください。
以降はなぜ作ったのかや、実装するための技術的な情報について落としておきます。
はじめに
最近 GIMP という画像編集ソフトを触る機会があり、様々なテキストを画像内に配置していました。その際にどのフォントを当てようか悩む事が多々あり、この不満を解消できるようなフォント一覧化ツールを探しましたが、自分で追加したフォントが一覧ツールに表示されませんでした。
色々調べてみた所、フォントの追加には「システムにインストール」と「個人のプロファイルにインストール」する2種類ある事が分かりました。
どうやら既存のツールはこの「システムにインストール済み」のフォントは表示できるが、後者に未対応であったようでした。調べたそのままの流れで、せっかくならば作ってしまおうと思い、リリースするに至りました。
実行環境
- Windows 11 Pro 23H2
使用技術
- PowrShell
- Webview2
- HTML/CSS/JS+jQuery
PowerShell + WebView2 について
私の過去の記事をご参照ください。古い記事で拙い点も多いですが。。。
フォント一覧の取得(システムに追加されているフォント)
PowerShell で フォント一覧を取得するのは以下のように実行するだけで取得できます。
Add-Type -AssemblyName System.Drawing
(New-Object System.Drawing.Text.InstalledFontCollection).Families.Name
ただし、このコードで取得できるのは「システム」にインストールされたフォントのみとなります。
フォントの管理フォルダは「システム」用以外にも、ユーザプロファイル配下にも存在するため、そちら側の情報も拾えるようにする必要がありました。
フォント一覧の取得(一般権限で追加したフォント)
一般権限で追加したフォントはユーザプロファイル配下の %LOCALAPPDATA%\Microsoft\Windows\Fonts\ に追加されます。
このフォルダ直下のファイルをそのままフォントとして指定したいのですが、フォントを利用する際にはフォントのファイル名ではなく、それ自身のフォント名を指定する必要があります。
以下の要領でフォントファイルからフォント名を取得します。
Add-Type -AssemblyName System.Drawing
$fo = New-Object System.Drawing.Text.PrivateFontCollection
$fo.AddFontFile($fontPath)
$fo.Families.Name
WebView2 でブラウザで見れるようにする
WebView2 の技術を使うと、スクリプトやプログラムに MS Edge を埋め込む事ができます。
これを活用して以下のように実装しました。
- PowerShell でフォント一覧を取得する(システム及びユーザ追加分)
- WebView2 でウィンドウの一部としてブラウザを表示する
- PowerShell から WebView2 に利用可能なフォント一覧を送信してサンプルを表示
[PowerShell] と [PowerShell から起動した WebView2] は専用のメソッドでメッセージング通信が可能になります。
ブラウザ側のレンダリングが落ち着いたらフォント情報を要求し、PowerShell 側から取得したフォント名を送る事にしました。
ブラウザ側でのフォントの表示
システムにインストール済みのフォントは CSS で font-family を指定すれば普通に使えました。しかし、ユーザプロファイル配下に追加したフォントは、デフォルトではブラウザから利用ができませんでした。そこで、font-face を用いてローカルファイルを参照可能にする方法を利用しました。
/* ユーザプロファイルに追加されているフォントの数だけ定義する */
@font-face {
font-family: "${fontName}";
src: url("${fontPath}");
font-display: swap;
}
フォントを利用できるようにするためには、フォントのPathが必要になるため、PowerShell から WebView2 に送信する内容に、ローカルのフォントファイルのPathを付帯させる事にしています。
おわり
このようにして以下の2種類のフォントの一覧化ツールを実装しました。
- システムにインストール済みのフォント
- ユーザプロファイルにインストール済みのフォント