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

2020.06-にゃーにゃーマップvol.1

w2or3w
June 26, 2020
220

 2020.06-にゃーにゃーマップvol.1

w2or3w

June 26, 2020
Tweet

Transcript

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

    View full-size slide

  2. 自己紹介
    2or3 (ツカサ) 2(ツー) or(~か) 3(サン)
    アプリケーションエンジニア です。
    最近サーバーレスWebアプリ制作にお熱です!
    去年7月頃からJAWS UG浜松に
    顔を出しているモノです。
    よろしくおねがいします。
    ついに
    1年経ちまし
    た!!

    View full-size slide

  3. 自己紹介
    最初の2,3ヶ月
    ぼんやり参加
     ↓
    9月頃
    何かやらねば

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

    View full-size slide

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

    4〜5月
    2つ目の作品
    にゃーにゃーマップ制作
     ↓
    ますますみなぎる38才
    となるか!?
    (※9月末です)

    View full-size slide

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

    View full-size slide

  6. まずはデモします。
    https://near-near-map.w2or3w.com

    View full-size slide

  7. 『にゃーにゃーマップ』
     アーキテクチャ図
    https://near-near-map.w2or3w.com

    View full-size slide

  8. 『にゃーにゃーマップ』
     AWS 要素 (サーバーレスでマネージド)
    https://near-near-map.w2or3w.com
    Amplify
    (Console/CLI/JS)
    API Gateway
    AppSync
    Cognito
    CloudSearch
    DynamoDB
    Rekognition
    Lambda
    S3

    View full-size slide

  9. 『にゃーにゃーマップ』
     新型コロナ対策関連 要素
    https://near-near-map.w2or3w.com
    Nuxt.js
    i18n
    internationalization
    (iとnの間に18文字)
    Maps JavaScript API
    Geocoding API
    Places API

    View full-size slide

  10. 『にゃーにゃーマップ』
     アーキテクチャ図
    https://near-near-map.w2or3w.com

    View full-size slide

  11. 『にゃーにゃーマップ』
     ネコたちの紹介
    https://near-near-map.w2or3w.com
    1. Webマップネコ (゚-゚*)
    2. 検索ネコ (Ф∀Ф)
    3. インポートネコ (=・ω・)
    4. スクレイピングネコ (,,・∀・)
    5. Web管理ネコ (*゚д゚)
    6. 画像管理ネコ (・д・,,)

    View full-size slide

  12. 『にゃーにゃーマップ』
     1.Webマップネコ (゚-゚*)
    https://near-near-map.w2or3w.com
    ニャー ♪
    (゚-゚*)

    View full-size slide

  13. 『にゃーにゃーマップ』
     2.検索ネコ (Ф∀Ф)
    https://near-near-map.w2or3w.com
    ケンサク ケンサクゥ
    (Ф∀Ф)

    View full-size slide

  14. 『にゃーにゃーマップ』
     3.インポートネコ (=・ω・)
    https://near-near-map.w2or3w.com
    ググレ バ
    ナントカ ナル ヨ
    (=・ω・)

    View full-size slide

  15. 『にゃーにゃーマップ』
     4.スクレイピングネコ (,,・∀・)
    https://near-near-map.w2or3w.com
    ドロボウネコ ッテ
    イワナイデ..
    (,,・∀・)

    View full-size slide

  16. 『にゃーにゃーマップ』
     5.Web管理ネコ (*゚д゚)
    https://near-near-map.w2or3w.com
    Amplify ヨシ‼
    (*゚д゚)

    View full-size slide

  17. 『にゃーにゃーマップ』
     6.画像管理ネコ (・д・,,)
    https://near-near-map.w2or3w.com
    イヤラシイ ノハ
    ヨク ナイト オモイマス
    (・д・,,)

    View full-size slide

  18. 『にゃーにゃーマップ』
     これからやりたいこと
    https://near-near-map.w2or3w.com
    まだまだ増えるネコ達

    View full-size slide

  19. 『にゃーにゃーマップ』
     7.ロコガイド同期ネコ (,,・∀・,,)
    https://near-near-map.w2or3w.com
    コンザツ
    ジョウキョウ

    ミエルカ
    (,,・∀・,,)

    View full-size slide

  20. 『にゃーにゃーマップ』
     8.アップデートネコ (´ω`*)
    https://near-near-map.w2or3w.com
    アップップ
    (´ω`*)

    View full-size slide

  21. 『にゃーにゃーマップ』
     9.ワークフローネコ (^・ェ・^)
    https://near-near-map.w2or3w.com
    バックエンド ノ
    ジドウカ
    (^・ェ・^)

    View full-size slide

  22. 『にゃーにゃーマップ』
     これからやりたいこと
    https://near-near-map.w2or3w.com
    目指せ11ぴきのネコ

    View full-size slide

  23. 『にゃーにゃーマップ』
     これからやりたいこと
    https://near-near-map.w2or3w.com
    求む・キャラデザイン

    View full-size slide

  24. 『にゃーにゃーマップ』
     これからやりたいこと
    https://near-near-map.w2or3w.com
    Qiitaへのシリーズ記事投稿
    Mosaicのときは17記事書けた
    今回は果たして、、!?

    View full-size slide

  25. 『にゃーにゃーマップ』
     これからやりたいこと
    https://near-near-map.w2or3w.com
    管理ネコ
    Nuxt.js から Next.js へ。

    View full-size slide

  26. Thank You !!

    View full-size slide