Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2...

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

2024年8月24日 フロントエンドカンファレンス北海道2024の登壇スライドです。

Hajime Kato

August 24, 2024
Tweet

More Decks by Hajime Kato

Other Decks in Programming

Transcript

  1. ©Project PLATEAU / MLIT Japan 加藤 創 自己紹介 KATO Hajime Designer

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

    MapTiler © OpenStreetMap contributors
  3. ©Project PLATEAU / MLIT Japan 自己紹介 •札幌から車で   2時間くらい •2008年洞爺湖 サミットの会場

    •湖の中央に島が ある © MIERUNE | © MapTiler © OpenStreetMap contributors
  4. ©Project PLATEAU / MLIT Japan 「れきちず」とは •2019年Twitterに 投稿 •かなり大きな反響を いただく

    •後の「れきちず」の  原型となる 「江戸時代の Googleマップ」
  5. ©Project PLATEAU / MLIT Japan 「れきちず」とは 国立公文書館デジタルアーカイブ 農研機構 歴史的農業環境閲覧システム 江戸時代の絵図

    明治初期の地図 国土地理院 地理院タイル 道筋・海岸線等を 判断・抽出 道筋・海岸線等を 描画 誤差を補正
  6. ©Project PLATEAU / MLIT Japan 「れきちず」とは 地点情報を作成 •当時の地図や文献等をもとに POI(ポイント情報)をプロット •宿場町などの位置は明治の 

    地図や地名辞書より推定 「江戸名所図会 巻1 (日本図会全集)」 国立国会図書館デジタルコレクション  https://dl.ndl.go.jp/pid/1176676/1/32
  7. ©Project PLATEAU / MLIT Japan 「れきちず」とは 反響 •大きな反響をいただき、   公開翌日に10万PV •ネットメディアのみならず

    Abema・テレビ朝日にて放映、 朝日新聞に紙面掲載 朝日新聞 2023年12月16日 夕刊紙面
  8. ©Project PLATEAU / MLIT Japan 「れきちず」とは 「れきちず」のオープン化 •地図はCC BY-NC-ND 4.0の

    下、自由に利用することができる •複数サイトで背景地図として、  利用いただいている http://codh.rois.ac.jp/edomi/route/2/
  9. ©Project PLATEAU / MLIT Japan https://github.com/Kanahiro 井口 奏大 自己紹介 IGUCHI Kanahiro

    GIS/OSS Enthusiast https://qiita.com/Kanahiro CTO MapLibre User Group Japan
  10. ©Project PLATEAU / MLIT Japan 「れきちず」を支える技術: MapLibre GL JS •Webブラウザで地図を描画するためのライブラリ

    •WebGLとベクトルタイルによる高パフォーマンス •柔軟・多彩な地図デザイン •3D地形 MapLibre GL JS
  11. ©Project PLATEAU / MLIT Japan Pages 「れきちず」を支える技術: 構成とデータパイプライン rekichizu rekichizu-style

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

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

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

    rekichizu-data Pages ベクトルタイル 地図スタイル HTML/JS 自動ビルド engineer designer 自動ビルド 自動ビルド 位置情報データ(GeoJSON) すべてフロントエンド技術 互いに疎結合なので 独立してリリース可能
  15. ©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