ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog

テクノロジー

環境のモダン化で、サービスに集中して開発ができている話

ワイキューのイメージ画像

こんにちは。ヤフーでワイキューを開発している石井、松本です。
今回はワイキューの開発の流れを追いながら、ヤフーのもつプラットフォームを利用した開発スタイルの紹介をします。

ワイキューとは?

賞金山分け型のエンタメライブ番組です。毎日21時から配信しており、全問正解した人で賞金を山分けできます。
問題のジャンルが幅広いのが特徴で、クイズだけでなく、間違い探しや多数決などもあり、
毎晩芸能人や YouTuber などをゲストに呼んでワイワイ楽しい番組を作っています。

ワイキューの画面

ワイキューを取り巻く技術

そんなワイキューですが、いろいろな技術を組み合わせてサービス提供しています。
(カッコ内は利用している特徴的な技術やフレームワーク)

  • 数千ユーザーへのライブ動画配信 (RTMP, HLS)
  • チャットなどのリアルタイムコミュニケーション (Redis, WebSocket)
  • アイテム利用時や賞金獲得時のリッチなアニメーションを可能にするフロントエンド技術 (TypeScript, React.js, WebSocket)
  • 最大数千 rps になる API リクエストの処理 (TypeScript, CleanArchitecture, Node.js, Cassandra)
  • リアルタイムなTポイント付与 (MessageQueue, Oracle)

これらはヤフー内で進めているシステムのモダン化で採用されたものを使っています。
これらを利用することで、サービスの新機能に注力できるようになった話をします。

リリース時のシステムの概要
リリース時のシステムの概要

ユーザーに楽しんでいただくために、新機能を続々リリース中

このように技術的に複雑なサービスですが、ユーザーにもっとワイワイ楽しんでいただくために、リリース後も定期的に下記のような新機能をリリースしています。

  • (2018年4月〜:開発開始)
  • 2018年10月〜:サービスリリース
  • 2019年1月〜 :チームプレイ機能(最大4人と一緒にクイズに答えられ、1人でも勝ち残れば賞金がもらえる)
  • 2019年3月〜 :ワイワイブースター機能(全問正解の際にクイズ賞金が増えるアイテム。プレイ中の特定の行動でもらえる)
  • 2019年6月〜 :ワイキューチャレンジ機能(ワイキューに1回参加する、5問目を5回正解する、などの課題をクリアすると報酬がもらえる機能)

ワイキューの開発メンバーは、時期にもよりますが 3名から4名 で、現存システムをメンテナンスしながら、これらの新機能をリリースしています。
少人数で継続的に新機能をリリースできているのは、社内で推進しているシステムのモダン化で採用されたプラットフォームなどを利用しているおかげだと感じています。

ワイキューでの新機能開発の流れ

それでは、ワイキューが新機能を開発する際に、具体的にどのようにシステムを構築するのか
今回はワイキューチャレンジを実装する際の具体的な開発の流れを書いてみたいと思います。

新機能の要件

ワイキューチャレンジ という新しい企画を実装することになりました。
ワイキューチャレンジは、月替わりに発生するチャレンジをクリアすることで、ズバトクのくじをひくことができる機能です。

一部ですが、今月のチャレンジにはこんなものがありました。8月にはまた新しいチャレンジが発表されます。

  • ワイキューに1回参加する
  • 5問目を累計5回正解する
  • 累計10人とチームを組む

チャレンジを全てクリアするとくじを引くことができるようになります。


(↑ 7月のワイキューチャレンジ)

外部設計を考える

最初に考えることは、ワイキューチャレンジを処理するサーバーをどこに用意するのかということです。既存の問題回答に利用するサーバーに相乗りさせてもいいのですが、万が一チャレンジ機能のバグでシステムがダウンしてしまった場合、ワイキューのコア機能である問題回答機能もダウンしてしまいます。そこで、新しくワイキューチャレンジ用のアプリケーションを作ることにしました。
ワイキューはマイクロサービスを採用しており、役割が異なる機能が必要な際は新しいアプリケーションを作っています。

