「XFLAG PARK CONNECT」を開発した若手エンジニアに聞いた、7つのキーワード

　10月上旬「XFLAG PARK 2020」が開催されました。今年は例年と異なり、初のオンライン開催。とはいえ、スタジアムに集まって友だちや出演者、その場にいるお客さんたちと一体になって盛り上がる体験にどうにか近づけたいと開発されたのが「XFLAG PARK CONNECT」というサービスでした。

このサービスはブラウザ上で多チャンネルの動画配信、友人とのボイスチャット、クイズやリアクションをはじめとしたインタラクティブな機能などを実現。『モンスターストライク（以下モンスト』ユーザーの皆さんにとっては、単なる配信だけの体験にとどまらず、一体感ある時間を楽しんでもらえたのではないかと思います。

一体どういった経緯で開発されたのか、どこにポイントを置いたのか…そして当日の様子まで、開発に携わった若手エンジニア4名に話を聞きました。すると、“7つのキーワード”が浮かび上がってきました。

「XFLAG PARK CONNECT」って？

「XFLAG PARK 2020」の様子を、友だちとライブ配信を見ながらボイスチャットを楽しんだり、実際にユーザーもクイズに参加したりしながらさまざまなコンテンツを楽しめるサービスです。

獣神化の発表などメインの会場となる「Xtreme Arena」、オーケストラの演奏やモンスト愛を競う獣神戦などXFLAG PARKのための特別なコンテンツを配信する「Wonder Studio」、楽屋裏の雰囲気まで楽しめる「WAIWAI ROOM」、モンストのキャラクターグッズを“ウィンドウショッピング”できる「XFLAG STORE」の主に4つのエリアで構成されています。

参加方法は簡単。XFLAG IDでログインして、グループを作成／参加するだけ。最大20名までのグループを作り、一緒にイベントを楽しむことが出来ます。

さらに、このサービスでどのようなことが出来るかというと…

・視聴特典がもらえる

・友人とボイスチャットができる

・ライブ配信へのリアクションやクイズへの回答ができる

・友人への質問やシェアができる

このような内容でした。

それでは早速、若手エンジニアの皆さんの話を聞きながら、CONNECTの全貌を見ていきましょう

CONNECTにまつわるキーワード

1.Webソケット

━━見たところ、作るのに結構手間取りそうな感じがしますがどのような技術を使っているんですか？

丸尾　ユーザーに見える根幹のところは「WebSocket 」を使っています。PARKと同じように、会場内のブース間を移動するようにシームレスにコンテンツを行き来してほしかったので、基本的にブラウザ上でリロードはさせたくない。なので、サーバーとユーザーの双方向通信が安定している点で採用しました。

━━なるほど。他にも選定の理由ってあったりしますか？

丸尾　配信に合わせてバナーを手動で切り替えるなど、運営側である程度細かなところまで管理画面でコントロールできなければいけなかったので、一元管理のために入れた背景はありますね。

横山　技術自体は別に真新しいものではなくて、すこしレガシーな印象のものではあるんですけど、逆にいうと安定性の部分で採用した、という感じです。

━━たしかに安定感は大事なところですね。

2.サーバーの負荷対策

━━安定性、というと負荷対策はどうしてたんですか？

阿部　Googleの「Cloud Spanner」を使いました。

━━それはどういった理由で選ばれたんでしょうか？

丸尾　「XFLAG PARK」のオンラインイベントともなると、モンストのユーザーが一気に集まる一大イベント。同時接続数が数百万にのぼる可能性もあるので、なるべくノードを効率よく動かすために、水平分散のこのサーバーを選んだ、という感じですね。

━━ミクシィ社のサービスで使うのは初めて？

阿部　いえ、実は『TIPSTAR』でも使ってます。僕自身『TIPSTAR』にサポートで入っていた経験もあるので、そのノウハウを応用しました。

━━じゃあ割とすんなりと。

丸尾　いえ、手こずった部分もありましたね（笑）。イベント前後でいうと、このサーバーって暖機運転が必要なんですよ。ウォームアップ作業といって、当日より2日くらい前からある程度サーバーに負荷をかけておかないといけなくて。チーム内の詳しい方に見てもらっていました。

━━当日にトラブルもなかった？

阿部　なんとか（笑）。2日間のイベントなので、「サーバーメンテナンスに入ります」とはいえない状況なんですよね。なのでサーバーが落ちるか落ちないかは最後まで心配してた部分ではありました…。

━━では目測は誤ってなかったんですね。

▲今回のサービスのアーキテクチャ図

3.ブラウザの遅延

━━お話を聞いていると、開発は割と順調に進んだのでしょうか？

村上　順調…どうでしょうか（笑）。今回はアプリではなく、ブラウザで常時接続するサービスの開発だったので、そこでネックになった部分は結構たくさんありましたね。

━━そうなんですね。例えば？

村上　配信にはYoutube Liveを使用していたのですが、開発を始めた当初、デバイスによって動画配信の遅延の度合いが違っていて。“友だちでボイスチャットで話しながら視聴する“ことを主眼に置いていたので、これは結構致命的。話が噛み合わないこともそうですが、番組と対応したインタラクティブコンテンツなどもあったので、あまり遅延が起きるとそもそもコンテンツが成立しない！って焦りました。

━━確かに。それはどうやって解決したんですか？

村上　かなり地道な作業の繰り返しです…。Youtube Liveを組み込むには細かな設定があって…続きはこちら