フォントファイル ttf から pbf をつくる（WSL/Ubuntu)
はじめに
MapLibre などの Web 地図ではフォントファイルとして pbf (Protocol Buffers Binary) ファイルが必要になる場合があります。以下、ttf (TrueType Font) ファイルを変換して、pbf ファイルを作成する方法について説明します。
ttf ファイルの準備
フリーのフォントは意外と存在していて、例えばフォントフリーといったサイトから探すことができます。私はこのサイトの中から小瑠璃フォントが好きだなと思ったのでこちらを選びました。配布サイトから ttf ファイルをダウンロードできます。
小瑠璃フォント自体は使用や再配布を自由に行うことができ、商用利用も可能とのことです。また LICENSE ファイルのコピーを添付していれば、フォントデータそのものを同封することも問題ないみたいです。この度はありがたく使わせていただきます。
ttf から pbf への変換
ttf ファイルから pbf ファイルへの変換には、mapbox/node-fontnik を使用します。Windows 環境では直接実行することができないので、仮想 Linux (WSL/Ubuntu) 環境を整えたうえで、node-fontnik をダウンロード、実行していきます。
Windows Powershell もしくはコマンドプロンプトを管理者権限で開き、以下のコマンドを入力して WSL をインストールします（参考）。
wsl --installインストールが終わると、再起動を要求されるのでいったん再起動します。その後、Windows Powershell を開くと、新しいタブを追加する欄に Ubuntu が追加されているはずなので、そちらを開きます。初めて使う場合、UNIX user アカウントの作成が要求されます。「Enter new UNIX username:」と表示されるので、適当なユーザー名を入力、次に「New password:」と表示されるので、任意のパスワードを入力します。
Windows Powershell で Ubuntu を開き、以下のコマンドを順に実行していきます。
sudo apt update
sudo apt install nodejs
sudo apt install npmnode-fontnikをインストールし、クローンします。
git clone https://github.com/mapbox/node-fontnik
cd node-fontnik
npm install以下のコマンドで一階層上のフォルダに移動し、node-fontnik のフォルダと同じ階層に fonts フォルダを作成します。
cd ..
mkdir fontsエクスプローラーに「\\wsl$」と入力すると、WSL のフォルダに入れるので、UNIXユーザー名のフォルダの中の階層（node-fontnik と同じ階層）に src フォルダを作成し、ttf ファイルを移動します。node-fontnik / fonts / src フォルダが横並びになります。
以下のコマンドを入力すると、fonts フォルダに Koruri-Regular の pbf ファイルができます。
./node-fontnik/bin/build-glyphs src/Koruri-Regular.ttf fonts作成した pbf ファイルを MapLibre で使うには、例えば以下のような感じになります。注意点は、hogehoge に作成した pbf ファイルの 2 階層上のフォルダパスを入力するところです。fontstack はレイヤー追加時に layout の text-font から指定します。
jQuery(document).ready(function() {
const places = {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'properties': {
'description': '札幌',
},
'geometry': {
'type': 'Point',
'coordinates': [141.3507794, 43.0686498]
}
}]
};
const map = new maplibregl.Map({
container: 'mapcontainer',
style: {
version: 8,
glyphs: 'hogehoge/{fontstack}/{range}.pbf',
sources: {
rtile: {
type: 'raster',
tiles: [
'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
],
tileSize: 256,
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
},
},
layers: [{
id: 'raster-tiles',
type: 'raster',
source: 'rtile',
minzoom: 0,
maxzoom: 18,
}]
},
center: [142.14, 43.65],
zoom: 3,
pitch: 0
});
map.on('load', () => {
map.addSource('places', {
'type': 'geojson',
'data': places
});
map.addLayer({
'id': 'places',
'type': 'symbol',
'source': 'places',
'layout': {
'text-field': ['get', 'description'],
'text-font': ['Koruri-Regular']
}
});
});
});以下実装例。地理院タイルもありがたく使わせていただきます。
おわりに
以上、ttf ファイルから pbf ファイルを作成する方法でした。作成した pbf ファイルも配布できそうですが、ルールが色々とありそうなのでここではやめておきます。
今回 WSL を使って pbf ファイルを作るにあたり、Copilot からの情報とこちらの記事を参考にしました。まことにありがとうございます。
ちょっと宣伝
当サイトは地図を使った海外旅ブログ/YouTube まとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
当サイトで海外旅ブログを執筆することも可能です（もちろん無料です）！ また既にブログをお持ちの方も、当サイトからリンクを貼ることができるようになっています。パントレ開発部までお気軽にお問い合わせください。
パントレ開発部