Guides

ソースクリップ連携ガイド

Suggest Edits

連携方法は、リンク遷移方式、ライブラリ連携方式、iframe連携方式、WebView連携方式 のいずれかで構成されます。

📘

アプリで連携する場合は、必ず WebView連携方式 を使用してください。

Config 設定

ソースクリップConfigの設定 ページを参考にしながら、 モビドゥ担当者にお問い合わせのうえ、設定を行ってください。

リンク遷移方式

プレーヤーリンクへ直接遷移する場合、遷移先のURLには以下の形式の値を指定します。

https://player.sauceclip.com/player?clipId={{ソースクリップID}}&partnerUniqueId={{パートナーID}}

📘

ライブラリ連携方式

STEP 1. ページ内で適用したい位置に、以下のコードを追加します。

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <script src="https://player.sauceclip.com/static/js/SauceClipPlayerLib.js"></script>
        //(ステージ環境を使用する場合は、stage.player.sauceclip... に変更してください。)
  </head>
  <body>
    <div id="root"></div>
    <script>
      window.addEventListener('load', () => {
        // パートナーIDとクリップIDを入力してください。
        window.SauceClipPlayerLib.setInit({
          partnerUniqueId: 'パートナーID',
          clipId: 'クリップID',
          elementId: 'root'
        });
        window.SauceClipPlayerLib.load();
      });
    </script>
  </body>
</html>

📘

ライブラリ連携方式の詳細については、 ソースクリップライブラリ定義 をご参照ください。

iframe連携方式

STEP 1. ページ内で適用したい位置に、プレーヤーリンクを指定した iframe タグを以下のように追加します。

  • 外部流入コードを使用しない場合
<iframe src="https://player.sauceclip.com/player?clipId={{ソースクリップID}}&partnerUniqueId={{パートナーIDD}}"</iframe>
  • 外部流入コードを使用する場合は、適用したいページのURLクエリストリングに含まれる fc の値（情報）を追加してください。
<iframe src="https://player.sauceclip.com/player?clipId={{ソースクリップID}}&partnerUniqueId={{パートナーID}}&fc={{fc情報}}"></iframe>

STEP 2. window オブジェクトに message イベントハンドラーを実装して、ブリッジを連携します。

window.addEventListener(
    "message",
    function(event) {
        console.log(event.data);
    }, false
);

📘

  • ブリッジのペイロードは、JSON形式のオブジェクトが文字列に変換された状態で提供されます。
  • 渡されるデータのブリッジ名とペイロードについては、「ブリッジ」の項目をご参照ください。

WebView連携方式

アプリでWebViewを使用して連携する場合、特定の動作に対してブリッジを実装して連携する方式です。

リンク遷移に関連する動作には、必ずブリッジの実装が必要です。

Android

Androidの場合、sauceclip という名前のブリッジが存在すれば、該当ブリッジにメッセージが送信され、標準の動作はキャンセルされます。

import android.os.Handler
import android.webkit.JavascriptInterface
import android.widget.Toast
 
class AndroidBridge(private val activity: MainActivity) {
    private val handler = Handler()
 
    @JavascriptInterface
    fun sauceclipEnter() {
        handler.post {
            Toast.makeText(activity, "sauceclipEnter", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipMoveExit() {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveExit", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipMoveProduct(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveProduct \\n $message", Toast.LENGTH_SHORT).show()
        }
    }

    @JavascriptInterface
    fun sauceclipAddCart(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipAddCart \\n $message", Toast.LENGTH_SHORT).show()
        }
    }

    @JavascriptInterface
    fun sauceclipMoveCart() {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveCart", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipOnShare(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipOnShare \\n $message", Toast.LENGTH_SHORT).show()
        }
    }

    @JavascriptInterface
    fun sauceclipPlayerError(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipPlayerError \\n $message", Toast.LENGTH_SHORT).show()
        }
    }
 
}

📘

Android WebViewで再生アイコンを表示せずに動画を再生させたい場合は、以下のコードをご活用ください。（このガイドはパートナー企業のAOSアプリ開発チームが対応する必要があります。）

  • override fun getDefaultVideoPoster(): Bitmap? { return Bitmap.createBitmap(10,10, Bitmap.Config.ARGB_8888) }

iOS

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                                    didReceive message: WKScriptMessage) {
        switch (message.name) {
            case "sauceclipEnter":
                print("sauceclipEnter")
                break
 
            case "sauceclipMoveExit":
                print("sauceclipMoveExit")
                break
 
            case "sauceclipMoveProduct":
                print("sauceclipMoveProduct")
                print(message.body)
                break
            
            case "sauceclipAddCart":
                print("sauceclipAddCart")
                print(message.body)
                break

            case "sauceclipMoveCart":
                print("sauceclipMoveCart")
                break

            case "sauceclipOnShare":
                print("sauceclipOnShare")
                print(message.body)
                break

            case "sauceclipPlayerError":
                print("sauceclipPlayerError")
                print(message.body)
                break
 
            default:
                print("message.name \\(message.name) not handled.")
        }
    }
}

📘

iOS X 以上の端末でプレーヤー画面の切り取り表示を防ぐために、SafeArea の設定を必ず行ってください。

WebView連携方式で確認されるブリッジ内部の値については、以下のリンクをご参照ください。

ソースクリップブリッジ定義

Updated 20 days ago