PHPerKaigi 2019でコアスタッフをして音響･映像関連を頑張った #phperkaigi

みなさま、大変お待たせいたしました!PHPerKaigiのセッション動画が公開されました!

トークの動画を公開しました！
トーク一覧の「ビデオ」リンクや、トーク詳細画面の埋め込みからご覧ください！スライドもあわせて詳細画面からご覧になれます。 #phperkaigi https://t.co/okR2Mi8bEO

— PHPerKaigi 2019 @3/29-31 (@phperkaigi) 2019年4月11日

おー音が鮮明!映像見やすい!なんのセッションかわかりやすい!(自画自賛)

www.youtube.com

スタッフ間でも評判でした!

そんな今回のセッション動画公開に至るまでですが、実はいろいろあったんですよね。
ということでPHPerKaigi 2019 コアスタッフ編です。

PHPerKaigiは個人的に初スポンサー、初スタッフをやったカンファレンスであり、非常に思い入れがあります。 rela1470.hatenablog.jp 昨年の当日スタッフをやらせていただいたご縁で、今年はコアスタッフにお誘いいただきました。

大変だったけど楽しかったぞー

今年は音響･映像関連を担当していました。
もともと趣味で社内勉強会をYoutube配信していた経験があり、アマチュアではありますが多少知見があったため、立候補させていただきました。昨年はなかったポジションであり、@tomzohさんにも情熱を理解していただけて感謝でした!

設営中の写真がほとんどないぞ!寂しい!

昨年の課題

昨年のセッション撮影では課題が何個かありました。

音声が聞き取りづらい

会場のココネリ由来なのですが、音声がラインで取れず*1、昨年はBluetoothのマイクで運用していました。しかし当日はテザリングの電波が多数飛び交い*2、それとぶつかって音声が途切れ途切れになってしまいました。

スライド映像が見づらい

こちらは努力目標だとは思うのですが、スライドを投影したものを撮影するよりかは、直接HDMIキャプチャしたものを撮りたいという気持ちでした。

ということで、音声第一、映像第二といった形で進めていきました。

編集コスト

セッション録画公開は手間が大きい割にそこまで見られないという現状があり、できるだけ人的コストを下げたいと思っていました。中でも撮影後の編集が一番の手間で、更にイベント終了後は燃え尽きており、モチベがなんとも上がりづらい...という現状があります。しかし、当日であれば*3スタッフの人手も多く、モチベはもちろん最高潮なため(笑)、当日できる範囲で完成形の出力まで持っていこうという方針で進めていきました。

機材選定

趣味半分なのもありますし、そこまで大きなカンファレンスではないため、LiveWedgeのようなプロユース製品というよりは、個人の責任でも手が届く範囲、という形で個人的に買い進めていました。

ベース基盤はOBS StudioをインストールしたノートPCです。

OBSの画面。画像や動画、ブラウザ画面などを合成できます。

プラグインとして、後述するHDMIキャプチャ用のobs-lenkeng、幕間中1分ごとに表示を切り替えるためにAdvanced Scene Switcherを導入しています。

OBSのシーンはこんな感じです。

動画素材

デザイン面は、株式会社chatbox様に頂いたベースデザインをもとに、奥さん(@suend02)に素材を作っていただきました。本当にありがとうございます!
無理を言ってスポンサー様の紹介動画まで作ってもらい、本当に感謝です。(お仕事募集中とのことです)

【お仕事募集】
アートディレクション、イラスト制作、アニメ制作、映像編集等、承ります。2Dが得意です。直近のご相談も対応可能です。イラストはデフォルメキャラ制作、カードイラスト、テイスト合わせが得意です。よろしくおねがいします。#お仕事募集

— sue02/渡辺沙季(harine) (@suend02) 2019年1月23日

作らせてもらったデザイン、実際に使ってもらえてるの見れて、スタッフさんが素材をもとにうまく展開してくださったものもあって、とても嬉しい〜〜です☺️🌸 #PHPerKaigi pic.twitter.com/BYI9NboBep

— ことりさ (@cotolier_risa) 2019年3月31日

動画しゅごい #phperkaigi pic.twitter.com/JUod3yWAkE

— ほしさきひとみ (@HitomiHoshisaki) 2019年3月30日

