YJTC19 A-6 CtoC配信サービスのバックエンドからiOSアプリまで ~ヤフオク!ライブの全貌とXP開発~ #yjtc

>100 Views

January 26, 19

スライド概要

Yahoo! JAPAN Tech Conference 2019 A-6 の資料です

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

Yahoo! JAPAN Tech Conference 2019 CtoC配信サービスのバックエンドから iOSアプリまで 〜ヤフオク!ライブの全貌とXP開発〜 出水 厚輝 大西 智也 山下 真一郎 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

2.

話すこと 1 サービス紹介とバックエンド ヤフオク!ライブのアーキテクチャを徹底解説 2 iOSアプリ ヤフオク!ライブアプリの実現方法を紹介 3 分析の取り組み ライブ配信についての定量的な分析について紹介 4 開発手法 Lean XP開発についてライブコーディングで紹介 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

3.

出水 厚輝 ・ヤフオク!のライブと課金のバックエンド 開発担当 ・スタートアップでEdutechとYoutuber 向け広告代理店のシステム開発を経験 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

4.

サービス紹介とバックエンド Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

5.

ヤフオク!とは PC・スマホWeb・アプリから利用できる オークション・フリマサービス ・1999年から続くCtoC ECの老舗 ・固定価格のフリマと価格が競り上がる オークションの両方をサポート 4,000円!! 3,500円 3,000円 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

6.

ヤフオク!は... ・20年近く続くサービス ・1分間ごとに2,000個以上の出品 ・年間8,800億円の流通 ・出品カテゴリ数40,514カテゴリ ヤフオク!バックエンド開発の醍醐味 膨大なトラフィックを捌きつつ いかに既存の機能を利用しながら新機能を作るか Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

7.

ヤフオク!ライブ 誰でもリアルタイム動画配信をしながらオークションできる新機能 ・臨場感のあるオークション ・画像と文章以上の価値を伝える ・リアルタイムなやりとりで安心して購入 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

8.

ライブバックエンドの課題 1. リアルタイムコミュニケーションシステムをどう構成するか redisを活用したリアルタイム機能の実装 2. ヤフオク!の既存機能とどのように共存させるか ヤフオク!でのマイクロサービスアーキテクチャ活用方法 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

9.

1. リアルタイムコミュニケーションシステムの構成 redisを活用したリアルタイム機能の実装 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

10.

ライブで必要なリアルタイム機能 ① 不特定多数ユーザーの双方向通信 配信への参加/離脱 いいね コメント 視聴ユーザー 配信ユーザー 商品の追加 商品への入札 商品の落札 オークションの終了 ライブ機能 ヤフオク本体機能 ② サーバー側からのプッシュ送信 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

11.

双方向通信の実現方法 配信への参加/離脱 いいね コメント WebSocket WebSocket node JS socket.io Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

12.

双方向通信のスケールアウト send 送信側 receive 受信側 receive 受信側 複数台のWebSocket サーバで同期が必要 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

13.

双方向通信のスケールアウト 送信側 受信側 受信側 受信側 pub sub sub sub sub redis 複数台のWebSocketサーバーをredisで同期してスケールアウト Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

14.

ライブで必要なリアルタイム機能 ① 不特定多数ユーザーの双方向通信 配信への参加/離脱 いいね コメント 視聴ユーザー 配信ユーザー 商品の追加 商品への入札 商品の落札 オークションの終了 ライブ機能 ヤフオク本体機能 ② サーバー側からのプッシュ送信 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

15.

プッシュ機能の実現方法 サーバー負荷 スケールアウト性 疎結合性 HTTPポーリング WebSocket 非同期メッセージング 共有メモリ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

16.

プッシュ機能の実現方法 サーバー負荷 スケールアウト性 疎結合性 HTTPポーリング WebSocket いいねやコメントで使用している経路を利用可能 非同期メッセージング redisのpub/subはまさに非同期メッセージング 共有メモリ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

