Shoplive ショートフォームエディター SDK 連携ガイド

// 1) Swift Package Manager
dependencies: [
    .package(url: "https://github.com/shoplive/shortform-editor-ios", .upToNextMajor(from: "1.8.12")),
    .package(url: "https://github.com/shoplive/common-ios",           .upToNextMajor(from: "1.8.12")),
]
// ターゲットに ShopLiveShortformEditorSDK と ShopliveFilterSDK を併せて追加します。

// 2) CocoaPods — Podfile
// pod 'ShopLiveShortformEditorSDK', '1.8.12'   # ShopliveFilterSDK を含む
// pod 'ShopliveSDKCommon',          '1.8.12'

// 3) import
import ShopliveSDKCommon
import ShopLiveShortformEditorSDK

dependencies {
    implementation("cloud.shoplive:shoplive-video-editor:1.8.14")   // エディター
    implementation("cloud.shoplive:shoplive-common:1.8.14")         // 共通（accessKey・認証）
    implementation("cloud.shoplive:shoplive-network:1.8.14")        // ネットワーク
    implementation("cloud.shoplive:shoplive-filter:1.8.14")         // フィルター（エディターに必須）

    // 再生エンジン — 以下の<b>どちらか一方だけ</b>を宣言してください（エンジンのバージョン体系は SDK と別です）
    implementation("cloud.shoplive:shoplive-media3:1.10.1.3")       // media3（既定）— minSdk 23
    // implementation("cloud.shoplive:shoplive-exoplayer:2.19.1.20")    // ExoPlayer（レガシー）— minSdk 19
}

android {
    defaultConfig { multiDexEnabled = true }

    // ネイティブのエンコードライブラリを含む → 容量が重要なら ABI 分割を推奨
    bundle { abi { enableSplit = true } }
}

<!-- Info.plist — 未設定だとアプリがクラッシュします -->
<key>NSPhotoLibraryUsageDescription</key>
<string>ショートにする動画を選ぶために写真へのアクセスが必要です。</string>
<key>NSCameraUsageDescription</key>
<string>ショートを撮影するためにカメラへのアクセスが必要です。</string>
<key>NSMicrophoneUsageDescription</key>
<string>動画の音声を録音するためにマイクへのアクセスが必要です。</string>

// ギャラリー選択は PickVisualMedia（フォトピッカー）を使うため、ストレージ権限は不要です。
// 撮影機能を併せて組み込む場合のみ AndroidManifest.xml に追加:
// <uses-permission android:name="android.permission.CAMERA" />
// <uses-permission android:name="android.permission.RECORD_AUDIO" />

// 1) アプリ起動時に 1 回
ShopLiveCommon.setAccessKey(accessKey: "取得した_ACCESS_KEY")
ShopLiveCommon.setAuthToken(authToken: myJwtFromServer)

// 2)「ショートを投稿」ボタンから — 選択・編集・カバー・アップロードまで一気に
ShopLiveShortformEditor.shared
    .setDelegate(delegate: self)
    .start(self)

// 1) アプリ起動時に 1 回（Application.onCreate）
ShopLiveCommon.setAccessKey("取得した_ACCESS_KEY")
ShopLiveCommon.setAuthToken(myJwtFromServer)

// 2)「ショートを投稿」ボタンから — 選択・編集・カバー・アップロードまで一気に
ShopLiveShortformEditor(this)          // this = ComponentActivity
    .setHandler(myHandler)
    .start()

@IBAction func createShorts() {
    ShopLiveShortformEditor.shared
        .setPermissionHandler(self)        // 任意 — 付録を参照
        .setDelegate(delegate: self)
        .start(self)                       // 現在の ViewController の上に表示
}

// アプリ側から強制的に閉じるとき
ShopLiveShortformEditor.shared.close()

fun createShorts() {
    ShopLiveShortformEditor(this)          // this = ComponentActivity
        .setHandler(myHandler)
        .start()
}

extension MyViewController: ShopLiveShortformEditorDelegate {

