Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2020.12-浜松IT合同勉強会2020

w2or3w
December 19, 2020
190

 2020.12-浜松IT合同勉強会2020

w2or3w

December 19, 2020
Tweet

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 自己紹介

    View full-size slide

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

    View full-size slide

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

    View full-size 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コンテナ勉強会その2
    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コンテナ勉強会その3
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    何をした?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide