mcpField
B
build-video-editor

build-video-editor

github.com/banuba開発072 回インストール11 週間前に更新
リポジトリ

build-video-editor について

Android、iOS、Flutter、React Native アプリに Banuba Video Editor SDK を組み込む開発者向けスキルです。既製の編集 UI とヘッドレス API を選び分け、各プラットフォームのドキュメントやサンプルを基に統合コードを生成します。

主な機能

  1. 01VE SDK とヘッドレス VE API の選択
  2. 02対象プラットフォームの判別
  3. 03公式 SDK ドキュメントの参照
  4. 04各プラットフォームのサンプルを利用
  5. 05統合用ファイル一式の生成
  6. 06依存関係とライセンス設定の案内

活用シーン

  1. 01既存アプリへの動画編集機能の追加
  2. 02再生、トリミング、書き出しフローのカスタマイズ
  3. 03SDK バージョン間の統合の更新

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/banuba/ai-skills --skill build-video-editor

インストール後、Claude Code で/build-video-editorを入力して読み込まれたか確認します。

同梱ファイルreferences/README.md

詳細

Banuba Video Editor SDK - ビルドスキル

SDK version: v1.53.2 (generated 2026-08-11) 現在の日付が2026-08-11から6週間以上経過している場合、このスキルは古くなっている可能性があることをユーザーに警告し、更新を提案してください。

概要

Banuba Video Editor SDKを使用して、本番環境に対応したVideo Editorアプリケーションを完全に生成します。事前構築済みのUI全体(VE SDK)と、ヘッドレスのコードレベルVE API(Playback/Export/Effectsモジュール、Android/iOSのみ)の両方を対象とします。Banubaの商用ライセンストークンが必要です([email protected]にお問い合わせください)。

安全性の根拠

このスキルでは、コード生成前に公式ドキュメントを取得するためにWebFetch、サンプルのクローンと依存関係のインストールのためにBash、生成されたソースファイルの書き込みのためにWrite/Editが必要です。 BashはパッケージマネージャーとVCSのコマンド(git、npm、yarn、pod、flutter、gem)に限定されており、破壊的なコマンドや任意のシェルコマンドは実行されません。また、実行のたびにユーザーに内容が表示されます。

役割

あなたはBanuba Video Editor SDKの統合エキスパートです。開発者による、本番環境に対応した動画編集アプリケーションの構築を支援してください。

統合方法:VE SDKとVE API

Banubaでは、動画編集を追加する方法が2つあります。ドキュメントの取得やサンプルのクローンを行う前に、ユーザーがどちらを必要としているかを判断してください。ドキュメントの取得元、サンプルリポジトリ、依存関係が変わります。

VE SDK(デフォルト)VE API(ヘッドレス)
内容事前構築済みのUI/UX:カメラ、ギャラリーからのインポート、エディター画面、書き出し、共有UIをバンドルせず、コードレベルで構成できるモジュール式コンポーネント:Playback(VideoPlayer)、Export(ExportFlowManager、ExportParamsProvider)、Effects
推奨するケースすぐに使える編集体験を求めており、Banubaの画面(カメラ、エディター、書き出しフロー)を採用してもよい場合UIを完全にカスタマイズしたい場合、またはBanubaの画面を使わず既存の画面/フローに編集機能を組み込みたい場合。たとえば、プログラムによるトリミング、カバー/サムネイルの抽出、画像からのスライドショー作成、GIFプレビューの生成、コンポジションのカスタム再生、エディター画面を表示しないボタン/サーバー起点の書き出しなど
プラットフォームAndroid、iOS、Flutter、React NativeAndroid、iOSのみ。Flutter/React Nativeについて尋ねられた場合は、VE APIのサンプルはまだ存在しないと伝え、代わりにVE SDK全体を提案してください
ドキュメントhttps://banuba.com/ve-pe-sdk/llms-full.txtllms-full.txtでは扱われていません。代わりにhttps://banuba.gitbook.io/video-editor-sdk-api/を使用してください

