Recordly

open-source screen recorder & editor — Electron + React + PixiJS

1 — 概要
What is Recordly

Recordly は、画面録画した動画を「そのまま」ではなく、自動ズーム・カーソルスムージング・フレームスタイリングを施してプロ品質の解説動画・デモ・チュートリアルに仕上げるオープンソースのデスクトップアプリ。macOS / Windows / Linux で動作する。

macOS 12.3+ Windows 10 (19041+) Linux MIT License Electron PixiJS
MP4エクスポート
GIFエクスポート
PixiJSレンダリング
IPCプロセス間通信

録画 → 自動ズーム提案 → タイムライン編集 → フレームスタイリング → エクスポートまでをひとつのアプリで完結する。プロジェクトは .recordly ファイルに保存・再オープンできる。

2 — アーキテクチャ
Electron プロセス構成

Recordly は Electron の 2 プロセスモデル（Main + Renderer）に、ネイティブモジュールと PixiJS を組み合わせた構成。

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#e0f5f5", "primaryTextColor": "#1a3a4a", "primaryBorderColor": "#3ab5c0", "lineColor": "#3ab5c0", "secondaryColor": "#e8f0ff", "tertiaryColor": "#f5f5f5", "fontSize": "15px", "fontFamily": "Plus Jakarta Sans, system-ui, sans-serif", "edgeLabelBackground": "#f8fafa", "clusterBkg": "#f0fafa", "clusterBorder": "#3ab5c0"}}}%% flowchart TD subgraph Main["Main Process (electron/main.ts)"] IPC["IPC Handlers\n(electron/ipc/handlers.ts)"] Native["Native Modules\n• ScreenCaptureKit (macOS)\n• WGC Capture (Windows)\n• WASAPI Audio (Windows)\n• uiohook-napi (cursor input)"] Win["Window Manager\n(electron/windows.ts)"] end subgraph Renderer["Renderer Process (React + Vite)"] Launch["Launch Screen\n(components/launch/)"] Countdown["Countdown\n(components/countdown/)"] Editor["Video Editor\n(components/video-editor/)"] Contexts["Contexts\n• I18nContext\n• ShortcutsContext"] Hooks["Hooks\n• useScreenRecorder\n• useMicrophoneDevices\n• useAudioLevelMeter"] end Pixi["PixiJS\n(Scene Composition\n+ Frame Rendering)"] Preload["Preload Script\n(electron/preload.ts)"] Main <-->|Electron IPC| Preload Preload <-->|contextBridge API| Renderer Editor -->|render frames| Pixi IPC --> Native IPC --> Win
主なファイル構成
パス役割
electron/main.tsElectron メインプロセスのエントリポイント
electron/preload.tscontextBridge でレンダラーに安全な IPC API を公開
electron/ipc/handlers.tsIPC チャンネルとネイティブモジュールの橋渡し
electron/windows.tsウィンドウ生成・管理ロジック
src/components/video-editor/タイムライン・設定パネル・エクスポートダイアログなど編集 UI
src/contexts/I18n（多言語）と Shortcuts（キーバインド）の React Context
src/hooks/録画・マイク・音量レベル計測のカスタムフック
src/utils/aspectRatioUtils.tsアスペクト比計算ユーティリティ
src/utils/platformUtils.tsOS 判定ユーティリティ
3 — 録画パイプライン
OS ごとのキャプチャ API

