Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今から始める Amplify Studio #stapy
Search
Kihara, Takuya
PRO
September 22, 2022
Technology
0
750
今から始める Amplify Studio #stapy
みんなのPython勉強会#85 での発表内容です。
Amplify Studio + Figma でコンポーネントを作成し、 Python で作成したグラフを表示する、という流れを説明しています。
Kihara, Takuya
PRO
September 22, 2022
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
Flutter を始めよう! - Flutter の開発現場から
tacck
PRO
0
110
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
120
ゆるWeb勉強会@札幌 #29 #ゆるWeb札幌
tacck
PRO
0
120
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
430
はじめまして GoLang #cm_sapporo_study
tacck
PRO
0
130
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
80
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
110
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
1
860
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
71
Other Decks in Technology
See All in Technology
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
190
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
160
AI関数が早くなったので試してみよう
kumakura
0
120
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
290
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
1k
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
110
Serverless Meetup #21
yoshidashingo
1
100
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
380
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
580
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Making Projects Easy
brettharned
117
6.3k
Why Our Code Smells
bkeepers
PRO
337
57k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
For a Future-Friendly Web
brad_frost
179
9.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Six Lessons from altMBA
skipperchong
28
3.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
Transcript
今から始める Amplify Studio みんなのPython 勉強会#85 2022/09/22 木原卓也 / @tacck 1
みんなのPython勉強会#85 / #stapy
私 • 名前 • 木原 卓也 / @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 / #stapy Amplify Console Amplify Hosting Amplify Studio Amplify CLI Amplify Library Amplify UI UI Component
AWS Amplify の大まかな分類 6 みんなのPython勉強会#85 / #stapy 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
みんなのPython勉強会#85 / #stapy 7 AWS 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-25 14:00〜17:25 • 今回お話した内容を
改めてお話します。 14 みんなのPython勉強会#85 / #stapy https://jaws-ug.doorkeeper.jp/events/142615
宣伝2: AWS APAC Community Summit 2022 -re:Port Back- • 2022-10-17
18:50〜22:00 • タイで行われたイベント の報告会です。 15 みんなのPython勉強会#85 / #stapy https://jaws-ug.doorkeeper.jp/events/142954
終 16 みんなのPython勉強会#85 / #stapy