L Harnessでオートウェビナーを作る方法｜予約・HLS動画・リマインド

MP4からHLSへの変換、R2配信、途中参加、予約、待機室、LINEリマインドをつないでオートウェビナーを構築する方法です。 専用ウェビナー機能を使い、予約、擬似ライブ、CTA、追客、CV計測を一つの導線にします。 ウェビナーの全体像を先に把握し、今使える機能と公開前の強化機能を混同しないようにします。 一本のMP4を3画質・6秒単位へ分割し、回線に合わせて安定再生できる形でR2へ置きます。

この記事はHarness Academyの教材データを基に、各Harnessの公式リポジトリにある実装箇所と照合して構成しています。秘密情報や本番データを記事・AIチャットへ貼らず、外部送信は必ず検証対象を限定してください。

最初に確認すること

• オートウェビナーの全体導線を作る: 現行の専用ウェビナー機能を把握し、詳細な実装・運用編へ進める
• 完成形と、公開版・本番版の違いを理解する: 申込から追客までのデータの流れと、利用中コードに含まれる機能を説明できる
• MP4をHLSへ変換し、R2から配信する: 動画を正しいCloudflareアカウントのR2へアップロードし、master.m3u8から各画質とセグメントを取得できる
• 途中参加位置を保ち、巻き戻りを防ぐ: リロード、別端末、バックグラウンド復帰でも同じライブ位置へ戻る仕組みを説明・検証できる
• 予約・待機室・LINEリマインドをつなぐ: 二重予約や誤配信を起こさず、予約から入場までを自分一人で通せる

オートウェビナーの全体導線を作る

専用ウェビナー機能を使い、予約、擬似ライブ、CTA、追客、CV計測を一つの導線にします。

この工程のゴール: 現行の専用ウェビナー機能を把握し、詳細な実装・運用編へ進める

現行L Harnessには管理画面の「配信 > ウェビナー」と専用のLIFF視聴画面があります。Workerが開催時刻と途中参加位置を決め、R2からHLS動画を配信し、D1へ参加・視聴位置・コメント・CTAを記録します。

本番版では、セッション選択、予約者だけの参加ゲート、開始前の待機室、5分前LINE通知、複数CTA、視聴ページ内フォーム、運営プレビューまで実装されています。基本機能はOSSにもありますが、強化機能は本番版が先行しているため、利用中commitを確認します。

ここでは全体導線を確認します。HLS変換、R2、巻き戻り防止、予約、CTA、分析、公開判定の実作業は「LINE編 > オートウェビナーを構築・運用する」で一つずつ進めます。

手順

1. 実装範囲を確認

利用中commit、051・055・056 migration、webinar route/client/reminderの有無を確認します。

2. 動画を準備

MP4を3画質・6秒単位のHLSへ変換し、検証R2のversion付きprefixへ置きます。

3. 導線を接続

予約、確認通知、待機室、視聴、CTA、フォーム、タグ、シナリオを検証IDでつなぎます。

4. 一人でE2E

自分のLINEだけで予約前から視聴後追客まで通し、管理画面ログとD1を確認します。

5. 実務編へ進む

LINE編 4で端末試験、分析、費用、停止、rollbackまで完了させます。

完了条件

• 専用ウェビナー画面とAPIを確認
• OSSと本番先行機能を区別
• HLS/R2から追客までを一枚で把握
• LINE編 4の実作業へ進める

注意: 既存の受講進捗を壊さないため内部ID 14-8は入口として残しています。詳細設定と本番試験はLINE編 4で行います。

Academy教材: Codex・Google・Harnessで実務運用する / Lesson 14-8

完成形と、公開版・本番版の違いを理解する

ウェビナーの全体像を先に把握し、今使える機能と公開前の強化機能を混同しないようにします。

この工程のゴール: 申込から追客までのデータの流れと、利用中コードに含まれる機能を説明できる

現行L Harnessには管理画面の「配信 > ウェビナー」があり、録画を決めた時刻の擬似ライブとして配信できます。LIFFで友だちを特定し、Workerが開催中かを判定し、R2のHLS動画を短命な署名URLで渡します。視聴位置、コメント、CTAクリックはD1へ記録されます。

2026年8月6日時点で、基本の管理画面・スケジュール・HLS/R2配信・ハートビート・コメント・基本CTA・分析はOSS版にもあります。一方、複数CTAカード、視聴ページ内フォーム、セッション予約、5分前LINE通知、予約者だけの参加ゲート、iOS向けEXT-X-START補正、運営プレビューは本番版が先行しています。