Recordly は OS ごとに最適なネイティブ API を使い分ける。Windows の古いビルド (< 19041) では Electron のキャプチャ API にフォールバックし、カーソル非表示は未対応。Linux はカーソル非表示未対応（コントリビュート歓迎）。

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#e0f5f5", "primaryTextColor": "#1a3a4a", "primaryBorderColor": "#3ab5c0", "lineColor": "#3ab5c0", "edgeLabelBackground": "#f8fafa", "fontSize": "14px", "fontFamily": "Plus Jakarta Sans, system-ui, sans-serif"}}}%% flowchart TD Start([録画開始]) --> Detect{OS 判定} Detect -->|macOS| SCK["ScreenCaptureKit\n(Native Swift Helper)"] Detect -->|Windows 19041+| WGC["Windows Graphics Capture\n(Native WGC Helper)"] Detect -->|Windows 旧 / Linux| Electron["Electron Capture API"] SCK --> Frames[フレームバッファ] WGC --> Frames Electron --> Frames WGC --> WASAPI["WASAPI\nシステム音声 / マイク"] SCK --> Audio2["ScreenCaptureKit Audio\n+ マイク"] Electron --> Audio3["Web Audio API"] WASAPI --> AudioBuf[音声バッファ] Audio2 --> AudioBuf Audio3 --> AudioBuf Frames --> Cursor["uiohook-napi\nカーソル座標取得"] Cursor --> Raw["RAW データ\n(映像 + 音声 + カーソル軌跡)"] AudioBuf --> Raw Raw --> Editor["Video Editor\n(タイムライン + PixiJS)"]
useScreenRecorder フック — レンダラー側では src/hooks/useScreenRecorder.ts が録画の開始・停止・状態管理を担う。IPC 経由でメインプロセスのネイティブモジュールを制御する。
4 — カーソルアニメーション
PixiJS によるカーソル描画

Recordly のカーソルアニメーションは録画後のポストプロセスとして PixiJS で描画される。録画中に取得したカーソル軌跡データを元に、各種エフェクトをフレームに合成する。

スムージング

ジッタリな動きを滑らかな軌跡に補間。プレゼン動画の品質を自動改善。

モーションブラー

高速移動時にブラーを加えてネイティブ感を演出。@pixi/filter-motion-blur 使用。

クリックバウンス

クリック時にカーソルがバウンスするアニメーション。視覚的なフィードバックを強調。

スウェイ効果

カーソルが揺れるように動くスウェイアニメーション。GIF ループと組み合わせると映える。

カーソルサイズ調整

カーソルのサイズを自由に変更可能。macOS スタイルのカーソルアセットも付属。

インフィニットループ

動画末尾でカーソルが開始位置に戻り、GIF ループがシームレスにつながる。

5 — 編集機能
Video Editor コンポーネント群

VideoEditor.tsx がメインの編集 UI を統括し、TimelineEditor でタイムライン操作、SettingsPanel でフレームスタイリングを管理する。

コンポーネント機能
TimelineEditorタイムラインのトリム・速度変更・ズームスパン・アノテーション追加。dnd-timeline でドラッグ操作。
VideoPlaybackPixiJS を使ったプレビュー再生。カーソル・ズームアニメーションをリアルタイム合成表示。
SettingsPanel壁紙・グラデーション・パディング・角丸・ブラー・ドロップシャドウなどフレームスタイリング。
AnnotationOverlayテキストや矢印などのアノテーション（注釈）を動画に重ねて追加。
ExportDialogMP4 / GIF の品質・サイズ・フレームレート設定 UI。エクスポート進捗表示。
PlaybackControls再生・一時停止・シーク操作。
KeyboardShortcutsHelpショートカットキー一覧の表示。ShortcutsContext と連動。
Smart Motion — 自動ズーム提案

タイムライン上でカーソルの動きを解析し、ズームすべき箇所を自動提案する機能。手動でズームリージョンを追加することも可能で、カメラのパン・ズームトランジションは Apple の動画スタイルに近い仕上がりになる。

  • zoomSuggestionUtils.ts の detectInteractionCandidates がカーソル活動量を分析
  • normalizeCursorTelemetry でテレメトリを正規化してからズームスパンに変換
  • ズームスパンはタイムライン上でドラッグ編集できる
6 — エクスポート
MP4 / GIF 出力

エクスポートはすべて同じ PixiJS シーンパイプラインを通じてフレームレンダリングされ、GifExporter または VideoExporter に渡される。

形式クラスオプション
MP4VideoExporter品質（ExportQuality）・解像度（calculateOutputDimensions）
GIFGifExporterサイズプリセット（GIF_SIZE_PRESETS）・フレームレート（GifFrameRate）

エクスポート進捗は ExportProgress 型で管理され、ExportDialog にリアルタイム表示される。@fix-webm-duration/fix を使い WebM の duration メタデータを修正してから MP4 変換している。

プロジェクト保存 — .recordly ファイルには元動画のパスとエディタ状態（タイムライン・ズームスパン・スタイル設定）が保存される。projectPersistence.ts が createProjectData / validateProjectData / normalizeProjectEditor でシリアライズ・バリデーションを担当。
公式・関連