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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
810
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Producing Creativity
orderedlist
PRO
346
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Documentation Writing (for coders)
carmenintech
72
4.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Bash Introduction
62gerente
613
210k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
It's Worth the Effort
3n
185
28k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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をつかい きてしまう。
ごせいちょうありがとうございました