2020.12-浜松IT合同勉強会2020

Transcript

1. サーバーレスWebアプリ制作で学ぶ
   2020年 振り返り
   @w2or3w
   2020.12.19 浜松IT合同勉強会2020 LT大会
   

   View Slide

2. 自己紹介
   @w2or3w
   2020.12.19 浜松IT合同勉強会2020 LT大会
   

   View Slide

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

   View Slide

4. 自己紹介
   

   View Slide

5. この初々しさ！
   2019年の浜松IT合同勉強会 LT大会 で 初LT！
   自己紹介
   

   View Slide

6. 2020年 何をした？
   @w2or3w
   2020.12.19 浜松IT合同勉強会2020 LT大会
   

   View Slide

7. 2020年なにをした？
   1. 2019/06/28(金) JAWS-UG浜松 AWS勉強会
   2. 2019/07/04(木) JAWS-UG浜松 AWS Expert Online
   3. 2019/08/21(水) JAWS-UG磐田 AWSコンテナ勉強会その２
   4. 2019/08/23(金) JAWS-UG浜松 AWS勉強会
   5. 2019/09/07(土) Local IT Meetup -Episode 1- IWATA
   6. 2019/09/19(木) JAWS-UG浜松 AWS Expert Online
   7. 2019/10/25(金) JAWS-UG浜松 AWS勉強会
   8. 2019/11/23(土) JAWS-UG磐田 AWSコンテナ勉強会その３
   9. 2019/11/29(金) JAWS-UG浜松 AWS勉強会
   10. 2019/12/07(土) 浜松IT合同勉強会2019 LT大会 <- 去年!!
   引き続き、
   勉強会に参加した！
   なるべく
   発表することを
   意識した！
   1. 2020/01/24(金) JAWS-UG浜松 AWS勉強会 (発表)
   2. 2020/02/05(水) JAWS-UG浜松 Expert Online 視聴
   3. 2020/03/25(水) JAWS-UG浜松 Expert Online 視聴
   4. 2020/04/24(金) JAWS-UG浜松 AWS勉強会 (発表)
   5. 2020/06/26(金) JAWS-UG浜松 AWS勉強会 (発表)
   6. 2020/07/08(水) JAWS-UG浜松 Expert Online 視聴 (+発表)
   7. 2020/08/28(金) JAWS-UG浜松 AWS勉強会 (発表の練習)
   8. 2020/09/12(土) JAWS UG SONIC (発表)
   9. 2020/10/30(金) JAWS-UG浜松 AWS勉強会 (発表)
   10. 2020/12/19(土) 浜松IT合同勉強会2020 LT大会 (LT) <- Now!!
   

   View Slide

8. 2020年なにをした？
   何といっても
   この2つ！
   新型コロナ対策サイト(浜松版)への
   コントリビュート
   にゃーにゃーマップを制作して
   シビックテック的なことをした
   

   View Slide

9. 2020年 何をした？
   　＞ 新型コロナ対策サイト浜松版へのコントリビュート
   　　 マップベースWebアプリの制作
   @w2or3w
   2020.12.19 浜松IT合同勉強会2020 LT大会
   

   View Slide

10. 2020年 何をした？ ~ 新型コロナ対策サイト 浜松版 ~
    新型コロナウィルス
    対策サイト
    で
    何をした？
    

    View Slide

11. 2020年 何をした？ ~ 新型コロナ対策サイト 浜松版 ~
    立ち上げの場に
    (たまたま)
    居合わせた。
    そして
    (Nuxt.js経験ないけど)
    ジョインした！
    ヨッ！
    \
    ナイス ジョイン！！
    /
    

    View Slide

12. 2020年 何をした？ ~ 新型コロナ対策サイト 浜松版 ~
    オープンデータと
    Webアプリのデータ
    とを 繋いだ！
    ヨッ！
    \
    オープンデータ活用！！
    /
    

    View Slide

13. 2020年 何をした？ ~ 新型コロナ対策サイト 浜松版 ~
    UIも
    少しはやったよ！
    ヨッ！
    \
    強々Web デベロッパー！！
    /
    これらアプリの
    リンクを追加した！
    ここに スクロールバーを追加した！
    (※当時、感染者1名につき1行だった時に縦長になりすぎる
    のを防ぐ目的)
    

    View Slide

