現代風歴史マップ「れきちず」フロントエンドのウラとオモテ｜フロントエンドカンファレンス北海道2024 / frontend of Rekichizu

by Hajime Kato

Slide 1

Slide 1 text

フロントエンドカンファレンス北海道2024 現代風歴史マップ「れきちず」フロントエンドのウラとオモテ KATO Hajime / IGUCHI Kanahiro

Slide 2

Slide 2 text

©Project PLATEAU / MLIT Japan 加藤　創自己紹介 KATO Hajime Designer (地図とかデザインとか @chizutodesign) ● グラフィックデザイナー ● 移住3年目のひよっこ道民🐣 ● 地図や路線図が好きです

Slide 3

Slide 3 text

©Project PLATEAU / MLIT Japan 自己紹介突然ですがここでクイズです

Slide 4

Slide 4 text

©Project PLATEAU / MLIT Japan 自己紹介これ、なんでしょう？

Slide 5

Slide 5 text

©Project PLATEAU / MLIT Japan 自己紹介

Slide 6

Slide 6 text

©Project PLATEAU / MLIT Japan 自己紹介正解は、洞爺湖の水の部分を固めた模型でした〜〜〜〜

Slide 7

Slide 7 text

©Project PLATEAU / MLIT Japan 自己紹介国土地理院「湖沼データ」

Slide 8

Slide 8 text

©Project PLATEAU / MLIT Japan 自己紹介 © MIERUNE | © MapTiler © OpenStreetMap contributors

Slide 9

Slide 9 text

©Project PLATEAU / MLIT Japan 自己紹介 ●札幌から車で　　 2時間くらい ●2008年洞爺湖サミットの会場 ●湖の中央に島がある © MIERUNE | © MapTiler © OpenStreetMap contributors

Slide 10

Slide 10 text

©Project PLATEAU / MLIT Japan 自己紹介 …のような感じで自分が好きな地図や路線図をモチーフに作ったものを Xに投稿しています

Slide 11

Slide 11 text

©Project PLATEAU / MLIT Japan 自己紹介

Slide 12

Slide 12 text

©Project PLATEAU / MLIT Japan 自己紹介

Slide 13

Slide 13 text

©Project PLATEAU / MLIT Japan 自己紹介

Slide 14

Slide 14 text

©Project PLATEAU / MLIT Japan 自己紹介それらをまとめた書籍「地図とか路線図とか @chizutodesign」全国の書店・ECサイトにて発売中です！かってね !

Slide 15

Slide 15 text

©OpenStreetMap contributors 01 ｜「れきちず」とは 02 ｜「れきちず」を支える技術 03 ｜「れきちず」の展望目次

Slide 16

Slide 16 text

©OpenStreetMap contributors 01 「れきちず」とは

Slide 17

Slide 17 text

©Project PLATEAU / MLIT Japan 「れきちず」とは ●2019年Twitterに投稿 ●かなり大きな反響をいただく ●後の「れきちず」の　原型となる「江戸時代の Googleマップ」

Slide 18

Slide 18 text

©Project PLATEAU / MLIT Japan ●社会的に街歩き・街道歩きがブーム ○関連した書籍や地図などがある ●自分も昔から地図が好きで古い地図に興味があったしかし… 「れきちず」とは作ろうと思ったきっかけ

Slide 19

Slide 19 text

©Project PLATEAU / MLIT Japan 「れきちず」とは「築地八町堀日本橋南絵図」国立国会図書館デジタルコレクション文字の向きがバラバラ天保国絵図「武蔵国」国立公文書館デジタルアーカイブ文字の可読性が低い

Slide 20

Slide 20 text

©Project PLATEAU / MLIT Japan ●誰にとってもわかりやすい地図をつくる ●江戸は先行事例が複数あったため、より広い領域の地図を作成する「れきちず」とは作ろうと思ったきっかけ　　現代デザインでウェブ地図サイトを作る

Slide 21

Slide 21 text

©Project PLATEAU / MLIT Japan 「れきちず」とは制作方法 https://qgis.org/ ●オープンソースの位置情報　　ソフトウェア「QGIS」を使用 ●様々な地図を参考に手作業で道路・海岸線・国境などを描画

Slide 22

Slide 22 text

©Project PLATEAU / MLIT Japan 「れきちず」とは国立公文書館デジタルアーカイブ農研機構歴史的農業環境閲覧システム江戸時代の絵図明治初期の地図国土地理院地理院タイル道筋・海岸線等を判断・抽出道筋・海岸線等を描画誤差を補正

Slide 23

Slide 23 text

©Project PLATEAU / MLIT Japan 「れきちず」とは地点情報を作成 ●当時の地図や文献等をもとに POI(ポイント情報)をプロット ●宿場町などの位置は明治の　地図や地名辞書より推定「江戸名所図会巻1 (日本図会全集)」国立国会図書館デジタルコレクション　 https://dl.ndl.go.jp/pid/1176676/1/32

Slide 24

Slide 24 text

©Project PLATEAU / MLIT Japan 「れきちず」とは地図デザイン・アイコン ●地図のデザインやアイコンもオリジナルで作成！着てます

Slide 25

Slide 25 text

©Project PLATEAU / MLIT Japan 「れきちず」とはウェブ地図化する ●先ほどのQGISでタイルを書き出し、MapLibreというオープンソースの地図表示　ライブラリを使用した https://maplibre.org

Slide 26

Slide 26 text

©Project PLATEAU / MLIT Japan 「れきちず」とは

