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

      基本的な実装方法

        • 印刷する
        記事の要約

        このページでは、次の機能を提供するShoplive Pluginのインストール方法を説明します。

        • Shoplive Pluginは、配信予定のライブ配信、進行中のライブ配信および過去のライブ配信をまとめて表示します。(配信設定で「APIプラグイン」公開オプションを有効にする必要があります。）

        • 進行中のライブ配信がある場合、Shoplive Pluginに含まれたWebページを除いて、他のすべてのWebサイトの右下隅に進行中のライブ配信のプレビューを表示します。

        ステップ1:プラグイン初期化

        ここからは、Shoplive Pluginをユーザー認証なし / 簡易認証 / JWTトークン認証で初期化する例をそれぞれ紹介します。

        Webページの共通レイアウト(head領域など)に希望する方式の初期化コードをインストールします。

        共通レイアウトで初期化する必要があります

        進行中のライブ配信をプレビュー形式で表示するライブミニプレビュー機能を有効にするには、次のコードをWebサイト内の全ページに挿入する必要があります。

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

<!-- OR -->

//簡易認証
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
</script>

<!-- OR -->

//JWTトークン認証
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserJWT("USER_JWT");
</script>

        ステップ2:プレイヤー、リストの表示

        Shoplive Plugin Overallが設置される新しいWebページを作ったり、既存のWebページを選択した後に、次のコードを使用してShoplive PluginテンプレートをWeb ページにインストールします。

        <div id="shoplive-overall-area"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall-area');</script>

        基本的な実装サンプル

        ステップ1，2を合わせたコードのサンプルです。

        <html>
  <head>
    <title>Shoplive - Simple Shoplive Plugin 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>cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });</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-overall-area"></div>
		<script defer>cloud.shoplive.setOverall('shoplive-overall-area');</script>
  </body>
</html>

        What's Next