remotion-saas について
Remotionでアプリを構築する開発者向けのガイドです。フォームからのレンダリング連携や動画エディターに加え、テンプレート、プレビュー、レンダリング方式を説明します。
主な機能
- 01フォームからレンダリングへ接続
- 02複雑な動画エディターの構築
- 03SaaSテンプレートやフレームワーク選択
- 04Reactアプリへのプレビュー埋め込み
- 05クライアント・サーバー側レンダリングの確認
活用シーン
- 01SaaSアプリへの動画生成機能の追加
- 02React画面でRemotionプレビューを表示
- 03レンダリングのデプロイ方式を選択
- 04Vue、Angular、Svelteでの利用方法を参照
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/remotion-saasを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
rendering.mdplayer.mdframework.mdagents/openai.yaml詳細
Remotionを使ってアプリを構築できます。
シンプルなフォームをレンダリングに接続することも、複雑な動画エディターを作成することもできます。
テンプレートまたはフレームワークの選択
SaaS向けのテンプレートをいくつか用意しており、クローンして利用したり、参考にしたりできます。 テンプレートまたはフレームワークの選択については、フレームワークの選択をご覧ください。
<Player>
このコンポーネントを使うと、RemotionのプレビューをReactアプリに埋め込めます。Playerの詳細については、Playerをご覧ください。
レンダリング
クライアントサイドとサーバーサイドのレンダリング方法を利用できます。選択方法や、Lambda、Vercel、Node.js、Cloudflareの各オプションについては、レンダリングをご覧ください。
Vueの場合
RemotionをVueで使用する方法については、https://www.remotion.dev/docs/vue.md をご覧ください。
Angular
RemotionをAngularで使用する方法については、https://www.remotion.dev/docs/angular.md をご覧ください。
Svelte
RemotionをSvelteで使用する方法については、https://www.remotion.dev/docs/svelte.md をご覧ください。