デザインカンファレンスのライブ配信サイトを開発した話
Designshipカンファレンスサイト
2021年10月23、24日に「Designship | 業界の壁を越えた、日本最大級のデザインカンファレンス」がオンラインで行われます。
オンラインなのでライブ配信が必要です。
今回はそのライブ配信サイトを自作しました。
Designshipは2020年にもオンラインで開催しており、ライブ配信サイトはその頃に開発し、実際にカンファレンスで使用しています。
2021年の今年もオンライン開催なので、2020年からブラッシュアップを重ねてきました。
こちらがライブ配信画面になります。
実際のライブ配信画面
今回はそのライブ配信サイトを開発した経緯から技術構成まで紹介します。
このご時世なので、まだまだライブ配信が必要なイベントは多いと思います。
参考になれば幸いです。
ライブ配信サイトを自作することになった経緯
ライブ配信サイトを自作するには労力やさまざまなコストがかかります。
それでも自作するに至った理由があります。
1. 有料イベントはYouTube上で配信ができない
ライブ配信であればYouTubeのプラットフォームの力を借りれば、簡単に実現ができます。
しかし、Designshipのカンファレンスイベントはユーザーにチケットを買ってもらうことで視聴することができる有料イベントなので、YouTubeの利用規約違反になってしまいます。
YouTubeの利用規約にはこのような記載があります。
本サービスの利用には制限があり、以下の行為が禁止されています。
- 本サービスまたはコンテンツのいずれかの部分に対しても、アクセス、複製、ダウンロード、配信、送信、放送、展示、販売、ライセンス供与、改変、修正、またはその他の方法での使用を行うこと。ただし、（a）本サービスによって明示的に承認されている場合、または（b）YouTube および（適用される場合）各権利所持者が事前に書面で許可している場合を除きます。
このようにYouTubeのプラットフォームフォーム外で有料化されたイベントの配信をYouTubeに載せることは規約上禁止されています。
2. スポンサーへの訴求
ライブ配信サイトの下部にはスポンサー企業のバナー画像が掲載されています。
このバナーのリンク先にワークショップや特別サイトを設置し、企業出店ブースとして活用されている企業もいます。
オンライン開催でもオフライン開催のような企業とユーザーの交流を生み出すことができているのではないかと思います。
3. 視聴者の視聴体験をよりよいものに
自作するということは自分たちが作りたいものを好きに作れるのがメリットです。
そこで今回のライブ配信サイトを作るにあたって視聴時の没入感を提供したいということになり、機能を実装をしてきました。
具体的な機能は後ほど紹介します。
ライブ配信サイトの全体像
ライブ配信サイト全体を紹介しつつ、使用した技術やサービスを紹介します。
ライブ配信サイト全体の構成
ページとしてはユーザーが見るログイン、視聴画面。
オペレーションチームがFirebase Realtime Databaseを通して、機能を操作するための管理画面(別途ログイン画面付き)があります。
ログイン時はIdentity Platformを活用して認証を行なっています。
視聴画面と管理画面ではcontextが異なるのでマルチテナントの機能を使いたかったため、Identity Platformを使用しています。
技術構成
ライブ配信サイトはFirebaseにホスティングされています。
フロントエンドはNext.js + TypeScriptのシンプルな構成です。
動画配信周り
動画の配信には独自でサーバーを持たずにVimeoを使用しています。
トーク情報の管理
トーク情報はすべてSessionizeで管理しており、この情報をカンファレンスサイトとライブ配信サイトで共有しています。
カンファレンスサイトは常にSessionizeの情報を参照しており、ライブ配信サイト側はCloud Functionsでポーリングして、更新があった場合はFirebase Realtime Databaseに格納されたものを参照しています。
昨年の開催中にタイムテーブルの遅れ、早まりが出た際に、カンファレンスサイトとライブ配信サイト側で持っているデータが違うことで視聴者を混乱させてしまいました。
今年はこのようなことがないようにトーク情報を一元管理するように構築しています。
機能紹介
視聴体験をよりよいものへするために実装した、いくつかの機能を紹介します。
サイトの暗転
トークの開始前から開始にあたってライブ配信サイト全体が暗転するようになっています。
この機能は映画が始まるときの暗転をイメージして実装しました。
休憩中には次のトークの案内、トーク中にはトーク内容の確認ができるようになっています。
すべてユーザーがリロードしなくても切り替わるようになっています。
管理画面でオペレーションチームが操作することで、Firebase Realtime Databaseを通して切り替えるようにして実装しています。
ライブ配信サイト内ですべて確認ができる
トークの情報や休憩中の次のトークの案内以外にもユーザーが知りたいと思える機能をサイト内で完結して閲覧できるようになっています。
- タイムテーブルの表示
タイムテーブルの表示
タイムテーブルは現在のトークに合わせて表示するようになっています。
- 告知
告知の表示
こちらもサイトの暗転同様、Firebase Realtime Databaseの機能を使用し、ユーザーがリロードしなくても表示されます。
告知は当日表示されないことを祈っています...。
チャット機能
ユーザーがツイッター実況以外にサイト内でチャットできる機能を追加しています。
これはArenaを活用して実現しています。
FigmaとMiroによる開発コラボレーション
ライブ配信サイトの開発にはFigmaとMiroを使用しました。
最後にその様子をチラ見せします。
Figma
Figma上でデザイナーと開発者で議論することが多々ありました。
Figma
Miro
Miroの上でアーキテクチャ図を書いたり、進捗を管理していました。
Miro
〆
有志が集まって開催しているカンファレンスですが、このライブ配信サイトの開発は1つのサービスを作るかのように議論を重ねてきました。
みんなが「Designshipを視聴してくいただくユーザーにどうすれば良い体験を提供できるか」を考え、かなり長い時間議論を重ねたときもありましたが、各企業で活躍する人たちと意見を交わすことはとても楽しいものでした。
これはカンファレンススタッフをやる1つの醍醐味だなと思います。
関係者
最後にこのライブ配信サイトの開発に関わった人たちです。
PM
デザイン
開発
この記事を書いているのは自分ですが、さまざまな方の協力で今年も無事に開発を終えることができたので、記載します。
Special Thanks!!
Discussion