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
960
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
31
Amplify Boostup #2 monorepo 運用による複数プロジェクト開発
coa00
0
630
サーバレス技術を活用したエンジョイ スピード開発
coa00
1
340
【Amplify Japan UG x Startup】Amplify チームによる プロダクト開発
coa00
0
640
Expo と Amplifyを使って Webとアプリを同時開発
coa00
0
1.4k
Other Decks in Programming
See All in Programming
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
990
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
580
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
CDK引数設計道場100本ノック
badmintoncryer
1
230
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
340
NPOでのDevinの活用
codeforeveryone
0
870
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
560
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
150
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
How GitHub (no longer) Works
holman
314
140k
Writing Fast Ruby
sferik
628
62k
A better future with KSS
kneath
238
17k
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をつかい きてしまう。
ごせいちょうありがとうございました