17.

プッシュ機能の構成 receive 受信側 receive 受信側 受信側 受信側 sub sub sub sub redis pub 商品の追加 商品への入札 商品の落札 オークションの終了 ヤフオク本体機能 WebSocket + redisのpubメッセージングなら 追加構成ゼロでプッシュ機能を実現可能 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

18.

リアルタイム通信におけるredisの活用 redis = ただのオンメモリキャッシュストレージ リアルタイム処理の中心となる高機能な通信経路 使いみちは他にも... ・INCRでいいね数をカウント ・SADD/SCARDでユニーク視聴者数をカウント ・LPUSH/BRPOPで処理の非同期キューイング Yahoo!川邊ライブ配信 383 53 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

19.

2. ヤフオク!既存機能との共存方法 ヤフオク!でのマイクロサービスアーキテクチャ活用方法 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

20.

マイクロサービスアーキテクチャとは ユーザー Webサーバー データベース ・View (HTMLなど) ・Model (O/R mapping) ・Controller (REST APIを含む) ・時間起動Batch モノリシックアーキテクチャ ユーザー API フロントエンドA フロントエンドB データアクセスA データベースA データアクセスA データベースA データ アクセスA マイクロサービスアーキテクチャ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

21.

マイクロサービスアーキテクチャとは ユーザー Webサーバー データベース ・View (HTMLなど) ・Model (O/R mapping) ・Controller (REST APIを含む) ・時間起動Batch ・通信レイテンシーが最小 ・多人数大規模開発でコンフリクトが多発 ・サーバープログラムが肥大化 モノリシックアーキテクチャ ユーザー API フロントエンドA フロントエンドB データアクセスA データベースA データアクセスA データベースA データ アクセスA ・多人数での並行開発が容易 ・各プログラムを小さく単純に保てる ・サーバー間の依存性の管理が複雑化 マイクロサービスアーキテクチャ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

22.

ヤフオク!バックエンドの構成 ヤフオク本体機能 出品 FE API 入札 FE API 商品 API DB 検索 FE API 取引 FE API ヤフオク!は40近い種類の機能で構成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

23.

ヤフオク!バックエンドの構成 ヤフオク本体機能 出品 FE API 入札 FE API 商品 API DB 検索 FE API 取引 FE API ライブ FE API 機能を完全に再利用しようとするとどんどん依存性が複雑化 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

24.

複雑化を防ぐデータの冗長化 出品API 更新要求 商品PF 更新 商品DB 入札API メッセージングで連携 検索PF 検索DB 商品情報の コピー 取引PF 取引DB 商品情報の コピー ライブPF ライブDB 商品情報の コピー 更新の不要な機能には商品データをメッセージング リードオンリーなコピーを各機能のDBに保持 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

25.

複雑化を回避した構成 出品FE 出品API 入札FE 入札API 商品PF 商品DB 検索FE 検索API 検索PF 検索DB 取引FE 取引API 取引PF 取引DB ライブFE ライブAPI ライブPF ライブDB 各機能ごとにFE〜DBを一方通行にして依存性の複雑化を回避 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

26.

マイクロサービスアーキテクチャの利点 小規模サービスでマイクロサービスアーキテクチャにする意味...? ① システム構成レベルでセキュリティを担保できる ② 機能毎に適したプラットフォームを選択できる ③ 新しい言語やフレームワークに挑戦しやすい Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

27.

① システム構成レベルでのセキュリティ ユーザー パトローラー >! Y!デベロッパーネットワーク 公開するAPI のみをプロキシ 接続元IP制限 と攻撃検知 abuse監視 ライブツール ライブAPI ライブPF ライブDB DBアクセスサーバーは 外部から直接アクセス不可 プライベートネットワーク サーバーが機能単位で分かれているため 各機能に対して最小限のアクセス権限だけを与えられる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

