初心者でも大丈夫！Google Vids風の30分画面録画拡張機能を自分で作る完全ガイド

目　次

初心者でも大丈夫！Google Vids風の30分画面録画拡張機能を自分で作る完全ガイドのPodcast
はじめに：画面録画が拓く新しいコミュニケーションの形
Google Vids Screen Recorderの概要と魅力
1. 主な機能と特徴
2. ワークフローの変革
技術的基盤：Manifest V3とオフスクリーンドキュメント
1. サービスワーカーの制約
2. オフスクリーンドキュメントの役割
30分録画を実現するストレージ戦略
1. メモリ管理の課題
2. IndexedDBの活用
開発フェーズ：自作レコーダーの構築ステップ
ユーザーインターフェースと体験設計
1. ポップアップ画面の設計
2. ユーザーへのフィードバック
Google Vidsとの連携：録画後の活用法
1. クラウドへの自動アップロード
2. AIによる編集のサポート
実装における重要な注意点とトラブルシューティング
10. 結論：自分だけの録画ツールが拓く未来
参考資料

初心者でも大丈夫！Google Vids風の30分画面録画拡張機能を自分で作る完全ガイドのPodcast

下記のPodcastは、Geminiで作成しました。

はじめに：画面録画が拓く新しいコミュニケーションの形

現代のデジタル環境において、情報を伝える手段はテキストからビジュアル、そして動画へと急速にシフトしています。特にビジネスや教育の現場では、言葉だけでは伝わりにくい操作手順やプレゼンテーションを、画面を直接録画して共有する「ビデオメッセージ」の重要性が高まっています。Googleが提供を開始した「Google Vids」は、こうしたニーズに応える次世代のビデオ制作ツールであり、それに付随する「Google Vids Screen Recorder」拡張機能は、ブラウザからワンクリックで最大30分の録画を可能にする強力なツールです。

本報告書では、このGoogle Vids公式拡張機能のような、高品質で長時間の録画が可能なChrome拡張機能を自作する方法を、プログラミング初心者の方にも分かりやすく解説します。最新の拡張機能規格である「Manifest V3」に準拠し、技術的な壁となる「30分という長時間のデータ保持」をどのように実現するか、その核心的な設計思想と実装プロセスを詳述します。

Google Vids Screen Recorderの概要と魅力

自作の目標とする「Google Vids Screen Recorder」がどのようなツールであるかを知ることは、開発の大きなヒントになります。この拡張機能は、Google Workspaceの一部として提供されており、個人アカウントでも無料で利用可能です。

主な機能と特徴

このツールの最大の特徴は、何と言っても「最大30分」という寛大な録画時間制限です。多くの無料録画ツールが5分程度の制限を設けている中で、30分あれば詳細なチュートリアルやプレゼンテーションの録画にも十分対応できます。

特徴	詳細
録画時間	最大30分（公式情報）
録画対象	タブ、特定のウィンドウ、または画面全体
構成要素	画面映像、カメラ映像、マイク音声、システム音声
連携機能	録画終了後、即座にGoogle Vidsエディタで編集可能
費用	無料（Googleアカウントがあれば誰でも利用可能）

ワークフローの変革

従来の画面録画では、専用のアプリを立ち上げ、設定を行い、録画後にファイルを管理するという手間がかかっていました。しかし、この拡張機能はブラウザのツールバーに常駐し、作業中のタブから離れることなく録画を開始できるため、ワークフローの断絶を防ぐことができます。

技術的基盤：Manifest V3とオフスクリーンドキュメント

Chrome拡張機能を開発する上で避けて通れないのが、最新の規格である「Manifest V3（MV3）」です。Googleは、セキュリティ、プライバシー、そしてパフォーマンスの向上のために、古い規格（Manifest V2）からMV3への移行を推進しています。

サービスワーカーの制約