教材では『本番にあるからOSSにもある』とは扱いません。Codexに自分のcommitとDB migrationを調べさせ、機能表を作ってから設定します。既存のウェビナーが動いている環境へ、migrationやファイルを推測で追加しません。

手順

1. 入口を確認

管理画面の「配信 > ウェビナー」、LIFFの視聴URL、Worker API、R2、D1の5点を一枚の構成表にします。

2. 実装済み範囲を確認

現在のcommitで051・055・056 migrationとwebinar routes、client、reminder serviceの有無を調べます。

3. 一本の流れにする

セッション選択→予約確認→5分前通知→待機室→HLS視聴→CTA→タグ→シナリオをID単位でつなぎます。

4. 未実装を分ける

利用中forkにない機能は、設定不足ではなく導入・更新作業として別commitで扱います。

完了条件

• 利用中commitを確認
• OSSと本番先行機能を区別
• 画面・API・DB・R2の流れを説明
• 不足機能を設定済みと誤認しない

注意: OSS版と本番版には現時点で差があります。教材の画面名だけで判断せず、必ず利用中commitとmigration適用状況を確認します。

Academy教材: オートウェビナーを構築・運用する / Lesson 16-1

MP4をHLSへ変換し、R2から配信する

一本のMP4を3画質・6秒単位へ分割し、回線に合わせて安定再生できる形でR2へ置きます。

この工程のゴール: 動画を正しいCloudflareアカウントのR2へアップロードし、master.m3u8から各画質とセグメントを取得できる

本番版のencode-webinar.shはffmpegで1080p・720p・480pの3画質を作り、6秒ごとにキーフレームとTSセグメントを揃えます。master.m3u8が画質を選び、各index.m3u8がseg_00000.tsの並びを示します。回線が弱い視聴者にはhls.jsまたは端末のネイティブHLSが低い画質を選べます。

HLSに分割する利点は、2時間のMP4全体を先に取得せず、現在位置付近の小さなセグメントだけを取得できることです。ただし、HLS化だけで巻き戻し防止になるわけではありません。現在位置の算出、EXT-X-START、controls非表示、ドリフト補正を組み合わせて擬似ライブを維持します。

スクリプトの既定bucketはline-harness-images、保存先はwebinars/<slug>/です。実行前にwrangler whoami、account ID、bucket、対象環境を必ず照合します。R2の利用開始にはCloudflare側で支払い方法の登録が求められる場合があります。料金画面を確認し、顧客の承認なく本番動画を大量転送しません。

手順

1. 原本を点検

動画の長さ、音声、解像度、著作権、個人情報、容量を確認し、公開用slugを決めます。

2. 変換環境を確認

ffmpeg、ffprobe、Wrangler、Cloudflare account、R2 bucketをread-onlyで確認します。

3. HLSへ変換

既存スクリプトで3画質・6秒セグメントを生成し、masterと各画質playlistをローカル検査します。

4. R2へアップロード

検証bucketへ置き、content-type、object数、先頭・中盤・終盤セグメントを確認します。

5. 管理画面へ登録

video prefixとffprobeで得たdurationを登録し、公開前のプレビューで全編を確認します。

完了条件

• 3画質のmaster playlistを生成
• 6秒単位でキーフレームを整列
• 正しい検証R2へ配置
• 署名付きWorker経由で再生

注意: スクリプトのbucket名とCloudflare accountを既定値のまま信用しません。R2料金・支払い方法・保存容量を確認してから本番動画を置きます。

Academy教材: オートウェビナーを構築・運用する / Lesson 16-2

途中参加位置を保ち、巻き戻りを防ぐ

端末時計に頼らず、入ってきた秒数からライブ位置へ合流させ、iPhoneでも先頭へ戻りにくくします。

この工程のゴール: リロード、別端末、バックグラウンド復帰でも同じライブ位置へ戻る仕組みを説明・検証できる

時刻の基準はWorkerです。resolveSessionが現在時刻と開催開始時刻の差をoffsetSecondsとして返し、視聴画面は受信後の経過だけをperformance.now()で足します。視聴者の端末時計がずれていても、最初の位置は変わりません。毎秒サーバーへ時刻を問い合わせる必要もありません。

視聴開始時はplaylist URLへ?at=<現在秒>を付けます。Workerはmasterとvariantのm3u8へ#EXT-X-STARTを注入し、HLS側に開始位置を伝えます。さらにvideo.currentTimeの補正、5秒以上のドリフト補正、タブ復帰時の再同期、システム起因pauseの自動復帰を重ねます。