システムを実装する

まずはローカルの開発環境で CleanArchitecture にのっとり TypeScript でガリガリとバックエンド API を書きます。
実装内容は、問題/回答のイベントごとにチャレンジを進めるべきユーザーを抽出し、進捗状態を更新してデータベースに入れる。さらに、チャレンジをクリアしたユーザーにはくじ券を付与し、この記録も保存する、といった内容です。
CleanArchitecture を開発に用いるメリットは幾つかあるのですが、外部リソースの変更(例えばデータベースを変更したり、ズバトクから別のくじシステムへの移行)の際に
ビジネスロジックはそのままで、該当部分のみの変更で実現できます。

新しいアプリケーションを作成する

ひととおり作り終えたら、ヤフー社内で使われている PaaS である PCFにデプロイします。 PCF ではcf push コマンドですぐにアプリケーションが作成できます。
データベースへの接続情報なども CloudFoundry が用意している UserProviededService を使うことで、
すでに別のAPIで利用するために存在する設定を新しいアプリケーションでも利用することができ、とても便利です。

CI/CD で安全にデプロイする

cf pushコマンドですでにアプリケーションのデプロイはできていますが、修正のたびに手動でデプロイするのは大変です。これを自動化するために CI/CD の仕組みを使います。

CI/CD には社内で Host されている Screwdriver を利用しています。
こちらを使うと、プルリクエストなど修正の度に単体テストが行われるだけでなく
先述の PCF 用のテンプレートを使う旨を数行 yaml の設定ファイルに書き込むだけで
アプリケーションの安全な blue-green デプロイを自動で行うことができます。

リリース時のみならず、試験環境への反映も GitHub 上での操作に対応して自動的に行われるため作業がはかどります。

くじを付与する際の負荷対策

例えば【ワイキューに1回参加する】という行動で1枚のくじが得られる場合、
その開催初日(ワイキューチャレンジは月替りなので通常毎月1日)にくじを付与するユーザーは参加人数全員(数千人)にのぼります。
一気に数千人分のリクエストをズバトクくじに送ることはできないので、負荷対策として MessageQueue を利用します。
全問正解時の賞金付与などにワイキューで利用実績のある、
社内で Host されている Pulser へ Websocket API を利用してメッセージを作成し、
Consumer 経由でリクエストを受け、ズバトクくじの付与を逐次処理します。

リリース

そのほかに、フロントエンド開発やバックエンドの各種テストや監視などを行い、めでたくリリースとなります。
ワイキューチャレンジは、開発に着手してからなんと1カ月弱でリリースできました

現在のシステムの概要

サービス開発エンジニアが実現したいこと

以上がワイキューでの開発の基本的な流れです。
ワイキューチャレンジにより全問正解をすること以外の目的を作ることができ、楽しみ方の幅が広がったのではないかとか思います。
また、ワイキューチャレンジは月替りのチャレンジだけではなく、他社とのコラボイベントの際に限定チャレンジを設定し、参加者へのプレゼントの抽選にも利用しています。
これもズバトクというサービスを利用してこそ提供できる価値だと思います。

いくつものプラットフォームやシステムにお世話になることで、
われわれワイキューのエンジニアはサービスの価値の最大化に注力できています。

最後に

ワイキューは今夜も21時から放送しています。
ぜひ、友達とワイワイ参加してみてください!
公式ページ:https://waiq.yahoo.co.jp/
公式ツイッター: https://twitter.com/waiq_yahoojp

写真:アフロ
写真:Paylessimages/イメージマート
提供:Paylessimages/イメージマート

こちらの記事のご感想を聞かせください。

  • 学びがある
  • わかりやすい
  • 新しい視点

ご感想ありがとうございました


石井 直矢

ワイキュー/エンジニア

主にフロントエンドを開発しています。TypeScript布教中。

松本 淳生

ワイキュー/エンジニア

『サービスの発展を止めないエンジニア』になるために、技術やチーム開発のことを日々考えています。

このページの先頭へ