Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
古地図アプリMaplat、その後の進化/geoactivity2021
Search
Code for History
December 21, 2021
Technology
0
2.4k
古地図アプリMaplat、その後の進化/geoactivity2021
Geoアクティビティコンテスト2021、奨励賞受賞の発表
Code for History
December 21, 2021
Tweet
Share
More Decks by Code for History
See All by Code for History
Maplatソリューションのご紹介 2024/Introduction_of_Maplat_geoten_2024
kochizufan
0
11
MySQLで処理するGIS 〜地球が丸いことを覚えたMySQL〜 Ver. 3?/mysql_gis_sphere
kochizufan
0
900
市民生成メディアの諸問題と共通プラットフォームへの期待/code_4_history_joss2023
kochizufan
0
42
Maplatソリューションのご紹介/Introduction_of_Maplat_geoten_2023
kochizufan
0
61
歴史民俗研究に活用できるGIS-地図知識の紹介を中心に-/gumma_history_fork_study_with_gis
kochizufan
0
100
奈良の地誌研究における、最新の判明事項と研究の諸問題/nara_chishi_kenkyu
kochizufan
0
86
高札場の歴史事例研究(館林・奈良) ―道路元標の置かれた場所の前時代史―/nara-tatebayashi-0km-post
kochizufan
0
140
石仏情報学:石造物のデータ化およびデータに基づく石造物研究の推進に向けて/jinmonkon-2022
kochizufan
0
140
アニメの聖地における地域歴史資料の活用と公開、普及施策 /gumma-wu-rf-2021
kochizufan
0
380
Other Decks in Technology
See All in Technology
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
890
JEP 480: Structured Concurrency
aya_ebata
0
120
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
190
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
530
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
150
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
120
【Λ(らむだ)最近のアプデ情報 / RPALT20240904
lambda
0
190
デジタル化・DX推進あるある
y150saya
0
240
EitherT_with_Future
aoiroaoino
1
1k
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
110
20分で分かるIAM全機能 (拡大版) / 20240903-jawsug-yokohama-iam
opelab
3
140
Road to Single Activity
yurihondo
1
180
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
31
6.2k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Teambox: Starting and Learning
jrom
131
8.7k
Become a Pro
speakerdeck
PRO
22
4.9k
Faster Mobile Websites
deanohume
304
30k
For a Future-Friendly Web
brad_frost
174
9.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
The Invisible Side of Design
smashingmag
295
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Transcript
古地図アプリ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