JaSST Online Clover の配信事情
JaSST Online Cloverで実行委員長を務めました、halspringです。
ご無沙汰しております。
JaSST Online CloverでDiscordやらOBSやらを用いてイベントの配信を行いましたので、どんな感じになっていたのかをざっくりとまとめます。
JaSST Online Cloverとは
今回の大きなテーマは「アウトプット」です。
細かいニュアンスについてはJaSSTの概要ページからそのまま引用します。
今回のCloverでは少し変わり種ですが「技術の発信」すなわち「アウトプット」を扱います。
品質・ソフトウェアテストの分野はドメインとの距離が近いため一般化が難しく、社外や個人で発信しようとすると抽象化し過ぎてしまうなどアウトプットが難しい分野だと思います。
とはいえ、個々の学びをアウトプットすることはコミュニティへの貢献だけでなく自身の成長にもつながるため、より多くの人にアウトプット活動をしていただくことが重要と考えています。
Cloverでは品質・ソフトウェアテスト分野に関わる様々なアウトプットを行っている３名をご招待し、業界でご活躍されている方々がどのようなことを考え、どのようにアウトプット活動につなげているのかを深堀りしていきます。
ところで、Cloverの花言葉は葉の数によって異なります。
たとえば一ッ葉は「始まり」、二ッ葉は「素敵な出会い」、三ッ葉は「信頼」です。
今回のCloverでは、アウトプットを始めようとする方々の「始まり」であり、今後の活動によって人や活動と「素敵な出会い」をし、他者からも自分自身からも「信頼」できる・されるように成長をして四ッ葉の花言葉でもある「幸運」を手にしていただければと思います。
野に咲くCloverのように、小さなアウトプットからコツコツと一面に広げてみませんか？
内容についてはTogetterのリンクから参加報告のブログをたくさん書いていただきましたので、そちらをご覧ください。
Togetter : https://togetter.com/li/1758744
ツール・サービスたち
こちらも概要と用いた用途のみ記載します。
公式のリンクを貼っておきますので、細かく知りたい方はそちらをご参照ください。
- Discord https://discord.com/
- 概要
- オンラインコミュニケーションツール
- 音声・テキスト・カメラ・画面共有が可能
- ユーザーがサーバーに参加し、サーバー内に複数の場が用意されている
- 用途
- 実行委員・登壇者・参加者とのコミュニケーション, 事務連絡
- 登壇者の発表スペース
- OSTセッションのスペース
- CommentScreen https://commentscreen.com/
- 概要
- 用途
- LTセッション・パネルセッション中のにぎやかし
- 参加者のリアクション(感想・疑問など)を知りたい
- 参加者と登壇者でインタラクティブにやり取りできるようにしたい
- Zoom https://zoom.us/jp-jp/meetings.html
- 概要
- 言わずと知れたオンラインの会議ツール
- 用途
- LTセッション・パネルセッションの配信（Webiner）
- OBS Studio https://obsproject.com/ja
- 概要
- 動画の録画や配信用のOSS
- 配信用の画面レイアウトや音声入出力ができる
- この記事のメインに近い
- 用途
- LTセッション・パネルセッションの配信画面構成
どう配信していたか
オンラインのイベント開催を考えている方及び未来の自分たちへのメモとして残します。
ツールの話
ざっくりとしたイメージを伝えるために、こんなものを開催前に準備していました。
参加者はZoomに参加するだけですが、配信側が結構ごちゃごちゃしています。
参加された方はわかると思いますが、配信画面には以下の要素で構成されていました（上記画像右下のイメージ）。
- プレゼンテーション資料
- 登壇者のカメラ
- Twitterのタイムライン
- CommentScreenに投稿された流れるコメント
最近のイベントでは割とよく見るような構成かと思います。
意外とこれが素人環境でも実現できたため、ご参考になればなによりです。
実現するにあたって必要なものは、
- 2つ目のディスプレイ
- デスクトップアプリ版のDiscord（多分）
- そこそこのスペック（目分量）のPC
- そこそこの通信回線（目分量）
- 折れない心
です。CommentScreenを用いない場合はディスプレイが１つでも大丈夫です（後述）。
Discordでやること
Discordは、登壇者の発表スペースとして利用しました。
登壇者は常にDiscordの音声チャンネルに接続して頂き、順番が来たらスライドの画面共有とカメラオンにします。
スライドとカメラのみを配信画面に載せるために、配信画面をポップアップしておきます（OBSでこいつをキャプチャする）。
※ 画面共有・カメラオンのユーザーのみを表示する設定ができるので、この設定を用いておくとOBSで逐次レイアウトをいじる必要がなくなります。
CommentScreenでやること
こちらは特にありません。
起動してコメントが画面に流れることを確認できればOKです。
※ OBSで流れるコメントのみをキャプチャできないっぽいので画面全体をキャプチャする必要があり、そのためにディスプレイが１枚必要になります。
OBSでやること
プレゼンテーション、登壇者のカメラ映像、CommentScreen、Twitterのタイムラインの合成を行います。盛りだくさん。
登壇者の配置
OBSのシーン編集で、前述のDiscordでポップアップさせた配信画面（音声チャンネル）を２つ追加します。
２つ追加する理由ですが、片方をプレゼンテーション用、もう一方をカメラ映像用にするためです。
OBSでは、取り込むウィンドウや画面を配信用にレイアウトすることができるのですが、複雑な切り抜きができません。
ALTを押しながらサイズ変更することで簡単なトリミングができるため、プレゼンテーションのサイズに合わせたウィンドウと、カメラ映像に合わせたウィンドウのふたつが必要になるわけです（もちろんですがカメラ不要だったりレイアウトにそこまでこだわらないならひとつで大丈夫）。
Twitterの配置
こちらはシーンの追加でブラウザを追加するだけです。
タイムラインを表示したブラウザを、同じ要領でトリミングして配置しています。
ただし、公式ではなくTweetDeck（https://tweetdeck.twitter.com/）を用いました。
公式のWebアプリでは、放置しているとタイムラインが更新されないこと、また今回の画面レイアウト上TweetDeckの方が縦長のデザインに適していたことがその理由です。
プレビュー画面の全画面表示
CommentScreenを配信画面に載せるために必要になります。
前述のとおり、CommentScreenの流れるコメントのみをキャプチャすることができないため、ひとつのディスプレイを犠牲にして配信画面を構築します。
OBSのプレビュー画面を右クリックすると配信画面のプレビューを全画面表示をさせることができます。
フルスクリーンで表示されますが、この状態でCommentScreenを起動していると、コメントはその画面よりも全面に表示されるため、ここまでで構築したレイアウト+CommentScreenの合成がこれで達成できます。
※ CommentScreenを用いない場合は全画面表示する必要はありませんが、プレビュー画面をウィンドウ化しておく必要があります。
Zoomでやること
配信用に用意した画面の共有を行います（CommentScreenを用いない場合は配信画面のプレビューを共有）。
このとき、音声の共有オプションをチェックしてください。
Discordから流れる登壇者の音声が聞こえない場合はこのオプションが抜けています。
運営の話
配信の仕組みがごちゃっとしていることと、結構直前までバタバタしていたため、こんなものをつくりました。
登壇者側は基本的にDiscordに繋ぎっぱなしで、順番が来たら画面やマイクをONにするだけで配信画面に載ることができます（が、事前に説明が不足して混乱させてしまっていたために用意しました）。
裏側を知らなければ不安になるのは当然のことですので、運営側は登壇者が困らないように手順を明らかにしましょう（自戒）。
今回のフィードバック
この構成で配信を行い、頂いた意見や事象は以下の通り。こちらはこれからどうするか考えます。
- 参加者側からするととても見やすい
- Twitterの実況を別途見る必要がなく追う画面がひとつで済む
- リアルタイムのコメントが見れる・流せるので他の参加者のコメントにも刺激を得られる
- 登壇者が配信画面を見にくい（Zoomに別途参加する必要がある）
- CommentScreenやTwitterの反応をうまく取り入れられない
- DiscordとZoomの同時起動をしないと会の雰囲気を見られない
- 配信を行うPCおよび通信環境に問題があるとキツい
- 画面共有の受信と、さらに同程度の送信を行っているので通信環境は大事
おわり
以上になります。
テキストベースで非常にわかりにくいと思いますので、ご質問があればなんなりと。
場合によりますが、コミュニティを盛り上げるためであれば全然サポートしてもいいと思っていますので、イベント運営を考えている方でよくわからなかったという方がいれば通話しながらお手伝いもできるかと思います。
