ブラウザのタブから短い製品デモを録画するには、OpenScreenShot の Chrome 拡張機能の録画を使います。タブ全体またはその一部を選び、マイク、タブの音声、ウェブカメラをオンにして、デモを録画します。その後、エディタがクリックごとにズームを追加し、録画の不要な部分を削れるようにし、MP4 で書き出します。Firefox 版はスクリーンショットだけに対応しており、録画機能はありません。

デモを録画する手順

  1. 通常のブラウザ タブでデモを準備します。ログインし、サンプル データを読み込み、通知を閉じます。ブラウザの内部ページは録画できません。
  2. 初期設定では、ツールバーのアイコンをクリックするとスクリーンショットが撮られます。アイコンを右クリックしてワンクリック Express モードをオフにすると、次のクリックでポップアップが開きます。
  3. ポップアップで録画をクリックします。ページの横に録画タブが開きます。初回は、タブをキャプチャする権限を Chrome が一度だけ求めます。
  4. 必要に応じてマイク、タブの音声、ウェブカメラをオンにし、ブラウザの権限の確認を許可します。
  5. タブ全体のままにするか、ページの画像上をドラッグして一部だけを録画します。
  6. 録画を開始をクリックします。OpenScreenShot がページに切り替わります。一定のペースで、意図的にクリックしながらデモを行います。
  7. Alt+Shift+X を押して停止するか、録画タブに戻って停止をクリックします。同じタブで録画エディタが開きます。
  8. ズームを調整し、先頭と末尾を削って、MP4 を書き出しをクリックします。

録画タブには一時停止 / 再開とキャンセルのボタンもあります。録画するページには何も追加されないため、動画に操作ボタンは写りません。

クリック位置でズームする

エディタは、カーソルでクリックしたすべての位置に滑らかな 2 倍のズームを追加します。タイムラインで各ズーム ブロックを調整または削除できます。ズームを追加をクリックすると、1.5 倍、2 倍、3 倍のブロックを自分で配置できます。たとえば、クリックなしで変わる数値に使えます。

クリックの波紋がクリックした場所を示します。カーソルの設定では、録画した軌跡に沿う滑らかなポインターを表示する、クリックだけを表示する、ポインターを非表示にする、のいずれかを選べます。

デモが別のサイトに移動する場合、クリックの追跡には設定のオプション権限サイトをまたいで録画が必要です。この権限がないと、ツールバーのバッジが琥珀色になり、動画の残りの部分ではズームとクリックの効果が止まります。動画の録画自体は続きます。

ウェブカメラ、音声、タブの音声

ウェブカメラは丸いバブルとして書き出しに入ります。エディタでは、四隅のどこにでも配置でき、サイズの変更や非表示もできます。マイクとタブの音量は別々のスライダーで設定するため、製品自体の音より自分の声を大きく保てます。

先に短いテスト録画をして、音量とバブルの位置を確認してください。

録画の不要な部分を削り、フレームを付ける

セグメントの先頭または末尾のハンドルをドラッグすると、その部分を削れます。タイムラインでは元に戻すとやり直しが使えます。サイド パネルの Beautify パネルは、動画の周りに余白、角丸、影、背景を追加します。スクリーンショット エディタと同じフレームです。

動画を書き出す

MP4 を書き出しは、ズーム、音声トラック、ウェブカメラのバブル、フレームを含めて録画をレンダリングし、H.264 の映像と AAC の音声の MP4 ファイルをダウンロードします。WebM ファイルにするには、ボタンの横の選択欄で WebM を選びます。タブが非表示になるとレンダリングが一時停止するため、レンダリング中はエディタのタブを表示したままにしてください。

MP4 の上限は 4096×2304 ピクセルのため、それより大きいタブは収まるように縮小されます。MP4 の録画に対応していないブラウザでは WebM だけを書き出します。ファイル名には設定のファイル名テンプレートが使われます。

制限事項と保存場所

録画機能がキャプチャするのは 1 つのブラウザ タブです。ほかのウィンドウ、ほかのアプリ、デスクトップは録画しません。ブラウザの内部ページや保護されたページは録画できません。

録画、カーソルの記録、ウェブカメラとマイクのストリームは、削除するまでデバイス上のブラウザのストレージにとどまります。書き出し後に録画を削除をオンにすると、ファイルの保存後に録画を削除します。書き出したファイルを共有しない限り、何もアップロードされません。

すべての操作は録画のリファレンスで確認できます。同じバグや機能の静止画については、バグ報告用のスクリーンショットを参照してください。