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

Transcript

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

2. 自己紹介 名前: 佐藤純一 (Junichi Sato) 所属: SB イノベンチャー株式会社 ( ヤフー株式会社)

   得意分野 検索システム、類似画像検索システム → 『Python とTensorFlow で学ぶ類似画像検索システム』 GitHub: @sat0b Twitter: @sat0b 2

3. 本日の内容 オンラインフィットネスBAKOON の紹介 サービスの技術について React Native / Firebase / TensorFlow.js

   / Agora 0→1 の開発で学んだこと 1 年半やってきた中での知見 3

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

   @bakoon_official 4

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

6. SB イノベンチャーとは？ SB グループの新規事業制度 自転車シェアリングのHELLO CYCLING など 1 年程度の事業化検討を行う BAKOON

   は事業化検討期間中のサービス サービス運営メンバーはヤフー株式会社所属 6

7. BAKOON 開発の取り組み 2019 年10 月 PJ スタート 2020 年3 月

   審査通過 2020 年5 月 開発スタート 2020 年8 月 アプリ版開発開始 2021 年1 月 iOS アプリリリース 2021 年3 月 有料課金開始 2021 年5 月 HIIT トレーニング開始 7

8. BAKOON 運営メンバー メンバー ビジネス1 人 エンジニア3 人 兼務出向 週1.5~3 日程度

   フルリモートで開発 8

9. エクササイズの流れ 9

10. ホーム画面 配信者、エクササイズ内容の種類や 運動量などが表示 配信直前にPush 通知 & 入室可能に LIVE 配信 /

    録画配信 の2 種類 直近の2 週間のスケジュールが表示 10

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

12. 動画 12

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

14. 技術について 14

15. BAKOON のシステム概要 15

16. React Native 採用の経緯 最初の2 ヶ月くらいはWeb アプリで作成 React で開発 & 仮説検証

    モバイルアプリ化 Push 通知、アプリ内課金 React Native に決めた理由 React から移行するため 少ない人数でiOS/Android 対応するため 16

17. Firebase の活用 17

18. Firebase とは Firebase Google が提供しているモバイルプラットフォーム アプリなどのバックエンド機能を提供 → バックエンド処理を代行することで開発コストを削減 特徴 GCP

    のプロダクトと相性が良い モバイルアプリ向け機能が充実 今回はFirestore とFunctions について解説 18

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

    配信画面でのリアクションやスタンプの送信 19

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

    20

21. Firestore モデル 21

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

23. ホーム画面での活用 Firestore からスケジュールを取得 コレクションをonSnapshot で リッスン 更新が自動的に反映される db.collection(`rooms`) .where(`end`, `>=`,

    dateBegin) .where(`end`, `<`, dateEnd) .onSnapshot(async (snapshot) => { snapshot.docs.map( async (doc): Promise<Room> => { // ... return rooms; } ) }) 23

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

    roomId) .onSnapshot((snapshot) => { // ... setReaction(reaction) }) 24

25. Cloud Functions Cloud Functions とは サーバーレスでバックエンドコードを実行 クライアント側に置きたくないロジックを置く Functions の種類 (

    一部） Firestore トリガー PubSub トリガー 呼び出し可能関数 (onCall, onRequest) 25

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

    リアルタイム性が重要なドキュメントは読み書き兼用とする 26

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

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

29. リアルタイム配信 29

30. 配信システムの概要 30

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

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

    チャンネルへの参加 自分自身のローカル動画を表示 32

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

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

    Response => { return generateToken(data.channelName, data.uid); }); 34

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

    token = await getAgoraToken({ channelName: channelId, uid: uid }); 35

36. Agora クライアント クライアントの初期化 const rtcEngine = await RtcEngine.create(appId); await rtcEngine.enableVideo();

    await rtcEngine.setChannelProfile(ChannelProfile.LiveBroadcasting); token を渡してチャンネルに参加 rtcEngine.joinChannel(token, channelId, null, agoraUid); 36

37. 動画の再生 クライアント側実装 <RtcRemoteView.SurfaceView style={style.view} uid={hostId} channelId={channelId} renderMode={VideoRenderMode.Hidden} mirrorMode={VideoMirrorMode.Enabled} /> 配信者側実装

    <RtcLocalView.SurfaceView style={style.fullView} channelId={channelId} renderMode={VideoRenderMode.Hidden} /> 37

38. 録画配信 (HLS) Agora の機能で配信後の動画をS3 上に保存 Amazon S3, Alibaba Cloud, Qiniu

    Cloud に対応 Firestore にURL を保存、react-native-video で再生 38

39. モーションキャプチャ 39

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

    tfjs-react-native WebGL にexpo-gl を利用 40

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

    運動量のスコア計算 41

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

43. リアクション推定とスコア計算 PoseNet の骨格データの推定 const { pose, posenetOutput } = await

    model.estimatePose(images); リアクションの推定 const prediction = await reactionModel.predict(posenetOutput); 運動量のスコア計算 const score = calculateScore(posenetOutput) 43

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

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

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

47. フィードバックの効果 47

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

    を使うとクラッシュする とのことで利用断念 48

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

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

51. 流入施策 アプリは作っておいておくだけでは広まらない オーガニック流入 SNS での発信 広告流入 Twitter 広告 (AppsFlyer のSDK

    を利用) react-native-appsflyer Apple Search Ads 51

52. Twitter 連携機能 52

53. おわりに 53

54. React Native でよかったこと React 製のWeb アプリからの移行がスムーズ React Native 力が上がるとReact も扱えるようになった

    PJ のコードをTypeScript で統一 高い柔軟性・型の表現力 TS は好きな言語の一つになった 豊富なサンプルコード JS, Node.js 54

55. まとめ BAKOON のサービスについて紹介 BAKOON の技術・システム Firebase (Firestore とFunctions) の活用 Agora

    を利用したリアルタイム配信 TensorFlow.js を用いたモーションキャプチャ 開発を通して学んだこと ユーザーのフィードバックを得る方法 55