TypeScript meetup #4 Onlineの舞台裏

TL; DR

  • TypeScript meetup #4オンラインをやったよ
  • 心配してたけど、思った以上に盛り上がったよ
  • 知見を紹介するよ

はじめに

ちょっと前になりますが、TSConf JPが中止して以来、初めてのTypeScript meetupを初めてオンラインでやりました。

https://typescript-jp.connpass.com/event/177175/

COVID-19の影響で多くのミートアップ、勉強会がオンラインへと舵を切って、多くの知見が共有され始めています。

今回のミートアップでも、それらの知見が非常に役に立ったので、その一助とすべく知見を書き留めておきます。

構成

Youtube Live + OBS + Discordにした。

図にするとこんな感じ。

f:id:sasurau4:20200708231642p:plain

この構成に辿り着くまでに、検討した組み合わせ

  • Youtube Live + Google Meet + OBS -> 概ね良かったが、画面共有時のMeetのヘッダーが消せたらベストだった
  • Youtube Live + Discord + OBS -> 試してみて、良さそうだったので採用
  • Remo -> 有料だったので見送り
  • Stream Yard -> 無料だと右上にロゴが出る、既にDiscordを試していたので試していない
  • Twitch -> 既にDiscordを試していたので試していない
  • Cluster -> 配信者はスタジオ?に行かないといけないらしいので試していない

当日までの流れ

勉強会の日程を決める前に、オンラインで勉強会を開催するとなったら、どんな風に配信すればいいのかをすずさんと一緒に検証した。

Live配信するためにはYoutubeアカウントから申請して承認されないといけないというミスをやらかすも、代替アカウントでことなきを得た。他にもすずさんに色々教わりながら、無事Youtubeでお試し配信ができ、配信完全に理解した状態になった。

技術検証が終わったところで、いい感じに運営メンバーが集まれそうな日時で6/16 19:00から勉強会をすることにし、connpassで告知した。

登壇者へのdiscord参加してね連絡などをやりつつ、当日の1週間前の6/9に運営メンバーで集まって、検証しつつ、役割を決めた。

当日の役割分担は以下。

  • 司会進行: 1人
  • 配信者: 1人
  • 配信者予備(同じOBSプロファイルで待機): 1人
  • 公式Twittertweetする人: 1人
  • Youtube Liveの確認, Youtube Liveのコメント見る人: 1人
  • タイムキープ, 次の発表者への案内: 1人

計6人と贅沢な布陣だった。 1人あたりの負担が劇的に少なくなるので、初めてであればこれぐらいでいいと思う。 思ったよりもやることが多く、あまり少ないとテンパる気がする。

役割を決めた後に、Youtubeの予約枠を抑えたり、配信担当のメンバーが幕間に流す音楽を見つけたりや差し込む画像を作ってくれて、ぐっと良い感じになった。

Image from Gyazo

当日

当日は19:00本編開始としつつ、18:00に集合し、各登壇者を交えて配信テストをした。

Discordはこんな感じで構えていた。

Image from Gyazo

特に何か問題が起こることもなく、無事に配信テストも終了し18:45から配信開始した。

配信開始時、何か不具合が起こったときにすぐに反応できるようにPC1でDiscordとSlackとTwitterを開きつつ、PC2でYoutube Liveを流していた。事前の役割分担の仕方が原因で公式Twitterアカウントで登壇者の紹介を2重に投稿するミスをしたりした。

Discordの通知が鳴る影響で、運営スタッフ同士の会話はSlack、運営スタッフと登壇者との会話はDiscordという変則的な形でやっていた。

本編はこちらから

ちなみに始まってから終わるまで何か起こるんじゃないかとめちゃくちゃ緊張しながらPC1とPC2を行き来していた。

最後に運営からの話をWebsiteのLocalizationやってるよという話をちょっとさせてもらって、大きな混乱もなく配信終了した。

無事に配信終了したときの様子。

twitter.com

知見

  • 配信者の回線は強ければ強いほど良い、回線の安定が勉強会成功につながる
  • DiscordはVoice Chatに人が入室したとき、Text Chatに何かが投稿されたときに通知が鳴るのでそれが配信にめっちゃ入る
  • Youtubeにタグを入れられるので入れ忘れない
  • 公式Twitterアカウントで発言する人は1人にする
  • 控室は作っても需要がないので必要ない(登壇者もずっとお立ち台Voice Chatにいた)
  • 運営に余裕があると登壇内容を聞ける
  • Youtube Liveで流されてる映像とDiscordのリアルタイムには30秒から1分程度の遅延があるので行き来するとタイムトラベルすることになる

感想

最初に「ぜひリアクションをしてね」ってお願いしていたおかげか、かなりのリアクションがあって安心した。ちなみに同時接続数は最大437人だった。

結構な数、地方からも参加できて嬉しいという声を見かけて、やって良かった。東京に住んでいるとどうしてもこういう需要に気づきづらいので、COVID-19の効果感がある。

配信、意外とやることと考えることがあるので、Youtuberが1人で配信やってるのは本当にすごい。

勉強会についてブログを投稿してもらえるとめっちゃ嬉しい。Twitterの投稿もYoutube Liveのチャットもめっちゃ嬉しい。

qiita.com

ミートアップ実施前に参考にした記事たち

blog.cybozu.io tech-magazine.opt.ne.jp note.com engineering.linecorp.com

他にもリハと実際の環境が違ったので失敗したみたいな記事があったはずだが、思い出せなかった。。。

最後に

Youtubeを見てくれた参加者、登壇者、運営のみなさまありがとうございました。