YJTC19 B-3 ライブ動画配信サービス「ワイキュー」の作り方 〜優れた社内技術で実現する、少人数のサービス開発〜 #yjtc

19 Yahoo! JAPAN Tech Conference 2019 ライブ動画配信サービス「ワイキュー」の作り方 ～優れた社内技術で実現する、少人数のサービス開発～ ・メディアカンパニー メディア統括本部 | 石井直矢 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

石井 直矢(@kaidempa) JavaScriptが得意 Frontend Engineer Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

自己紹介 YAHOO! JAPAN AD キーワードを入力 検索 急上昇 AKB48 ももクロ 全角6文字迄 税率に関する国民投票実施を発表 NEW! 主なサービス サービス アプリ ヤフオク! 知恵袋 スポーツ ファイナンス テレビ 地図 お気に入り ショッピング 路線 スマホの画像や音楽を無料でお預かり ニュース 国内 エンタメ スポーツ 21時57分更新 消費税国会 与野党の攻防激化 NEW! 春は全国的に気温高め 気象庁 NEW! アラスカ 孤立の町に燃料届く 飲料や食品 復刻版がヒット 「絶滅」サル再発見 撮影成功 NEW! ゲーム各社 中国開拓に挑む 男子駅伝 兵庫が最終区逆転V NEW! 冬の連トラ 初回15%超は3作品 NEW! YAHOO! JAPAN キーワードを入力 検索 メール 24/18 100% 東京 魚座 スポーツ ファイナンス 知恵袋 ヤフオク! ショッピング 路線 すべて すべて ニュース 話題 芸能 スポーツ 敷金やツケ 民法どう変わる? NEW 9/28(月) 7:23 野良猫に餌やり禁止 賛否続々 NEW 9/28(月) 6:55 トルコ最大級の地下都市発見 9/28(月) 6:31 150年ぶり サボテン新種発見 NEW 9/28(月) 7:08 奇策に選手も驚き 日本代表 9/28(月) 6:18 ママタレ 割れる子供の顔出し NEW 9/28(月) 7:11 「春ドラマ」明暗くっきり 視聴率バトルを制し たのは? NEW ドラマニュースダイジェスト Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

自己紹介 YAHOO! JAPAN キーワードを入力 検索 メール 24/18 100% 東京 魚座 スポーツ ファイナンス 知恵袋 ヤフオク! ショッピング 路線 すべて ニュース 話題 芸能 スポーツ 敷金やツケ 民法どう変わる? NEW 9/28(月) 7:23 野良猫に餌やり禁止 賛否続々 NEW 9/28(月) 6:55 トルコ最大級の地下都市発見 9/28(月) 6:31 150年ぶり サボテン新種発見 NEW 9/28(月) 7:08 yui React 奇策に選手も驚き 日本代表 9/28(月) 6:18 ママタレ 割れる子供の顔出し NEW 9/28(月) 7:11 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

自己紹介 React入門 React・Reduxの導入から サーバサイドレンダリングによるUXの向上まで 石井宏幸、石井直矢、柴田和祈、三宮 肇 著 第一戦で活躍する エンジニアによる詳説 人気JavaScriptライブラリ Reactを導入までの 道筋を完全解説 Reactの入門書を執筆 大規模アプリケーションでReactと 一緒に使われるReduxについても詳 しく紹介しています。 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキュー 毎日よる21:00～生放送 © Yahoo Japan Copyright 2019 Yahoo Japan Corporation. All Rights Reserved.