動画、細かいエフェクトまでこだわってるのめっちゃ良いヾ(:3ﾉｼヾ)ﾉｼ#phperkaigi

— うえしー (@uessy_akr) 2019年3月30日

シーン切り替えはアルファチャンネル付きのmov動画でした

音声素材

ナレーション収録はMVStudioさんに発注させていただきました。 www.memut.net

phperkaigiのCM、部屋ごとに男女の声切り替わってるのわかりやすくて好き #phperkaigi

— Hatsumi (@884_823) 2019年3月31日

同料金でなんと声優さん6名まで対応しており、今回は男女1名ずつをお願いしました。 なんと台本をお渡しした次の日に納品されて、時間がない中だったので本当に助かりました!

お仕事以外で初めて収録台本をつくりました

音声

音声は@H_Shinonomeさんに助言を頂き、途中でレンタルに方針を変えました。 今回使ったのはYAMAHAのMG16XU。USBインターフェイスがついており、今回の録画PCに直接デジタル入力することが出来ました。
ちなみに映像と音声は、必ずその場で合成するというのが一つの拘りになってます。別撮りするとアマチュアの力では絶対に音ズレしてしまうんですね!*4

業者さんは今回はAZAさんにお願いしました。PHPカンファレンスなどでも実績があると聞きまして、安心してお借りできました!

音声ミキサ。｢テンション上がりますね!!!!｣って言ったら｢いや、ガチすぎてちょっとひきました｣と言われました。

1day5000円!安い! www.aza.co.jp

ケーブルも安い。すごい。 www.aza.co.jp

音声は割とシンプルです。

映像

さて、肝心のHDMIキャプチャボードです。

もともと所持していたのは2万円ほどするもので、なかなか数を揃えづらい価格です。

AVerMedia Live Gamer Portable 2 AVT-C878 ゲームの録画・ライブ配信用キャプチャーデバイス DV422

しかも今年は2部屋あり、単純計算でもスライド映像と登壇者映像の合計4台、8万円が必要になります。流石に自腹では出せないな、買ってもらおうかな、でもメリットがそこまでな...と思っていたところ、クックパッドさんと@koba789さんの記事を拝見しました。

techlife.cookpad.com

diary.hatenablog.jp

要するに格安なHDMIキャプチャがあるぜ!って話なのです。LKV373というHDMI to LANの機械で、もともとはHDMIの延長を目的としたものです。 詳しくは上記ブログを参照して頂きたいのですが、要はその受信機側をソフトウェアで実装してしまえば、PCのLANポートが実質HDMIキャプチャとして使えるよね!というなんとも変態的な考えのプロダクトです。 jpg圧縮されて送信されるので、多少ロッシーな画質にはなってしまいますが、全然許せるレベル。

github.com ※このプロダクトはLKV373のV2.0系のみに対応しており、LKV373A or LKV373(V3.0)と呼ばれているものは互換性がありません。間違って買わないように注意!

この機材のメリットは、なんといっても価格で、なんと4,799円*5です。普通のHDMIキャプチャの値段の4分の1!4台買える!すごい!

Malanzs HDMIエクステンダー 延長器 送信機 LANケーブルで1080P 最大160Ｍ延長 HDCP1.2 Rj45 Cat5 CAT5E CAT6 Sky HD Box Laptop PC DVD STB PS4(373送信機)

ということで、気づいたら送信機4台、受信機2台の計6台を購入していました。*6

この機材の更に良いところは、もともとの目的としているHDMIの取り回しがもちろん解決するというところです。*7 通常だとHDMIの取り回しは10Mくらいが限界と言われており、プロユースだと光ファイバーを用いたケーブルだったり、SDI変換したりと工夫しています。LKV373はLANケーブルで取り回しができ、今回はcat6*8のLANケーブルで映像を取り回しました。 いやー何もかも解決するこのプロダクト、胸熱。大感謝です。

当日の映像配線図。登壇者のPCをHDMIキャプチャして録画用に合成。その録画映像をスクリーンにも投影

実は左に合成前のモニタ、右に合成後のモニタも配備してました

返しモニタあるし、セッション残り時間のカウンターダウンタイマーも見やすいし、環境がすごい #phperkaigi