    func onShopLiveShortformEditorUploadSuccess(result: ShopliveEditorResultData?) {
        // アップロード完了 — result.shortsId で作ったばかりのショートを再生できます
        guard let shortsId = result?.shortsId else { return }
        myFeed.insertNewShorts(shortsId)
    }

    func onShopLiveShortformEditorVideoConvertSuccess(videoPath: String) {
        // エンコード済みのローカルファイルパス（アップロード前の段階）
    }

    func onShopLiveShortformEditorCoverImageSuccess(image: UIImage?) {
        // ユーザーが選んだカバー画像
    }

    func onShopLiveShortformEditorClosed() {
        // 途中で閉じられた — 必要なら「下書き保存」を案内
    }

    func onShopLiveShortformEditorError(error: ShopLiveCommonError) {
        log("editor error \(error.codes) \(error.message ?? "")")
    }

    func onShopLiveShortformEditorOnEvent(name: String, payload: [String : Any]?) {
        analytics.log(name)                // ボタン単位の行動ログ
    }
}

val myHandler = object : ShopLiveShortformEditorHandler() {

    override fun onSuccess(activity: ComponentActivity) {
        // アップロード完了 — 一覧を更新するか「自分のショート」タブへ
        activity.finish()
        myFeed.refresh()
    }

    override fun onCancel() {
        // 途中で閉じられた
    }

    override fun onError(context: Context, error: ShopLiveCommonError) {
        log("editor error ${error.code} ${error.message}")
    }

    override fun onEvent(context: Context, command: String, payload: Map<String, Any?>) {
        analytics.log(command)             // ボタン単位の行動ログ
    }
}

ShopLiveShortformEditor(this)
    .setShortformUploaderData(
        ShopLiveShortformUploaderData(
            tags = listOf("春の新作"),
            products = listOf(
                ShopLiveShortformUploaderProductData(
                    customerProductId = "P-1001",
                    sku = "SKU-1001"
                )
            ),
            ui = ShopLiveShortformUploaderUiData(
                hashTag = true,
                videoChange = false,
                rating = false
            )
        )
    )
    .setHandler(myHandler)
    .start()

// iOS はアップローダーを単体コンポーネントとして開き、初期値を注入します。
// （フルフローの ShopLiveShortformEditor には注入ポイントがありません）
ShopLiveShortformUploader.shared
    .setDelegate(self)
    .setUploaderData(ShopLiveShortformUploaderData(
        ui: ShopLiveUgcUploaderUiData(hashTag: true, videoChange: false, rating: false),
        tags: ["春の新作"],
        products: [ShopLiveConversionProductData(sku: "SKU-1001", customProductId: "P-1001")]
    ))
    .build { uploaderVC in
        uploaderVC.modalPresentationStyle = .fullScreen
        self.present(uploaderVC, animated: true)
    }
let visible = ShopLiveShortFormEditorVisibleContent(
    isDescriptionVisible: true,
    isTagsVisible: true
)

let config = ShopLiveShortformEditorConfiguration(
    videoCropOption: ShopLiveShortFormEditorAspectRatio(width: 9, height: 16, isFixed: true),
    visibleContents: nil,
    videoOutputOption: ShopLiveShortformEditorVideoOuputOption(
        videoOutputQuality: .high,
        videoOutputResoltuion: ._720
    ),
    mediaPickerVideoDurationOption: ShopLiveMediaPickerVideoDurationOption(
        minVideoDuration: 3,                 // 秒
        maxVideoDuration: 60 * 5,
        invalidDurationToastMessage: "3 秒〜5 分の動画のみアップロードできます"
    ),
    videoUploadOption: nil,
    minVideoDuration: 3,                     // 編集結果の長さ（秒）
    maxVideoDuration: 60
)

ShopLiveShortformEditor.shared
    .setConfiguration(config)
    .setDelegate(delegate: self)
    .start(self)

