コース録画システムを自作してみた結果、残ったのはボタン2つだけ

この記事はもともと「Vista Electronic News（新しいタブで開く）」No.145 に掲載されたものです。

こんにちは、こんにちは！

9 月 29 日の午後 9 時 30 分に、3 分間の テスト ビデオ（新しいタブで開く） の録画を終了し、ファイルをプレーヤーにドラッグしました。なかなかいい感じでした。 ブリーフィングのページが全画面で反転しました。右下に小さな丸い枠があり、そこに私の顔が入っていました。背景が変更され、音声がクリアになり、画面上にマウス カーソルが表示されなくなりました。

かなり普通のことのように思えますよね？ しかし、その 3 分間のために、私はその日の早い段階で、より複雑なシステムを構築し、一度試してから、自分の手で引き出しにしまっていました。

今号のニュースレターでは、このプロセスについてお話したいと思います。 表面的にはコース記録ツールの開発の話のように見えますが、実際に共有する価値があるのは、その導入と継続的な使用との間のギャップだと思います。

出発点: ステージに上がるのと同じくらい簡単に授業を録音したい

さて、最初に背景を説明しましょう。 今年の 7 月に、Claude Code を使用して、vista-cut という名前の自分用のビデオ編集システムを構築しました。 素材をフォルダーに放り込むと、AI がまず逐語的なドラフトを変換し、編集部分を計画し、次にオープン ソース ツールのセットである ffmpeg を呼び出してビデオを切り取り、スコアを付け、字幕を追加し、YouTube 仕様に合わせて出力します。 全プロセスでレビューする必要があったのは 2 回だけでした。1 回目は編集プランとラフカットを確認し、もう 1 回は完成したフィルムを確認しました。

7月には一般映画の編集システムが完成。 今月は、授業を録画するという非常に現実的なニーズを補いたいと思います。

私はここ数年、多くの講演を行ってきましたが、プレゼンテーションはすべて私のコンピュータまたは プレゼンテーション Web サイト（新しいタブで開く） 上で行われます。 オンライン コースは常に私がうまく運営したい方向性でした。コースの録画で最も労力がかかるのは決して講義ではなく、講義後の編集です。ブリーフィング画面をスピーチと一致させる必要があり、デモンストレーション操作のクリップを挿入する必要があり、講演者の画面をどこに配置するかなどです。 したがって、今回の目標は非常に明確であり、私は話すことだけを担当し、その他のことはシステムに任せます。

初版: 非常に賢いですが、多くのことを覚える必要があります

最初のバージョンのデザインは、今振り返ると実にスマートです。

私はすぐにプレゼンテーションに講義モードを追加しました。 録音を開始するときは、S キーを押しながら手をたたきます。システムはこの拍手を使用して、プレゼンテーションのページめくりの記録をカメラの記録時間と一致させます。 講義中、ページをめくるたび、デモビデオが再生されるたびに、その時間がプレゼンテーションに静かに記録されます。 話した後、Shift + D を押して録音ファイルをダウンロードします。

編集時に、システムはこの記録を取得し、ブリーフィングのスクリーンショット、デモビデオ、講師の画像を自動的に分割画面に結合します。左側の大きなブロックがブリーフィングで、右側の狭い列が講師用です。 私だけが話していて説明がない段落に遭遇すると、自動的に講師の全画面に切り替わります。

この一連の処理をAIに書き終えてもらった後、開発に関与していない別のAIに独自の受付をさせました。 返される結論は「失敗」です。

実はこのアプローチは私が最近身につけている習慣なのです。 プログラムされた AI は、最初に考えたことを覚えており、同じ一連のアイデアを使用してチェックするため、自分の作品に高いスコアを与えるのは簡単です。 そこで、新しい会話を開き、開発プロセスは見せずに仕様書と完成品だけを渡し、うるさいユーザーのように実際の状況で試してもらいます。 今回は、ブラウザを使用して実際にブリーフィングを開き、ページめくりやビデオ再生をシミュレートし、その後 2 つの異なる形式のビデオでプロセス全体を実行し、時間をフレームごとに比較しました。

