AWS Heroes Map 秘伝のレシピ

Slide 1

Slide 1 text

Yasunori Kirimoto 2024.10.28 - MIERUNE 朝LT AWS Heroes Map 秘伝のレシピ

Slide 2

Slide 2 text

Yasunori Kirimoto AWS DevTools Hero MapLibre Voting Member OSGeo Charter Member Owner of dayjournal MapLibre User Group Japan Amplify Japan User Group Notion Sapporo dayjournal 　dayjournal_nori Co-Founder and COO of MIERUNE

Slide 3

Slide 3 text

©OpenStreetMap contributors 01｜AWS Heroes Mapとは 02｜秘伝のレシピ 03｜今後に向けて Contents

Slide 4

Slide 4 text

©OpenStreetMap contributors 01 AWS Heroes Mapとは

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

©Project PLATEAU / MLIT Japan さまざまなコメント ● 公開してくれてありがとう！ ● これはとてもクールだ！こういうのが好きなんだ！ ● これは魔法なのか？なぜ私が住んでいる場所を知っているんだ君は！ ● あなたは文字通り私を地図に入れた。素晴らしい仕事だ！ ● もっとヒーローが必要だ！どこの国も！ ● どんな技術を使っているんだ？ ● 地図のビジュアライゼーションは本当にインタラクティブだ！ AWS Heroes Mapとは

Slide 10

Slide 10 text

©Project PLATEAU / MLIT Japan さまざまなコメント ● 262名だけ？ 400名以上いると思っていた ○ 公式サイトも人数は書かれていない... ● 私はすでに引っ越している ○ 公式サイトが更新されていない... ● 俺がいない！ ○ 同一地域は拡大すると見える ● 拡大すると多くの人々が表示されるぞ！ ○ ぱっと見わかりづらい ● 私が違う場所にいるようだ ○ 住所情報が不十分で同一名称の他地域に表示されているよ... AWS Heroes Mapとは

Slide 11

Slide 11 text

Slide 12

Slide 12 text

©OpenStreetMap contributors 02 秘伝のレシピ

Slide 13

Slide 13 text

©Project PLATEAU / MLIT Japan 利用技術 ● マップライブラリ ○ MapLibre GL JS ● 背景地図 ○ Amazon Location Service ○ Open Data Style ● ホスティング ○ AWS Amplify ● ドメイン ○ Cloudflare ● データ前処理 ○ Python ● 秘伝のレシピ

Slide 14

Slide 14 text

アプリケーションデータ今回はデータの準備が大変だった！秘伝のレシピ

Slide 15

Slide 15 text

Slide 16

Slide 16 text

©Project PLATEAU / MLIT Japan スクレイピング ● Pythonで公式サイトをスクレイピングし CSVを作成 ● 候補の中からSeleniumを選択し実装したがすべてのデータが取れない... ● ページング等でうまく取得できていなかった ● Playwrightに切り替えて再実装 (Playwright はE2Eテストツールでも利用されている) ● 一覧データをCSVに保存した ChatGPTで取得した一覧の例秘伝のレシピ

Slide 17

Slide 17 text

©Project PLATEAU / MLIT Japan スクレイピング ● 下記データを取得しCSV作成 ● Hero Category ○ AWS DEVTOOLS HERO ● Hero Name ○ Yasunori Kirimoto ● Hero Since ○ Hero since 2022 ● Location ○ "Sapporo, Japan" ● Photo Link ● Detail Link ● 秘伝のレシピ

Slide 18

Slide 18 text

©Project PLATEAU / MLIT Japan ジオコーディング ● PythonでデータのLocationから対象地域の中心座標を求めてCSVに追記 ● 候補の中からGeoPyを選択し実装した ● GeoPyはさまざまなジオコーディングAPI を利用できる ● 今回は位置精度も市町村レベルまでで良いのでNominatim (OSM)を選択した ● 経緯度データをCSVに追記した秘伝のレシピ

Slide 19

Slide 19 text

©Project PLATEAU / MLIT Japan ジオコーディング ● 下記データを取得しCSVに追記 ● lat ○ 37.557903 ● lon ○ 126.985945 ● 秘伝のレシピ

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

©Project PLATEAU / MLIT Japan 重複データ削除 ● PythonでデータのHero Nameの重複を削除しCSVを再作成 ● 候補の中からPandasを選択し実装した ● AWSチームに重複データがあることを報告し現在は公式サイトも修正済 ● 重複データを削除しCSVを再作成した ● 秘伝のレシピ

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

©Project PLATEAU / MLIT Japan 同一座標データの調整 ● Pythonでデータのlatとlonが同一のものをランダムに調整しCSVを再作成 ● 候補の中からNumPyとPandasを選択し実装した ● 同一座標データを調整しCSVを再作成した ● 秘伝のレシピ

Slide 30

Slide 30 text

©Project PLATEAU / MLIT Japan GeoJSONに変換 ● PythonでCSVデータをGeoJSONデータに変換 ● 候補の中からPandasを選択し実装した ● CSVデータからGeoJSONデータを作成した ● 秘伝のレシピ

Slide 31

Slide 31 text

Slide 32

Slide 32 text

©Project PLATEAU / MLIT Japan マップアプリケーション構築 ● AWS Heroesの所在地と情報を可視化したマップアプリケーションを構築 ● maplibregljs-amazon-location-service-start erを利用し構築した ● Amazon Location ServiceのOpen Data Styleを背景地図で利用した ● AWS AmplifyでホスティングしCloudflare のドメインを利用し連携した ● データ更新時はGeoJSONファイルの入れ替えのみ秘伝のレシピ