Tourwright

編集不要で、ナレーション付きの製品ツアーやハウツー動画を作成できます。 アプリを一度クリックして操作するか、AI エージェントに動画を依頼するだけです。Tourwrightがスクリプトを作成し、スタジオ風のフレームで実際のブラウザーを撮影し、各要素に視線を誘導して、自然な音声でナレーションを付け、字幕、チャプター、サムネイル付きの.mp4を出力します。UIが変更されたら、再度レンダリングします。人にもAIエージェントにも使いやすく、ノートPCからクラスターまで、あらゆるサーバーで動作します。

スペイン語版を読む

_{examples/app.yamlから、キーボードを操作する人なしでTourwrightが作成しました。▶ 音声付きで視聴（77秒）}

# tour.yaml
title: Your first invoice
voice: lessac
baseUrl: https://app.example.com
steps:
  - goto: /invoices/new
  - title: { text: Your first invoice, subtitle: Step by step }
  - say: Pick the <b>customer</b> first.
  - click: { role: combobox, name: Customer }
  - say: Then save. That's it.
  - click: { role: button, name: Save }

tourwright render tour.yaml        # → videos/tour/tour.mp4 (+ captions.srt/.vtt, .jpg, .json)

Tourwrightを選ぶ理由

画面録画ツール（Loom）やクリック操作式のデモツール（Arcade、Supademo、Scribe）は、人が録画する必要があり、デザインを変更するたびに録画し直さなければなりません。Tourwrightの動画はコードです。

	画面録画ツール	デモSaaS	Tourwright
UI変更後の再録画	手作業	手作業	tourwright render
動画が古くなったことを検出	できない	できない	CIでtourwright checkを実行すると、壊れたステップと修正方法を示します
ナレーション	自分の声、録り直し	なし、または追加料金	多数の音声でのテキスト読み上げ、オフラインまたはオンライン
50人の顧客や50言語向けに同じツアーを作成	50回録画	50個のデモ	{{variables}}を使った1つのスクリプト
画面上の個人データ	編集して削除	編集して削除	maskで架空のデータに置き換え
保存場所	ベンダーのクラウド	ベンダーのクラウド	自分のgitリポジトリ、自分のサーバー。MIT
AIエージェントで作成可能	できない	できない	MCP サーバーとClaude Codeプラグイン

利用できる機能

• ブラウザーの操作ガイド：実際の Chromium、滑らかにアニメーションするカーソル、クリック時の波紋、ハイライト、スポットライト、吹き出し、カメラのズーム、ドラッグ＆ドロップ、個人情報のぼかし、タイトルカード、字幕を、独自のカラーとロゴで表示します。
• 操作に合わせたフォーカス：アプリを初めて開いたときに表示されるツアーです。対象の要素以外をすべて暗くし、リングで囲みます。2/4 バッジ付きの吹き出しで説明し、ナレーションの音声に合わせてカメラがズームインします。
• ナレーション付きスライド：タイトルカード、画像（ゆっくりパン／ズーム）、HTML、クロスフェードに対応しています。Webサイトは不要です。
• 選べる音声：Pocket TTS（オフライン、オープン、自然な音声：tourwright install --pocket）、Piper（オフライン、オープンソース、軽量）、Microsoft Edge のニューラル音声、OpenAI 互換の TTS サーバー（OpenAI、Kokoro、LocalAI など）、または独自のコマンドを利用できます。各文はキャッシュされるため、再レンダリング時に音声を再合成することはありません。
• 複数の話者とセリフごとの読み上げ設定：1つの動画で複数の音声を使い分け、任意のエンジンでセリフごとに速度、ピッチ、音量を設定できます。正確な間（[[1s]]）、発音辞書、音響プリセット（温かみのある音、ラジオ、ポッドキャストなど）、クリック音やタイピング音などの効果音、フェード付きの音楽にも対応しています。
• 規模に合わせて拡張できるスクリプト：変数（{{name}}、CLI または API からも指定可能）、再利用可能なブロック、繰り返し、条件、失敗する可能性のあるステップに対応しています。1つのスクリプトから複数の動画を作成できます。
• プラグイン：新しいアクション、TTS エンジン、音声を小さなモジュールとして追加できます（ドキュメント）。
• 自動で仕上がりを整える編集：ページの読み込み、遅い待機、音声合成にかかる時間をカットします。ナレーションが重ならないようにし、背景音楽の音量を音声に合わせて下げます。
• 納品物：チャプターと字幕を映像に焼き込んだ H.264/AAC の .mp4、.srt、.vtt、サムネイル、自動化向けの JSON マニフェスト（再生時間、チャプター、字幕）。
• 4つの利用方法：CLI、ジョブキューと Webhook を備えた HTTP API、AI エージェント向け MCP サーバー、Node ライブラリ。
• スケールアウト：ステートレスな API レプリカ、任意の数のサーバー上で任意の数のワーカーを実行でき、Redis/BullMQ キューと S3 互換ストレージに対応しています。Raspberry Pi 上でフォルダーを使った単一プロセスとしても実行できます。

インストール

Docker（推奨）