14. 2020年 何をした？ ~ 新型コロナ対策サイト 浜松版 ~
    これのレイアウトを変更した！
    (※東京都のサイトから差分を探してマージしただけ)
    ヨッ！
    \
    強々マージ職人！！
    /
    グラフを横スクロールできるようにしたり、
    下にテーブルを表示するようにした！
    (※東京都のサイトから差分を探してマージしただけ)
    UIも
    少しはやったよ！
    

    View Slide

15. 2020年 何をした？ ~ 新型コロナ対策サイト 浜松版 ~
    　　\
    ・・・・ /
    

    View Slide

16. 2020年 何をした？ ~ 新型コロナ対策サイト 浜松版 ~
    　\
    もっとできるようになりたい！
    /
    

    View Slide

17. 2020年 何をした？ ~ にゃーにゃーマップ ~
    　\
    もっとできるようになりたい！
    /
    Stay Near, Enjoy Near
    (Nuxt.jsを)
    

    View Slide

18. 2020年 何をした？
    　 新型コロナ対策サイト浜松版へのコントリビュート
    　＞ マップベースWebアプリの制作
    @w2or3w
    2020.12.19 浜松IT合同勉強会2020 LT大会
    

    View Slide

19. 2020年 何をした？ ~ にゃーにゃーマップ ~
    (Nuxt.js を)　　　　　　　　　
    \
    もっとできるようになりたい！
    /
    \ 沢山できたテイクアウトサイト /
    \
    まとめたい！！
    /
    Stay Near, Enjoy Near
    

    View Slide

20. 2020年 何をした？ ~ にゃーにゃーマップ ~
    \
    混雑ランプ！
    /
    \
    認証店舗！
    /
    \
    Go To Eat！
    /
    Stay Near, Enjoy Near
    制作期間 約2週間！
    5月の頭ごろに1st版完成！
    7月頃 9月頃 10月頃 12月末？
    

    View Slide

21. 2020年 何をした？ ~ にゃーにゃーマップ ~
    見どころはバックエンド！
    WebスクレイピングとGooglePlaceAPIを利用した情報収集とその自動化、
    位置情報をキーにした情報検索や管理。
    

    View Slide

22. 2020年 何をした？ ~ にゃーにゃーマップ ~
    位置情報をキーにした情報検索や管理 => Uber’s H3 というものを利用
    

    View Slide

23. 2020年 何をした？ ~ にゃーにゃーマップ ~
    位置情報をキーにした情報検索や管理 => Uber’s H3 というものを利用
    ● タイプ (PK)
    ● 名前
    ● 電話番号
    ● 住所
    ● 緯度経度
    ● h3index (Secondary Index)
    ● ：
    クライアントの現在位置(緯度経度) -> h3indexへ変換
    DynamoDB(KVS)からh3indexでスパッと選択！
    この中にある(=h3index)
    複数店舗情報をSelect !!
    ヨッ！
    \
    サーバーレス！！
    /
    ～クライアントからのセレクト用～
    

    View Slide

24. 2020年 何をした？ ~ にゃーにゃーマップ ~
    位置情報をキーにした情報検索や管理 => Uber’s H3 というものを利用
    type=food
    |- h3index=xxxxxxxxxxxffff
    |- shopinfo.json
    住所、電話番号、店名、、などの柔軟な検索
    ここでも位置情報(h3index)を検索条件に加えることで
    より効率的かつ低コストな検索が可能となる！
    ヨッ！
    \
    データレイク！！
    /
    ～バックエンドからのセレクト用～
    

    View Slide

25. 2020年 何をした？ ~ にゃーにゃーマップ ~
    位置情報をキーにした情報検索や管理 => Uber’s H3 というものを利用
    ～バックエンドからのセレクト用～ (計画的に、柔軟な検索が可能！)
    ～クライアントからのセレクト用～ (バシバシ叩かれても平気！)
    \
    にゃーにゃーマップは
    /
    \　バックエンドがテクい
    /
    \
    サーバーレス！！
    /
    

    View Slide

26. @w2or3w
    2020.12.19 浜松IT合同勉強会2020 LT大会
    Enjoy OPENDATA with SERVERLESS
    Thank You !!
    

    View Slide