Slide 27

Slide 27 text

©Project PLATEAU / MLIT Japan 「れきちず」とは反響 ●大きな反響をいただき、　　公開翌日に10万PV ●ネットメディアのみならず Abema・テレビ朝日にて放映、朝日新聞に紙面掲載朝日新聞 2023年12月16日夕刊紙面

Slide 28

Slide 28 text

©Project PLATEAU / MLIT Japan 「れきちず」とはその後 ●ここまでは完全に個人の趣味で一人で作っていた ●自分の技術力に限界を感じる会社のプロジェクトとして、専門のエンジニアたちと協働して開発を進めることに！

Slide 29

Slide 29 text

©Project PLATEAU / MLIT Japan 「れきちず」とは会社に運営を移管、進化 ●地図がラスタ(画像)形式からベクタ形式に ●地形の3D表現・空の表現検索機能の搭載

Slide 30

Slide 30 text

©Project PLATEAU / MLIT Japan 「れきちず」とはオープンデータの活用・機関との連携 ●人文学オープンデータ共同利用センターの公開するオープンデータを搭載 ●共同プロジェクトも進行中 https://geoshape.ex.nii.ac.jp/nrct/

Slide 31

Slide 31 text

©Project PLATEAU / MLIT Japan 「れきちず」とは｢れきちず｣のオープン化 ●地図はCC BY-NC-ND 4.0の下、自由に利用することができる ●複数サイトで背景地図として、　利用いただいている http://codh.rois.ac.jp/edomi/route/2/

Slide 32

Slide 32 text

©OpenStreetMap contributors 02 「れきちず」を支える技術

Slide 33

Slide 33 text

©Project PLATEAU / MLIT Japan https://github.com/Kanahiro 井口　奏大自己紹介 IGUCHI Kanahiro GIS/OSS Enthusiast https://qiita.com/Kanahiro CTO MapLibre User Group Japan

Slide 34

Slide 34 text

©Project PLATEAU / MLIT Japan 自己紹介著書「現場のプロがわかりやすく教える位置情報エンジニア養成講座」全国の書店・ECサイトにて好評発売中です！

Slide 35

Slide 35 text

©Project PLATEAU / MLIT Japan 自己紹介 2024年8月発売「位置情報デベロッパー養成講座」

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

©Project PLATEAU / MLIT Japan 「れきちず」を支える技術: MapLibre GL JS ●Webブラウザで地図を描画するためのライブラリ ●WebGLとベクトルタイルによる高パフォーマンス ●柔軟・多彩な地図デザイン ●3D地形 MapLibre GL JS

Slide 41

Slide 41 text

Slide 42

Slide 42 text

©Project PLATEAU / MLIT Japan Pages 「れきちず」を支える技術: 構成とデータパイプライン rekichizu rekichizu-style rekichizu-data 位置情報データ（GeoJSON） Pages ベクトルタイル地図スタイル HTML/JS 自動ビルド engineer designer 自動ビルド自動ビルド

Slide 43

Slide 43 text

©Project PLATEAU / MLIT Japan Pages 「れきちず」を支える技術: 構成とデータパイプライン rekichizu rekichizu-style rekichizu-data Pages ベクトルタイル地図スタイル HTML/JS 自動ビルド engineer designer 自動ビルド自動ビルドデザイナーのGitHubの操作はファイルをアップロードしてプルリクエストするのみ位置情報データ（GeoJSON）

Slide 44

Slide 44 text

Slide 45

Slide 45 text

©Project PLATEAU / MLIT Japan Pages 「れきちず」を支える技術: 構成とデータパイプライン rekichizu rekichizu-style rekichizu-data Pages ベクトルタイル地図スタイル HTML/JS 自動ビルド engineer designer 自動ビルド自動ビルド GitHub Actionsで CI/CD 位置情報データ（GeoJSON）

Slide 46

Slide 46 text

©Project PLATEAU / MLIT Japan Pages 「れきちず」を支える技術: 構成とデータパイプライン rekichizu rekichizu-style rekichizu-data Pages ベクトルタイル地図スタイル HTML/JS 自動ビルド engineer designer 自動ビルド自動ビルド位置情報データ（GeoJSON）すべてフロントエンド技術互いに疎結合なので独立してリリース可能

Slide 47

Slide 47 text

©Project PLATEAU / MLIT Japan 「れきちず」を支える技術: SvelteKit ● SvelteKitではサーバーサイドレンダリング（SSR）が標準で、Cloudflare Pagesと組み合わせると、手軽に・お安くエッジでSSRできてうれしい。SvelteKitの使用感は非常に良い。 ○ 静的ビルド（SSG）も可能で、基本的にadapterを入れ替えるだけでよい。 ○ IMO: 実行環境が用意できるならSSRしておくとことをおすすめ。 ● Next.jsでいうAPI routesも実装できる。「れきちず」では　　　　　　　と組み合わせて WebAPIを実装している（地名検索はこの手法で実装されている）。 ○ ひとつのサーバーでHTMLもWebAPIも賄えるので、構成をシンプルにできてよい。 ○ 参考：https://qiita.com/Kanahiro/items/b109d944f09afd02e57f

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

©Project PLATEAU / MLIT Japan 「れきちず」の展望データの提供範囲の時間的拡大 ●いまのところ、江戸時代を基準にデータの整備を進めています ●より広範な時代区分の整備が最終目標です！古代奈良平安鎌倉室町戦国江戸明治大正昭和現代未来制作中