【開催レポ】Cookpad TechBar #9 〜秋の最高LT大会〜 & ライブ配信の裏側

こんにちは。新卒採用担当の小久保です。

2018年11月21日に、Cookpad TechBar #9 〜秋の最高LT大会〜を開催しました。

Cookpad TechBarとは

Cookpad TechBarは学生向けのイベントで、クックパッド社員とカジュアルな雰囲気で気軽に交流していただけるイベントです。 f:id:bonami:20181130142831j:plain

今回のテーマ

今回は、「最高のLT」をテーマに、3名の若手社員と1名の内定者がLTをしてくれました。

具体的な発表内容としては、クックパッドの業務にほとんど関係のないLTを実施したのですが、堅苦しい説明会とは違う、TechBarならではの雰囲気を楽しんでいただき、大好評でした。懇親会では、参加者から多くの質問をしていただき、有意義な時間を過ごすことができました。

f:id:bonami:20181130143510j:plain

最高だと感じてもらう工夫

ただ楽しいLTイベントではなく、最高なLTイベントだと感じてもらうために実施した2つの取り組みについてご紹介します。

最高ボタン

f:id:bonami:20181130143023j:plain:w300

この「最高ボタン」はスマートフォンなどからアクセスすることができ、押すと「最高!」の音声が流れます。参加者が発表を「最高!」だと感じたとき、ボタンを押し、音声を鳴り響かせることで、LTの会場がさらに盛り上がる、という仕掛けです。ボタンが押された回数をリアルタイムでスクリーンに表示するようにしたところ、結果的に20,000以上の最高が集まりました。これは、スタッフ担当の内定者が作ってくれました。

f:id:bonami:20181130142824j:plain

イベントのライブ配信

※ここは配信担当の id:koba789 が書いています。

実は、今回のイベントは地方に住む学生にも楽しんでいただけるようライブ配信も実施しました。クックパッドのオフィスで行うイベントとしては初めての試みだったのですが、当日の来場者数と同じくらいの方々に視聴していただくことができました。

当初ライブ配信の予定はなかったのですが、地方にも興味を持ってくれる学生が多いということもあり、かねてから仕事でライブ配信をやってみたかった私が提案して実験的にやってみた、という経緯があります。 こうして「やりたいです」と手を挙げると、好きなこと・得意なことが仕事にできるというのは弊社のいいところだと思います。

配信にあたっては、参加者が学生だということもあって、現地の参加者の姿を映したくない、という強い要件がありました。 しかし、会場の大きなスクリーンと登壇者の姿をひとつのカメラで撮影することは、会場のレイアウト的にもカメラの画角的にとても困難でした。 そこで、スライドの映像と登壇者の姿を別で取り込み、PIP*1 で合成することにしました。

映像の配信用 PC への取り込みや PIP などの配信技術については、私(id:koba789)が趣味で温めていた技術を使いました。

配信用のソフトウェアとして OBS Studio を利用し、PIP やシーン切り替えなどをしました。

OBS Studio に映像ソースとして、登壇者の姿はビデオカメラの HDMI 出力を、スライドは PC の HDMI 出力をそれぞれ取り込む必要がありましたが、これにはよくある USB 接続の HDMI キャプチャデバイスではなく、LKV373 というハードウェアと自作の OBS プラグインを用いました。 実はこの OBS プラグインは Rust で書かれていたりしますが、これらの詳細については私の個人ブログで紹介していますので、そちらをご覧ください。

diary.hatenablog.jp

そして、これらの機材を組み合わせた配線図は以下のとおりです。

f:id:koba789:20181203162654p:plain
配線図

会場に備え付けの HDMI スイッチャーによってスライドの映像の分岐ができたため、構成が簡単になっています。

そして、実際の会場のレイアウトはこのようになっていました。

f:id:koba789:20181203162749p:plain
会場レイアウト
会場端に立ち入り禁止エリアを設けることで、参加者が映り込んでしまわないよう配慮しています。 図には描いていませんが、不意にカメラに映り込むことを避けるために椅子を並べてバリケードを作っていました。

そして、登壇者の姿を撮影していたカメラはこのようになっていました。 f:id:bonami:20181130142839j:plain

カメラの HDMI 出力は、三脚に固定されている LKV373(写真では見切れている) にすぐさま接続されており、配信機材のある演台の横までは LAN ケーブルで映像を伝送しています。 長さが 15m もある HDMI ケーブルは調達するのが大変であったり、ノイズ対策のためにシールドが固すぎて取り回しが大変であったりしますが、LAN ケーブルであれば安価で調達しやすく、しなやかで取り回しも容易です。

最後に、私が張り付いていた機材デスクを紹介します。

f:id:bonami:20181130142741j:plain
※これは同一構成でライブ配信をした別日の写真です

写真に写っている中で、配信用に追加した機材は、MacBook Pro・Rust のステッカーが貼ってある USB オーディオインターフェース*2・ヘッドフォン・USB NIC x2・LKV373 だけです。 その他の白い箱などは会場(オフィス)に備え付けのものです。

写真中央、短い LAN ケーブルが刺さっている黒い箱が LKV373 です。これは演台から来た HDMI を受けています。 こちらはカメラと違い、LAN ケーブルを長距離取り回す必要がないため、極めて短いケーブルで "SLIDE" と書かれた USB NIC と接続されています。 この USB NIC の裏にもう一つ、"ACTOR" と書かれた USB NIC がありますが、これはカメラの映像を受けているものです。

Rust のステッカーが貼ってある USB オーディオインターフェースは、マイクの音を取り込むために利用しました。 下に置いてあるマイクアンプのライン出力から音声を取り込んでいます。

以上、TechBar #9 のライブ配信の裏側をご紹介しました。 自作の OBS プラグインを使うなどのチャレンジもありながら、大きな事故もなく配信を終えることができ、配信担当者としてはホッとした気持ちです。

おわりに

クックパッドでは、2020年新卒採用を開始しております。職種は、ソフトウェアエンジニア、リサーチエンジニア、デザイナーの3職種です。

info.cookpad.com

クックパッドは、ユーザーの課題発見とその解決に真摯に向き合い続けることで、日々の生活を支えるサービスに成長してきました。また、その裏側を高度な技術が支えています。レシピサービスはもちろんのこと、新規サービス、グローバル展開など「毎日の料理を楽しみにする」ために多くの挑戦を行っていきます。興味を持っていただけた方は、ぜひご応募ください。お待ちしております。

・ソフトウェアエンジニア
・リサーチエンジニア
・デザイナー

*1:ピクチャ・イン・ピクチャ。ひとつの大きな映像の隅に、別の小さな映像を重ねること

*2:私が気まぐれで貼り付けただけで、Rust は特に関係ないです

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/