Youtubeでライブコーディングしたら事故った話と対策

ライブコーディング･･･生配信で画面を映しながらプログラムを書くこと｡視聴者は解説や考え方を聞きながらカットのない本物のプログラミングの様子を覗くことができる｡生配信なので詰まったり迷走したりすると放送事故になる｡

TL;DR

リハーサルしましょう

最初に

スパチャ画像ジェネレーター を開発しました｡(スーパーチャットの画像を 捏造 生成できるクソアプリ)
API通信を伴わず､与えられた条件によってDOMの内容が変わり､それを画像として保存できる｡
よくある画像ジェネレーターサービスです｡

エンジニア系Vtuberとして開発の様子をYoutubeで配信しました｡
そこで得た知見のお話です｡
昨今はオンラインイベントが活発でライブコーディングをする機会が増えたと思います｡皆様の助けになればこれ幸い｡

事故① 環境構築でつまづく

今回､ Nuxt.js×Tailwind の構成で開発を決めていました｡
業務でもよく使う組み合わせで何度も環境構築をしてきたので大丈夫だろうと､特に考えもせず環境構築から放送を始めたのですがこれが失敗でした｡

いつもどおりNuxtとTailwindのインストールを済ませて npm run dev を実行します｡
Hello Worldのはずがエラーの嵐です｡
どうやらTailwindの依存ライブラリのVersionの組み合わせが良くないようでした｡

配信外ならエラー文からググったりIssueを覗いたりと30分ほど格闘する､もしくは､Versionを変える などで解決しますよね｡

しかし今は配信中｡配信中の視聴者数は0人ですが､アーカイブのことを考えるとグダる様子は見せたくない｡リアルを追い求めるならググりまくる姿も晒すべきだろうか｡｡しかしコンテンツとしてどうなんだ｡｡と葛藤｡

結局10分ほど格闘した後｢一旦配信中止して裏で解決しておくので次回よろしく｣で配信を中止しました｡

対策

環境構築くらい事前に済ませる もしくは リハーサルする

事故② 緊張のせいかTypoしまくる

普段はしないようなTypo(タイピングミス)も緊張のせいか何回も繰り返してしまいます｡

TypescriptなのですがそれでもVueのTemplate部分には効かずでして､Typoに気づかずなぜか動
かないみたいな流れが2~3回ありました｡

対策

慣れる

事故③ 音量バランス

これはプログラミングや開発に関係ないのですが､大前提で守らないといけないことでした｡

BGMと声のバランスが合ってない & マイクの音量調整が不十分
となっており､肝心のプログラミングの解説が聞こえづらい という配信になりました｡
気づいたのは配信を終えたあとに見直したタイミングなので後の祭りです｡

タイピングの音もマイクに拾われていたのですがHHKBなのでASMRです｡

対策

事前に限定公開などで他の人に音量バランスのチェックをお願いする
人が見つからないならアーカイブを非公開にして自分でチェックする

失敗を通して

各対策をまとめると リハーサルを行う コレに尽きます｡

リハーサルを行うためにはまず大まかでも台本が必要になります｡
一言一句までは必要ないですが流れなどは記して配信中に確認できるようにしたほうがいいでしょう｡

そしてリハーサルですが可能であれば 限定公開にして他の人にチェックを手伝ってもらう 方法がいいでしょう｡これだと問題点を即フィードバックできます｡
1人でも出来ますが手間がかかります｡

あとはもう慣れるしかなさそうです｡
1にも2にもリハーサル！ということでライブコーディングする皆さん､頑張っていきましょう｡