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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 『にゃーにゃーマップ』
    　１．Webマップネコ (ﾟ－ﾟ*)
    https://near-near-map.w2or3w.com
    ﾆｬｰ ♪
    (ﾟ－ﾟ*)
    

    View Slide

13. 『にゃーにゃーマップ』
    　２．検索ネコ (Ф∀Ф)
    https://near-near-map.w2or3w.com
    ｹﾝｻｸ ｹﾝｻｸｩ
    (Ф∀Ф)
    

    View Slide

14. 『にゃーにゃーマップ』
    　３．インポートネコ （=・ω・）
    https://near-near-map.w2or3w.com
    ｸﾞｸﾞﾚ ﾊﾞ
    ﾅﾝﾄｶ ﾅﾙ ﾖ
    （=・ω・）
    

    View Slide

15. 『にゃーにゃーマップ』
    　４．スクレイピングネコ (,,・∀・)
    https://near-near-map.w2or3w.com
    ﾄﾞﾛﾎﾞｳﾈｺ ｯﾃ
    ｲﾜﾅｲﾃﾞ..
    (,,・∀・)
    

    View Slide

16. 『にゃーにゃーマップ』
    　５．Web管理ネコ (*ﾟдﾟ)
    https://near-near-map.w2or3w.com
    Amplify ﾖｼ‼
    (*ﾟдﾟ)
    

    View Slide

17. 『にゃーにゃーマップ』
    　６．画像管理ネコ (・д・,,)
    https://near-near-map.w2or3w.com
    ｲﾔﾗｼｲ ﾉﾊ
    ﾖｸ ﾅｲﾄ ｵﾓｲﾏｽ
    (・д・,,)
    

    View Slide

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

    View Slide

19. 『にゃーにゃーマップ』
    　７．ロコガイド同期ネコ (,,・∀・,,)
    https://near-near-map.w2or3w.com
    ｺﾝｻﾞﾂ
    ｼﾞｮｳｷｮｳ
    ﾉ
    ﾐｴﾙｶ
    (,,・∀・,,)
    

    View Slide

20. 『にゃーにゃーマップ』
    　８．アップデートネコ (´ω｀*)
    https://near-near-map.w2or3w.com
    ｱｯﾌﾟｯﾌﾟ
    (´ω｀*)
    

    View Slide

21. 『にゃーにゃーマップ』
    　９．ワークフローネコ (^･ｪ･^)
    https://near-near-map.w2or3w.com
    ﾊﾞｯｸｴﾝﾄﾞ ﾉ
    ｼﾞﾄﾞｳｶ
    (^･ｪ･^)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. Thank You !!
    

    View Slide