React Nativeを使ったリアルタイム配信サービスの開発 / React-Native-Matsuri-2021-BAKOON-Development

by Junichi Sato

Slide 1

Slide 1 text

React Native を使ったリアルタイム配信サービスの開発 Junichi Sato / @sat0b 1

Slide 2

Slide 2 text

自己紹介名前: 佐藤純一 (Junichi Sato) 所属: SB イノベンチャー株式会社 ( ヤフー株式会社) 得意分野検索システム、類似画像検索システム → 『Python とTensorFlow で学ぶ類似画像検索システム』 GitHub: @sat0b Twitter: @sat0b 2

Slide 3

Slide 3 text

本日の内容オンラインフィットネスBAKOON の紹介サービスの技術について React Native / Firebase / TensorFlow.js / Agora 0→1 の開発で学んだこと 1 年半やってきた中での知見 3

Slide 4

Slide 4 text

BAKOON についてオンラインフィットネスアプリ 20 分間のエクササイズインストラクターがアイドルモーションキャプチャ機能公式ページ https://bakoon.app/ 公式Twitter @bakoon_official 4

Slide 5

Slide 5 text

サービスの目的目的楽しく自宅でフィットネスができるようにサービスの特徴エンターテイメントみんなでやっている感じアイドル楽しく配信を盛り上げてくれるモチベーションを上げる 5

Slide 6

Slide 6 text

SB イノベンチャーとは？ SB グループの新規事業制度自転車シェアリングのHELLO CYCLING など 1 年程度の事業化検討を行う BAKOON は事業化検討期間中のサービスサービス運営メンバーはヤフー株式会社所属 6

Slide 7

Slide 7 text

BAKOON 開発の取り組み 2019 年10 月 PJ スタート 2020 年3 月審査通過 2020 年5 月開発スタート 2020 年8 月アプリ版開発開始 2021 年1 月 iOS アプリリリース 2021 年3 月有料課金開始 2021 年5 月 HIIT トレーニング開始 7

Slide 8

Slide 8 text

BAKOON 運営メンバーメンバービジネス1 人エンジニア3 人兼務出向週1.5~3 日程度フルリモートで開発 8

Slide 9

Slide 9 text

エクササイズの流れ 9

Slide 10

Slide 10 text

ホーム画面配信者、エクササイズ内容の種類や運動量などが表示配信直前にPush 通知 & 入室可能に LIVE 配信 / 録画配信の2 種類直近の2 週間のスケジュールが表示 10

Slide 11

Slide 11 text

エクササイズ風景モーションキャプチャリアクション送信（右下）スコア測定（左上）スタンプ（下）バーチャルステージ機能（左）リアクションと運動を可視化 11

Slide 12

Slide 12 text

動画 12

Slide 13

Slide 13 text

アクティビティ画面過去のアクティビティ参加回数合計スコア合計参加時間参加履歴 13

Slide 14

Slide 14 text

技術について 14

Slide 15

Slide 15 text

BAKOON のシステム概要 15

Slide 16

Slide 16 text

React Native 採用の経緯最初の2 ヶ月くらいはWeb アプリで作成 React で開発 & 仮説検証モバイルアプリ化 Push 通知、アプリ内課金 React Native に決めた理由 React から移行するため少ない人数でiOS/Android 対応するため 16

Slide 17

Slide 17 text

Firebase の活用 17

Slide 18

Slide 18 text

Firebase とは Firebase Google が提供しているモバイルプラットフォームアプリなどのバックエンド機能を提供 → バックエンド処理を代行することで開発コストを削減特徴 GCP のプロダクトと相性が良いモバイルアプリ向け機能が充実今回はFirestore とFunctions について解説 18

Slide 19

Slide 19 text

Firestore Firestore NoSQL ドキュメント指向データベースサーバーを介さずにアプリから直接アクセスを行うセキュリティルールの設定リアルタイム処理・オフラインサポートなどが充実 BAKOON での活用例ホーム画面のスケジュール配信画面でのリアクションやスタンプの送信 19

