古地図アプリM、その後の進化 大塚 恒平 – Code for History 1 

目次 • 2018 Mの復習 • その後の発展 (1) 線を線に変換する技術 • その後の発展 (2) 線を線に変換するGIS出力 • その後の発展 (3) 地図をオフライン販売できる技術 • 利用事例の紹介 • まとめ 2 

2018 Mの復習 3 

古地図や絵地図といった不正確な地図を、 歪めずに正確な地図と対応付けられる技術 © OpenStreetMap © Utouto Tanken-tai 4 

既存のGISは古地図の美観を損なうが、 Mは古地図の美観、情報を歪めない • 既存のGISによる重ね合わせ 5 • Mによる重ね合わせ 

同相変換(全単射1対1変換)を保証 • 同相変換とは、 どんな地図の間でも、同じ点 を連続変換すれば必ず同じ場 所に戻ること、かつその性質 が連続していること • 地図の内部だけではなく、地 図外の座標領域含め一意に相 互変換 • ただし、データのトポロジー エラーが解決されている事が 必要(エラーの有無は MaplatEditorで判定可能) • 特許取得済み(6684776号) 6 

一般的GISデータとMデータの比較 7 データ仕様 汎用 Web GIS データ形式 (WMTS/TMS) M データ形式 データビューア Google Maps API, HERE maps API, Leaflet, OpenLayers, MapBox GJ JS M M データエディタ Maptiler QGIS + gdal2tiles MaplatEditor (HTGCL (後に説明) を利用) MaplatEditor 説明 • 標準データフォーマットはメルカトル図法で の正確な地図を提供 • 不正確な地図は、この仕様では次の2つの要 素を同時に満たしつつ提供することはできな い • 地図画像を歪めない • 全ての地図上の点を正確な経緯度と対応 付ける • 不正確な地図を、次の2つの要素を同時に満た しつつ提供することができる • 地図画像を歪めない • 全ての地図上の点を正確な経緯度と対応 付ける 備考 WMTS: Web Map Tile Service TMS: Tile Map Service 

その後の発展 (1) 線を線に変換する技術 8 

線を線に変換する技術とは 9 • 2018年のM発表で今後の開発を予告されていた技術 • 既存のMだけではなく、既存のGISでの座標変換技術含め、座 標変換の基準となるのは対応点(GCP: Ground Control Point) ⇒位置が正確に合うのは対応点周辺のみ、点と点を結ぶ線の対応づけなどは 行えなかった 

• 三角網の辺をまたぐような方向の移動で、線と線の対応付けが機能し ない場合がある 既存のロジックの問題点 10 現代地図 古地図 

• 対応線 (HTGCL) の概念を導入し、対応線は必ず三角網の辺とするこ とで、対応線上の点は必ず対応線上に変換される 対応線 (HTGCL) の導入 現代地図 対応線 (HTGCL) 古地図 11 ※ HTGCL: Historical Topographic Ground Control Line 

• 線を線に変換できることで、正確な 経緯度での車両の現在位置を、簡略化 した図像上に表示するロケーション システムでの活用ユースケースも喚起 • 実際の採用例：愛知県豊橋市バスロケ システム「のってみりん」 • エンドユーザ向けシステムだけでなく、 社内向け車両管理システムなどでも、 簡略図上に表記した方がわかりやすい ユースケースも 路線図などでのユースケースも喚起 12 

その後の発展 (2) 線を線に変換するGIS出力 13 

線を線に変換する技術はGISでも有用か 14 • Mは古地図を歪めない技術だが、古地図を歪めるGISの手法も 意味がないわけではない • 全ての対応点が正確に位置合わせされたうえで一望できる • 既存の多様なGISツールで活用できる • 全てはユースケース次第 • 対応点 (GCP) ベースでの座標変換はGISにも存在するが、対応線 (HTGCL) ベースでの座標変換はGISには存在しない • HTGCL座標変換でのGISデータ生成も有用なのではないか仮説 

座標変換性能自体の特徴比較 Method Rely on Pros Cons GIS (GDAL, シンプレート スプライン) GCP • データ作成が容易 • 変換結果が全体的にスムー ス • 変換が連続的でなかった り、双方向的でなかった りする場合がある • 線を線に変換できない M HTGCL • 同相変換 • 線を線への変換 • 三角網の辺をまたぐ部分 で変換が鋭角的になる場 合がある • トポロジーエラーが発生 した場合、手作業での改 善が骨の折れる作業 15 • MaplatEditorにHTGCL変換でのWMTSタイル出力機能をつけてみた 

線を線に変換したGISデータの生成例 16 既存GIS技術 (GDAL with GCP) HTGCL • 緑の線は現代の 道路の位置を示 している。既存 技術だと、古地 図側の道路は大 きくカーブを描 いて破壊的に変 形され、現代の 道路の位置に沿 わない。 • HTGCLを用い た変形では、古 地図側の道路は 幾分かは歪むも のの、基本的に 現代の道路の位 置にぴったりと 沿っている 

同相変換の有用性についても確認 17 既存GIS技術 (GDAL with GCP) HTGCL • (線を線に変換す るために複雑な GCPを設定して いるせいもある が) 既存技術で は変換の連続性 と双方向性が失 われ、道路が ループや8の字 状に変換されて いる • はげしく歪んで 変形してはいる ものの、座標の 連続性と双方向 性は強力に維持 されたまま変換 できている 

線を線に変換する技術はGISでも有用か 18 • Mは古地図を歪めない技術だが、古地図を歪めるGISの手法も意味が ないわけではない • 全ての対応点が正確に位置合わせされたうえで一望できる • 既存の多様なGISツールで活用できる • 全てはユースケース次第 • 対応点 (GCP) ベースでの座標変換はGISにも存在するが、対応線 (HTGCL) ベースでの座標変換はGISには存在しない • HTGCL座標変換でのGISデータ生成も有用なのではないか仮説 • 結論: 線を線に変換する技術は既存GISでも有用そう • GeoTiffへの変換機能などもユースケース吟味の上、必要ならば開発したい 

