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
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2...
Search
Hajime Kato
August 24, 2024
Programming
0
90
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
2024年8月24日 フロントエンドカンファレンス北海道2024の登壇スライドです。
Hajime Kato
August 24, 2024
Tweet
Share
More Decks by Hajime Kato
See All by Hajime Kato
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
270
240803_tochiji-hai_hackathon_kato
hjmkth
2
180
231229_Datavizjp_kato
hjmkth
2
1k
231206_Book-launch-event_kato
hjmkth
2
1.3k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
410
231007_tokyor_kato
hjmkth
6
1.5k
230909_chiriin-fc_kato
hjmkth
0
1.2k
230904_Geo-Lang_kato
hjmkth
0
1.4k
230726_MIERUNE BBQ #03_kato
hjmkth
1
390
Other Decks in Programming
See All in Programming
Regular Expressions, REXML, Automata Learning
makenowjust
0
210
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
240
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
520
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
980
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
110
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
120
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
450
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
190
What you can do with Ruby on WebAssembly
kateinoigakukun
0
140
REXML改善のその後
naitoh
0
180
GoのIteratorに詳しくなってしまう
inatonix
1
200
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
660
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Why Our Code Smells
bkeepers
PRO
334
56k
How to name files
jennybc
75
98k
A designer walks into a library…
pauljervisheath
201
24k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Building Flexible Design Systems
yeseniaperezcruz
325
37k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Transcript
フロントエンドカンファレンス北海道2024 現代風歴史マップ「れきちず」 フロントエンドのウラとオモテ KATO Hajime / IGUCHI Kanahiro
©Project PLATEAU / MLIT Japan 加藤 創 自己紹介 KATO Hajime Designer
(地図とかデザインとか @chizutodesign) • グラフィックデザイナー • 移住3年目のひよっこ道民🐣 • 地図や路線図が好きです
©Project PLATEAU / MLIT Japan 自己紹介 突然ですが ここでクイズです
©Project PLATEAU / MLIT Japan 自己紹介 これ、 なんでしょう?
©Project PLATEAU / MLIT Japan 自己紹介
©Project PLATEAU / MLIT Japan 自己紹介 正解は、洞爺湖の 水の部分を固めた模型 でした〜〜〜〜
©Project PLATEAU / MLIT Japan 自己紹介 国土地理院「湖沼データ」
©Project PLATEAU / MLIT Japan 自己紹介 © MIERUNE | ©
MapTiler © OpenStreetMap contributors
©Project PLATEAU / MLIT Japan 自己紹介 •札幌から車で 2時間くらい •2008年洞爺湖 サミットの会場
•湖の中央に島が ある © MIERUNE | © MapTiler © OpenStreetMap contributors
©Project PLATEAU / MLIT Japan 自己紹介 …のような感じで 自分が好きな地図や路線図を モチーフに作ったものを Xに投稿しています
©Project PLATEAU / MLIT Japan 自己紹介
©Project PLATEAU / MLIT Japan 自己紹介
©Project PLATEAU / MLIT Japan 自己紹介
©Project PLATEAU / MLIT Japan 自己紹介 それらをまとめた書籍「地図とか路線図とか @chizutodesign」 全国の書店・ECサイトにて発売中です! かってね
!
©OpenStreetMap contributors 01 | 「れきちず」とは 02 | 「れきちず」を支える技術 03 |
「れきちず」の展望 目次
©OpenStreetMap contributors 01 「れきちず」とは
©Project PLATEAU / MLIT Japan 「れきちず」とは •2019年Twitterに 投稿 •かなり大きな反響を いただく
•後の「れきちず」の 原型となる 「江戸時代の Googleマップ」
©Project PLATEAU / MLIT Japan •社会的に街歩き・街道歩きがブーム ◦関連した書籍や地図などがある •自分も昔から地図が好きで古い地図に興味があった しかし… 「れきちず」とは
作ろうと思ったきっかけ
©Project PLATEAU / MLIT Japan 「れきちず」とは 「築地八町堀日本橋南絵図」国立国会図書館デジタルコレクション 文字の向きがバラバラ 天保国絵図「武蔵国」国立公文書館デジタルアーカイブ 文字の可読性が低い
©Project PLATEAU / MLIT Japan •誰にとってもわかりやすい地図をつくる •江戸は先行事例が複数あったため、 より広い領域の地図を作成する 「れきちず」とは 作ろうと思ったきっかけ
現代デザインでウェブ地図サイトを作る
©Project PLATEAU / MLIT Japan 「れきちず」とは 制作方法 https://qgis.org/ •オープンソースの位置情報 ソフトウェア「QGIS」を使用
•様々な地図を参考に手作業で 道路・海岸線・国境などを描画
©Project PLATEAU / MLIT Japan 「れきちず」とは 国立公文書館デジタルアーカイブ 農研機構 歴史的農業環境閲覧システム 江戸時代の絵図
明治初期の地図 国土地理院 地理院タイル 道筋・海岸線等を 判断・抽出 道筋・海岸線等を 描画 誤差を補正
©Project PLATEAU / MLIT Japan 「れきちず」とは 地点情報を作成 •当時の地図や文献等をもとに POI(ポイント情報)をプロット •宿場町などの位置は明治の
地図や地名辞書より推定 「江戸名所図会 巻1 (日本図会全集)」 国立国会図書館デジタルコレクション https://dl.ndl.go.jp/pid/1176676/1/32
©Project PLATEAU / MLIT Japan 「れきちず」とは 地図デザイン・アイコン •地図のデザインやアイコン もオリジナルで作成! 着てます
©Project PLATEAU / MLIT Japan 「れきちず」とは ウェブ地図化する •先ほどのQGISでタイルを 書き出し、MapLibreという オープンソースの地図表示
ライブラリを使用した https://maplibre.org
©Project PLATEAU / MLIT Japan 「れきちず」とは
©Project PLATEAU / MLIT Japan 「れきちず」とは 反響 •大きな反響をいただき、 公開翌日に10万PV •ネットメディアのみならず
Abema・テレビ朝日にて放映、 朝日新聞に紙面掲載 朝日新聞 2023年12月16日 夕刊紙面
©Project PLATEAU / MLIT Japan 「れきちず」とは その後 •ここまでは完全に個人の趣味で一人で作っていた •自分の技術力に限界を感じる 会社のプロジェクトとして、専門のエンジニア
たちと協働して開発を進めることに!
©Project PLATEAU / MLIT Japan 「れきちず」とは 会社に運営を移管、進化 •地図がラスタ(画像)形式か らベクタ形式に •地形の3D表現・空の表現
検索機能の搭載
©Project PLATEAU / MLIT Japan 「れきちず」とは オープンデータの活用・機関との連携 •人文学オープンデータ共同利用 センターの公開するオープンデー タを搭載
•共同プロジェクトも進行中 https://geoshape.ex.nii.ac.jp/nrct/
©Project PLATEAU / MLIT Japan 「れきちず」とは 「れきちず」のオープン化 •地図はCC BY-NC-ND 4.0の
下、自由に利用することができる •複数サイトで背景地図として、 利用いただいている http://codh.rois.ac.jp/edomi/route/2/
©OpenStreetMap contributors 02 「れきちず」を支える技術
©Project PLATEAU / MLIT Japan https://github.com/Kanahiro 井口 奏大 自己紹介 IGUCHI Kanahiro
GIS/OSS Enthusiast https://qiita.com/Kanahiro CTO MapLibre User Group Japan
©Project PLATEAU / MLIT Japan 自己紹介 著書「現場のプロがわかりやすく教える位置情報エンジニア養成講座」 全国の書店・ECサイトにて好評発売中です!
©Project PLATEAU / MLIT Japan 自己紹介 2024年8月発売 「位置情報デベロッパー養成講座」
©Project PLATEAU / MLIT Japan 自己紹介 2024年8月発売 「位置情報デベロッパー養成講座」 かってね!
©Project PLATEAU / MLIT Japan 「れきちず」を支える技術
©Project PLATEAU / MLIT Japan 「れきちず」を支える技術: MapLibre GL JS
©Project PLATEAU / MLIT Japan 「れきちず」を支える技術: MapLibre GL JS
©Project PLATEAU / MLIT Japan 「れきちず」を支える技術: MapLibre GL JS •Webブラウザで地図を描画するためのライブラリ
•WebGLとベクトルタイルによる高パフォーマンス •柔軟・多彩な地図デザイン •3D地形 MapLibre GL JS
©Project PLATEAU / MLIT Japan 「れきちず」を支える技術: Svelte, Cloudflare, GitHub
©Project PLATEAU / MLIT Japan Pages 「れきちず」を支える技術: 構成とデータパイプライン rekichizu rekichizu-style
rekichizu-data 位置情報データ(GeoJSON) Pages ベクトルタイル 地図スタイル HTML/JS 自動ビルド engineer designer 自動ビルド 自動ビルド
©Project PLATEAU / MLIT Japan Pages 「れきちず」を支える技術: 構成とデータパイプライン rekichizu rekichizu-style
rekichizu-data Pages ベクトルタイル 地図スタイル HTML/JS 自動ビルド engineer designer 自動ビルド 自動ビルド デザイナーのGitHubの操作は ファイルをアップロードして プルリクエストするのみ 位置情報データ(GeoJSON)
©Project PLATEAU / MLIT Japan 「れきちず」を支える技術: 構成とデータパイプライン 差分を見ながら 編集する開発用画面
©Project PLATEAU / MLIT Japan Pages 「れきちず」を支える技術: 構成とデータパイプライン rekichizu rekichizu-style
rekichizu-data Pages ベクトルタイル 地図スタイル HTML/JS 自動ビルド engineer designer 自動ビルド 自動ビルド GitHub Actionsで CI/CD 位置情報データ(GeoJSON)
©Project PLATEAU / MLIT Japan Pages 「れきちず」を支える技術: 構成とデータパイプライン rekichizu rekichizu-style
rekichizu-data Pages ベクトルタイル 地図スタイル HTML/JS 自動ビルド engineer designer 自動ビルド 自動ビルド 位置情報データ(GeoJSON) すべてフロントエンド技術 互いに疎結合なので 独立してリリース可能
©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
©OpenStreetMap contributors 03 「れきちず」の展望
©Project PLATEAU / MLIT Japan 「れきちず」の展望 データの提供範囲の拡大 •現状の提供範囲は関東地方 ◦中部地方(一部)を暫定公開 •鋭意作業中、随時拡大していきます
©Project PLATEAU / MLIT Japan 「れきちず」の展望 データの提供範囲の時間的拡大 •いまのところ、江戸時代を基準にデータの整備を進めています •より広範な時代区分の整備が最終目標です! 古代
奈良 平安 鎌倉 室町 戦国 江戸 明治 大正 昭和 現代 未来 制作中
© 地理院地図 全国最新写真(シームレス) •古地図を現代のデザイン・技術でWeb地図化した「れきちず」 •「れきちず」はモダンなフロントエンド技術で支えられている •今後の拡張に乞うご期待! まとめ
© 地理院地図 全国最新写真(シームレス)