USE CASE / 01
操作説明を30秒の録画にする
会議を開かずにフォーム操作を伝える想定で、見せる範囲・入力例・時間配分を先に決めます。下の架空フォームを使えば、録画対象と保存の流れを自分のブラウザで試せます。
目的と架空の入力例
目的は「備品申請フォームで数量と受取先を確認する場所」を、見る人が後から再現できる形で伝えることです。実在の社員名や申請データは使わず、記事内の研修サンプルを使います。
今回の入力例（すべて架空）
- 申請者
- テスト花子
- 備品
- USB-C変換アダプター
- 数量
- 2個
- 受取先
- 開発テスト室
- 画面に出る番号
- DEMO-024
このサンプルは架空の画面です。フォームはブラウザ内で表示を変えるだけで、入力を送信・保存しません。
30秒の見せ方を先に決める
| 時間の目安 | 見せる操作 | ひとこと説明（任意） |
|---|---|---|
| 0〜5秒（5秒） | フォーム名と入力欄全体を見せる | 「備品申請の入力を確認します」 |
| 5〜13秒（8秒） | 備品「USB-C変換アダプター」、数量「2」を選ぶ | 「数量は2個です」 |
| 13〜22秒（9秒） | 受取先「開発テスト室」を見せる | 「受取先も確認します」 |
| 22〜30秒（8秒） | デモ申請ボタンを押し、DEMO-024の表示を見せる | 「受付番号の表示まで確認できます」 |
時間の検算: 5 + 8 + 9 + 8 = 30秒。これは撮影前の構成例で、録画を実施した結果や実測時間ではありません。話す場合だけマイクを有効にします。
録画から端末保存まで
- このページのサンプルを別タブで開き、架空の入力値を確認します。
- HIBI RECORDERを開きます。音声なしの画面説明なら、システム音声・カメラ・マイクは選ばずに始めます。話す説明を入れる場合はマイクだけを選びます。
- 「録画を開始」を押し、共有ダイアログでサンプルのタブを選んで共有します。選んだタブ内に個人情報や別の通知が出ないことを確かめます。
- サンプルで入力を確認し「デモ申請を確認」を押します。DEMO-024の表示まで進めたら、録画ツールのタブに戻り「停止してプレビュー」を押します。
- プレビューで入力と受付表示が読めるかを確認し、「端末に保存」を押します。保存名は `hibi-recorder-YYYYMMDD-HHMMSS` の後に、WebMなら `.webm`、MP4なら `.mp4` が付きます。形式を判定できない場合は `.bin` です。
期待結果: 対応環境で上の手順を実行すると、プレビューにサンプルの画面操作が表示され、保存操作で動画ファイルのダウンロードが始まります。この記事では録画や実ファイルの生成を行っていません。
制約と確認ポイント
- 録画できるのは共有ダイアログで選んだ画面・ウィンドウ・タブです。通知やパスワード欄が映らない対象を選びます。
- 録画は最大15分で自動停止します。編集・トリミング・クラウド保存はありません。
- 停止後のプレビューはページ内に一時保持されます。ページを閉じる前に必要なファイルを端末へ保存してください。
- 保存形式や再生互換性はブラウザ環境に左右されます。送る前に、保存したファイルが利用先で再生できるか確認します。
録画データの生成と保存形式の選択にはブラウザのMediaRecorder APIを使います。形式の対応確認についてはMDN MediaRecorder.isTypeSupported()を参照してください。
サンプルで録画手順を試す
録画する画面を選び、停止後にプレビューと保存を確認できます。