基本的な実装方法

    基本的な実装方法


    記事の要約

    このガイドでは、Shoplive Playerのスタンドアロン形式を使用する手順について説明します。Shoplive プラグインのテンプレートを使用しない場合は、Shoplive Player を使用して目的の形式でページを構成できます。

    • Shoplive Playerの場所とレイアウトを設定して、WebページにShoplive Playerをインストールします。

    • コンテナレイアウトのスタイルは自分で指定してください。

    • campaignKeyを指定して特定の配信を呼び出します。

    • isFullScreen オプションを使用して、常に全画面表示で実行できます。


    ステップ1:初期化

    • 初期化でユーザー認証機能を使用するには、 ユーザー認証を参照してください。

    • 初期化に加えて、クーポンのためにmessageCallbackを定義する必要がある場合は、 messageCallbackを参照されたい。

    追加のユーザー認証や messageCallback 定義を行わずにプレーヤーを初期化するには、次のコードを共通レイアウト (ヘッド領域など) にインストールします。このコードは、ライブ配信をプレビュー形式で表示するライブミニプレビュー機能のすべてのページに挿入する必要があります。

    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
    <script>cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });</script>


    ステップ2:Shoplive Playerをインストールする

    Shoplive PlayerをWebページにインストールするには、setPlayerで実行する ライブ配信を選択し、Shoplive Playerの位置とレイアウトを設定します。最後に、コンテナレイアウトのスタイルを指定します。

    基本的な例

    <style>
      #shoplive-player {
        max-width: 360px;
        height: 612px;
        margin: auto;
      }
    </style>
    <div id="shoplive-player"></div>
    <script defer>
      cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
    </script>

    全画面表示モードの例

    <div id="shoplive-player"></div>
    <script defer>
      var config = { campaignKey: "YOUR_CAMPAIGN_KEY", isFullScreen: true }
      cloud.shoplive.setPlayer("shoplive-player", config);
    </script>


    サンプルコード

    以下は、デスクトップとモバイルの両方のサイズをサポートするShopliveプレーヤーをインストールする方法の例です。

    <html>
      <head>
        <title>Shoplive - Simple player example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
        <script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
        <script>
          var messageCallback = {
            DOWNLOAD_COUPON: function(payload) {
              console.log('User clicks coupon. coupon code :  ' + payload.coupon);
            } 
          }
          cloud.shoplive.init({ accessKey: "YOUR_ACCESS_KEY", messageCallback: messageCallback });
        </script>
        <style>
          html,
          body {
            margin: 0;
            padding: 0;
            background-color: #333;
          }
          #shoplive-player {
            max-width: calc(100vh / 16 * 9 - 2px);
            margin: auto;
          }
          @media screen and (max-width: 480px) {
            #shoplive-player {
              max-width: 100%;
            }
          }
        </style>
      </head>
      <body>
        <div id="shoplive-player"></div>
        <script defer>
          cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
        </script>
      </body>
    </html>