OpenScreen — Electron 製スクリーン録画とデモ編集

プロジェクトの位置づけ

OpenScreen は、有料のスクリーン録画・デモ制作ツールに近い体験を、シンプルな機能セットで無料・オープンソースとして提供するデスクトップアプリ。公式 README の位置づけでは、プロダクトのウォークスルーやチュートリアル向けの録画・ズーム・トリミング・書き出しに焦点がある。

MITライセンス

1.4package 版

22Node エンジン

β開発段階

注意: 上流 README にベータ相当の注意書きがある。本ページの情報は当時点の package.json と README に基づく。最新仕様は公式リポジトリとリリースノートを参照すること。

ランタイムと主要依存

デスクトップシェルは Electron、UI は React 18 と Vite 7。タイムラインは dnd-timeline、キャンバス合成やエフェクトに PixiJS と関連フィルタ、モーションに GSAP / Motion。メディア処理・書き出しには mediabunny、mp4box、web-demuxer などが列挙されている。品質管理に Biome、テストに Vitest と Playwright が入る。

領域	主な技術	役割の目安
シェル	Electron 41	ウィンドウ、トレイ、権限、ネイティブ連携
UI	React + Radix UI + Tailwind	エディタ画面・設定
ビルド	Vite + TypeScript	レンダラーバンドル、開発サーバ
描画	PixiJS 8	合成レイアウト、注釈、エフェクト
入力フック	uiohook-napi	グローバルショートカット等（プラットフォーム依存）
書き出し	mediabunny / mp4box / gif.js 等	動画・GIF エクスポートパイプライン

README に列挙されたコア機能

カテゴリ	内容
キャプチャ	ウィンドウ単位または全画面。マイクとシステム音声の録音。
ズーム	自動／手動ズーム、深さ・位置・時間の調整。
見た目	壁紙・単色・グラデーション・カスタム背景。モーションブラー。
編集	注釈（テキスト・矢印・画像）、クリップのトリミング、区間ごとの速度変更。
書き出し	アスペクト比と解像度のプリセット選択。

配布物と OS ごとの注意

インストーラは GitHub Releases から入手する想定。macOS では未署名ビルムのため Gatekeeper 回避の手順が README に記載されている。

macOS（README 抜粋）

インストール後にターミナルで quarantine 属性を削除し、その後システム設定で画面収録・アクセシビリティを許可する流れ。

xattr -rd com.apple.quarantine /Applications/Openscreen.app

Linux

AppImage を実行権付与して起動。サンドボックスエラー時は --no-sandbox が案内されている。

chmod +x Openscreen-Linux-*.AppImage
./Openscreen-Linux-*.AppImage

システム音声まわりの制限

OS	条件・挙動
macOS	13 以上。14.2 以降は音声キャプチャの許可プロンプト。12 以下はシステム音声非対応（マイクは可）。
Windows	README 上は追加要件なしで動作と記載。
Linux	PipeWire 推奨（Ubuntu 22.04+、Fedora 34+ 等）。古い PulseAudio のみではシステム音声が取れない場合あり。

Linux 表示サーバ: 上流の electron/main.ts では Wayland 検出時に ozone-platform=wayland と PipeWire キャプチャ用フラグを付与している。

メインプロセスとレンダラーの関係

メインプロセスは registerIpcHandlers で IPC を登録し、エディタ・ソース選択・カウントダウン HUD など複数の BrowserWindow を生成する。レンダラーは Vite ビルドの React アプリで、録画データはユーザーデータ配下の recordings に保存される設計（定数 RECORDINGS_DIR）。

flowchart TD User["ユーザー"] Main["Electron メイン
main.ts / IPC"] Win["ウィンドウ群
editor / overlay / selector"] Pre["preload"] React["レンダラー
React + Vite"] Cap["キャプチャ・合成
Pixi / タイムライン"] Disk["recordings ディレクトリ"] User --> Win Win --> Main Main --> Win Win --> Pre Pre --> React React --> Cap Cap --> React React -->|"IPC"| Main Main --> Disk

公式・ドキュメント

GitHub: siddharthvaddem/openscreen — ソースと Issue
GitHub Releases — インストーラ
DeepWiki — 自動生成ドキュメント（README より案内）
プロジェクトロードマップ — 開発の方向性