LoginSignup
8
3

More than 1 year has passed since last update.

@T-ubu

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

Last updated at Posted 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は72種類、Noto Sans Displayは18種類のフォントがありました。いずれもライセンスは SIL Open Font License, version 1.1. ですので、安心してダウンロードします（注：上記のnoto sansのダウンロードページにはV1.10と書いてあるのですが、ダウンロードしたパッケージをみるとversion1.1でした）。解凍したものを作業フォルダのsrcフォルダの下に入れておきます。ttf形式のフォントがたくさんあります。
image.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

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

Step 3: 変換

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

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

cd ..
mkdir fonts

image.png

これで作業フォルダのなかに、ソースのttf形式ファイルが入っているsrcフォルダと、出力用のfontsフォルダと、ツールが入っているnode-fontnikのフォルダが同じ階層に並んでいる状態になりました。
image.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
すると、pbfファイルが出てきました。ツールはきちんと動いているようです。
image.png

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

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

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

きちんと動いていました。
image.png

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

image.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 をつかいました。便利なツールをありがとうございます。

参考

8
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
3