フロントエンドの人が アーキテクチャの発表🤔 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューってなに？ ・賞金山分け型のエンタメライブ番組 ・全問正解した人で賞金を山分け ・毎日21時から配信中 ・いろんなジャンルがあるのが特徴 10 次のうち、実在するクジラはどれ？ ハチクジラ セミクジラ アリクジラ キューして みんな~ でむでむ 今日も賞金ゲットするぞ うりたん うーん…この問題すごく難しくて悩む なあ…(;;) xen 簡単〜♪ じゅんた 答えまだかな あっちゃん 全部聞いたことない おめでとうございます！ WINNER 賞金獲得 10,000,000円 明日の19:59:59を過ぎると 賞金を受け取れなくなります 賞金相当をTポイントで受け取る たまご 明日から新しいジャンルの問題が 出るんだって！ ソー キューたそ~ ソー キューたそ~ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューの技術面 ・ライブ動画配信 ・リアルタイムコミュニケーション ・同じタイミングでリクエストが集中 ・賞金付与は失敗できない 10 次のうち、実在するクジラはどれ？ ハチクジラ セミクジラ アリクジラ キューして みんな~ でむでむ 今日も賞金ゲットするぞ うりたん うーん…この問題すごく難しくて悩む なあ…(;;) xen 簡単〜♪ じゅんた 答えまだかな あっちゃん 全部聞いたことない おめでとうございます！ WINNER 賞金獲得 10,000,000円 明日の19:59:59を過ぎると 賞金を受け取れなくなります 賞金相当をTポイントで受け取る たまご 明日から新しいジャンルの問題が 出るんだって！ ソー キューたそ~ ソー キューたそ~ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューを構成する4要素 1. ライブ動画配信 2. コメント 3. 出題/回答 4. Tポイント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューのシステム構成 ユーザー リバースプロキシ 動画PF BFFサーバー コメントサーバー CDN Redis 不正投稿判定PF 問題API お金API Message Queue インターナルお金API Cassandra Oracle Tポイント 管理API 配信スタジオ 出演者 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューが管理する部分/しない部分 ユーザー リバースプロキシ 動画PF BFFサーバー コメントサーバー CDN Redis 不正投稿判定PF 問題API お金API Message Queue インターナルお金API Cassandra Oracle Tポイント 管理API 配信スタジオ 出演者 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

こんなサービスを開発3人で作っています ワイキュー 動画プラットフォーム コンピューティング プラットフォーム データベース プラットフォーム NGワード管理 プラットフォーム Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューを構成する4要素 1. ライブ動画配信 2. コメント 3. 出題/回答 4. Tポイント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ライブ動画配信のシステム構成 ユーザー リバースプロキシ HTTP CDN RTMP エンコーダー 配信スタジオ 出演者 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ライブ動画配信のシステム構成 ユーザー リバースプロキシ HTTP CDN RTMP エンコーダー 配信スタジオ 出演者 🤔 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ライブ動画配信のシステム構成（ヤフー版） ユーザー リバースプロキシ 動画PF 配信スタジオ 出演者 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

動画プラットフォーム ・HLSによるライブストリーミングを提供するプラットフォーム (HLS = HTTP Live Streaming) ・ショッピングやオークションのライブコマースでも利用されている ・動画自体にメタ情報を付加する事ができる ・ワイキューにあわせて機能提供 ・配信機材の手配なども手伝っていただきました Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

自分のコミット ・<Video>タグをReactの上で制御 ・動画の要素からメタ情報を取得 ・メタ情報を元にアプリケーションを制御 ・今まで開発したことのない分野だったので楽しい✌('ω')✌ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューを構成する4要素 1. ライブ動画配信 2. コメント 3. 出題/回答 4. Tポイント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

コメントのシステム構成 ユーザー リバースプロキシ WebSocket コメントサーバー Redis Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

コメントのシステム構成 ユーザー リバースプロキシ WebSocket コメントサーバー Redis NGワード判定 NGワード登録 配信スタジオ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

コメントのシステム構成（ヤフー版） ユーザー リバースプロキシ WebSocket コメントサーバー Redis NGワード判定 NGワード登録 不正投稿判定プラットフォーム 配信スタジオ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

不正投稿判定プラットフォーム 公序良俗に違反するようなコメントをワイキューに表示しないために 不正なコメントかどうかを判定するプラットフォームもヤフーにはあります。 判定は、登録されたNGワードや機械学習により判定されます。 写真:アフロ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

