タイル地図アプリ向けPWAオフライン対応フレームワークWeiwudiをベクトルタイルに対応させる宣言

**[Code for History](https://code4history.dev/index_ja.html)**大塚恒平です。
歴史的民俗学的な地域史研究などに有用な、ITも含む活動を行うワンマンアーミーとして活動を行っております。

### これまでベクトルタイル技術と関わってこなかったわけ

私、元は地図技術者でして、その関係で歴史的な古地図を扱うオープンソースである[**Maplat**ライブラリ](https://code4history.dev/maplat_flyer_2021_ja.pdf)なども開発しております。
その関係で、古地図はどこまでいってもラスタ画像地図ですから、時代がベクトル地図に変わっても私自身はベクトル技術に関わる必要性も興味も全くなく、これまでほとんどベクトル技術を勉強することはありませんでした。
本業は自動運転向けの高精度道路地図を（開発者ではなくプリセールスですが）扱っておりますので、広義のベクトル技術には接しているのですが、全球を表現できるのが必須なので接するタイル定義も**[S2](https://s2geometry.io/)**や**[H3](https://h3geo.org/)**であったり、あるいはWMTSでもSRID:4326ベースであったり、地図フォーマットも自動車業界標準の**[NDS](https://nds-association.org/nds-live-the-new-generation-of-map-data-format/)**や**[OpenDrive](https://www.asam.net/standards/detail/opendrive/)**であったりするので、いわゆる普通のWebベクトルタイル技術には、MaplatのベースマップとしてMapBoxのベクタ地図をテスト的に選択できるようにする程度のことはしましたが、それ以上のことはほぼ何もしないまま、これまでぼんやりと過ごしてきてしまいました。

### 急にベクトルタイル技術を学ぶ必要が発生したわけ

ベクトルタイルの方向には興味が向かなかったものの、個人的には様々な技術開発の挑戦を行ってまいりました。
Maplatを（主に海外での活用や、ネット環境の悪い山中などでの活用を想定して）オフライン動作させられるように、オフラインでWebを動作させられるPWAの仕様にMaplatを対応させ、その副産物として、Maplatだけではなく、一般のWMTS仕様の地図まで含めて、PWAの知識がない地図技術者でも（あるいは逆に、地図技術の知識がないPWA技術者でも）簡単にWeb地図サイトをPWA化させられるフレームワーク、**Weiwudi**を開発したりいたしました。

<script async class="speakerdeck-embed" data-id="4f35db8700a644858aa86c0e273c6802" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>

Maplat自体は、2018年に国土地理院のGeoアクティビティコンテストで[最優秀賞含む三冠をいただいた](https://g-expo.jp/2018/geocon/award.html)こともあるのですが、今回、Weiwudiなどを含む追加開発で再度2021年Geoアクティビティコンテストで、追加で[奨励賞もいただきました](https://g-kukan.jp/exhibits/)。
また、同じく奨励賞を受賞された**[はなもく散歩](https://hanamokusanpo.jp/)**開発陣の方々から、『電波の届かない山奥の自然探索などで、まさにPWA化がしたかったんだけど、地図のオフライン化の方法がわからなくて困ってたんだよ、まさにこれ（Weiwudi）が欲しかったんだ』と興味を持っていただきました。
超嬉しい。

が、いざオフラインでMaplatが動作しているところを彼らにお見せしようとしている時に、悲劇は起こりました。
あれ？Maplatのデモサイトのオフライン動作を彼らに見せようとしたのに、機内モードで動作させるとなぜかリソース読込エラーになって、うまく起動しない。
なぜ？あれほどテストしたのに！

結局その場では解決できず、帰宅後調査を行って理由が判明。
Maplatが正式対応している、ラスタ地図だけで動作させている限りは、問題なくPWA動作するのですが、デモサイトでは、テスト対応しているMapBoxのベクトル地図ですとか、Google Analyticsですとか、そういうオフライン対応していない諸技術を盛り込んでいたために、そういう部分の処理がオフライン対応していなかったためでした。
Google AnalyticsなどはMaplatの守備範囲外なので、Maplatを使ったサイトを組もうとしている人が、npmモジュールの**[sw-offline-google-analytics](https://www.npmjs.com/package/sw-offline-google-analytics)**などを用いて各自の責任で対応すべきものですが、ベクトル地図はMaplatとしてはテスト実装だとはいえ、Weiwudiはベクトル地図まだ非対応だからMaplatデモサイトはPWA動作しないよ、というのも、だからといってMaplatデモサイトから全部MapBoxのベクトル地図を排除するのも、どっちも違う気がして、これは興味ないから対応先延ばしでいいや、ではなく、急いでWeiwudiをベクトル地図対応させる必要があると考えました。

### mapbox-style-downloaderを元にベクトルタイル技術を確認中

とはいえ、本当にこれまでベクトルタイルについてはスルーしてきたので、とっかかりの知識すらありません。
ラスタタイルだと`https://example.com/{z}/{x}/{y}.{ext}`の解釈の仕方だけ理解してればそれで済んだわけですが、さすがの私でもベクトルタイル技術にはタイルだけではなくスタイルやフォントなどの情報が必要だという程度の理解はあるのですが、それをどのようなプロトコルで要求するのか全く理解していませんでした。
そこで、@dayjournalさんや@KamataRyoさんに色々アドバイスをいただき、ベクトルタイルの最初のタッチポイントは`style.json`、さらに`tiles.json`であることを教えていただきました。
さらに、**[mapbox-style-downloader](https://www.npmjs.com/package/mapbox-style-downloader)**というMapboxのタイルデータを一括ダウンロードするライブラリ見つけたので、それを実行し、Mapboxだけでなく他のベクトルソースでも動作させてみて、動かないところを直すことでだいぶんベクトルタイルの仕組みが理解できました。
Weiwudi自体はベクトルタイルに必要なファイルをファイルシステムにではなく、ブラウザのindexedDBに保存する点が違うだけで、基本的にmapbox-style-downloaderと同じことを行うことが期待されるので、とても参考になります。
mapbox-style-downloader自体は理由はわかりませんが最新版のリポジトリがgithubから消されており、もしかするとMapboxのデータをダウンロードする点がMapboxから怒られたとかがあるのかもしれませんが、Mapboxだけではなく汎用ベクトルデータのダウンローダーとして整備すれば普通に便利そうなので、あらためて**[Dongju](https://github.com/code4history/Dongju)**というツールとして整備しようかと今のところ考えています。
Dongjuが完成すると、それをライブラリとして内部利用する形で、Weiwudiをベクトルタイル対応させようと考えています。

### 相当なレイトアダプターですがよろしくお願いします

以上のような経緯で、遅ればせながらベクトルタイルを学び始めました。
とりあえず自分のやりたい事のために必要だから開発するので、Weiwudiをベクトルタイル対応させることが他の方々にとって有用かどうかはわかりませんが、とりあえずやってみようと思います。