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
810
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
10
LLMを使ったチームのプロダクト開発の生産性を向上させる取り組み
coa00
0
7
Amplify Boostup #2 monorepo 運用による複数プロジェクト開発
coa00
0
450
サーバレス技術を活用したエンジョイ スピード開発
coa00
1
270
【Amplify Japan UG x Startup】Amplify チームによる プロダクト開発
coa00
0
560
Expo と Amplifyを使って Webとアプリを同時開発
coa00
0
1.3k
Other Decks in Programming
See All in Programming
Milestoner
bkuhlmann
1
410
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
Git Lint
bkuhlmann
4
750
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
Node.js v22 で変わること
yosuke_furukawa
PRO
7
2.6k
Semantic search with Django and pgvector
pauloxnet
0
240
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Hanami and htmx
bkuhlmann
0
210
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
360
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
300
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
270
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Done Done
chrislema
178
15k
In The Pink: A Labor of Love
frogandcode
138
21k
Statistics for Hackers
jakevdp
789
220k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Designing for humans not robots
tammielis
248
25k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
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をつかい きてしまう。
ごせいちょうありがとうございました