問題は非常に地味なところにあります。 コンピュータで録画された操作ビデオには通常、ファイル内にカラー マークが付いていますが、プレゼンテーションのスクリーンショットには付いていません。 2 つのマテリアルが接続されると、ffmpeg はデモ ビデオの冒頭で処理フローを再構築するため、タイムラインはゼロにリセットされます。その後、ビデオ全体のブリーフィング画面はスピーチの約 11 秒前に表示されます。

さらに注目すべきことは、その時点で 300 を超える自動テストのセット全体にゴーサインが示されたことです。 理由は簡単です。テストに使用されたデモ ビデオはプログラムによって生成された単色フィルムであり、カラー マーカーが含まれていないからです。 テスト材料がクリーンすぎるため、最も一般的な現実世界の条件はまったく測定されません。

修理後、テストの数は 359 回に増加し、すべて合格しました。 技術的には、システムを使用する準備ができています。

一度試してみましたが、何かが間違っていることがわかりました。

それから私がレコーディングのオーディションを受ける番になりました。

結局、もう 1 回 S を押し、最後に E を 2 回押しました。 システムはこれらすべての誤ったプレスを良心的に記録しましたが、良心的に時刻を追い続けることもできませんでした。 当時の私の考えは非常に単純で、手順が少し複雑で、操作があまり得意ではありませんでした。

このシステムの開発者である私ですら、他の人はもちろんのこと、複雑だと感じています。

それから完成した映画の分割スクリーン版を見たときに、2 番目の疑問が浮かびました。 講師コラムの写真をレンズの真ん中から切り取ったものです。少し横に座っていたので、柱の端に顔を押し付けられました。しかも狭い柱の中で顔が拡大され、プロポーションもおかしく、全体的に違和感がありました。

そのビデオを見て、私はあることに突然気づきました。コースの焦点は講師の顔ではなく内容であり、私はイケメンではありません。 観客に必要なのは映像のセンスです。本物の人間が彼らと話していることを知るだけで十分です。写真の 5 分の 1 を占める必要はありません。

2 番目のバージョン: 2 つのショートカット キーのみに合理化されました

これを明確に考えると、2 番目のバージョンの開発は非常に単純です。

合成を編集段階から録音段階に移しました。 無料のビデオ録画ソフトウェアである OBS でシーンを設定します。プレゼンテーションが画面全体に表示され、直径 240 ピクセルの小さな丸いフレームが右下隅に配置され、その中に私が入ります。 丸いフレームはレンズの中央に四角い部分しかないので、少しずれて座っても問題ありません。 誤差の余地ははるかにあります。

クラスを記録するとき、やるべきことは 2 つだけです。Shift+Option+B を押して開始し、Shift+Option+E を押して終了します。 拍手する必要も、Sを押す必要も、ログファイルをダウンロードすることを忘れる必要もありません。

編集システムの作業もシンプルになりました。失言や空白部分を切り取り、音量を標準まで下げ、字幕を追加することだけを担当します。 自動時刻修正と画面分割の元のプログラムは削除せず、バックアップとして残しました。いつか必要になったら取り出すかもしれません。

また、戻ってブリーフィングを右下の丸いフレームに合わせて調整しました。 授業の記録に使用される最初のプレゼンテーションは 200 ページあります。各ページの右下隅にある幅の 7 分の 1、高さの 4 分の 1 程度の領域をクリアし、ページ番号を左下隅に移動してから、別の AI を見つけてページごとにチェックするように AI に依頼したところ、200 ページすべてがパスしました。 今後行われる新しいプレゼンテーションも、そのコーナーでは空白のままになります。

ちなみに字幕もバージョンアップされています。 黒地に元々の小さな白文字は、見ていてもくすんだ感じがしました。 次に、それを白い太字フォントに変更し、青いストロークを暗くします。各文のキーワードを 1 つまたは 2 つ選択して色を付けます。色はブリーフィングのカラーマッチングをそのまま踏襲しているため、字幕とブリーフィングが同じデザインに見えます。