— 山本ユースケ (@yusuke) 2019年3月30日

昨日すごいなー！と思ったのは、アンカンファレンスや相談会、ディスカッションなどの『セッション以外』がとても盛況だったことと、セッションスライドの表示の仕方。パクr…参考にしたい。 #phperkaigi pic.twitter.com/MHfvZmDCGe

— ☯Ippei Sumida@AlexaDays2019でスタッフします (@ippey_s) 2019年3月30日

当日のトラブル

さて迎えた当日。大きなトラブルはなかったものの、細かいトラブルは発生しました。覚えてる範囲でメモ。

OBSのバージョンアップ

前日にOBSを誤ってバージョンアップしてしまったのですが、なんとブラウザ表示(後述するタイムスケジュール部分)に互換性がなくなっていました!

OBS v23.0さん!!!! ブラウザの解像度!!!! なにこれ!!!!!!!!!! pic.twitter.com/0s808INj6X

— Jun Watanabe＠rela (@rela1470) 2019年3月28日

なんとかバージョンを戻すことに成功しましたがヒヤヒヤしました。

LKV373の安定性

個人的には及第点かな、と思います。ただ、3日間2部屋で運用しましたが、約10回程度、映像のちらつきが発生しました。また、2セッションほど色味がおかしい状態になりました*9。登壇者PCではなく、ビデオカメラに接続した側は安定していました。スライドページやデモ画面を表示すると同じ画面で再現性があるため、憶測ですがPC*10かjpg圧縮との相性が悪いのかな?と思いました。お金が許すのであれば、せめて登壇画面側だけでも既存のキャプチャボードを用意したほうがよかったかもしれません。

LKV373の相性

今回購入した4個のうち2個が上手くキャプチャ出来ず、当日にビデオカメラ側の運用を断念しました。ただこちらは事前の検証でも上手く動いていなかったので、速やかに代替機であるWebカメラに変更しました。同じ発売元(Amazonマーケットプレイス)で購入したし、正規の使い方(送信機、受信機のセット)なら普通に動くしなんなんだ!未だに原因わかってません。うーむ。

Webカメラ

予備機ということで、有線のUSBカメラ。5m延長しての接続だったのですが、なんと当日認識せず。(事前検証では動いたのに…) トラックAは予備の予備のアクションカム、トラックBは工夫で延長なしの場所に設置して、なんとか稼働しました。外部電源ありのUSBハブを用意すればよかった。無念。

音声

今回は音声ミキサですべて合成した後、録画PCと会場に出力する形を取ったのですが、会場の音声入力レベルを下げることが出来ず、レベル過多に。会場に合わせて音声ミキサ側のレベルを下げると、録画PC側のレベルが足りず…会場とのつなぎ込みはぶっつけ本番だったため、非常に苦労しました。なんとか良いバランスを見つけたのは、開場して30分後くらいのことでした笑

2019-04-17追記
www.soundhouse.co.jp

タイムスケジュール表示

タイムスケジュール部分はVue.jsでWebページとして実装しました。しかし、当日Wi-Fiが安定せず*11、表示が乱れること多数。オフラインでも動くように作ればよかった。画像さえクローリングしておけばあとはオフラインでも動いたのに。サボったのが悔やまれます。途中でスタッフ有志によるテザリングで運用しました笑

github.com ビルドすらしてないべた書きのVue。時間がない中の力技でしたがちゃんと動いたのでVue好き。

登壇者へのスライド仕様告知不足

スライドを4:3で作ってもらい、16:9の余った部分にタイトルや顔を映す、といったレイアウトにしましたが、手違いで登壇者の皆様への告知が遅くなってしまい、また、告知後のプッシュもしなかったので16:9で資料を作ってきてしまった方が少なからずいました。こちらはミキサの切り替えで対応できるように準備しておいたため、オペレータの操作ミス以外は大きな問題にはなりませんでしたが、やはり画面は小さくなってしまうため、4:3を徹底したかったですね。

マイク運用

PA担当をつくらなかったので、音量が人によって安定せず。後日編集時の調整にちょっと苦労しました。あと予算(と電波)の都合でワイヤレスマイクを用意しなかったため、質疑応答の音声が乗りませんでした。