MV3の最大の変化は、バックグラウンドで常に動作していた「バックグラウンドページ」が廃止され、必要な時だけ起動する「サービスワーカー」に変更されたことです。サービスワーカーは、一定時間操作がないと自動的に「休止状態（Terminate）」に入ってしまいます。しかし、画面録画のような「30分間持続する処理」を休止させるわけにはいません。

オフスクリーンドキュメントの役割

この問題を解決するために導入されたのが「オフスクリーンドキュメント（Offscreen Document）」という仕組みです。これは、ユーザーには見えない隠れたHTMLドキュメントを一時的に作成し、そこでDOM（Document Object Model）を必要とする処理を実行させる機能です。画面録画の心臓部である MediaRecorder APIや、画面を取得するための getDisplayMedia APIは、このオフスクリーンドキュメント内で動作させることで、サービスワーカーが休止しても録画を継続させることが可能になります。

30分録画を実現するストレージ戦略

30分もの長時間録画を行うと、生成される動画データのサイズは非常に大きくなります。例えば、高画質な設定で録画した場合、数GBに達することもあります。これをブラウザのメモリ（RAM）だけに溜め込むと、ブラウザの動作が不安定になったり、最悪の場合はクラッシュしたりする原因となります。

メモリ管理の課題

ブラウザには、1つのBlob（バイナリデータ）として扱えるサイズに上限がある場合があります。過去の事例では、500MBから1GB程度でエラーが発生したという報告もあります。30分の録画を安定させるには、データをメモリに保持し続けるのではなく、逐次ディスク（HDD/SSD）に書き出す必要があります。

IndexedDBの活用

ここで活躍するのが、ブラウザ内蔵のデータベース「IndexedDB」です。IndexedDBは、パソコンの空き容量の大部分（Chromeの場合、最大でディスク空き容量の80%程度）を利用できるため、長時間の動画データも安全に保存できます。

録画プロセスでは、MediaRecorder から送られてくる数秒ごとのデータ（チャンク）を、その都度IndexedDBに書き込んでいきます。これにより、万が一録画中にブラウザが終了してしまっても、直前までのデータがディスクに残るため、データの損失を最小限に抑えることができます。

ストレージ技術	容量制限	特徴
メモリ (RAM)	非常に厳しい (数百MB〜数GB)	高速だが、クラッシュのリスクが高い
Web Storage	厳格 (5MB〜10MB)	小さな設定値の保存に限定される
IndexedDB	非常に緩やか (ディスク容量の最大80%)	長時間の動画保存に最適

開発フェーズ：自作レコーダーの構築ステップ

それでは、実際に拡張機能を構成するファイルの役割と、実装の流れを見ていきましょう。

フェーズ1：マニフェストファイルの作成

拡張機能の「設計図」となる manifest.json を作成します。ここでは、オフスクリーンドキュメントの使用権限や、画面キャプチャの権限を宣言します。

JSON

{
  "manifest_version": 3,
  "name": "My Friendly Recorder",
  "version": "1.0",
  "permissions": ["offscreen", "storage", "tabs"],
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  }
}

フェーズ2：サービスワーカー（background.js）の実装

サービスワーカーは拡張機能の司令塔です。ユーザーがボタンを押したことを検知し、オフスクリーンドキュメントを立ち上げる役割を担います。

主な処理：

chrome.action.onClicked でポップアップの入力を待ち受ける。
chrome.offscreen.createDocument を呼び出し、録画用の隠しページを作成する。
録画の状態（開始、停止、一時停止）を管理する。

フェーズ3：オフスクリーンドキュメントでの録画処理

ここが録画のメインエンジンです。offscreen.js 内で MediaRecorder を制御します。

録画開始の手順：

navigator.mediaDevices.getDisplayMedia を呼び出し、ユーザーに録画する画面を選択してもらう。
取得したストリームを MediaRecorder インスタンスに渡す。
recorder.start(1000) のように、ミリ秒単位の「タイムスライス」を指定して、1秒ごとにデータを取得するように設定する。