28.

② 機能毎に適したプラットフォームを選択 FaaS OpenWhisk PaaS CLOUDFOUNDRY CaaS kubernetes IaaS openstack. 指定可能 1ファイルのプログラム 1システムのファイル群 コンテナイメージ ネットワーク構成 以上のすべて 用意済み ライブラリまで 言語のランタイムまで 運用のための構成まで VM管理環境のみ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

29.

② 機能毎に適したプラットフォームを選択 FaaS OpenWhisk PaaS CLOUDFOUNDRY CaaS kubernetes IaaS openstack. 選択可能 1ファイルのプログラム 1システムのファイル群 コンテナイメージ ネットワーク構成 以上のすべて 用意済み ライブラリまで 言語のランタイムまで 運用のための構成まで VM管理環境のみ 運用性 自由度 インスタンス数が増えても適切なPFを選択できるため 全体的な運用コストは減少 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

30.

③ 新しい言語やフレームワークへの挑戦 リリース当初 Apache C++ Perl 2014年ごろ Apache PHP (CodeIgniter) C++ Perl 現在 Apache PHP (Cake, Laravel etc...) Java (Spring) Node.js (Express) Go etc... 一部のサーバーであればリプレイスが容易なため 新しい基盤技術を低リスクで導入可能 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

31.

バックエンドのまとめ 1. リアルタイムコミュニケーションシステムの構築 ・WebSocketとredisを活用することで構築可能 ・redisは低コスト・低遅延にリアルタイムコミュニケーションの機能を実現できる 2. 既存機能との共存方法 ・基本構成を決めて必要な冗長化を行うことでマイクロサービスアーキテクチャ の依存性の課題を解決可能 ・マイクロサービスアーキテクチャにはセキュリティ・運用効率・利用技術の最 新化の面でもメリットがある Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

32.

大西 智也 ヤフオク! アプリ開発部 iOS, React.js, Python Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

33.

iOSアプリ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

34.

プロジェクト メンバー PM デザイン iOS BE Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

35.

プロジェクト スケジュール デザイン BE iOS 結合テスト リリース XP開発 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

36.

Carrier 12:45 PM Contacts Files Watch ヤフオク! Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

37.

ライブ再生 https://xxxxxxxx/live1.m3u8 RTMP 社内ライブサーバ HLS 配信者 視聴者 .m3u8 .ts Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

38.

ライブ再生 HTTP Live Streaming ・AVFoundation.AVPlayerで再生可能 ・遅延があることを考慮してサービス設計をする Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

39.

リアルタイムなイベントのやりとり いいね WebSocketサーバ コメント 入札、落札 ライブ終了 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

40.

WebSocket リアルタイムなUIの変化 画面の状態 タイミング 大量・連続 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

41.

WebSocket 異常系への対応 バックグラウンド 異常終了 オフライン Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

42.

アニメーション ・Core Animationで自前実装 ・Lottie Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

43.

アニメーション Core Animationで自前実装 ・ユーザインタラクション起因のもの ・動的に内容が変更されるもの 153 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

44.

アニメーション Lottie ・単純に再生されるだけのところ ・デザイナーが自由に拘ることができる! danae* ハンドメイドアクセサリー 191 153 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

45.

分析についての取り組み Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

46.

分析について ・視聴数 ・配信数 ・いいね、コメント ・滞在時間 ・配信動画 ・どういう内容なのか ・サービスへの改善案、不満 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

47.

分析の課題 ・たまたまみたライブの印象で語りがち ・すべてのライブをみて議論することは不可能 ・正しく内容を把握してサービス改善につなげたい データドリブンにしたい Speech-to-Text Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

48.

Speech-to-Text ストレージ .ts 音声ファイル YJVOICE ヤフーの音声認識技術 .txt こんにちは ○○です。 ライブ楽しい Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

49.