もう一つ小さなエピソードがあります。 初めて録音をテストしたとき、その音は哀れなほど小さく、平均音量はわずかマイナス 41 デシベルでした。 調べてみると、Macのマイク入力音量は27に設定されていることが分かりました。 より高く調整して再録音したところ、平均はマイナス 29.7 デシベルとなり、残りのギャップはポストプロダクションによって埋められました。 こういった小さなことは、実際に一度記録してみないと発見されません。

次のプロジェクトに持ち込む 3 つの原則

この日を振り返って、私は自分自身の3つの原則を整理しました。

まず、手作業で行う手順は3ステップに限定されます。

覚えておく必要がある手順はすべて、問題が発生する可能性がある領域です。 最初のバージョンでは、S キーを押し、拍手し、ページをめくり、E キーを押してから Shift+D キーを押してダウンロードすることを忘れないようにする必要がありました。それぞれの手順は合理的でしたが、積み重なると負担が大きくなりました。 2 つのキー入力を覚えるだけで済み、すべての準備は AI によって事前に行われます。 現在、何らかのプロセスを設計するとき、私は常に自問します。 「機械がこのステップを実行できるだろうか?」そうでない場合は、一歩減らしてもらえますか?

第二に、受け入れるには異なる視点が必要です。

300 を超えるテストに合格しましたが、テストを作成する人とプログラムを作成する人が同じ考え方を使用しているため、最も重大なエラーは検出できません。 本当に有用な承認には、さまざまな資料やさまざまな視点を使用する必要があり、開発に参加していない人が行うのが最適です。 今回は別の AI を探しています。社内では、別の部門でそれを試してくれる同僚を探しているかもしれません。

第三に、まず何が重要かを明確に考えてください。

最初のバージョンの技術的な難易度ははるかに高くなっていますが、講師の画像をより大きく、より正確に表示する方法という、存在しない問題を解決しています。 コースの主役はコンテンツであると理解すると、複雑さのほとんどは自然に消えました。

電子ニュースレター第 137 号（新しいタブで開く） を覚えていますか? 「この2週間で、新しく建てたものよりも解体したもののほうが多い」と書きました。 今回も同じ経験でした。一人会社（新しいタブで開く） 誰もあなたのために止めてくれません。 「もういらない」と言えるのは私たちだけです。 そして、できれば最初の裁判中に、叫ぶのは早ければ早いほど良いでしょう。

クラスの録画を開始したい場合は、最初に次の 3 つのことを行うことができます

最後に、オンラインコースの受講を検討している方への 3 つのヒントを紹介します。 自分でプログラムを記述する必要はなく、既製のツールを使用して実行できます。

1.まず絵の主人公を決めます。 説明コースではプレゼンテーションが主役であり、講演者はほんの一隅を占めるだけで十分です。特に実践コースやデモコースでは、操作画面が主役です。 主人公が決まればレイアウトも決まります。

2. 開始と終了の覚えやすいショートカットキーを設定します。 OBS を使用すると、ショートカット キーをカスタマイズし、他のソフトウェアと競合しない組み合わせを選択できます。クラスを記録するときにボタンを見つけるためにウィンドウを切り替える必要はありません。

3. 正式に録音する前に、3 分間のプレビューを録音します。 3 つのことを確認してください。音が十分大きいかどうか、画面に表示すべきでないものが表示されていないか、スピーカーの画面が重要なコンテンツをブロックしていないかどうかです。 これが、私が当時マイクの音量の問題を解決した方法です。

次に、このコース記録プロセスは私のオンラインコースで正式に使用されます。 最初のコースビデオが公開されたら、実際に録画に何時間かかったのか、編集に何時間かかったのか、途中で何が削除されたのかを共有します。

最近、非常に優れたものを作成したものの、結局使用しないことにしたことがありますか?遠慮なく直接私に返信してください。 あなたの話を聞きたいです。

「プログラムの書き方を知らなくても AI を使って独自のツールを作成できる」ことに興味がある場合は、この記事の多くの方法が、先月公開した「Vibe コーディングのゼロの基本（新しいタブで開く）」でより詳しく説明されています。

次回お会いしましょう！

ビスタ