2020.10-にゃーにゃーマップvol.4(Uber H3 Index)

Transcript

1. サーバーレスWebアプリ制作で学ぶ
   にゃーにゃーマップ vol.4
   2020.10.30 JAWS UG 浜松
   2or3
   

   View Slide

2. ナカムラ ツカサ
   2(ツー) or(~か) 3(サン) 38才
   リーマンアプリケーションエンジニア
   最近サーバーレスアプリ制作にお熱です！
   好き : 川や雪山で遊ぶこと
   JAWS-UG歴 : 約1年
   @w2or3w
   自己紹介
   

   View Slide

3. 自己紹介
   2019年 6月～
   最初の2,3ヶ月
   ぼんやり参加
   　↓
   2019年 9月頃
   何かやらねば事件
   →
   2019年〜10, 11, 12月
   1つ目の作品『Mosaic』
   ダッシュで制作
   ＆進捗報告at勉強会
   　↓
   みなぎってきてる
   (37才)
   

   View Slide

4. 自己紹介
   みなぎってきてる
   (37才)
   　↓
   2020年 3〜4月
   コロナ対策サイトに
   関わったりしながら、、
   →
   2020年 4〜5月
   2つ目の作品
   『にゃーにゃーマップ』制作
   　↓
   ますますみなぎる
   38才 となるか！？
   

   View Slide

5. サーバーレスWebアプリ制作で学ぶ
   にゃーにゃーマップ vol.4
   2020.10.30 JAWS UG 浜松
   2or3
   

   View Slide

6. ● AWSを活用したサーバーレスWebアプリ
   ● 新型コロナ対策サイトで利用されていた技術の更なるキャッチアップ
   ● テイクアウトサイトの乱立。すぐ動ける人達への尊敬。
   ● ワタシもコロナにかこつけたアプリを作ってみたかった。
   ● 店舗やメディアの情報をキュレーションしたマップベースのWebアプリ
   ● Stay NEAR, Enjoy NEAR (近くで楽しむ) がコンセプト
   ● 絶賛学習 & 拡張中。
   サーバーレスWebアプリ
   『にゃーにゃーマップ』とは？
   https://near-near-map.w2or3w.com
   

   View Slide

7. サーバーレスWebアプリ
   『にゃーにゃーマップ』最近のアップデート
   https://near-near-map.w2or3w.com
   

   View Slide

8. 『にゃーにゃーマップ』アーキテクチャ図
   Stay Near, Enjoy Near
   2020/05-06 : 初版 CloudSearch利用
   

   View Slide

9. 『にゃーにゃーマップ』アーキテクチャ図
   Stay Near, Enjoy Near
   2020/07-08 : ロコガイドAPI利用 ＆ Elasticsearch Service利用
   

   View Slide

10. 『にゃーにゃーマップ』アーキテクチャ図
    2020/09-10 : 自動化と、位置検索のサーバーレス化
    

    View Slide

11. 『にゃーにゃーマップ』 vol.4
    １．位置情報検索のサーバーレス化
    　　　#Geohash #H3 #DynamoDB #LocalSecondaryIndex #Python
    ２．スクレイピングとインポートの自動化
    　　　#EventBridge #StepFunctions #Lambda
    　　　#DynamoDB #DynamoDBStream #S3 #Athena #DataCatalog
    (近くの情報を取ってくるやつ)
    今日のテーマ
    

    View Slide

12. 『にゃーにゃーマップ』 vol.4
    １．位置情報検索のサーバーレス化
    　　　#Geohash #H3 #DynamoDB #LocalSecondaryIndex #Python
    ２．スクレイピングとインポートの自動化
    　　　#EventBridge #StepFunctions #Lambda
    　　　#DynamoDB #DynamoDBStream #S3 #Athena #DataCatalog
    (近くの情報を取ってくるやつ)
    今日のテーマ
    

    View Slide

13. 位置情報検索のサーバーレス化 『にゃーにゃーマップ』vol.4
    

    View Slide

14. 位置情報検索のサーバーレス化
    (JAWS-UG浜松 7月の勉強会(にゃーにゃーマップ vol.2))
    『にゃーにゃーマップ』vol.4
    こんなの サーバーレス じゃない..!!
    おさらい
    

    View Slide

15. 位置情報検索のサーバーレス化
    (JAWS SONIC 2020 (9/12)(にゃーにゃーマップ vol.3))
    → 誰も教えてくれない
    (ぴ
    え
    ん
    )
    『にゃーにゃーマップ』vol.4
    おさらい
    

    View Slide

16. 位置情報検索のサーバーレス化 『にゃーにゃーマップ』vol.4
    できた！
    

    View Slide

