短期大規模開発の品質とスピードの両立について in ライブコマース #yjbonfire

短期間大規模開発の 品質とスピードの両立について in ライブコマース 2017年11月20日 相田隆一 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

人物紹介 相田隆一 ヤフー株式会社 ショッピングカンパニー iOSエンジニア 経歴 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 2

今日話すこと ライブコマースを 開発工数3ヶ月 無事故で乗り切ったこと Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 3

ヤフーのライブコマースとは Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

ヤフーのライブコマースとは Yahoo! ショッピング LIVE Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 5

Yahoo! ショッピング LIVE ライブ動画 メッセージ アクション 配信アプリ 視聴アプリ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 6

Yahoo!ショッピング LIVEのざっくりシステム図 ライブ配信サーバ Socketサーバ Appサーバ 配信アプリ 視聴アプリ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

ライブ配信機能について RTMP HLS HLS 配信アプリ ライブ配信サーバ CDN 視聴アプリ NGINX Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 8

やること一杯！！！！ ライブ配信の技術調査 Socket周りの技術調査 サードパーティの技術調査 ライブ配信のBE構築 SocketのBE構築 配信側iOSアプリの開発 視聴側iOSアプリの開発 アプリケーションAPIの構築 アプリケーションDBの構築 Unitテスト導入 CI/CD導入 各仕様検討 工数見積もり 開発者の調達 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 9

なにからスタートしたか？ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

特に大事なところ ライブ配信の技術調査 Socket周りの技術調査 サードパーティの技術調査 ライブ配信のBE構築 SocketのBE構築 配信側iOSアプリの開発 視聴側iOSアプリの開発 アプリケーションAPIの構築 アプリケーションDBの構築 Unitテスト導入 CI/CD導入 各仕様検討 工数見積もり 開発者の調達 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 11

特に大事なところ 技術調査 BE開発 アプリ開発 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 12

やったこと デモ用アプリを作成しました Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 13

やったこと デモ用アプリを作成しました デモ用配信サーバを構築しました Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 14

やったこと デモ用アプリを作成しました デモ用配信サーバを構築しました デモ用Socketサーバを構築しました Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 15

デモアプリについて Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

デモアプリについて ライブ配信サーバ Socketサーバ Appサーバ 配信アプリ 視聴アプリ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

デモアプリについて ライブ配信サーバ Socketサーバ Appサーバ 配信アプリ 視聴アプリ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

デモアプリについて RTMP HLS HLS 配信アプリ ライブ配信サーバ CDN 視聴アプリ NGINX Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 19

デモアプリについて RTMP HLS HLS 配信アプリ ライブ配信サーバ CDN 視聴アプリ NGINX Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 20

デモアプリについて アプリ側 OSSを利用: LFLiveKit, socket.io-client-swift ライブ配信サーバ側 Nginxでサーバ構築 nginx-rtmp-moduleを利用 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 21

デモアプリについて デモアプリ ↓ RTMP ライブ配信サーバ ↓ HLS Safariで視聴 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 22

デモアプリについて デモアプリ ↓ RTMP ライブ配信サーバ ↓ HLS Safariで視聴 後にAVPlayerで視聴アプリの作成 Socketのメッセージ、アクション追加 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 23

デモアプリのメリット ・完成のイメージを固められる ・実現への自信が持てる ・社内で説得力が増す ・コードを流用できる ・簡易動作確認環境として使える Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 24

デモアプリのメリット 品質・スピード を上げることに繋がる Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 25

開発スケジュール Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

最終的な開発スケジュール 7月 ライブコマースTFの立ち上げ デモアプリの開発 8月 ライブ配信、AppAPIのBE開発 9月 ライブ配信のチューニング アプリ開発 10月 テスト、申請 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 27

テストについて Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

テストについて 本番同等環境を使い、 同部署とサービス関係者 の協力を集い、 50人一斉配信と同人数の 視聴テストを行う Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 29

テストで出た主な不具合 ・端末が熱くなる ・いいねのモジュールでiPhone5端末が クラッシュ ・ライブ視聴を繰り返すとクラッシュ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 30

端末が熱くなる ■原因 Socket接続のエラー時にリコネクトをしており その際にインスタンスが更新されていなかった socket.on(clientEvent: .error) {[weak self] data, ack in ... self?.socket.reconnect() } Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 31

端末が熱くなる ■解決 forceNewオプション値を追加することで、 Socketのリコネクト時にインスタンスの初期化する SocketIOClient( socketURL: url, config: [.log(true), .compress, .forceNew(true)] } Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 32

いいねアニメーションがiPhone5でクラッシュ ■原因 アニメーション生成時にarc4random関数を使っており、 32bit以上のIntを返す時があり、32bit端末でクラッシュ let rand = arc4random() % target Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 33

いいねアニメーションがiPhone5でクラッシュ ■解決 乱数を32bitに丸めるよう修正 let rand = arc4random_uniform(UInt32(target)) Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 34

ライブ視聴を繰り返すとクラッシュ ■原因 AVPlayerを破棄しないまま、 次の動画を再生しようとすると プレイヤーレイヤーが増えていき、クラッシュする Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 35

ライブ視聴を繰り返すとクラッシュ ■解決 ライブ切り替え時に、AVPlayerの初期化を行う avPlayerViewController.player = nil Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 36

瀬戸際で品質が保たれた... Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

2017年11月5日 Yahoo!ショッピング LIVE開始 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

事故なくリリース！！ 無事故・記録更新中 ※2017年11月20日現在 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

振り返って ■Good ミニマム開発から広げることができた 社内から知見のある人を見つけることができた 本番同等環境を使い精度の高いテストができた ■Bad 短期間での開発だったため、省いたところがあった iOSについてあまり発表していない... Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 40

ご静聴 ありがとうございました Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.