録音が途切れる

音声ミキサから録画PCにUSB入力していましたが、途中で一度USBが抜けたようで、その後*12の録音が全く出来ていませんでした。これは予備でボイスレコーダーを用意しており、そちらからサルベージできました。予備大事。

録画ファイルが破損

8時間の録画ファイルをmkvで保存していましたが、一箇所録画ファイルが破損していました。幸いにも音声が1分ほど欠落していただけなので、こちらも予備のボイスレコーダーからサルベージしました。 オペレーションミスを防ぐために一度も録画を止めないフローにしていましたが、どこかタイミングをみて中断したほうがよかったかも。

引き続き動画編集中。。。音声が1分半欠損している！怖い！ボイスレコーダーから移植手術 pic.twitter.com/ZLKkPGW9M3

— Jun Watanabe＠rela (@rela1470) 2019年4月6日

運用マニュアル

前日ギリギリまで構築をしていたため、マニュアルを作ることができませんでした。当日スタッフのみなさまご迷惑をおかけしました…

設営マニュアル

運用マニュアルがなければもちろん設営マニュアルもない状態で、設営を分業化できず。最初から最後まで自分ひとりで設営するしかありませんでした。*13後述するトラブルもあり、本当にドタバタでした。2部屋が時差スタートだったのが幸いで、なんとか間に合いました。

当日に荷物が紛失する

前日のヤマトさん最終締切ギリギリに集荷頂いたためかはわかりませんが、午前中指定だった荷物が調査中になり… 結局見つかって届いたのは14時。当日は16時開場だったので、気が気ではなかったです笑

ヤ、ヤマトさーん!!!!

Track Bはスクリーンが4:3だったため、力技で16:9をはみ出す運用に。筋肉!!!!って感じの解決案で割と好き。

今年の課題

• 機材は当日動かなくなるものだと肝に銘じるべきだった
• 会場へのつなぎ込み一発本番は止めておくべきだった(とはいえ現実的にはそうなると思う)
• 登壇者へのスライド仕様をもっと告知するべきだった
• タイムスケジュール表示をオフライン化すべきだった
• PA担当をつけて音量を調節するべきだった
• 質疑応答用のワイヤレスマイクを用意するべきだった
• 設営マニュアル、運用マニュアルを用意するべきだった
• 荷物発送は余裕を持って行うか、自分で持ち込むべきだった

ツール面でのフォロー

@tomzohが開発している、技術カンファレンス支援プラットフォームforteeの出来が(運営側にとっては)非常によく、助かりました!

Youtubeの動画説明文をプロポーザルから自動入力する機能@fortee

謝辞

とはいえ、今年のセッション録画はとても見やすく出来たと自負しております!
このような趣味丸出しの構成にチャレンジさせてくださった@tomzohさん、大量の動画チェックや、これ以外の仕事が全く出来ず、ご迷惑をおかけしたスタッフの皆様、そして無理なスケジュールで素材作成してくれた@suend02さん、本当にありがとうございました!

懇親会中も撤収作業を行っていたため、PHPost Partyでやっと終わった感が出ましたw

いやー、終わった!つかれた!がんばった!

自分の動画編集は罰ゲームだと思った

Photo by PHPerKaigi (CC-BY-NC 4.0)

追伸

現在転職活動中です!良いお話あればぜひ!!!!

*1:ホール分割使用の場合、操作卓がある部屋しかラインが取れない。しかもノイズが多い。

*2:会場のWi-Fiが安定しないため

*3:余裕があるとまでは言えないものの

*4:時計合わせやらフレームレートやら。29.97とか30とかよくわからん

*5:2019/04/10現在

*6:普通にキャプチャボードもう一個買えたじゃんというツッコミは受け付けておりません

*7:そのための機材ですからね!

*8:念の為。cat5eでもOKです

*9:変換アダプタのせいという説もある

*10:今回は Mac Book Pro mid 2011

*11:@H_Shinonome が頑張っていましたが、DNSのTTLが上書きされるなど、なかなか面白い構成の会場回線だった

*12:具体的に言うと徳丸さんのセッションから後

*13:音声はあまり知見がなく@H_Shinonome さん、@Not_Aragakiさん に手伝って頂きました! ありがとうございました!