『HLSだから巻き戻らない』ではありません。予約者だけの参加ゲート、controlsなし、EXT-X-START、currentTime補正、単調時計、終了判定がそろって初めて擬似ライブになります。運営だけは?preview=1で0秒からシーク・倍速確認できますが、分析へハートビートを送りません。

手順

1. 計算を確認

既知の開始時刻と現在時刻を固定し、offsetSecondsが一致するunit testを実行します。

2. playlistを確認

?at付きmasterとvariantの両方へEXT-X-STARTが入り、segment URLは壊れないことを確認します。

3. 端末別に確認

iPhone LINE内、Safari、Android LINE内、Chromeで途中参加・再読込・画面復帰を試します。

4. 境界を確認

開始直前、開始直後、終了直前、終了後、通信断、長いbufferで挙動を確認します。

完了条件

• server offsetを時刻の基準にする
• EXT-X-STARTをm3u8へ注入
• 5秒超のずれを補正
• iOS LINE内を含む実機確認

注意: クライアントのcurrentTime代入だけではiOS native HLSで0秒へ戻ることがあります。playlist側とclient側の両方で位置を指定します。

Academy教材: オートウェビナーを構築・運用する / Lesson 16-3

予約・待機室・LINEリマインドをつなぐ

視聴者に次回枠を選ばせ、予約した本人だけを入場させ、開始5分前にLINEで知らせます。

この工程のゴール: 二重予約や誤配信を起こさず、予約から入場までを自分一人で通せる

本番版は今後48時間の開催候補を返し、視聴者が選んだ実在する未来sessionだけをwebinar_registrationsへ保存します。同じ友だち・同じ回はUNIQUE制約とupsertで一件です。開始10分前から待機室に入り、負のat_secondsを使った開始前コメントを流せます。

Cronは未通知の予約から開始5分前の対象を拾い、視聴リンクを一度だけ送ります。送信成功後にnotified_atを記録し、registration IDをretry keyに使うため、途中失敗でも二重送信を抑えられます。ブロック済み友だちには送りません。

LINE送信は必ずL Harnessの/line-apiプロキシ経由です。api.line.meを直接呼ぶと管理画面のメッセージログに残らないため禁止です。予約確認、5分前通知、追客のどれも同じルールにします。

手順

1. 開催枠を作る

onceで検証回を作り、次回候補とJST表示を照合します。

2. 自分で予約

LIFFから一回だけ予約し、registrationと受付確認メッセージを確認します。

3. 待機室を確認

10分前、5分前、開始時刻で表示と通知が正しく切り替わるか見ます。

4. 参加ゲートを確認

予約者は視聴でき、未予約者と別の回を予約した人は次回選択へ戻ることを確認します。

5. 再実行を確認

Cronを再度動かしても同じ通知が二通にならず、メッセージログへ残ることを確認します。

完了条件

• 未来の実在sessionだけ予約
• 同一予約は一件
• 開始前通知は一度だけ
• すべてのLINE送信をHarness proxyへ記録

注意: Cronを本番時刻で試さず、自分一人の検証回で確認します。LINE Messaging APIへの直接送信は禁止です。

Academy教材: オートウェビナーを構築・運用する / Lesson 16-4

公式ソース

• L Harness / apps/web/src/app/webinars/page.tsx — ウェビナー管理画面
• L Harness / apps/worker/src/routes/webinars.ts — 視聴・計測・R2配信API
• L Harness / apps/worker/src/services/webinar-schedule.ts — 開催時刻と途中参加位置
• L Harness / packages/db/migrations/051_webinars.sql — 基本データモデル
• L Harness OSS / packages/db/migrations/055_webinar_ctas.sql — 複数CTAカード（現在の公開OSS実装）
• L Harness OSS / packages/db/migrations/056_webinar_registrations.sql — セッション予約（現在の公開OSS実装）
• Apple HTTP Live Streaming — HLSの公式技術資料
• Cloudflare R2 pricing — 保存・操作料金とegressの公式説明
• L Harness OSS / apps/worker/src/client/webinar/main.tsx — EXT-X-START、再同期、pause復帰（現在の公開OSS実装）
• L Harness OSS / apps/worker/src/routes/webinars.test.ts — 途中参加playlistの回帰テスト（現在の公開OSS実装）
• L Harness OSS / apps/worker/src/services/webinar-reminders.ts — 5分前通知とretry key（現在の公開OSS実装）
• L Harness OSS / apps/worker/src/services/line-proxy-send.ts — Harness proxy経由のLINE送信（現在の公開OSS実装）

関連ガイド

• L Harness機能一覧
• /line-harness-booking/
• L Harness公式ガイド