17. 位置情報検索のサーバーレス化
    https://medium.com/google-cloud-jp/how-to-use-bigtable-for-geolocation-d5f424023be3
    『にゃーにゃーマップ』vol.4
    参考にした情報
    

    View Slide

18. 位置情報検索のサーバーレス化
    https://eng.uber.com/h3/
    『にゃーにゃーマップ』vol.4
    

    View Slide

19. 位置情報検索のサーバーレス化 『にゃーにゃーマップ』vol.4
    

    View Slide

20. 位置情報検索のサーバーレス化
    ● タイプ
    ● タイトル
    ● 電話番号
    ● 住所
    ● 緯度経度
    ● h3index9
    ● h3index8
    ● h3index7
    ● ：
    Local Secondary Index
    インポートするところ
    『にゃーにゃーマップ』vol.4
    店舗の位置
    ↓
    

    View Slide

21. 位置情報検索のサーバーレス化
    セカンダリインデックス
    １．グローバルセカンダリインデックス
    ２．ローカルセカンダリインデックス
    DynamoDB の キー と インデックス
    プライマリーキー
    １．パーティションキー
    ２．パーティションキー ＋ ソートキー
    『にゃーにゃーマップ』の キー と インデックス
    　プライマリーキー : タイプ + GUID (余談 : 昔は電話番号にしてたけど辞めた
    )
    　セカンダリインデックス : タイプ + h3index9
    : タイプ + h3index8
    : タイプ + h3index7
    この中にある(=h3index)
    複数店舗情報をSelect !!
    ↑
    タイプ
    (※テーブル作成時にしか作れない。
    )
    (※プライマリーキーは重複できない。
    　 セカンダリインデックスは重複できる。
    )
    『にゃーにゃーマップ』vol.4
    

    View Slide

22. 位置情報検索のサーバーレス化
    セレクトするところ
    # 拡大率により
    # 範囲(六角形の大きさ)を変更
    # 現在位置(latlon)のh3Indexを取得
    # その周辺2周りのh3Indexを取得
    # ( 1 + 6 + 12 = 19個の h3Index )
    # 最低7回、最大19回
    # DynamoDBからSelectしてくる！
    『にゃーにゃーマップ』vol.4
    

    View Slide

23. 位置情報検索のサーバーレス化 『にゃーにゃーマップ』vol.4
    ありがとう DynamoDB !!
    \ めでたし !! /
    \ これぞサーバーレス !! /
    ※ データ量やアクセス量が増加し続けた場合、
    　 どこかでサーバーレスではない方が安くなるポイントがあるんだろうなとは思います。
    

    View Slide

24. 『にゃーにゃーマップ』 vol.4
    １．位置情報検索のサーバーレス化
    　　　#Geohash #H3 #DynamoDB #LocalSecondaryIndex #Python
    ２．スクレイピングとインポートの自動化
    　　　#EventBridge #StepFunctions #Lambda
    　　　#DynamoDB #DynamoDBStream #S3 #Athena #DataCatalog
    (近くの情報を取ってくるやつ)
    今日のテーマ
    

    View Slide

25. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    

    View Slide

26. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    1. Webサイト(やオープンデータ)をスクレイピングして、
    共通フォーマットCSVを作成する。
    2. 共通フォーマットCSVをDynamoDBへインポートする。
    新たに情報を取りにいったり、既存データはマージする。
    ➢ DynamoDBへのデータ操作を、データカタログへ同期する。
    1. 2. のワークフローを Step Functionsで組み、
    定期的に EventBridgeで実行する。
    Event Bridge Step Functions
    

    View Slide

27. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    1. Webサイト(やオープンデータ)をスクレイピングして、
    共通フォーマットCSVを作成する。
    ● type : food / drink / life / mask / outdoor / hotspring / plant
    ● title : 店舗名称
    ● address : 住所 (フォーマット特に指定なし)
    ● tel : 電話番号 (ハイフン無し)
    ● homepage : 店舗ホームページのアドレス
    ● fb, insta, twitter : 各種SNSのアドレス
    ● media1~5 : その他メディアのアドレス
    ● locoguide_id : ロコガイドの混雑ランプ対応している場合はその
    ID
    ● star : 認証店舗(1)やGoToEat(2)をビットフラグで保持
    スクレイピングは Python の Beautiful Soup というライブラリを利用したよ
    

    View Slide

28. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    2. 共通フォーマットCSVをDynamoDBへインポートする。
    新たに情報を取りにいったり、既存データはマージする。
    ● type, title, address, media1~5, locoguide_id, star
    => csv値の値をそのままマージ
    ● latlon : Google Places API「title address」で検索して取得する
    ● tel, homepage : csv値 (無い場合 Google Places API 「title address」で検索して取得してみる)
    ● fb, insta, twitter : csv値 ( + homepageのindexをクローリングして探してみる)
    ● h3-9,8,7 : h3.geo_to_h3(lat, lon)で取得する
    ● has_xframe_options : homepage, media1~5
    レスポンスヘッダに「X-Frame-Options」があるかどうか？
    (=IFrame表示を許可しているか？)
    クローリングだけでは捕りきれない情報はググって補完！
    \ ないしょだよ /
    

    View Slide

29. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    DynamoDBへインポートする時の課題
    柔軟な検索ができなくて、既に登録されてるか分からない
    既に登録されてる？
    新規登録？
    （=・ω・）？
    CSV
    → DynamoDBの情報を、
    　検索力のあるナニカと同期させて、そちらを参照する。
    

    View Slide

30. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    CSV
    DynamoDBの情報を、
    検索力のあるナニカと同期させて、そちらを参照する。
    ナニカ
    更新内容を
    ストリーミング
    同期
    ← レプリカ
    ↑
    マスター インポートネコ
    （=・ω・）
    電話番号で検索とか
    できるようになる。
    

    View Slide

31. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    DynamoDBのレプリカ何にする？
    RDS ? Elasticsearch ?
    ＜ そんなばかな！
    

    View Slide

32. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    DynamoDBのレプリカ何にする？
    Athena !!
    ＜ よし！
    ※ バックエンドでインポートするときにしか参照しない
    　 ( = 同時に大量のリクエストが発生しない & 多少遅くても問題ない )
    　 から、採用できる。
    S3 !!
    &
    

    View Slide

33. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    S3 データレイク + Athena を レプリカにする
    Data Catalog
    (Glue)
    type=food
    |- h3_9=892e6441a2fffff
    |- aaaa(guid).json
    |- bbbb(guid).json
    :
    h3(9)(=約300m圏内) を
    パーティションとして分割
    select * from “table” where
    “type” = ‘food’ and
    “h3_9” = ‘892e6441a2fffff’ and
    “tel” = ‘0530000000’
    limit 10
    ちゃんとパーティションで絞り込んであ
    げないと料金がもったいない！
    パーティション分割、大事！
    

    View Slide

34. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    S3 データレイク + Athena を レプリカにする
    手順：
    1. S3にファイルを保存しておく。
    2. Glueのクローラを作成し、実行する。
    (入力元はS3、出力先は新規データカタログとする)
    3. Athenaでクエリ出来ることを確認する。
    ※インポートで発生するデータ同期時に、
    　パーティションが増えた場合はデータカタログへ追加する必要あり。
    　(そうしないとAthenaで参照できない)
    alter table "tablename" add if not exists partition (
    “p_type”='food', “h3_9”='892e6441a2fffff'
    ) location 's3://bucketname/type=food/h3_9=892e6441a2fffff/'
    

    View Slide

35. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    CSV
    DynamoDBの情報を、S3・データカタログと同期させて、
    Athenaから参照できるようにする。
    更新内容を
    ストリーミング
    ← レプリカ
    ↑
    マスター
    インポートネコ
    （=・ω・）
    電話番号で検索とか
    できるようになる。
    同期 (データ・パーティション)
    検索ネコ
    (Ф∀Ф)
    

    View Slide

36. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    1. Webサイト(やオープンデータ)をスクレイピングして、
    共通フォーマットCSVを作成する。
    2. 共通フォーマットCSVをDynamoDBへインポートする。
    新たに情報を取りにいったり、既存データはマージする。
    ➢ DynamoDBへのデータ操作を、データカタログへ同期する。
    定期的に 1. 2. のワークフローを
    Step Functionsで実行する。
    Event Bridge Step Functions
    

    View Slide

37. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    Step Functions で クローリングできたらインポートさせる
    Start
    スクレイピングする
    1つでも
    情報あり？
    インポートする
    End
    Yes
    No
    

    View Slide

38. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    Step Functions で クローリングできたらインポートさせる
    :
    

    View Slide

39. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    Step Functions で クローリングできたらインポートさせる
    

    View Slide

40. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4
    スクレイピングネコ
    (,,・∀・)
    インポートネコ
    （=・ω・）
    検索ネコ
    (Ф∀Ф)
    ワークフローネコ
    (,,ﾟ∀ﾟ)
    データ同期ネコ
    （*・ω・*）
    データカタログネコ
    （=・д・=）
    

    View Slide

41. Thank You !!
    

    View Slide