Expo Launch Video

ウェブサイト · ドキュメント · スタジオ · ツールリファレンス · 変更履歴

---

expo-launch-video を使うと、AI エージェントが Expo アプリのローンチ動画を撮影・編集できます。スマートフォンからリアルタイムで操作できます。Claude Code、Antigravity、Cursor に動画を依頼すると、実際のアプリ（ページの読み込み、スクロール、タップ、パネルの表示）を録画し、ベストテイクを選び、キャプションを書き、モーショングラフィックス、飛び出すポップアウト、サウンドを加えて洗練された動画に仕上げます。その後、スタジオが開き、ドラッグするか、作りたい内容を入力するだけで結果を調整できます。ブラウザーでレンダリングされる、正真正銘の 1080p MP4 として書き出せます。After Effects も ffmpeg も、画面録画アプリも必要ありません。

「アプリの45秒のローンチ動画を作ってください。ランディングページ、ログイン、ダッシュボード、問題バンク、試験を1つ。キャプションではメリットを訴求してください。」

目次

• インストール
• クイックスタート
• 機能
• 動画の作成方法
• よくある質問
• ツール
• スタジオ
• CLI と環境
• プロジェクト構成
• トラブルシューティング
• 要件
• 関連項目
• 貢献
• ライセンス

インストール

npx expo install expo-mcp-bridge react-native-view-shot
npm install --save-dev expo-launch-video
npx expo-launch-video init

init は launch-video サーバーを含む .mcp.json を作成します。このサーバーには expo-mcp-bridge のすべての app_* ツールが含まれるため、1つのサーバーで両方の役割を果たします。また、Claude Code 用のディレクティングスキル（.claude/skills/launch-video）、Antigravity、Cursor などで使える同じ手順書を記載した AGENTS.md、プロジェクトフォルダー用の .gitignore エントリーも作成します。

クイックスタート

一度で済ませる方法。 Expo プロジェクト内で、これをエージェントに貼り付けます。

Read https://raw.githubusercontent.com/Rudrasamadhiya/expo-launch-video/main/AI_SETUP.md and set up app control and launch videos in this project.

手動で行う場合：

1. パッケージをインストールし、上記の init を実行します。

2. ルートレイアウトにブリッジを一度だけマウントします。

   import { Stack, router } from 'expo-router';
   import { AgentBridge } from 'expo-mcp-bridge';
   
   export default function RootLayout() {
     return (
       <>
         <Stack />
         <AgentBridge router={router} />
       </>
     );
   }
   

3. npx expo start を実行し、スマートフォンでアプリを開きます（同じ Wi-Fi に接続してください）。

4. エージェントを再起動して、動画を依頼します。

Windows では、MCP 設定で "command": "cmd", "args": ["/c", "npx", "expo-launch-video"] を使用します。

特長

• スマートフォンで撮影した実映像。 アプリ内で約10～15 fpsの画面録画を行います。カメラに映るページの読み込みやアニメーション、全画面キャプチャによる滑らかなスクロール、撮影中のタップを収録します。
• 自動演出。 ディレクターがタイミングを計画し、統計の行やボタンにズームインし、長いスクロールを早送りして、画面上の実際の数値をもとにキャプションやポップアップチップを作成します。
• モーショングラフィックス。 キネティックタイポグラフィ、ガラス風のコールアウト、ライトスイープ、アクセントワイプ、ロゴバーストと脈打つ行動喚起を含むアニメーション付きのイントロとアウトロを追加します。
• 飛び出すポップアウト。 タップしたカードがスマートフォンから浮かび上がって画面中央に表示されます。開いたパネルは飛び出して、横並びのレイアウトになります。
• サウンドデザイン。 ポップ音、クリック音、ヒュッという音、チャイム音を合成し、すべてのアニメーションに合わせて、MP4のAACトラックにミックスします。
• スタジオにプロンプトを送信。 「分析を2倍速にして」、「テキストを右側に」、「Startボタンにズームインして」。簡単な編集はすぐに反映され、それ以外の指示はエージェントに送られ、エージェントが動画をリアルタイムで編集します。
• あらゆる形式に対応。 ストアやYouTube向けの16:9、ReelsやShorts向けの9:16、フィード向けの1:1に対応しています。

動画の作成方法

1. Shoot    video_record {route:"/dashboard", seconds:8, scroll:true}    live from the phone
            video_record {tap:"My Analytics", seconds:6}                  tap → hero / side pop-out
2. Plan     video_plan {targetSeconds:45, format:"landscape"}             timing, zooms, captions, chips
3. Direct   video_edit [{op:"update", scene:"dashboard", title:"…"}]      refine any scene
4. Studio   video_studio  →  you drag, trim and type prompts              video_wait_for_prompt / video_reply
5. Render   video_render  →  launch-video/out/launch-landscape.mp4

よくある質問

AIを使ってExpoアプリのApp Storeプレビュー動画を作成するにはどうすればよいですか？

このパッケージをexpo-mcp-bridgeの隣にインストールし、npx expo-launch-video initを実行して、スマートフォンでアプリを開き、エージェントに*「縦向きの30秒のApp Storeプレビューを作成して」*と依頼します。アプリの実映像を録画し、動画を計画してスタジオを開きます。書き出すと1080pのMP4を取得できます。

Claude CodeやCursorでReact Nativeアプリのプロモーション動画を作成できますか？

はい。あらゆるMCPエージェントで作成できます。エージェントはスマートフォン上でページの読み込み、スクロール、タップをリアルタイムに録画し、画面上の実際のコンテンツからキャプションを作成して、ズーム、ポップアウト、モーショングラフィックス、サウンドを追加します。

画面録画アプリや動画編集ソフトは必要ですか？