フェーズ4：IndexedDBへの逐次保存

ondataavailable イベントが発生するたびに、送られてきたBlobデータをIndexedDBに保存します。

JavaScript

// 実装のイメージ
recorder.ondataavailable = async (event) => {
  if (event.data.size > 0) {
    await saveChunkToIndexedDB(event.data);
  }
};

この時、データの順序を間違えないように、連番などのインデックスを付けて保存するのがポイントです。

ユーザーインターフェースと体験設計

初心者に優しいツールにするためには、複雑な設定を排除し、直感的に操作できるデザインが求められます。Google Vids Screen Recorderも、シンプルさを極めたUIを採用しています。

ポップアップ画面の設計

ユーザーがアイコンをクリックした時に表示される popup.html には、以下の要素を配置します。

録画開始/停止ボタン: 大きくて押しやすいボタン。
録画対象の選択: 「このタブ」「画面全体」「カメラのみ」などを選べる切り替えスイッチ。
タイマー表示: 30分の制限時間に対して、現在何分録画しているかを表示し、ユーザーに安心感を与えます。

ユーザーへのフィードバック

画面録画はプライバシーに関わるため、Chromeは録画中に「このタブを共有しています」という青いバーを表示します。開発者としては、拡張機能側でも「現在録画中であること」をアイコンのバッジやアニメーションで視覚的に伝える工夫をすべきです。

Google Vidsとの連携：録画後の活用法

自作拡張機能で録画した動画は、ただパソコンに保存するだけでなく、Google Vidsのようなクラウドツールと連携させることで、その価値が何倍にも高まります。

クラウドへの自動アップロード

Google Drive APIを使用すれば、録画終了と同時に動画をクラウドへアップロードできます。Google VidsはGoogle Drive上の動画を直接インポートして編集できるため、自作ツールから直接Google Vidsのエディタへ橋渡しをすることが可能です。

AIによる編集のサポート

Google Vidsの大きな特徴は、AI（GeminiやVeo 3.1など）による編集支援です。

AIボイスオーバー: 録画した動画に、プロのような落ち着いたナレーションを後付けできます。
台本生成: AIが録画内容を解析し、シーンごとのスクリプトを提案してくれます。
不要な部分のカット: 音声の文字起こしデータをもとに、テキストを消す感覚で動画をトリミングできます。

これらの機能を活用することで、単なる「画面の記録」が、プロフェッショナルな「ビデオ教材」へと進化します。

実装における重要な注意点とトラブルシューティング

開発の最終段階で直面しやすい問題とその対策をまとめました。

ユーザー操作（User Gesture）の重要性

セキュリティ上の理由から、録画の開始（getDisplayMedia の呼び出し）は、必ずユーザーのクリックなどの直接的な操作に反応する形で実行しなければなりません。プログラムが勝手に画面を録画し始めることはできない仕様になっています。

ビデオコーデックの選択

録画ファイルの形式（MIMEタイプ）には、互換性の高い video/webm; codecs=vp8,opus を使用するのが一般的です。最新のブラウザであれば、より高圧縮な VP9 や AV1 コーデックもサポートされていますが、編集ソフトとの相性を考慮して選択する必要があります。

エラー処理：ディスク容量不足

IndexedDBへの書き込み中に QuotaExceededError が発生した場合は、ディスク容量が不足しています。この際、録画を中断し、そこまでのデータを安全に保存してユーザーに通知する処理を組み込んでおくことが、信頼性の高いツールを作る秘訣です。

10. 結論：自分だけの録画ツールが拓く未来

Google Vids風の30分画面録画拡張機能を自作することは、プログラミング初心者にとって、最新のWeb技術（Manifest V3, MediaStream API, IndexedDB）を一気に学べる非常に優れたプロジェクトです。

既存のツールを使うだけでなく、その仕組みを理解し、自分好みにカスタマイズしたツールを持つことは、日々の作業効率を劇的に向上させるだけでなく、技術的な自信にも繋がります。30分という長時間の壁は、IndexedDBによる「賢いデータ管理」で乗り越えることができます。

