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
170
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道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
460
240803_tochiji-hai_hackathon_kato
hjmkth
2
210
231229_Datavizjp_kato
hjmkth
2
1k
231206_Book-launch-event_kato
hjmkth
2
1.4k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
460
231007_tokyor_kato
hjmkth
6
1.5k
230909_chiriin-fc_kato
hjmkth
0
1.2k
230904_Geo-Lang_kato
hjmkth
0
1.5k
230726_MIERUNE BBQ #03_kato
hjmkth
1
420
Other Decks in Programming
See All in Programming
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
260
macOS でできる リアルタイム動画像処理
biacco42
2
740
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
6
400
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.2k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
150
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
8
940
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
22k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
10
2.3k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
15
3.9k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
230
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
KATA
mclloyd
29
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
670
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Testing 201, or: Great Expectations
jmmastey
38
7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Become a Pro
speakerdeck
PRO
24
5k
Practical Orchestrator
shlominoach
186
10k
BBQ
matthewcrist
85
9.3k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.8k
Agile that works and the tools we love
rasmusluckow
327
21k
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地図化した「れきちず」 •「れきちず」はモダンなフロントエンド技術で支えられている •今後の拡張に乞うご期待! まとめ
© 地理院地図 全国最新写真(シームレス)