Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Expo & Amplifyを使ってWebとアプリを同時開発した話

Expo & Amplifyを使ってWebとアプリを同時開発した話

74253b7e85d0a315a23d74db50abd8e4?s=128

cohe aoki

March 04, 2021
Tweet

Transcript

  1. Expo と Amplifyを使ってWeb とアプリを同時開発した話 @coa00

  2. 自己紹介 coa00 (あおきこうへい) • フロントエンド/UIUX が専門で、デザインとかもやります。 • フリーで主にフロントエンドのディレクションから開発までやってき ました。 •

    メディアアートが大好きで Arduino, GLSLとかやっていました。 • 2020年から O:という会社で CTOやってます。 Twitter: coa00 https://qiita.com/coa00
  3. Expo Amplify でえもいマネージメントツールをつくりま した

  4. 1コードでマルチプラットフォーム対応

  5. Amplifyとは - AWSの各サービスと結合してワンクリックで公開で きるアプリケーション構築環境 - JavaScript、React、Angular、Vue、Next.js、 Android、iOS、React Native、Ionic、Flutter に対 応

  6. Amplify 構成 - 標準的な流れにしたがうと、認証 はCognito、ストレージはS3、 API は AppSyncを使う - Web,

    アプリ同様の構成が適用 可能 - AppSync はリアルタイム処理を 得意としており、アプリケーション むけ。
  7. 認証の実装方法 - Amplify UI Componentsが用意されており、簡単な 実装で認証の実装ができる。(ハイブリットとなると Web とネイティブで使うライブラリをわける必要があ る)

  8. アプリケーション構成 • Web は React Native Web • ネイティブは React

    Native React Native Web 優秀である程度、Webでも快適に動きました。 • UI ライブラリ ◦ React Native Paper ◦ Material UI (Webだけ)
  9. Webとネイティブの動作わけ • WebをすべてRNでつくってしまうと体験 的におとってしまうところがでてしまう。 • ファイル拡張子をつかってコンポーネント をだしわけすることができる。 • Props を同一にすると意識することなく

    使える。
  10. 自動公開 &Deploy • Amplify には標準でCode Deploy環境がついており、そこに expo の publish を追加するだ

    け、Webとアプリの自動公開が可 能(OTA) • Webの公開と同時にアプリの更 新がはいるので超らくらく。
  11. プッシュ通知 • Amplify は lambda の作成が可能。スケ ジュール動作もできる。 • expo-server-sdk を中でよぶことで、push通

    知を送信する。 • 大量の通知には Amazon Pinpoint を使う
  12. Amplify はまりどころ • Amplify の UI がネイティブとWebでかなり違う。 • AppSync のサブスクライブを停止しないとタイムアウトエラーでアプリケー

    ションが落ちる • AppSync のサブスクライブをこまめにとめないと 同時接続数100をつかい きてしまう。
  13. ごせいちょうありがとうございました