CloudNativeDays Spring 2021でカンファレンスプラットフォームを開発した
2020年3月11日〜2020年3月12日に開催されたCloudNative Days Spring 2021 Onlineの実行委員会として、カンファレンスプラットフォームの開発に関わりました。今回は従来のRailsにReactとTypeScript・Next.jsを追加し、ウェブフロントエンドの体験を向上させたのですが、React・TypeScriptに入門できたのが個人的には大きな収穫でした。
カンファレンスプラットフォーム(コードネームはdreamkast、以後dreamkastと書きます）はCloudNativeDaysTokyo2020でも開発していたので、引き続きの参加という形になりました。
CNDO2020の時点で、複数のトラックを切り替えながらライブ配信を見たりアーカイブ視聴する機能はあり、カンファレンスプラットフォームとしては悪くないものでした。しかし、ライブとアーカイブをスムーズに行き来したりセッションを見ながらコミュニケーションしたりするという点では課題が残っており、今回のCNDO2021ではそこを改善するのが目標の一つでした。
CNDT2020はどうだったか？
CNDT2020の時はどのようなUIだったかについてまず触れておきます。ライブ配信画面にはビデオの埋め込みとセッションに関する情報が表示されています。視聴者はこの画面上部にあるTrack A ~ Track Gのボタンをクリックすることで見ているトラックを切り替えられる、という仕組みです。また、そのトラックのセッションが切り替わると、見ているセッションも自動的に切り替わるようになっています。画像には写っていませんが、ページにはsli.doが埋め込まれていてセッションに関する質問を行えます。また、DiscordにジャンプすればAsk the speakerとしてスピーカーとコミュニケーションできる、という構成です。
配信が終わったセッションについては各セッションのパーマリンク上からアーカイブ動画を見ることが可能です。タイムテーブルもしくはセッション一覧（これはイベント中に実装した）から各セッションのパーマリンクへ遷移することが可能です。
セッション毎のパーマリンクを開くと、以下のようにアーカイブ動画が表示されます。
CNDO2021
CNDT2020では前節で述べたUIを使いました。けっして悪いものではなく、評価していただきました。しかし、スピーカー・参加者間、参加者同士のコミュニケーションやトラック切り替え・アーカイブ視聴など様々な要改善ポイントがありました。また、全セッション事前収録するというイベントの性質上、登壇者の方がセッション情報を登録したり動画をアップロードするための機能も必要でした。
そういうわけで、CNDO2021では新しい配信画面の実装を行いました。画面のおおまかな設計は @jacopen が行っています。
React/TypeScript
CNDO2021の配信画面にはReact/TypeScriptを採用しました。JavaScript自体は触ったことがあるし、VueやAngularJSなども使ったことはある。CNDT2020の時はjQueryで少しダイナミックなUIを作っていました。しかし、React/TypeScriptは未経験でした。とはいえ経験者の人がチームに参加してくれたり、他のメンバーがある程度作ったものを触るところから始めたので滅茶苦茶難易度が高かったというわけではありませんでした。いろいろハマったけど聞いたらあっさり解決することも多く、助かりました。
Reactを使ってみた感想ですが、慣れるまでは少し大変だけど慣れると非常に優れたフレームワークなのだなと思っています。他のフレームワークと比較した訳ではないのであまり言えることはありませんが…個人的にReactで作ってみたいものができたのと、ReactNativeにも今後チャレンジしてみたいと思っています。
TypeScriptですが、もう使えないと不便すぎるなという印象を持っています。僕はJetBrainsのIDEであるWebStormを開発に使っているのだけど、補完やジャンプなどが当たり前のように使えて最高です。
Railsとの連携
今回はライブ視聴とイベント開催中のアーカイブ視聴、スポンサーブースの3機能をReact化しました。元々RailsでUIを作っていたのですが、全てをReactに移すのはリソースが足りなかったので本当に重要な箇所のみ移設したという形です。基本的にはRailsで書いたREST APIを呼び出して結果を元にレンダリングするわけですが、API呼び出しもOpenAPIを使ったおかげでAPIライブラリを自動生成でき、非常に効率よく進めることができました。
チャット・QA機能まわり
今回自分がデザインと実装をかなり行った箇所の一つに、配信画面内のチャット・QA機能があります。いろいろ課題は残っているものの、スピーカー・参加者からは評価もしていただけておりうれしい限りです（もちろん、改善ポイントもたくさんいただきました。ありがとうございます）。CNDT2020ではsli.doで質疑を、Discordでコミュニケーションを行うという設計だったのですが、sli.doから自前のQAシステムへ乗り換えるという話から始まり、じゃあチャットも実装してコミュニケーションもとれるようにしようということでチャット・QAを実装することが決まりました。
チャットとQAをシームレスに扱う
チャットとQAを別々の仕組みで実装することももちろん可能ですが、コミュニケーションの場所を増やしたくないということと時間的な制約からチャット内でQAもできるようなものを今回は作りました。
今回のチャットはこのような画面構成となっています。
- チャットボックス下部のフォームからメッセージや質問、リアクションを送る
- 質問は背景色が変わる
- メッセージにはリプライすることができる
- そのセッションのスピーカーの投稿には
[スピーカー]と表示され、区別できる
また、質問のみ表示できるように切り替えるためのタブもあります。
当日にいくつかセッションを見ていましたが、スピーカーと参加者、または参加者同士でコミュニケーションしている様子が見て取れました。表示まわりが不安定でしたが、結構使われたのでないかと思います。
リアクションボタン
何気にこの機能は結構自慢したくて、なぜかというと実装コストはかなり低いけど盛り上がりに貢献できたと思っているからです。リアクションボタンはチャット下部の３つのボタンのことで、 ３種類の絵文字を即座に送ることができるという機能です。
実装的には送るメッセージが固定されたボタン型のフォームにすぎません。チャットに表示されるのでやや可読性を乱すという欠点はあるものの、セッション開始時や終了時に大量の拍手などが流れてくると盛り上がりを感じることができたと思います。
まとめ
Reactを採用することで、配信画面の体験は非常によくなったと思います。jQueryを使っていた時よりも格段にダイナミックな処理を書きやすくなりました。Reactはまだ一部の画面しか採用していませんが、徐々に移行していきたいと考えています。その一方、画面描画周りが不安定で、別のトラックの配信が切り替わったタイミングでチャットやセッション情報の表示が乱れてしまったりしていました。安定性を高めていくことも、今後の課題の一つです。
今回は触れませんでしたが、インフラがHerokuからEKSに変わったりして、システム的な複雑度も上がっています。CloudNativeDays実行委員会ではオンラインカンファレンスプラットフォームの開発に関わりたい人を募集中です。技術スタックとしてはReact、TypeScript、Rails、AWS、EKSです。特定のレイヤーでスペシャリストとして関わるか、複数のレイヤーを横断的に関わることになると思います（僕は後者）。ただのWebシステムではなく、今後はより動画配信をやりやすくするために連携していくような開発が行われ、アーキテクチャレベルでかなり変わっていくと思われます。ちなみに、技術レベルですが、経験があればもちろんよいが、なくても習得する意思があればOKだと思います。