ShopLiveShortformEditor(this)
    .setVideoEditorData(
        ShopLiveVideoEditorData(
            minVideoDuration = 3_000,        // ミリ秒
            maxVideoDuration = 60_000,
            aspectRatio = ShopLiveShortformEditorAspectRatio(
                width = 9, height = 16, isFixed = true
            ),
            outputVideoQuality = ShopLiveVideoEditorVideoQuality.HIGH,
            outputResolution = ShopLiveVideoEditorResolution.RESOLUTION_720
        )
    )
    .setHandler(myHandler)
    .start()

// フィルターとクロップだけ残し、速度と音量は隠す
let visible = ShopLiveShortFormEditorVisibleContent(
    isDescriptionVisible: true,
    isTagsVisible: true,
    editOptions: [.filter, .crop]        // 既定値: [.filter, .playBackSpeed, .volume, .crop]
)

ShopLiveVideoEditorData(
    visibleActionButton = ShopLiveShortformEditorVisibleActionButton(
        isUsedFilterButton = true,
        isUsedCropButton = true,
        isUsedPlaybackSpeedButton = false,
        isUsedVolumeButton = false
    )
)

// 説明・ハッシュタグの表示可否 + アップロードポリシー
let visible = ShopLiveShortFormEditorVisibleContent(
    isDescriptionVisible: true,
    isTagsVisible: false                 // ハッシュタグ入力を隠す
)

let upload = ShopLiveShortFormEditorVideoUploadOption(
    shortsStatus: .CLOSED,               // アップロード直後は非公開 → 審査後に公開
    isCreatedShortform: true
)

ShopLiveShortformEditor(this)
    .setShortformUploaderData(
        ShopLiveShortformUploaderData(
            ui = ShopLiveShortformUploaderUiData(hashTag = false)
        )
    )
    .setVideoEditorData(
        ShopLiveVideoEditorData(
            shortformStatus = ShopLiveShortformStatus.CLOSED   // 非公開でアップロード
        )
    )
    .setHandler(myHandler)
    .start()

ShopLiveShortformEditor(this)
    .setVideoEditorCustomize(
        ShopLiveVideoEditorCustomizeData(
            mainData = ShopLiveVideoEditorCustomizeMainData(
                titleTextSize = 16f,
                backButtonBackgroundRes = R.drawable.ic_my_back,
                closeButtonBackgroundRes = R.drawable.ic_my_close,
                confirmButtonTextColor = Color.WHITE,
                confirmButtonBackgroundRes = R.drawable.bg_my_button,
                trimColor = Color.parseColor("#245EFF"),
                trimHandleColor = Color.WHITE
            )
            // volumeData · cropData · filterData · playbackSpeedData も同じ方式
        )
    )
    .setHandler(myHandler)
    .start()

// iOS は画面ごとのグローバル config シングルトンでアイコン・色を差し替えます。
// エディターを開く前に一度だけ設定すれば十分です。
ShopLiveShortformEditor.MediaPickerConfig.global.cellCornerRadius = 8
ShopLiveShortformEditor.EditorMainConfig.global.confirmButtonBackgroundColor = .systemPink
ShopLiveShortformEditor.EditorMainConfig.global.confirmButtonTextColor = .white
ShopLiveShortformEditor.EditorCropConfig.global.cropColor = .systemPink
// このほか EditorVolumeConfig · EditorSpeedConfig · EditorFilterConfig
// · EditorCoverPickerConfig も同じように .global にアクセスします。

// iOS — エディターの「画面」を返すので、アプリが自分で present します
ShopliveVideoEditor.shared
    .setDelegate(self)
    .setConfiguration(ShopliveVideoEditorConfiguration(
        videoCropOption: ShopliveVideoEditorAspectRatio(width: 9, height: 16, isFixed: true),
        videoOutputOption: nil,
        videoTrimOption: ShopliveVideoEditorTrimOption(minVideoDuration: 3, maxVideoDuration: 60),
        visibleContents: nil,
        videoUploadOption: nil
    ))
    .build(data: ShopLiveVideoEditorData(videoUrl: pickedFileURL, isCreatedShortform: true)) { editorVC in
        editorVC.modalPresentationStyle = .fullScreen
        self.present(editorVC, animated: true)
    }

// メモリ解放 — エディターを閉じた後に
ShopliveVideoEditor.shared.cleanUpMemory()

