More than 1 year has passed since last update.

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

Last updated at 2022-02-04Posted at 2022-02-04

はじめに

ベクトルタイルを使った地図のスタイリングの調整をしていたのですが、必要なフォントがなかったので作ります。日本語のメモがあまり多くないので作業経過をメモしておきます。
これまでは、オープンフォントの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形式のフォントがたくさんあります。

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月末です)。今度アップグレードしておかないといけません。今日のところはこのまま進みます。

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をしたらしばらく待ちますが、これでツールは準備完了です。

Step 3: 変換

3-1．移動して、アウトプットのフォルダを準備

ツールの準備ができたら今は、node-fontnikというフォルダにいるので、一つ上のフォルダに上がって、そこで出力フォントを保存するようのfontsディレクトリを作ります。

cd ..
mkdir fonts

これで作業フォルダのなかに、ソースのttf形式ファイルが入っているsrcフォルダと、出力用のfontsフォルダと、ツールが入っているnode-fontnikのフォルダが同じ階層に並んでいる状態になりました。

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

すると、pbfファイルが出てきました。ツールはきちんと動いているようです。

3-3．一括変換の準備

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

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

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