あなたが作った拡張機能が、誰かの学びを助け、新しいアイデアを伝えるための架け橋となることを願っています。まずは、マニフェストファイルを1つ作るところから、一歩を踏み出してみましょう！

参考資料

Google Just Made Screen Recording a One-Click Thing — Right From Chrome, https://edtechgeek.com/blog/google-vids-screen-recorder/
Google Workspace Updates: Record your screen directly from Chrome with the Google Vids Screen Recorder Chrome Extension, https://workspaceupdates.googleblog.com/2026/04/record-your-screen-directly-from-chrome-with-the-Google-Vids-Screen-Recorder-Chrome-Extension.html
Google Vids Screen Recorder extension features overview, https://chromewebstore.google.com/detail/google-vids-screen-record/iklnnbgdcppplombffihcijanngoeifm
Chrome Extension Manifest V3 overview and migration, https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3
How to build a Chrome recording extension with Manifest V3 and Offscreen Document, https://www.recall.ai/blog/how-to-build-a-chrome-recording-extension
Google's new Chrome extension makes screen recording for Vids free and easy, https://chromeunboxed.com/googles-new-chrome-extension-makes-screen-recording-for-vids-free-and-easy/
Google Vids product features and collaboration guide, https://workspace.google.com/products/vids/
Google Vids updates include high-quality video generation at no cost and more, https://blog.google/products-and-platforms/products/workspace/google-vids-updates-lyria-veo/
新しい Google Vids 画面録画 Chrome 拡張機能を使用すると、任意のブラウザウィンドウから画面を素早く録画できるようになります, https://blog.tekuru.com/2026/04/07/record-your-screen-directly-from-chrome-with-the-google-vids-screen-recorder-chrome-extension/
Using the Offscreen API in Chrome Extensions, https://developer.chrome.com/docs/extensions/reference/api/offscreen
How to create offscreen documents in Chrome extensions: a complete guide, https://dev.to/notearthian/how-to-create-offscreen-documents-in-chrome-extensions-a-complete-guide-3ke2
Storing large blobs in IndexedDB best practices and limits, https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
Known issues with large Blob sizes in Chrome MediaRecorder, https://github.com/streamproc/MediaStreamRecorder/issues/86
Storing large files and blobs in IndexedDB: Best practices, https://stackoverflow.com/questions/24362839/what-is-the-per-record-size-limit-of-indexeddb
Storing images and blobs in IndexedDB, https://dzone.com/articles/blobs-and-more-storing-images
Save your web camera recording locally in your browser, https://dev.to/eneaslari/save-your-web-camera-recording-locally-in-your-browser-10kj
Storage quotas and eviction criteria, https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria
Estimated storage limits for modern browsers (2024-2025), https://www.mindstick.com/interview/34337/what-are-indexeddb-s-storage-limits-across-different-browsers-platforms
MediaRecorder: dataavailable event, https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/dataavailable_event
Blob support for IndexedDB landed on Chrome Dev, https://developer.chrome.com/blog/blob-support-for-Indexeddb-landed-on-chrome-dev
Maximum item size in IndexedDB, https://stackoverflow.com/questions/5692820/maximum-item-size-in-indexeddb
MediaRecorder API reference and examples for long recordings, https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
Using getDisplayMedia to record screen and audio in the browser, https://addpipe.com/getdisplaymedia-demo/
MediaRecorder dataavailable event documentation, https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/dataavailable_event
To interact with Google APIs like Google Drive or Google Vids from a Chrome extension, https://developer.chrome.com/docs/extensions/reference/api/identity
AI-generated narration in Google Vids, https://support.google.com/a/users/answer/15599399?hl=ja
Expanding access to select Google Vids features for all users, https://workspaceupdates.googleblog.com/2026/02/expanding-access-to-select-google-vids.html