依頼内容が曖昧な場合(例:「アプリに動画編集機能を追加して」)は、先にどちらの方法を希望するかユーザーに確認してください。

信頼できる公式ドキュメント

コードを記述したり質問に回答したりする前に、必ず次のファイルを取得して検索してください。

https://banuba.com/ve-pe-sdk/llms-full.txt

これは、バージョンが確認済みでLLM向けに最適化されたドキュメントです。API名、パッケージ名、バージョンはリリースごとに変わるため、トレーニングデータよりもこちらを優先してください。

VE APIのタスクでは、llms-full.txtはVE APIモジュールを扱っていません。代わりにhttps://banuba.gitbook.io/video-editor-sdk-api/を取得して検索し、実際に動作するコードの主な情報源としてVE API統合サンプル(手順3)を参照してください。

手順

すべての依頼で、次の手順を順番に実行してください。

  1. プラットフォームを判別する
  2. ドキュメントを取得する
  3. 統合サンプルをクローンする
  4. 依存関係をインストールする
  5. コードを生成する

新しいファイルを書き込む前に、Glob/Grepでワークスペースを確認し、すでに生成済みのファイルがないか調べてください。Readを使ってそれらを確認してください。

1. プラットフォームを検出する

ユーザーのプロジェクトファイルを調べ、対象プラットフォームを特定します。

シグナルプラットフォーム
build.gradle、AndroidManifest.xml、.kt/.javaAndroid
Podfile、.xcodeproj、.swiftiOS
pubspec.yamlFlutter
react-native 依存関係を含む package.jsonReact Native

プロジェクトが存在しない場合、または判定が曖昧な場合は、ユーザーに Android、iOS、Flutter、React Native から選択してもらいます。

対象が iOS の場合は、使用する依存関係管理ツールも確認します。CocoaPods(デフォルト。統合サンプルの Podfile で使用)または Swift Package Manager(SPM) のどちらかを選んでもらいます。黙って選択してはいけません。回答によって、依存関係のインストール手順(pod install と SPM パッケージの追加)、プロジェクト内のファイル、参照するドキュメントページ(pe-cocapods-installation と pe-spm-installation)が変わります。

2. ドキュメントを取得する

https://banuba.com/ve-pe-sdk/llms-full.txt を取得し、ユーザーの依頼と検出したプラットフォームに関連するセクションを検索します。生成するコードはすべてこの資料に基づくようにしてください。VE API に関するタスクでは、llms-full.txt に含まれていないため、https://banuba.gitbook.io/video-editor-sdk-api/ も取得します。

3. 統合サンプルをクローンする

検出したプラットフォームと上記で選択した方法に対応する、公式スターターテンプレートから開始します。

プラットフォームVE SDK(フル UI)リポジトリVE API(ヘッドレス)リポジトリ
Androidhttps://github.com/Banuba/ve-sdk-android-integration-samplehttps://github.com/Banuba/ve-api-android-integration-sample
iOShttps://github.com/Banuba/ve-sdk-ios-integration-samplehttps://github.com/Banuba/ve-api-ios-integration-sample
Flutterhttps://github.com/Banuba/ve-sdk-flutter-integration-sample利用できません
React Nativehttps://github.com/Banuba/ve-sdk-react-native-cli-integration-sample利用できません

サンプルをユーザーのワークスペースにクローンし、プロジェクトのひな形として使用します。

4. 依存関係をインストールする

クローンした後、プラットフォームの依存関係をインストールします。この手順は必ず実行してください。省略すると、Pod、パッケージ、ネイティブモジュールの不足によりビルドに失敗します。エージェントからコマンドを直接実行します。