その後の発展 (3) 地図をオフライン販売できる技術 19 

20 PWAとは? • “progressive web app”の略 • オフラインで動作 • ブラウザの背後で“service worker”というプロセスが走る • Service workerはページの開始前に必要なファイルを取得しキャッシュする • Service workerはプロセスからの処理要求に従い、アクセスしたファイルや データをIndexedDBなどにキャッシュする • プッシュ通知 • ホーム画面に登録可能 • アプリストアへの登録不要 • ネイティブアプリ的なUI/UX 

21 PWA構成 Serviceworker Web IndexedDBなど Webサーバ リクエスト リクエスト キャッシュ キャッシュされたリソース はオフラインで利用可能 

22 Web地図をPWA化する際の困難 • PWAを動かすためのhtml、javascriptやcssだけでなく、地図タイ ル画像もキャッシュしなければ、オフラインで動作させることはでき ない • 全世界の兆レベルの地図画像を全部キャッシュするのは当然現実的で はない • アプリに必要な範囲、あるいはユーザの望む範囲の地図タイルだけ選 択してキャッシュするには、アプリ作成者は球面メルカトル座標や WMTS仕様を十分に理解し、必要なタイル画像のリストを作成して キャッシュする必要がある 

23 Weiwudi – Web地図タイルを扱うた めのServiceworkerフレームワーク Serviceworker Web 地図API IndexedDB Weiwudi 地図タイルサーバ • URL変換 • タイル画像を indexedDB に蓄積 タイル画像 タイル画像 タイルリクエスト タイルリクエスト 魏武帝 (Weiwudi) 

24 Weiwudiがやってくれること • Mをオフライン動作させるために開発した仕組みだが、古地図 画像タイルのPWA化だけでなく、普通のWebGISでのWMTSタイル 地図のPWA化にも使えるよう設計されている • 単に基本設定をおこなって設置するだけでも、ユーザの表示した範囲 の地図タイルは自動でIndexedDBにキャッシュされる • キャッシュされた地図タイルはオフラインで利用可能 • ユーザの操作により、経緯度、ズームの範囲を指定して、その範囲の タイルを全て一気にダウンロードしキャッシュできる • キャッシュした画像の一斉解放も可能 

25 • 現状はラスタタイルのみに対応しているが、原理上ベクタタイルにも 対応可能(なはず) ベクタタイル対応はスタイルの扱いなどを調査の上、対応を進める • Mbtilesを使った一括ダウンロードに対応する • Mbtilesは地図タイルを一括処理するための仕様 • Mbtiles形式のデータは、既存のGIS市場の中で利用されている資産 • Mbtilesデータを読み込み、画像を展開してindexedDBにWeiwudi仕様 で格納するserviceworkerがあれば普通に有用 次の開発項目: ベクタタイル、 Mbtilesを使った一括ダウンロード 

26 • 全ての地図データをたった1つのファイルでダウンロードできる機能の 存在は、商用の有償Web地図を配信するのにとても便利!!! • タイルでの配信のみの場合 • 何百、何千枚ものタイル画像ひとつひとつの配信システムに、ユーザごとのア クセス認証を加える必要が生じ、システムが複雑化 • さらに表示範囲などでアクセス制御しようとするとさらに複雑化 • Mbtilesで配信=>Service workerに蓄積の場合 • コンテンツ全てが1つのファイルとなるので、ユーザの認証処理の直後の1つの URLへのアクセス制限だけ考慮すればよく、システムが単純化 • 表示範囲の制御なども、表示範囲だけを含むMbtilesを生成すればいいだけな ので簡単 • 副次効果として、PWAの元々の役割であるオフライン閲覧可能などの利点も Webで地図を単一ファイルで販売できる プラットフォームとして機能できる可能性 

利用事例紹介 27 

28 • 線を線に変換する機能を活用 • バスロケーションシステム「のってみりん」: 愛知県豊橋市、紹介済み • 文化財の調査や普及、活用に利用 • 群馬歴史資料継承ネットワークとの協力活動 • 群馬県館林市、「ぷらっと館林」 (Code for History作成) での、館林市石造 物調査データの公開 • 群馬県佐波郡玉村町、「ぷらっと玉村」 (史料ネットとの協力作成) での、文化 財地図の活用 • 大阪市東成区での採用 • 区の文化財やオープンデータを活用した「ひがしなり街歩きアプリ」公開 広がる利用事例 

館林市事例: 石造物調査を公開 29 URL: https://s.maplat.jp/r/tatebayashimap/ 

玉村町事例: ぷらっと玉村公開開始 30 URL: https://s.maplat.jp/r/tamamuramap/ 

• 大阪市大 (当時) により街歩きイ ベント開催 東成区事例: ひがしなり街歩きアプリ 31 URL: https://higashinari-walk.fun/ • 東成区役所による公式サイト © Osaka City Univ. 

まとめ 32 

• Mはその開発を通じて、線を線に変換する技術や、地図タイル のキャッシュ・オフライン利用技術を確立 • それらの技術は、Mだけではなく、既存GIS技術での活用もみ こまれる • 線を線に変換できるWMTSタイル生成 • WMTS地図のオフライン利用、地図有償配信基盤 • Mは既存の文化財活用のユースケース、新しい路線図利用の ユースケースの双方で、利用例を増やしている まとめ 33 

End User: kochizufan Github pages: https://code4history.dev/ E-mail: [email protected] Slide: https://speakerdeck.com/kochizufan/geoactivity2021 34