Tab Capture Studio

Tab Capture Studio は、ブラウザのタブ画面の録画とスクリーンショットを簡単に行える Chrome 拡張機能です。 ウィンドウサイズの調整機能も搭載しており、特定の解像度での録画や動作確認にも便利です。

主な機能

🎥 画面録画

• アクティブなタブの内容を録画します。
• 音声設定:
  • タブ内の音声を録音（ON/OFF）
  • マイク音声を録音（ON/OFF）
• 画質設定:
  • フレームレート (15 / 30 / 60 fps)
  • ビットレート調整
  • 解像度スケール調整
• カウントダウン: 録画開始前のカウントダウン秒数を設定可能（0/3/5/10 秒）

📷 スクリーンショット

• アクティブなタブのスクリーンショットを撮影します。
• 保存フォーマット: PNG, JPEG, WebP から選択可能
• 品質設定: 画質調整が可能

📏 ウィンドウサイズ調整

• ブラウザウィンドウのサイズを一般的な解像度にワンクリックで変更できます。
• 対応アスペクト比: 16:9, 16:10, 4:3
• プリセット例: 1280x720, 1920x1080, 1024x768 など
• デフォルトのウィンドウサイズを設定画面で指定可能。

インストール方法（開発者モード）

この拡張機能は現在、開発者モードでのインストールが必要です。

1. このリポジトリをクローンまたはダウンロードします。

   git clone https://github.com/yuto/screen-capture-extention.git
   cd screen-capture-extention

2. 依存関係をインストールします。

   npm install

3. プロジェクトをビルドします。

   npm run build

4. Chrome ブラウザで拡張機能の管理ページ (chrome://extensions) を開きます。

5. 右上の「デベロッパーモード」をオンにします。

6. 「パッケージ化されていない拡張機能を読み込む」をクリックし、このプロジェクトのフォルダ（manifest.json があるフォルダ）を選択します。

使い方

1. ツールバーに追加された Tab Capture Studio のアイコンをクリックしてポップアップを開きます。
2. 画面録画: 「画面録画」ボタンをクリックして開始・停止します。
3. スクリーンショット: 「スクリーンショット」ボタンをクリックして撮影・保存します。
4. サイズ変更: ドロップダウンからサイズを選択し、「適用」をクリックします。
5. 設定: 右上の歯車アイコンをクリックすると、詳細な設定（画質、ショートカットなど）を変更できます。

ショートカットキー（デフォルト）

• 録画開始/停止: Alt+Shift+R
• スクリーンショット: Alt+Shift+S ※ chrome://extensions/shortcuts から変更可能です。

開発

開発モード

TailwindCSS の変更を監視して自動ビルドします。

npm run dev

ビルド

本番用に CSS を最小化してビルドします。

npm run build

ライセンス

MIT License