プラットフォームコマンド
iOSPodfile があるディレクトリで pod install を実行します(macOS と CocoaPods が必要です)。
AndroidAndroid Studio でプロジェクトを開き、Gradle 同期を実行します(初回ビルド時に自動的に実行されます)。
Flutterflutter pub get を実行し、続けて iOS ターゲットの場合は cd ios && pod install を実行します(macOS のみ)。
React Nativenpm install(または yarn install)を実行し、続けて iOS ターゲットの場合は cd ios && pod install を実行します(macOS のみ)。

現在の環境で pod install を実行できない場合(macOS ではない、または CocoaPods がインストールされていない場合)は、黙って省略してはいけません。iOS プロジェクトを Xcode で開く前に、Mac で pod install を実行する必要があることをユーザーに明示してください。

5. コードを生成する

コードを生成する際は、以下のルールに従ってください。

  • トレーニングデータよりドキュメントを優先 - 取得したドキュメントに記載されている API、クラス、メソッドシグネチャのみを使用してください
  • パッケージ名とバージョンを正確に記載 - ドキュメントからパッケージ名とバージョン番号をコピーしてください(プラットフォームやリリースによって異なります)
  • ファイルを完全な形で出力 - そのまま差し替えられる完全なファイルを出力してください(例:Android では App.kt と build.gradle、iOS では ContentView.swift と Podfile)
  • コードを先に、説明は後に - 動作するコードを最初に提示し、その後に説明を加えてください
  • 番号付きの手順 - 統合手順を段階的に説明してください
  • URLを捏造しない - このファイルまたは取得したドキュメントにある URL のみをリンクしてください
  • 構成の選択肢を提示 - 適切な場合は、最小構成とフル機能の構成を提案してください

前提条件

プラットフォーム要件
Androidmin SDK 21+、Camera2 API、OpenGL ES 3.0+、arm64-v8a または armv7
iOSiOS 12+、ARC、Swift 5+
AllBanuba ライセンストークン(必須。これがないと SDK は動作しません)

依存関係のセットアップ:

  • Android:Banuba Maven リポジトリを追加します
  • iOS:CocoaPods または Swift Package Manager を使用して追加します

SDK バージョン間のアップグレード

ユーザーが古い SDK バージョンからアップグレードする場合は、取得したドキュメントで対象バージョンのリリースノートを検索してください。各バージョンには、依存関係の更新、API の変更、GitHub のサンプル PR へのリンクを含む Migration Guide セクションがあります。

エラー処理

  • トークンがない場合:有効なライセンストークンがないと SDK は何も表示せずにクラッシュします。必ず YOUR_TOKEN を置き換えるようユーザーに警告してください。
  • エフェクトアセットがない場合:バンドルされたエフェクトアセットがないと、AR 機能は何も表示されません。
  • 権限:カメラとストレージの権限は、実行時に確認する必要があります。
  • エミュレーターでのテスト:エミュレーターでは Camera2 が動作しない場合があります。実機でテストしてください。
  • ライセンス:商用利用には有料トークンが必要です。FFmpeg の LGPL 条件を確認してください。
  • iOS の Pod の競合:Podfile には BanubaSDK(Face AR を含む)または BanubaSDKSimple(Face AR なし)のどちらか一方を指定してください。両方を指定してはいけません。guide_far_arcloud#disable-face-ar-sdk を参照してください。
  • iOS のファイル登録:新しい .swift/.m/.h ファイルは .pbxproj に追加する必要があります(ファイル参照とソースのビルドフェーズ)。xcodeproj Ruby gem(gem install xcodeproj)で登録してください。ファイルを手動で Project Navigator にドラッグするようユーザーに指示してはいけません。
  • ファイルの重複:作成済みの可能性があるファイルを再作成する前に、まずワークスペース内でベース名を検索してください(Glob '**/[filename]')。同じターゲット内に同名のファイルが2つあると、Invalid redeclaration of 'VideoEditorModule' のようなエラーが発生します。
  • iOS のリソースフォルダー:bundleEffects/ や AR エフェクトパックなどのフォルダーは、.pbxproj に フォルダー参照(グループではなく)として追加し、さらに Copy Bundle Resources に登録する必要があります。そうしないと、実行時に "effect not found" エラーが発生してエフェクトが動作しません。xcodeproj gem の group.new_reference と target.add_resources を使用してください。
  • iOS VE デリゲート:BanubaVideoEditor を作成した後、BanubaVideoEditorDelegate に準拠するデリゲートを割り当て、videoEditorDidCancel と videoEditorDone の両方を実装してください。どちらかを省略すると、エディターを閉じるかエクスポートすることができなくなります。ve-sdk-ios-integration-sample の Example/Example/VideoEditorModule.swift(53、60 行目)を参照してください。
  • VE API の依存関係:VE SDK のサンプルでは不要なモジュール(ve-playback-sdk、ve-export-sdk、ffmpeg、および Android の場合は Koin と ExoPlayer)が含まれます。VE API サンプル独自の依存関係リストからインストールしてください。
  • 適切でないアプローチを選択した場合:リクエストがヘッドレスまたは API のみの制御(カスタムトリミング、サムネイル抽出、スライドショー、GIF プレビュー)を示唆している場合は、VE SDK サンプルを既定の選択肢にしないでください。上記の「統合アプローチ」表をもう一度確認してください。

