目次 x
    基本的な実装方法
      • 印刷する
      目次

      基本的な実装方法

        • 印刷する
        記事の要約

        このガイドでは、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>

        What's Next