Speech-to-Text ヤフオクのガイドライン違反になる お洋服につける お早い者先着順で好きなイラスト一枚つけますね この青のお洋服あったら誰でも好きなの選び放題 そそカステラじゃ あー:これってとイラスト付きましてでしょイラスト イラスト イラストつけますでねや寿ねほら 早いもの順だからねこっち今これ落札たのね Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

50.

Speech-to-Text 形態素解析 名詞 助詞 名詞 名詞 名詞 助動詞 名詞 名詞 ヤフオク! の ガイドライン 違反 好き だ イラスト ・ ・ ・ 落札 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

51.

Speech-to-Text 形態素解析 名詞 助詞 名詞 名詞 名詞 助動詞 名詞 名詞 ヤフオク! の ガイドライン 違反 好き だ イラスト ・ ・ ・ 落札 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

52.

Speech-to-Text 出現頻度 イラスト 25 配信 9 洋服 8 7時 7 人気 6 夜勤 5 コメント 5 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

53.

Speech-to-Text 出現頻度 実はイラストを書いて販売する ライブ イラスト 25 配信 9 洋服 8 7時 7 人気 6 夜勤 5 コメント 5 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

54.

山下 真一郎 ヤフオク!アプリ 開発リーダー 過去の担当サービス Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

55.

開発手法 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

56.

ヤフオク!ライブのリリースサイクル 5ヶ月 2018年2月 開発プロジェクト発足 2ヶ月 2018年6月29日 ヤフオク!ストアによるテスト配信 1.5ヶ月 2018年9月10日 初期バージョンリリース 1.5ヶ月 2018年10月23日 複数商品紐付け機能リリース 2018年12月13日 ランキング機能リリース 2018年12月19日 北島康介さんとのコラボ配信 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

57.

課題 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

58.

課題 1. 開発効率の低下 2. 品質の低下 3. 属人化 手動テスト UIテスト 受け入れテスト 単体 テスト Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

59.

解決方法 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

60.

LEAN XP Pivotal Labs エンジニア 製品 デザイナー プロダクト マネージャー ユーザー中心設計 エクストリームプログラミング リーンスタートアップ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

61.

エクストリームプログラミング Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

62.

主要プラクティス 1. 全員同席 2. チーム全体 3. 情報満載のワークスペース 4. いきいきとした仕事 5. ペアプログラミング 6. ストーリー 7. 週次サイクル 8. 四半期サイクル 9. ゆとり 10. 10分ビルド 11. 継続的インテグレーション 12. テスト駆動開発 13. インクリメンタルな設計 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

63.

ペアプログラミング A B E F C D 開発ルール 1. ペアでコーディング 2. ペアは毎日変える Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

64.

テスト駆動開発 RED Green Refactor ナビゲーター ナビゲーター ドライバー テスト駆動開発 1. 失敗するテストを書く 2. テストを通す 3. リファクタリング Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

65.

導入効果 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

66.

リリース回数 月別リリース数 リリース回数 増加 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

67.

不具合数 案件毎の平均不具合数 不具合数 減少 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

68.

属人化 LEAN XPを実践する前の開発手法と比較して案件の仕様に詳しくなった 10 あてはまる 6 どちらかというとあてはまる 3 どちらかというとあてはまらない 0 あてはまらない Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

69.

820Labs Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

70.

820Labs Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

71.

よくある質問 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

72.

ペアで作業すると開発速度が 半分になりませんか? Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

73.

ペア作業の開発速度について ・設計・コードレビュー工数の削減 ・バグの早期発見 ・チーム全体の技術力底上げ 書くコードの量は低下する アウトプットの質と量は向上する Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

74.

テストを書く必要ありますか? Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

75.

テストをなぜ書くのか? 永続的に素早く開発するため クリーンなコードであること 常にリファクタリングすること コード修正が仕様に影響を与えていない自信が持てること テストを書く Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

76.

ライブコーディング Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

77.

19 Yahoo! JAPAN Tech Conference 2019 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.