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

Transcript

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

2. ナカムラ ツカサ 2(ツー) or(~か) 3(サン) 38才 リーマンアプリケーションエンジニア 最近サーバーレスアプリ制作にお熱です！ 好き :

   川や雪山で遊ぶこと JAWS-UG歴 : 約1年 @w2or3w 自己紹介

3. 自己紹介 2019年 6月～ 最初の2,3ヶ月 ぼんやり参加 　↓ 2019年 9月頃 何かやらねば事件 →

   2019年〜10, 11, 12月 1つ目の作品『Mosaic』 ダッシュで制作 ＆進捗報告at勉強会 　↓ みなぎってきてる (37才)

4. 自己紹介 みなぎってきてる (37才) 　↓ 2020年 3〜4月 コロナ対策サイトに 関わったりしながら、、 → 2020年

   4〜5月 2つ目の作品 『にゃーにゃーマップ』制作 　↓ ますますみなぎる 38才 となるか！？

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

6. • AWSを活用したサーバーレスWebアプリ • 新型コロナ対策サイトで利用されていた技術の更なるキャッチアップ • テイクアウトサイトの乱立。すぐ動ける人達への尊敬。 • ワタシもコロナにかこつけたアプリを作ってみたかった。 • 店舗やメディアの情報をキュレーションしたマップベースのWebアプリ

   • Stay NEAR, Enjoy NEAR (近くで楽しむ) がコンセプト • 絶賛学習 & 拡張中。 サーバーレスWebアプリ 『にゃーにゃーマップ』とは？ https://near-near-map.w2or3w.com

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

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

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

   Service利用

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

11. 『にゃーにゃーマップ』 vol.4 １．位置情報検索のサーバーレス化 　　　#Geohash #H3 #DynamoDB #LocalSecondaryIndex #Python ２．スクレイピングとインポートの自動化 　　　#EventBridge

    #StepFunctions #Lambda 　　　#DynamoDB #DynamoDBStream #S3 #Athena #DataCatalog (近くの情報を取ってくるやつ) 今日のテーマ

12. 『にゃーにゃーマップ』 vol.4 １．位置情報検索のサーバーレス化 　　　#Geohash #H3 #DynamoDB #LocalSecondaryIndex #Python ２．スクレイピングとインポートの自動化 　　　#EventBridge

    #StepFunctions #Lambda 　　　#DynamoDB #DynamoDBStream #S3 #Athena #DataCatalog (近くの情報を取ってくるやつ) 今日のテーマ

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

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

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

    ん ) 『にゃーにゃーマップ』vol.4 おさらい

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

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

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

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

20. 位置情報検索のサーバーレス化 • タイプ • タイトル • 電話番号 • 住所 •

    緯度経度 • h3index9 • h3index8 • h3index7 • ： Local Secondary Index インポートするところ 『にゃーにゃーマップ』vol.4 店舗の位置 ↓

21. 位置情報検索のサーバーレス化 セカンダリインデックス １．グローバルセカンダリインデックス ２．ローカルセカンダリインデックス DynamoDB の キー と インデックス プライマリーキー

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

22. 位置情報検索のサーバーレス化 セレクトするところ # 拡大率により # 範囲(六角形の大きさ)を変更 # 現在位置(latlon)のh3Indexを取得 # その周辺2周りのh3Indexを取得

    # ( 1 + 6 + 12 = 19個の h3Index ) # 最低7回、最大19回 # DynamoDBからSelectしてくる！ 『にゃーにゃーマップ』vol.4

23. 位置情報検索のサーバーレス化 『にゃーにゃーマップ』vol.4 ありがとう DynamoDB !! \ めでたし !! / \

    これぞサーバーレス !! / ※ データ量やアクセス量が増加し続けた場合、 　 どこかでサーバーレスではない方が安くなるポイントがあるんだろうなとは思います。

24. 『にゃーにゃーマップ』 vol.4 １．位置情報検索のサーバーレス化 　　　#Geohash #H3 #DynamoDB #LocalSecondaryIndex #Python ２．スクレイピングとインポートの自動化 　　　#EventBridge

    #StepFunctions #Lambda 　　　#DynamoDB #DynamoDBStream #S3 #Athena #DataCatalog (近くの情報を取ってくるやつ) 今日のテーマ

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

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

    1. 2. のワークフローを Step Functionsで組み、 定期的に EventBridgeで実行する。 Event Bridge Step Functions

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 というライブラリを利用したよ

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表示を許可しているか？) クローリングだけでは捕りきれない情報はググって補完！ \ ないしょだよ /

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

    　検索力のあるナニカと同期させて、そちらを参照する。

30. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4 CSV DynamoDBの情報を、 検索力のあるナニカと同期させて、そちらを参照する。 ナニカ 更新内容を ストリーミング 同期 ←

    レプリカ ↑ マスター インポートネコ （=・ω・） 電話番号で検索とか できるようになる。

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

32. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4 DynamoDBのレプリカ何にする？ Athena !! ＜ よし！ ※ バックエンドでインポートするときにしか参照しない 　

    ( = 同時に大量のリクエストが発生しない & 多少遅くても問題ない ) 　 から、採用できる。 S3 !! &

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 ちゃんとパーティションで絞り込んであ げないと料金がもったいない！ パーティション分割、大事！

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/'

35. クローリングとインポートの自動化 『にゃーにゃーマップ』vol.4 CSV DynamoDBの情報を、S3・データカタログと同期させて、 Athenaから参照できるようにする。 更新内容を ストリーミング ← レプリカ ↑

    マスター インポートネコ （=・ω・） 電話番号で検索とか できるようになる。 同期 (データ・パーティション) 検索ネコ (Ф∀Ф)

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

    定期的に 1. 2. のワークフローを Step Functionsで実行する。 Event Bridge Step Functions

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

    インポートする End Yes No

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

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

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

    データ同期ネコ （*・ω・*） データカタログネコ （=・д・=）

41. Thank You !!