docker run --rm -v "$PWD:/work" -w /work ghcr.io/cxmiloxx/tourwright render examples/slides.yaml --out videos/

API、2つのワーカー、Redis を含むフルサービス：

cp .env.example .env    # set TOURWRIGHT_API_TOKENS
docker compose up -d --build
docker compose up -d --scale worker=6

npm から（すぐに試す場合）

Linux、macOS、Windows で Node.js 22 以降：

npm install -g tourwright
tourwright install                    # ffmpeg, Piper + voices, edge-tts, Chromium (no root)
tourwright install --plan             # only show what it would use from this PC and what it would download
tourwright config set quality fullhd  # your own defaults: quality, voice, fps… (tourwright config lists them)
tourwright record https://app.example.com --out tour.yaml   # do the tour by hand: you get the script and the video
tourwright guide tour.yaml --open     # the same tour as a step-by-step guide with screenshots (HTML, PDF, Markdown)
tourwright narrate tour.yaml --write  # your AI (Claude, OpenAI, Ollama) rewrites the narration from the screens
tourwright translate tour.yaml --to en  # the same video in English (or pt, fr, de, it): tour.en.yaml
tourwright check videos/*.yaml        # which videos broke after a deploy, at which step, and the fix
tourwright fix tour.yaml --write      # puts the new targets in the script
tourwright render tour.yaml --step 7  # film one step with its voice, without the whole video
tourwright install --pocket           # + Pocket TTS: natural offline voices (about 1 GB)
tourwright clean                      # what each part takes on disk; removes downloads and leftovers
tourwright doctor                     # what works on this machine

グローバルにインストールせずに使う場合：npx tourwright <command>。pnpm を使う場合：pnpm add -g tourwright （2.0.0 では --no-optional を追加してください）。

Redis キューと narrate 用の Claude は任意です。使用する場合は、Tourwright と一緒に bullmq ioredis または @anthropic-ai/sdk をインストールしてください（npm install -g bullmq ioredis）。Docker イメージにはすでに含まれています。

Docker なし（Linux、macOS、Windows）

Node.js 22+。tourwright install を実行すると、ffmpeg、Piper、音声、edge-tts、Chromium が TOURWRIGHT_HOME にインストールされます。root 権限や管理者権限は不要で、システムにすでにあるものはそのまま使います。

git clone https://github.com/CXmiloxx/tourwright && cd tourwright
./scripts/install.sh           # Linux / macOS (Windows: powershell -ExecutionPolicy Bypass -File scripts\install.ps1)
node bin/tourwright.js doctor  # what works on this machine
npm link                       # optional: the `tourwright` command

各コンポーネントはまず PC 上で検索され、見つからない場合にのみダウンロードされます。

	Linux（x64、arm64）	macOS（Intel、Apple Silicon）	Windows 10/11（x64、ARM）
Chromium	Chrome、Edge、または Chromium（apt、dnf、pacman、Raspberry Pi OS）、なければダウンロード	Chrome、Edge、または Chromium、なければダウンロード	Chrome または Edge、なければダウンロード
ffmpeg	PATH、Homebrew、Nix、なければダウンロード	Homebrew、MacPorts、Nix、なければ brew install ffmpeg	PATH、winget、scoop、Chocolatey、C:fmpeg、なければダウンロード
Piper（オフライン音声）	PATH、pip、pipx、conda、なければダウンロード	PATH、pip、pipx、conda、なければ piper-tts	PATH、pip、pipx、conda、なければダウンロード
Piper の音声	Hugging Face キャッシュ、TOURWRIGHT_PIPER_VOICE_DIRS、なければダウンロード	同左	同左
edge-tts（Microsoft 音声）	PATH、pip、pipx、conda、なければインストール	同左	同左
Python（edge-tts、Pocket、Whisper 用）	システムの 3.10～3.13、なければ 3.12 をダウンロード	同左	同左（Microsoft Store のスタブは除く）
キャプチャ	Xvfb を使った screen（最も鮮明）、なければ screencast	screencast	screencast

ほかの Playwright または Puppeteer のバージョンが残した Chromium と、CHROME_PATH、CHROME_BIN、PUPPETEER_EXECUTABLE_PATH も再利用されます。Snap と Flatpak のブラウザーは、サンドボックスが Playwright をブロックするためスキップされます。TOURWRIGHT_SYSTEM_BROWSER=0 を設定すると、常に Playwright 独自の Chromium が使われます。見つかったものは tourwright doctor で確認できます。

システムには何もインストールされません。ダウンロードされたものはすべて 1 つのフォルダー（TOURWRIGHT_HOME）に保存され、Python パッケージは仮想環境で実行されるため、既存の環境は変更されません。アンインストールするには、そのフォルダーを削除してください。

Xvfb（Linux のみ、apt install xvfb）を使うと、最も鮮明にキャプチャできます。使わない場合、Tourwright はヘッドレス（screencast）で録画します。これは Chromium が動作する場所ならどこでも使えます。HTTP API または MCP のクライアントは、どのシステム上でも利用できます。

使い方

セレクターを手動で記述せず、サイトから動画を作成できます。

tourwright explore https://app.example.com/login --draft app.yaml   # asks for the login, writes the script
tourwright render app.yaml --dry-run                               # checks every step in seconds
tourwright render app.yaml --open                                  # the video, in ./videos/app/

下書きでは、サイトのすべてのセクションを巡り、各ページからナレーションを作成します。内容は自由に編集できます。認証情報の入力は一度だけ求められ、表示もスクリプトへの記録もされません（tourwright secret list で確認でき、tourwright forget で削除できます）。

tourwright init video.yaml                  # an example script
tourwright validate video.yaml
tourwright render video.yaml --dry-run      # runs every step fast: tests selectors, no voice/video
tourwright render video.yaml --safe         # the same, pressing nothing: no real sign-up, payment or SMS
tourwright render video.yaml --keep         # keeps the recording: tourwright recompose videos/video remakes it without the browser
tourwright render video.yaml --quality fullhd --voice salome --out out/
tourwright voices                           # voices available here
tourwright install-voice en_GB-alba-medium  # any voice from huggingface.co/rhasspy/piper-voices
tourwright say "Hello there" --voice lessac --out hello.wav

スクリプト形式、すべてのアクション、音声については、docs/SCRIPTS.md を参照してください。 エディターとエージェント向けの JSON Schema： schema/script.schema.json。

HTTP API

TOURWRIGHT_API_TOKENS=secret tourwright serve --worker --port 4700
curl -X POST localhost:4700/v1/jobs -H 'authorization: Bearer secret' -H 'content-type: application/json' \
  -d '{"script": {"type": "slides", "slides": [{"title": "Hello", "say": "Hello from the API."}]}}'
curl localhost:4700/v1/jobs/<id> -H 'authorization: Bearer secret'   # → status, result, download links

エンドポイント、アセット、Webhook：docs/API.md。

AI エージェント（MCP）

プラグインとして使う Claude Code（MCP サーバーに加え、スクリプトの作成、チェック、レンダリングを行うスキル）：

/plugin marketplace add CXmiloxx/tourwright
/plugin install tourwright@tourwright

その他の MCP クライアント（Claude Desktop、Cursor、VS Code など）：

{ "mcpServers": { "tourwright": { "command": "tourwright", "args": ["mcp"] } } }

ツール：tourwright_guide、tourwright_voices、tourwright_validate、tourwright_check、tourwright_render、tourwright_job、 tourwright_jobs、tourwright_delete_job（および TOURWRIGHT_MCP_ALLOW_FILES=true を設定した場合の tourwright_render_file）。TOURWRIGHT_API_URL と TOURWRIGHT_API_TOKEN を設定すると、リモート API を指定できます。詳細：docs/AGENTS.md。

GitHub Action

リリースのたびにツアーを再レンダリングしたり、デプロイによってツアーが壊れた場合にビルドを失敗させたりできます。

- uses: CXmiloxx/tourwright@v2
  with:
    scripts: videos/*.yaml
    command: check            # or render: the videos become a workflow artifact
  env:
    TOURWRIGHT_SECRET_APP_PASSWORD: ${{ secrets.APP_PASSWORD }}

入力：scripts、command、out、voice、quality、voices、version、upload（action.yml）。

Node ライブラリ

import { loadFile, render } from 'tourwright'
const result = await render(await loadFile('tour.yaml'), { out: 'videos/', quality: 'hd' })
console.log(result.paths.video, result.duration, result.chapters)

スケーリング

サイズ	構成
1 台のマシン	tourwright serve --worker — ローカルフォルダーキュー、ディスク上のファイル
1 台の大型マシン	docker compose up --scale worker=N — Redis キュー、共有ボリューム
複数のマシン	ロードバランサー配下の API レプリカ、任意の場所で動作するワーカー、共通の Redis と S3 バケット
Kubernetes	deploy/kubernetes/tourwright.yaml、ワーカーは自動スケーリング

各ワーカーは一度に TOURWRIGHT_CONCURRENCY 本の動画をレンダリングします（各動画につき Chromium と ffmpeg を 1 つ使用します。720p の場合、動画 1 本あたり CPU 約 1～2 個、RAM 約 1 GB を見込んでください）。ワーカーは CPU とディスクの優先度を低く設定して実行されるため、共有サーバーの応答性を保てます。 詳細：docs/DEPLOYMENT.md · 設定：docs/CONFIGURATION.md。

セキュリティ

API ジョブはサンドボックス内で実行されます。スクリプトはデータのみ（JavaScript は使用不可）で、ファイルはジョブのアセットに限定されます。ホストの許可リストとプライベートネットワークのブロックは任意で設定でき、シークレットは既定で無効、ジョブはトークンごとに分離され、ダウンロードリンクには署名が付与されます。信頼できないクライアントに API を公開する前に、SECURITY.md をお読みください。

ライセンス

MIT。Piper の音声にはそれぞれ独自のライセンスがあります（各音声のモデルカードを参照してください）。Edge の音声は Microsoft のオンラインサービスです。利用条件は、ご自身の用途に応じてご確認ください。