自分のコミット ・コメントの描画のパフォーマンス改善 ・1/21の配信では最大秒速75コメントを記録 ・socket通信によるチーム内コミュニケーションを実装 ・「楽しい」を作れて楽しい✌('ω')✌ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューを構成する4要素 1. ライブ動画配信 2. コメント 3. 出題/回答 4. Tポイント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

出題/回答のシステム構成 ユーザー リバースプロキシ 動画PF BFFサーバー 問題API Cassandra 管理API 配信スタジオ 出演者 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

出題/回答のシステム構成（ヤフー版） 東日本 西日本 x50 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ストレージ 各種ストレージを得手不得手を意識して使い分けています。 DB名 用途 備考 Cassandra クイズの正誤データの格納 Oracle 賞金データの格納 ACID特性 auditログの取得 Redis コメントデータ格納 websocketでPubSub CassandraやRedisなどは、DBaaS化されており数クリックで設置から 運用可能な状態に出来ます。 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

自分のコミット ・フロントエンド開発に集中 ・APIサーバー、BFF(Backend For Frontend)サーバーの構築に挑戦 ・node.js + TypeScript 開発楽しい✌('ω')✌ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューを構成する4要素 1. ライブ動画配信 2. コメント 3. 出題/回答 4. Tポイント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ポイントのシステム構成 ユーザー リバースプロキシ BFFサーバー 問題API お金API Message Queue インターナルお金API Cassandra Oracle Tポイント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

登場したプラットフォーム ・Message Queue ・Oracle ・Tポイント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

自分のコミット コミットしてないです✌('ω')✌ バックエンドエンジニアが作ってくれたAPIを利用 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューのシステム構成 ユーザー リバースプロキシ 動画PF BFFサーバー コメントサーバー CDN Redis 不正投稿判定PF 問題API お金API Message Queue インターナルお金API Cassandra Oracle Tポイント 管理API 配信スタジオ 出演者 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューのシステム構成 ユーザー リバースプロキシ 動画PF BFFサーバー コメントサーバー CDN Redis 不正投稿判定PF 問題API お金API Message Queue インターナルお金API Cassandra Oracle Tポイント 管理API 配信スタジオ 出演者 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

まとめ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューが管理していないこと ・プラットフォームとして提供されているシステム ・物理的なサーバーの運用 ・ログインなどの認証 ・各システム間の連携に必要な権限管理/認証 ・CI/CD環境 ・各種ログの管理 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューが管理していないこと ・プラットフォームとして提供されているシステム ・物理的なサーバーの運用 ・ログインなどの認証 ・各システム間の連携に必要な権限管理/認証 ・CI/CD環境 ・各種ログの管理 CaaS FaaS アラート検知 画像変換 Push通知 広告 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューが管理していること ・システム構成 ・問題管理API（入稿、出題、回答など） ・ユーザーの端末で動くプログラム ・機能ではない部分 ・楽しい！ワイワイ！の演出 ・ワイキューとしての面白さ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

ワイキューがリリースするまで キックオフ プロトタイプによる 社内検証 開発メンバーJOIN 稼働するシステム による社内検証 先行配信 リリース 開発期間 2018年2月 3月 4月 5月 6月 7月 8月 9月 10月 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

まとめ ・ヤフーには基盤からNGワードフィルターまで 幅広くプラットフォームが揃っている。 ・サービスを作る側はサービスのコアバリューに集中することができる。 ・プラットフォーム側はプラットフォームの開発に集中している。 ・社内プラットフォームが充実しているので、 ワイキューのような新規サービスもすばやく堅牢に作ることができる。 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

プロフェッショナルとして楽しく価値を発揮する ユーザーのニーズ 会社の要求 自分が得意/興味がある Value フロントエンドエンジニアとして ・ワイキューで遊んでくれる人がいる ・得意なフロントエンドに集中できる ・仕事として評価される プラットフォームエンジニアとして ・プラットフォームを必要としてる サービスがある ・好きな技術を追求できる ・仕事として評価される Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 19

サービスもプラットフォームも 楽しく開発できる環境がヤフーにはある 写真:アフロ

それぞれのプロフェッショナルが集まって 1つのプロダクトができあがる 写真:アフロ

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