みんなのPython勉強会#85 での発表内容です。 Amplify Studio + Figma でコンポーネントを作成し、 Python で作成したグラフを表示する、という流れを説明しています。
今から始めるAmplify StudioみんなのPython勉強会#852022/09/22木原卓也 / @tacck1みんなのPython勉強会#85 / #stapy
View Slide
私• 名前• 木原 卓也 / @tacck• 所属• 生活共同組合コープさっぽろ• 主催コミュニティ• ゆるWeb勉強会@札幌• スマートスピーカーで遊ぼう会@札幌 (休眠中)• 参加コミュニティ• Amplify Japan User Group 運営• AWS Community Builders Program (Q2 2021, 2022)Category: Front-end Web and Mobile• 好きなフィギュアスケートの技• スプレッド・イーグル2みんなのPython勉強会#85 / #stapy
このお話のゴール• Amplify Studio + Figma でパーツを作って、Python で書いたグラフを表示してみよう。3みんなのPython勉強会#85 / #stapy
お品書き• AWS Amplify• AWS Amplify って何?• AWS Amplify の大まかな分類• Amplify Studio• Amplify Studio って何?• Amplify Studio でできること• Python で書いたグラフを表示してみよう4みんなのPython勉強会#85 / #stapy
AWS Amplify って何?Webフロントエンド/モバイルアプリ開発を中心に、フルスタックのアプリ・システム構築を素早く簡単にできるようにする、AWS のサービスとツールの総称。特に、 Cognito / AppSync / DynamoDB などのマネージドサービスの利用を簡単に行うことができ、いわゆる「サーバレス」なフルスタックシステムを構築しやすい。また、Webサイトのホスティング機能も用意されており、個別の S3 / CloudFront 設定無しにサイト公開を行うことが可能。5みんなのPython勉強会#85 / #stapyAmplify ConsoleAmplify HostingAmplify StudioAmplify CLIAmplify LibraryAmplify UIUI Component
AWS Amplify の大まかな分類6みんなのPython勉強会#85 / #stapyAWS サービスとしての Amplify OSS ツールとしての AmplifyCognitoDynamoDBAppSync React Vue Flutter... ...Amplify ConsoleAmplify HostingAmplify StudioAmplify CLIAmplify LibraryAmplify UIUI Component
みんなのPython勉強会#85 / #stapy 7AWS Amplify各機能相関(概要)
Amplify Studio って何?ブラウザの操作で、フロントエンド UI とバックエンドの構築を (ある程度) 可能にする機能。 (Preview: 2021-12-03 / GA: 2022-04-21)現在可能なこと:• 認証 (Cognito) の有効化• Storage (S3) の有効化、ファイル配置• データモデル (AppSync+DynamoDB) の有効化、データ作成• フロントエンド UI 作成 (Figmaからのインポート)• React のコードとして連携可能8みんなのPython勉強会#85 / #stapy
Amplify Studio でできること• アプリケーションの管理機能の一部を実現• 簡易なユーザー管理画面(Amplify Studio自身) [Cognito]• 格納しているデータ操作 [DynamoDB]• 静的ファイルの操作 [S3]• 画面のパーツ(UI Components)をコード化• Figma で作成した Component を取り込み• 取り込んだ Component とデータ(DynamoDB)をバインディング• React のプロジェクトにコードとして取り込み・即利用9みんなのPython勉強会#85 / #stapy
[参考]Amplify Studio でできることAmplify CLI Amplify Studio Amplify CLI + CDKリソース作成 ○ ○ ○リソース設定変更 ○ △ ◎リソース削除 ○ ○ ○データ操作 × ◎ △Figma連携 × ◎ ×10みんなのPython勉強会#85 / #stapy
Python で書いたグラフを表示してみよう11みんなのPython勉強会#85 / #stapy
Python で書いたグラフを表示してみよう• Figma でグラフ表示のためのパーツを作成• React へ取り込んでページ作成• Lambda の Python 実行環境でグラフ生成コード作成• ページで確認12みんなのPython勉強会#85 / #stapy
まとめ• Amplify Studio + Figma で使いたいパーツを手軽に作れる!個人的感想:• データ処理してグラフを作りたいときは、Pythonを使うのも便利そう。13みんなのPython勉強会#85 / #stapy
宣伝1: JAWS DAYS 2022 プレイベント• 2022-09-2514:00〜17:25• 今回お話した内容を改めてお話します。14みんなのPython勉強会#85 / #stapyhttps://jaws-ug.doorkeeper.jp/events/142615
宣伝2: AWS APAC CommunitySummit 2022 -re:Port Back-• 2022-10-1718:50〜22:00• タイで行われたイベントの報告会です。15みんなのPython勉強会#85 / #stapyhttps://jaws-ug.doorkeeper.jp/events/142954
終16みんなのPython勉強会#85 / #stapy