いいえ。録画はexpo-mcp-bridgeを介してアプリ内で行い、編集はドラッグ操作やプロンプト（「分析を2倍速にして」）を使えるブラウザスタジオで行います。MP4はChromeまたはEdgeでレンダリングされます。

どの形式で書き出せますか？

YouTubeやウェブサイト向けの16:9、App StoreやPlay Storeのプレビュー、Reels、Shorts、TikTok向けの9:16、ソーシャルフィード向けの1:1に対応しています。

ツール

expo-mcp-bridgeのすべてのapp_*ツールに加えて使用できます。すべてのパラメーターはツールリファレンスを参照してください。

ツール	説明
video_record	スマートフォンの画面を録画します。ページをカメラに映して開き、読み込み中はそのまま待ち、スクロールします。撮影中にタップすることもできます
video_capture	1つまたは複数のルートについて、高解像度の静止画と全画面スクロールキャプチャを撮影します
video_capture_tap	インタラクションの前、タップ時、後の静止画を撮影します
video_plan	キャプチャからタイムライン全体を自動計画します
video_edit	シーンを編集します。順序、長さ、速度、キャプション、チップ、ズーム（時間指定ズームを含む）、ポップアウト、トランジション、形式、キャプションの位置、テーマ、サウンドを設定できます
video_timeline	計画全体を数行で表示します
video_studio	ブラウザーでスタジオを開きます
video_wait_for_prompt	ユーザーがスタジオに入力する内容を待ちます
video_reply	編集後、スタジオでユーザーに返答します
video_render	MP4を書き出し、そのパスを返します

スタジオ

ライブプレビュー、ドラッグで並べ替えやサイズ変更ができるタイムライン、シーンごとのインスペクター（キャプション、長さ、速度、トランジション、ズーム領域の描画、スクロール量）、動画設定（形式、キャプションの位置、アプリの色、サウンド）、プロンプト入力欄を備えたブラウザーエディターです。よくある編集指示は自動で理解します。

make dashboard 4s · speed up analytics 2x · slow down the 3rd scene · remove pricing
move faq after help · zoom on Log In in login · no zoom on dashboard · scroll mistakes 60%
title dashboard: Your day at a glance · fade transition on analytics · portrait · square
text on the right · make it 30 seconds · cta: Get it on Google Play · color #7c3aed · mute · volume 60%

ANTHROPIC_API_KEYを設定するか、ant auth loginのプロファイルを使用すると、自由形式のリクエストはClaude（claude-opus-5-5）に直接送信されます。設定されていない場合は、video_wait_for_promptを通じてエージェントに送信されます。プロンプトには選択中のシーンが含まれるため、*「これを修正して」*と指示すると、そのシーンが対象になります。

エージェントなしでプロジェクトを再度開くには、npx expo-launch-video studioを実行します。

CLI と環境

npx expo-launch-video init      # .mcp.json ("launch-video" server), skills, AGENTS.md, .gitignore
npx expo-launch-video studio    # reopen the studio for ./launch-video (edit, preview, export)
npx expo-launch-video           # run the MCP server (your agent starts this for you)
npx expo-launch-video --help

変数	デフォルト	説明
EXPO_MCP_PORT	8347	スマートフォンの接続先ポート（expo-mcp-bridge と共有）
LAUNCH_VIDEO_PORT	8790	スタジオの Web サーバー（使用中の場合は次に空いているポート）
LAUNCH_VIDEO_DIR	./launch-video	キャプチャ、project.json、レンダリング結果の保存先
LAUNCH_VIDEO_AI	on	off にすると、スタジオのプロンプトを Claude API ではなくエージェントに送信します
LAUNCH_VIDEO_MODEL	claude-opus-5-5	スタジオで直接編集する際のモデル（Anthropic の認証情報が必要です）

プロジェクト構成

server/       MCP server, director (auto-planning), capture and recording, studio server,
              prompt parser, optional Claude edits
studio/       the editor (vanilla JS): renderer, motion graphics, sound design,
              MP4 export (Mediabunny / WebCodecs)
skill/        the directing playbook installed by init
AI_SETUP.md   one-shot setup guide an AI agent can follow

プロジェクトはアプリ内の launch-video/ に配置されます（キャプチャ、project.json、out/ 内のレンダリング結果）。init を実行すると、このフォルダーが .gitignore に追加されます。

トラブルシューティング

症状	対処方法
レンダリングダイアログがいつまでも終了しない	スタジオのタブを表示したままにしてください。エクスポートにはブラウザーのハードウェアエンコーダー（Chrome または Edge）を使用します。
ページキャプチャに古い画面が表示される	両方のパッケージを更新してください。キャプチャでは表示中の画面を使用します。
録画のリストが空になる	アプリに開発環境変数が必要な場合があります（たとえば、eas.json でのみ設定されている EXPO_PUBLIC_*）。これらを設定して Metro を起動してください。
パネルが後のテイクに重なる	テイク間でモーダルを閉じてください。開いたままのモーダルがある場合、video_record が警告します。
その他	expo-mcp-bridge のトラブルシューティングの表を参照してください。

必要条件

• Node.js 20 以降
• expo-mcp-bridge をマウントした Expo アプリ
• エクスポート用の Chrome または Edge（WebCodecs H.264 + AAC）

関連項目

• expo-mcp-bridge — このパッケージが基盤としている、アプリ制御レイヤーです。
• Expo Agent Kit — 両ライブラリのウェブサイトと完全なドキュメントです。

貢献

npm install
npm test

詳細は CONTRIBUTING.md を参照してください。

ライセンス

MIT © Rudra Samadhiya

エクスポートの多重化には Mediabunny（MPL-2.0）を使用しています。