Slide 20

Slide 20 text

Firestore 用語ドキュメントデータの単位コレクションドキュメントを格納サブコレクションドキュメントに紐づくコレクションコレクショングループ同名のコレクションを指定したいとき利用 20

Slide 21

Slide 21 text

Firestore モデル 21

Slide 22

Slide 22 text

リアルタイムリスナードキュメントをリッスンして更新を検知変更されたドキュメントを受け取ることができる定期的にDB にアクセスして確認などせずに済む 22

Slide 23

Slide 23 text

ホーム画面での活用 Firestore からスケジュールを取得コレクションをonSnapshot でリッスン更新が自動的に反映される db.collection(`rooms`) .where(`end`, `>=`, dateBegin) .where(`end`, `<`, dateEnd) .onSnapshot(async (snapshot) => { snapshot.docs.map( async (doc): Promise => { // ... return rooms; } ) }) 23

Slide 24

Slide 24 text

配信画面楽しいキツイの送受信に利用コレクショングループを onSnapshot でリッスン db.collectionGroup(`reactions`) .where(`roomId`, `==`, roomId) .onSnapshot((snapshot) => { // ... setReaction(reaction) }) 24

Slide 25

Slide 25 text

Cloud Functions Cloud Functions とはサーバーレスでバックエンドコードを実行クライアント側に置きたくないロジックを置く Functions の種類 ( 一部） Firestore トリガー PubSub トリガー呼び出し可能関数 (onCall, onRequest) 25

Slide 26

Slide 26 text

CQRS によるFirestore 設計読み込み用、書き込み用のコレクションを分離する書き込み専用のコレクションにイベントを書き込む Firestore トリガー関数で読み込み用のドキュメントを作成利点セキュリティルールが簡単になるアプリ側ではデータを単に取得するだけリアルタイム性が重要なドキュメントは読み書き兼用とする 26

Slide 27

Slide 27 text

アクティビティ情報 Firestore トリガーでアクティビティ情報を更新回数、ポイント、参加時間アプリからは計算済みドキュメントを取得 27

Slide 28

Slide 28 text

アクティビティ情報の更新 28

Slide 29

Slide 29 text

リアルタイム配信 29

Slide 30

Slide 30 text

配信システムの概要 30

Slide 31

Slide 31 text

Agora による配信リアルタイム配信のプラットフォーム大規模利用可能・低レイテンシー・低価格利用している機能リアルタイム配信配信の録画機能タイマー音の出力 react-native-agora 31

Slide 32

Slide 32 text

Agora 配信の流れユーザー Agora クライアントの初期化チャンネルへの参加リモートの動画を表示配信者 Agora クライアントの初期化チャンネルへの参加自分自身のローカル動画を表示 32

Slide 33

Slide 33 text

トークンの発行セキュアな配信のためにはサーバーでToken 発行を行う 33

Slide 34

Slide 34 text

サーバーでトークン発行トークン発行用関数の定義 export const getAgoraToken = functions.region('asia-northeast1') .https.onCall((data: Request, context): Response => { return generateToken(data.channelName, data.uid); }); 34

Slide 35

Slide 35 text

アプリからトークン取得アプリからサーバー上の関数を呼び出す const getAgoraToken = firebase.app() .functions(`asia-northeast1`) .httpsCallable(`getAgoraToken`); トークンの取得 const token = await getAgoraToken({ channelName: channelId, uid: uid }); 35

Slide 36

Slide 36 text

Agora クライアントクライアントの初期化 const rtcEngine = await RtcEngine.create(appId); await rtcEngine.enableVideo(); await rtcEngine.setChannelProfile(ChannelProfile.LiveBroadcasting); token を渡してチャンネルに参加 rtcEngine.joinChannel(token, channelId, null, agoraUid); 36

Slide 37

Slide 37 text

動画の再生クライアント側実装配信者側実装 37

Slide 38

Slide 38 text

録画配信 (HLS) Agora の機能で配信後の動画をS3 上に保存 Amazon S3, Alibaba Cloud, Qiniu Cloud に対応 Firestore にURL を保存、react-native-video で再生 38

Slide 39

Slide 39 text

モーションキャプチャ 39

Slide 40

Slide 40 text

TensorFlow.js JavaScript からTensorFlow を扱うことができる WebGL を利用したGPU アクセラレーション React Native から利用可能 tfjs-react-native WebGL にexpo-gl を利用 40

Slide 41

Slide 41 text

PoseNet PoseNet とはポーズの推定するために利用される体の部位の位置とスコアを推定 BAKOON での利用 PoseNet で骨格の推定を行うリアクションの推定運動量のスコア計算 41

Slide 42

Slide 42 text

モデル計算リアクションの推定モデル PoseNet の推定値を入力ポーズごとに画像とラベルの組みを取って学習スコア計算距離などを補正して運動量を算出運動するほど大きなスコアになるように計算 42

Slide 43

Slide 43 text

リアクション推定とスコア計算 PoseNet の骨格データの推定 const { pose, posenetOutput } = await model.estimatePose(images); リアクションの推定 const prediction = await reactionModel.predict(posenetOutput); 運動量のスコア計算 const score = calculateScore(posenetOutput) 43

Slide 44

Slide 44 text

0→1 の開発で学んだこと 44

Slide 45

Slide 45 text

進め方の反省仮説で新機能を投入する新機能を考える、開発するのは楽しいが・・・仕事が増えるユーザーからのフィードバックが足りないユーザーの解像度が上がらないニーズが分からないどこで困ってるか分からない 45

Slide 46

Slide 46 text

フィードバックを最大化するユーザーのフィードバックを得る使ってくれてる人がどういう人なのか解像度を高める改善や新機能開発の方向性を決めるフィードバックを得られやすい仕組みを入れるユーザーインタビューユーザーサポートアプリのログ 46

Slide 47

Slide 47 text

フィードバックの効果 47

Slide 48

Slide 48 text

LINE の問い合わせ機能目立つ問い合わせホーム画面からLINE で問い合わせサポートによるフィードバックこちらから詳細に質問できるチャネルトーク（channel.io ） Flipper を使うとクラッシュするとのことで利用断念 48

Slide 49

Slide 49 text

ユーザーの理解を深める入会時のアンケートどこから来たのか？どれくらい運動欲求があるのか？退会時のアンケート何が問題だったのか？配信後のアンケート感想、よかった点、悪かった点 49

Slide 50

Slide 50 text

イベントの設定 Firebase Analytics イベントを設定アプリを利用しててどこで離脱するか？ Firebase Analytics Funnels 50

Slide 51

Slide 51 text

流入施策アプリは作っておいておくだけでは広まらないオーガニック流入 SNS での発信広告流入 Twitter 広告 (AppsFlyer のSDK を利用) react-native-appsflyer Apple Search Ads 51

Slide 52

Slide 52 text

Twitter 連携機能 52

Slide 53

Slide 53 text

おわりに 53

Slide 54

Slide 54 text

React Native でよかったこと React 製のWeb アプリからの移行がスムーズ React Native 力が上がるとReact も扱えるようになった PJ のコードをTypeScript で統一高い柔軟性・型の表現力 TS は好きな言語の一つになった豊富なサンプルコード JS, Node.js 54

Slide 55

Slide 55 text

まとめ BAKOON のサービスについて紹介 BAKOON の技術・システム Firebase (Firestore とFunctions) の活用 Agora を利用したリアルタイム配信 TensorFlow.js を用いたモーションキャプチャ開発を通して学んだことユーザーのフィードバックを得る方法 55