ウェブ地図用のテキストフォント（pbf）を作る

## はじめに
ベクトルタイルを使った地図のスタイリングの調整をしていたのですが、必要なフォントがなかったので作ります。日本語のメモがあまり多くないので作業経過をメモしておきます。
これまでは、オープンフォントのKlokantech Noto Sansシリーズにお世話にもなったりしていたのですが、私の作業に必要な種類がないこともあるので自分で作ってUNVTのレポジトリに作っておこうと思いす。

　作業レポジトリ：　https://github.com/unvt/nsft

## 作業環境
- Windows 10 (Enterprise)
- Powershell version 5.1.19041.1237
- Docker version 20.10.8


## 目標
今回は、今後の作業で使いたい **Noto Sans** シリーズと **Noto Sans Display** シリーズのフォントを得ることを目標にします。ウェブ地図でglyphsとして参照するため、**PBF形式**で準備することを目標にします。
mapboxのnode-fontnikというツールを使って、ダウンロードしてきたttf形式のフォントをpbf形式にしていきます。

## 作業
### Step 1: フォント（ttf）形式のダウンロード、ライセンスの確認
ライセンスを確認できればどこからでもいいのですが、インターネットでフォントをダウンロードできそうなサイトを探します。以下のページを見つけました。

- Noto Sans https://www.fontsquirrel.com/fonts/noto-sans
- Noto Sans Display https://fontstorage.com/font/google/noto-sans-display

Noto Sansは72種類、Noto Sans Displayは18種類のフォントがありました。いずれもライセンスは SIL Open Font License, version 1.1. ですので、安心してダウンロードします（注：上記のnoto sansのダウンロードページにはV1.10と書いてあるのですが、ダウンロードしたパッケージをみるとversion1.1でした）。解凍したものを作業フォルダのsrcフォルダの下に入れておきます。ttf形式のフォントがたくさんあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/423dfbd3-964d-3c20-00e5-6e00618fccfb.png)

SIL OPEN FONT LICENSEについてはこちらにもあります。　https://opensource.org/licenses/OFL-1.1
念のためきちんと読みました。

### Step 2: Dockerの起動、ツール（mapbox/node-fontnik）の準備
フォントの変換に使う mapbox/node-fontnik はライセンス的には**BSD 3-Clause "New" or "Revised" License** で利用の問題はないのですが、プラットフォームが 64 bit OS X or 64 bit Linux、Node.js v8-v14　となっているのでWindowsユーザーには厳しいです。ですので、Docker（unvt/nanban）を使って対応します。

#### 2-1．Docker起動
Powershellで作業フォルダに行った後、Dockerを始めます。

```
docker run -it --rm -v ${PWD}:/data unvt/nanban
cd /data
```
下の図ではポートを空けてしまいまいたが、ポートは空けなくて良かったです。また、nodejsのバージョンがどうだったかなと思ってみたら12でした(end of lifeは今年の4月末です)。 今度アップグレードしておかないといけません。今日のところはこのまま進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/e05262f2-a99b-7f36-54d2-8873845d30ef.png)

#### 2-2．node-fontnikの準備
次に、以下の感じで　mapbox/node-fontnik をgit cloneしてきます。npm installもやっておきます。

```
git clone https://github.com/mapbox/node-fontnik
cd node-fontnik
npm install
npm audit fix
make
```

npm installのあとに、脆弱性がいくつかあるということだったのでnpm audit fixをしておきました。makeをしたらしばらく待ちますが、これでツールは準備完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/6af3d387-7516-184e-781f-3e60eae4f5e8.png)

### Step 3: 変換
#### 3-1．移動して、アウトプットのフォルダを準備 
ツールの準備ができたら今は、node-fontnikというフォルダにいるので、一つ上のフォルダに上がって、そこで出力フォントを保存するようのfontsディレクトリを作ります。

```
cd ..
mkdir fonts
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/5e3757e5-ae49-2867-cb33-f30b0f3a798a.png)

これで作業フォルダのなかに、ソースのttf形式ファイルが入っている**src**フォルダと、出力用の**fonts**フォルダと、ツールが入っている**node-fontnik**のフォルダが同じ階層に並んでいる状態になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/53aff72b-5796-4d4b-1231-84e07e094c8e.png)

#### 3-2．変換の基本コマンドをテストしてみる
この状態でツールが使えるか、試しに一つ変換してみます。src/noto-sans/Noto-Sans-Black.ttfというファイルを変換してoutput-testというフォルダにいれることをテストします。build-glyphsの後に、インプットファイル、アウトプット場所　を指定すればOKです。フォントを入れるフォルダを作ってから変換コマンドを実行することが必要です。

```
mkdir output-test
./node-fontnik/bin/build-glyphs src/noto-sans/Noto-Sans-Black.ttf output-test
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/7b74448f-ee30-70b9-99c6-2ae1ef892ec2.png)
すると、pbfファイルが出てきました。ツールはきちんと動いているようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/a207f4bb-2a46-ef18-720b-3e61de4f3212.png)

#### 3-3．一括変換の準備 
フォントはNoto Sansで72、Noto Sand Displayで18あります。一つ一つコマンドをうつのは大変（90回）なのでシェルスクリプトを作ります。動いているか見るために、dateとか、ファイル名を表示するようにもしておきます。

```sh:noto-sans用
for f in src/noto-sans/*.ttf; do mkdir fonts/`basename ${f} .ttf`; ./node-fontnik/bin/build-glyphs src/noto-sans/`basename ${f}` fonts/`basename ${f} .ttf`; date; echo  `basename ${f}`;done
```
```sh:noto-sans-display用
for f in src/noto-sans/*.ttf; do mkdir fonts/`basename ${f} .ttf`; ./node-fontnik/bin/build-glyphs src/noto-sans/`basename ${f}` fonts/`basename ${f} .ttf`; date; echo  `basename ${f}`;done
```

そして、作った shファイルを実行します。

```
./noto-san.sh
./noto-san-display.sh
```

きちんと動いていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/75020662-50f0-48af-2756-8483421bc045.png)

fontsフォルダの中には、pbfフォントがフォルダに分かれて入っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/36ceffa0-238b-8ef0-71e4-530b475937a5.png)


### Step 4: ファイルのアップロード
GitHubレポジトリにアップロードしたので、これらのフォントは以下のようなURLで使えると思います。
https://unvt.github.io/nsft/fonts/{font_name}

フォントのリストはこちらを見てください。　https://github.com/unvt/nsft/tree/main/fonts

## まとめ
ベクトルタイル用（MapLibreやMapboxやArcGIS API for JavaScriptでみるときのため）にPBFフォントを作りました。
Noto SansとNoto Sans Displayのいろいろな線種をあわせて90種類作れました。

なお、全てのフォントをウェブ地図に表示して試してはいません。作ったフォントの品質保証はしていませんのでご了承ください。

## 謝辞
今回の作業では、フォントのTTFファイルをFONT SQUIRRELとFontstorageからダウンロードさせていただきました。ありがとうございます。
また、作業ではmapbox/node-fontnik をつかいました。便利なツールをありがとうございます。

## 参考
- 作業レポジトリ　https://github.com/unvt/nsft
- 私の昔の作業メモ　https://speakerdeck.com/ubukawa/2021-07-28-unvt-exercise-text-font
- SIL OPEN FONT LICENSE　https://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
- FONT SQUIRREL  https://www.fontsquirrel.com/fonts/noto-sans
- Fontstorage　https://fontstorage.com/font/google/noto-sans-display
- mapbox/node-fontnik　https://github.com/mapbox/node-fontnik