// Android — SDK が Activity を開き、結果をハンドラーで返します
ShopLiveVideoEditor(this)
    .setData(ShopLiveVideoEditorData(
        minVideoDuration = 3_000,
        maxVideoDuration = 60_000,
        isCreatedShortform = true
    ))
    .setHandler(object : ShopLiveVideoEditorHandler() {
        override fun onSuccess(
            videoEditorActivity: ComponentActivity,
            result: ShopLiveEditorResultData
        ) {
            // result.shortsId · localVideoUri · localCoverImageUri · duration …
            ShopLiveVideoEditor.close()
            uploadToMyServer(result.localVideoUri)
        }
        override fun onCancel() { /* ユーザーが閉じた */ }
        override fun onError(context: Context, error: ShopLiveCommonError) { log(error) }
    })
    .start(ShopLiveEditorLocalData(pickedUri))     // カメラ結果なら ShopLiveEditorCameraData

ShopLiveCoverPicker(this)
    .setData(ShopLiveCoverPickerData(
        shortsId = "SHORTS_ID",
        aspectRatio = ShopLiveShortformEditorAspectRatio(9, 16, isFixed = true),
        visibleActionButton = ShopLiveCoverPickerVisibleActionButton(isUsedCropButton = true)
    ))
    .setHandler(object : ShopLiveCoverPickerHandler() {
        override fun onSuccess(
            coverPickerActivity: ComponentActivity,
            result: ShopLiveEditorResultData
        ) {
            ShopLiveCoverPicker.close()
            applyCover(result.localCoverImageUri)
        }
        override fun onCancel() { /* … */ }
    })
    .start(ShopLiveCoverPickerLocalData(localVideoUri))   // または ShopLiveCoverPickerUrlData(remoteUrl)

// iOS でもカバー選択を単体で開けます（画面を返すのでアプリが present します）
ShopLiveCoverPicker.shared
    .setDelegate(self)
    .setConfiguration(ShopLiveCoverPickerConfiguration(
        cropOption: ShopLiveShortFormEditorAspectRatio(width: 9, height: 16, isFixed: true),
        visibleActionButton: ShopLiveCoverPickerVisibleActionButton(editOptions: [.crop])
    ))
    .build(data: ShopLiveCoverPickerData(videoUrl: localVideoURL, shortsId: shortsId)) { pickerVC in
        self.present(pickerVC, animated: true)
    }

// 閉じた後にメモリを解放
ShopLiveCoverPicker.shared.cleanUpMemory()

ShopLiveImageEditor(this)
    .setData(ShopLiveImageEditorData(
        isCreatedShortform = true,
        resolution = ShopLiveVideoEditorResolution.RESOLUTION_720,
        videoDuration = 10_000                 // ミリ秒 — 画像を 10 秒の動画に
    ))
    .setHandler(object : ShopLiveImageEditorHandler() {
        override fun onSuccess(result: ShopLiveEditorResultData) { /* … */ }
        override fun onError(error: ShopLiveCommonError) { log(error) }
    })
    .start(ShopLiveEditorLocalData(pickedImageUri))

// iOS には画像 → 動画の変換 API が公開されていません。

ShopLiveShortformEditor.shared
    .setPermissionHandler(self)
    .setDelegate(delegate: self)
    .start(self)

extension MyViewController: ShopLivePermissionHandler {
    func handlePhotoLibraryUsagePermission(status: PermissionStatus) {
        // 拒否状態なら「設定から写真へのアクセスを許可してください」という案内をアプリが表示
    }
    func handleCameraPermission(status: PermissionStatus) { /* … */ }
    func handleMicroPhonePermission(status: PermissionStatus) { /* … */ }
    func handleMediaLibraryUsagePermission(status: PermissionStatus) { /* … */ }
}

// Android はフォトピッカー（PickVisualMedia）を使うため、ストレージ権限の処理は不要です。
// 撮影を組み込んだ場合のみ、アプリが CAMERA・RECORD_AUDIO 権限を要求し、
// 許可された後に ShopLiveEditorCameraData でエディターを開始してください。