今から始める Amplify Studio - JAWS DAYS版 #jawsug #jawsdays #jawsdays2022

Amplify Studio + Figma でサイト作成の流れを見ていきます。

https://jaws-ug.doorkeeper.jp/events/142615

Transcript

1. 今から始める
   Amplify Studio
   - JAWS DAYS版
   JAWS DAYS 2022
   プレイベント
   2022/09/25
   木原卓也 / @tacck
   1
   JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
   

   View Slide

2. 私
   • 名前
   • 木原 卓也 / @tacck
   • 所属
   • 生活共同組合コープさっぽろ
   • 主催コミュニティ
   • ゆるWeb勉強会@札幌
   • スマートスピーカーで遊ぼう会@札幌 (休眠中)
   • 参加コミュニティ
   • Amplify Japan User Group 運営
   • AWS Community Builders Program (Q2 2021, 2022)
   Category: Front-end Web and Mobile
   • 好きなフィギュアスケートの技
   • スプレッド・イーグル
   2
   JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
   

   View Slide

3. このお話のゴール
   • Amplify Studio + Figma でパーツを作って、
   簡単なサイト構築を行なう。
   • JAWS DAYS のイベント一覧ページを作成してみよう!
   3
   JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
   

   View Slide

4. お品書き
   • AWS Amplify
   • AWS Amplify って何?
   • AWS Amplify の大まかな分類
   • Amplify Studio
   • Amplify Studio って何?
   • Amplify Studio でできること
   • サイトを構築してみる
   4
   JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
   

   View Slide

5. AWS Amplify
   5
   JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
   

   View Slide

6. AWS Amplify って何?
   Webフロントエンド/モバイルアプリ開発を中心に、
   フルスタックのアプリ・システム構築を素早く簡単にできるようにする、
   AWS のサービスとツールの総称。
   特に、 Cognito / AppSync / DynamoDB などの
   マネージドサービスの利用を簡単に行うことができ、
   いわゆる「サーバレス」なフルスタックシステムを構築しやすい。
   また、Webサイトのホスティング機能も用意されており、
   個別の S3 / CloudFront 設定無しにサイト公開を行うことが可能。
   6
   JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
   Amplify Console
   Amplify Hosting
   Amplify Studio
   Amplify CLI
   Amplify Library
   Amplify UI
   UI Component
   

   View Slide

7. AWS Amplify の大まかな分類
   7
   JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
   AWS サービスとしての Amplify OSS ツールとしての Amplify
   Cognito
   Dynamo
   DB
   AppSync React Vue Flutter
   ... ...
   Amplify Console
   Amplify Hosting
   Amplify Studio
   Amplify CLI
   Amplify Library
   Amplify UI
   UI Component
   

   View Slide

8. JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022 8
   AWS Amplify
   各機能相関(概要)
   

   View Slide

9. Amplify Studio
   9
   JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
   

   View Slide

10. Amplify Studio って何?
    ブラウザの操作で、フロントエンド UI とバックエンドの
    構築を (ある程度) 可能にする機能。 (Preview: 2021-12-03 / GA: 2022-04-21)
    現在可能なこと:
    • 認証 (Cognito) の有効化、ユーザー管理
    • Storage (S3) の有効化、ファイル配置
    • データモデル (AppSync+DynamoDB) の有効化、データ作成
    • フロントエンド UI 作成 (Figmaからのインポート)
    • React のコードとして連携可能
    10
    JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
    

    View Slide

11. Amplify Studio でできること
    • アプリケーションの管理機能の一部を実現
    • 簡易なユーザー管理画面 [Cognito]
    • 格納しているデータ操作 [DynamoDB]
    • 静的ファイルの操作 [S3]
    • 画面のパーツ(UI Components)をコード化
    • Figma で作成した Component を取り込み
    • 取り込んだ Component とデータ(DynamoDB)をバインディング
    • React のプロジェクトにコードとして取り込み・即利用
    11
    JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
    

    View Slide

12. [参考]Amplify Studio できること比較
    Amplify CLI Amplify Studio Amplify CLI + CDK
    リソース作成 ○ △ ◎
    リソース設定変更 ○ △ ◎
    リソース削除 ○ ○ ○
    データ操作 × ◎ △
    Figma連携 × ◎ ×
    12
    JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
    

    View Slide

13. サイト構築してみよう
    13
    JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
    

    View Slide

14. サイト構築してみよう
    • Figma でパーツを作成
    • Amplify Studio へ取り込んでデータバインディング
    • React へ取り込んでページ作成
    • ブラウザサイトの確認
    14
    JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
    

    View Slide

15. デモ
    15
    JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
    

    View Slide

16. まとめ
    • Amplify Studio + Figma で
    使いたいパーツを手軽に作れる!
    • onClick イベントを定義できるようになったので、
    単純なものなら「ノーコード」にかなり近づいた。
    • できることが増えたので、フォローアップしていきます。
    16
    JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
    

    View Slide

17. 宣伝: AWS APAC Community
    Summit 2022 -re:Port Back-
    • 2022-10-17
    18:50〜22:00
    • タイで行われたイベント
    の報告会です。
    17
    JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
    https://jaws-ug.doorkeeper.jp/events/142954
    

    View Slide

18. 終
    18
    JAWS DAYS 2022 プレイベント / #jawsug #jawsdays #jawsdays2022
    

    View Slide