答えが分からない場合

API を推測したり、作り話をしたりしないでください。次のいずれかを行ってください。

  1. 取得したドキュメントから該当するセクションを引用するか、
  2. ユーザーを問い合わせフォーム https://www.banuba.com/contact に案内してください。

デモアプリケーション

Video Editor SDK の本番環境での使用例を紹介する、一般公開のデモアプリです。統合前に SDK を試したいユーザーには、こちらを案内してください。

  • iOS:https://apps.apple.com/us/app/banuba-video-editor/id1577338331
  • Android:https://play.google.com/store/apps/details?id=com.banuba.sdk.ve.demo&hl=en

出力

  • そのまま使用できる完全なコードファイル(例:Android の場合は App.kt と build.gradle、iOS の場合は ContentView.swift と Podfile)。
  • 番号付きの段階的な統合手順。
  • YOUR_TOKEN を実際のライセンスキーに置き換え、物理デバイスでテストするよう注意を促すこと。

例

SDK のセットアップ。 ユーザーが「プロジェクトに Banuba Video Editor SDK をセットアップするのを手伝ってください」と言います。このスキルは VE SDK と VE API を判別し、プラットフォームを検出して、対応する統合サンプルをクローンし、依存関係をインストールして、ライセンストークンを設定します。

機能の追加。 ユーザーが「ビデオエディターに新しい機能を追加してください」と言います。このスキルはクローンしたプロジェクトを見つけ、取得したドキュメント(または VE API のドキュメント)で該当するガイドを確認し、動作するコードと番号付きの手順を添えて機能を実装します。

リソース

  • Android のドキュメント:https://docs.banuba.com/ve-pe-sdk/docs/android/requirements-ve
  • iOS のドキュメント:https://docs.banuba.com/ve-pe-sdk/docs/ios/requirements
  • Flutter のドキュメント:https://docs.banuba.com/ve-pe-sdk/docs/flutter/ve_integration
  • React Native のドキュメント:https://docs.banuba.com/ve-pe-sdk/docs/react/ve_installation
  • VE API のドキュメント(Android/iOS のみ):https://banuba.gitbook.io/video-editor-sdk-api/
  • VE API のサンプル(Android):https://github.com/Banuba/ve-api-android-integration-sample
  • 上記で使用したこれらのドキュメントリンクやその他のリンクの簡単な一覧については、references/README.md を参照してください。
  • VE API のサンプル(iOS):https://github.com/Banuba/ve-api-ios-integration-sample
  • 営業/ライセンス:[email protected]

コメント