日本語話者だけが読めない地図

![関東](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6438/1f090028-ba0f-1423-b5fb-1dacbb514cbc.png)
![東京駅](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6438/98b2170a-1e9b-436e-4443-1a58a63d7650.png)
![世界](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6438/0acb05d6-0492-6dc6-11c7-734fa9275f3e.png)
![札幌](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6438/ead83e4b-75f0-d169-89a8-9cd72fc6081f.png)


## 「Electroharmonix」というフォント

http://typodermicfonts.com/electroharmonix/

> the pseudo-Japanese display typeface inspired by katakana, hiragana, and kanji

- 「日本語の文字」っぽいフォント
- Typodermic Fonts (Raymond Larabie) 制作
- 「日本人だけが読めないフォント」と話題になった

https://togetter.com/li/887973

https://twitter.com/Kohrogi34/status/655246497106169856

### ライセンス

https://typodermicfonts.com/license/

> Download this and hundreds of other fonts for free with a commercial-use desktop license. Visit the font distributor below if you require website embedding, app integration, or anything else that the free license doesn’t provide.
>
> [Electroharmonix Font - Pseudo-Japanese Display Typeface](http://typodermicfonts.com/electroharmonix/)

- デスクトップ用ライセンスは無料、商用利用可
  - フォントを利用したグラフィック（静的画像）を掲載、なども含む
- ウェブサイトへの埋め込み、アプリへの埋め込み、等々は別途、ライセンスが必要

ウェブフォント、アプリ、デジタル広告のライセンスは以下ページから購入可能:

https://www.fontspring.com/fonts/typodermic/electroharmonix


## 参考: Web地図の実装

MapLibre GL JS により、ベクトルタイル地図での「ラベルテキストのフォント」として利用しました。

### フォントの用意

Web地図において、「画像」ではなく「データ」として保持するベクトルタイルでは、基本的にWebGLが活用されます。WebGL自体にはフォントレンダリングは組み込まれていません。Mapbox GL JS、そして派生したMapLibre GL JSでは、文字（グリフ）を、プロトコルバッファーのSDFs (Signed Distance Fields)として利用します。

Mapboxのライブラリ `node-fontnik` によりフォントを、ProtobufにエンコードされたSDFグリフへ変換します:

https://github.com/mapbox/node-fontnik

情報が少ない中、次の記事が参考になりました（ありがとうございます！）:

https://qiita.com/T-ubu/items/f2a2084778e456bc8057

私の環境（M1 Mac）では、そのままではC++周りの関係でうまく動きませんでした:

<details>
  <summary>エラー</summary>

```sh
$ npm install --build-from-source

$ ./bin/build-glyphs       
node:internal/modules/cjs/loader:1239
  return process.dlopen(module, path.toNamespacedPath(filename));
                 ^

Error: dlopen(/Users/sorami/Desktop/node-fontnik/build/Release/fontnik.node, 0x0001): symbol not found in flat namespace '_FT_Done_Face'
    at Object.Module._extensions..node (node:internal/modules/cjs/loader:1239:18)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1057:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at load (/Users/sorami/Desktop/node-fontnik/node_modules/node-gyp-build/node-gyp-build.js:22:10)
    at Object.<anonymous> (/Users/sorami/Desktop/node-fontnik/index.js:1:40)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32) {
  code: 'ERR_DLOPEN_FAILED'
}
```
</details>

そのため、上の記事にあるように、DockerによりLinux環境を利用して実行しました:

```sh
$ docker run -it --rm -v ${PWD}:/workspace unvt/nanban
```

```sh
$ cd /workspace

$ git clone https://github.com/mapbox/node-fontnik

$ cd node-fontnik

$ npm install

$ ./bin/build-glyphs ../Electroharmonix/TTF\ Fonts/electroharmonix.ttf ../output/

$ ls -1 output/ | head
0-255.pbf
256-511.pbf
512-767.pbf
768-1023.pbf
1024-1279.pbf
1280-1535.pbf
1536-1791.pbf
1792-2047.pbf
2048-2303.pbf
2304-2559.pbf
```

### 地図上でのフォントの利用

ベースのスタイルとして、以下にある「Maptiler Basic En」を利用しました:

https://tile.openstreetmap.jp/

その `style.json` に対して、以下二点の変更を行いました。

### glyphs

https://maplibre.org/maplibre-style-spec/glyphs/

`style.json` では、以下のようにグリフのリソースを指定できます:

```json
"glyphs": "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf"
```

グリフデータをリクエストする時、 `{fontstack}` という箇所にはフォント名が（カンマ区切りで）入り、 `{range}` にはユニコードのコードポイントが入ります。

今回は、前節で生成したフォントデータ（`0-255.pbf`など）を `/fonts/Electroharmonix` というパス下に置き、それを参照するように変更しました:

```json
"glyphs": "/fonts/{fontstack}/{range}.pbf"
```

（今回はSvelteKitを使ったので、プロジェクト内の `/static/fonts/Electroharmonix/` ）


### text-font

https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-text-font

レイヤーのプロパティにある `text-font` で、フォント名を指定します。これが先述の `{fontstack}` に対応します。

今回は、全てのフォント指定を `Electroharmonix` へと変更しました（例↓）:

```diff_json
{
    "id": "housenumber",
    "type": "symbol",
    "source": "openmaptiles",
    "source-layer": "housenumber",
    "minzoom": 17,
    "filter": ["==", "$type", "Point"],
    "layout": {
        "text-field": "{housenumber}",
-        "text-font":  ["migu1c-regular"],
+        "text-font": ["Electroharmonix"],
        "text-size": 10
    },
    "paint": { "text-color": "rgba(212, 177, 146, 1)" }
}
```

## 余談

鹿野健人さんが発案された「ひらがなマップ」を見ていて、思いつきました:

https://nlab.itmedia.co.jp/nl/articles/2002/04/news014.html

https://internet.watch.impress.co.jp/docs/news/1446860.html

<script defer class="speakerdeck-embed" data-id="edc9c87e8301413aa75538a1a646f03f" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>

<iframe width="560" height="315" src="https://www.youtube.com/embed/dJQb19faTRk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6438/e516c832-4901-7a35-3463-4af317acb98d.png)