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
Expo & Amplifyを使ってWebとアプリを同時開発した話
Search
cohe aoki
March 04, 2021
Programming
2
970
Expo & Amplifyを使ってWebとアプリを同時開発した話
cohe aoki
March 04, 2021
Tweet
Share
More Decks by cohe aoki
See All by cohe aoki
Amplify Boostup #2 Multi project using monorepo
coa00
0
47
LLMを使ったチームのプロダクト開発の生産性を向上させる取り組み
coa00
0
33
Amplify Boostup #2 monorepo 運用による複数プロジェクト開発
coa00
0
650
サーバレス技術を活用したエンジョイ スピード開発
coa00
1
350
【Amplify Japan UG x Startup】Amplify チームによる プロダクト開発
coa00
0
650
Expo と Amplifyを使って Webとアプリを同時開発
coa00
0
1.4k
Other Decks in Programming
See All in Programming
Go言語はstack overflowの夢を見るか?
logica0419
0
340
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
200
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
CSC509 Lecture 06
javiergs
PRO
0
260
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
570
All About Angular's New Signal Forms
manfredsteyer
PRO
0
170
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Producing Creativity
orderedlist
PRO
347
40k
Agile that works and the tools we love
rasmusluckow
331
21k
Statistics for Hackers
jakevdp
799
220k
Building an army of robots
kneath
306
46k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
A Tale of Four Properties
chriscoyier
161
23k
Rails Girls Zürich Keynote
gr2m
95
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Cult of Friendly URLs
andyhume
79
6.6k
Transcript
Expo と Amplifyを使ってWeb とアプリを同時開発した話 @coa00
自己紹介 coa00 (あおきこうへい) • フロントエンド/UIUX が専門で、デザインとかもやります。 • フリーで主にフロントエンドのディレクションから開発までやってき ました。 •
メディアアートが大好きで Arduino, GLSLとかやっていました。 • 2020年から O:という会社で CTOやってます。 Twitter: coa00 https://qiita.com/coa00
Expo Amplify でえもいマネージメントツールをつくりま した
1コードでマルチプラットフォーム対応
Amplifyとは - AWSの各サービスと結合してワンクリックで公開で きるアプリケーション構築環境 - JavaScript、React、Angular、Vue、Next.js、 Android、iOS、React Native、Ionic、Flutter に対 応
Amplify 構成 - 標準的な流れにしたがうと、認証 はCognito、ストレージはS3、 API は AppSyncを使う - Web,
アプリ同様の構成が適用 可能 - AppSync はリアルタイム処理を 得意としており、アプリケーション むけ。
認証の実装方法 - Amplify UI Componentsが用意されており、簡単な 実装で認証の実装ができる。(ハイブリットとなると Web とネイティブで使うライブラリをわける必要があ る)
アプリケーション構成 • Web は React Native Web • ネイティブは React
Native React Native Web 優秀である程度、Webでも快適に動きました。 • UI ライブラリ ◦ React Native Paper ◦ Material UI (Webだけ)
Webとネイティブの動作わけ • WebをすべてRNでつくってしまうと体験 的におとってしまうところがでてしまう。 • ファイル拡張子をつかってコンポーネント をだしわけすることができる。 • Props を同一にすると意識することなく
使える。
自動公開 &Deploy • Amplify には標準でCode Deploy環境がついており、そこに expo の publish を追加するだ
け、Webとアプリの自動公開が可 能(OTA) • Webの公開と同時にアプリの更 新がはいるので超らくらく。
プッシュ通知 • Amplify は lambda の作成が可能。スケ ジュール動作もできる。 • expo-server-sdk を中でよぶことで、push通
知を送信する。 • 大量の通知には Amazon Pinpoint を使う
Amplify はまりどころ • Amplify の UI がネイティブとWebでかなり違う。 • AppSync のサブスクライブを停止しないとタイムアウトエラーでアプリケー
ションが落ちる • AppSync のサブスクライブをこまめにとめないと 同時接続数100をつかい きてしまう。
ごせいちょうありがとうございました