開発チームが連携を適用する際に参照するガイドです。管理画面の運用には必要ありません。

Shortform の Playlist を直接構成できる機能を提供します。

• Shortform 一覧の順序を自由に構成し、その順序で再生できます
• Shortform の再生中でも playlist に項目を追加できます
• Shortform playlist の最後に達したら新しいリストを追加できるよう、MessageCallback を提供します

好きな順序で Shortform が再生されるプレーヤーを起動

Shortform API で取得した shortformId で playlist を構成し、順番に再生します。

Parameters

// Shortform ID で playlist を構成
var ids = ["ID1", "ID2", "ID3", "ID4", "ID5"];
// 再生を始める startIndex を設定
var startIndex = 2;
cloud.shoplive.showShortformPlayerModal( { ids:ids, startIndex:startIndex } );

再生するショートフォームの一覧をフィードに追加

Parameters

var ids= ["ID6", "ID7", "ID8"];  
cloud.shoplive.shortformPlayerAppendList( { ids:ids } );

Playlist の最後に達したときの MessageCallback

MessageCallback のイベント名: NEEDS_SHORTFORM_LIST_MORE

Payload

var messageCallback = {
  NEEDS_SHORTFORM_LIST_MORE : function(payload) {
    console.log("ショートフォームプレーヤーで最後のショートフォームに到達");
    console.log("現在のプレーヤーのフィードの全一覧: ", payload.shortsList)
    console.log("現在表示しているショートフォームの index: ", payload.index)

    // 現在表示しているフィードに一覧を追加する。
    var ids= ["ID6", "ID7", "ID8"];
    cloud.shoplive.shortformPlayerAppendList( { ids } ); 
  },
}
cloud.shoplive.initShortform( { accessKey: "ACCESS_KEY",  messageCallback: messageCallback } );

サンプルコード

Shortform API を使うローカルサービスで shortformId を読み込んで再生し、一覧をすべて再生したら追加の shortformId を append する例

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>

<div id="shoplive-shortform"></div>

<script>
  const ACCESS_KEY = "<YOUR_ACCESS_KEY>";
  let startIndex = 0;

  //一覧の最後の Shortform に達したときに実行するコールバックを定義
  let messageCallback = {
    NEEDS_SHORTFORM_LIST_MORE: async function (payload) {
      console.log("ショートフォームプレーヤーで最後のショートフォームに到達");

      //新しい shortformId を取得して shortform の再生リストに append
      const ids = await getShortformId();
      cloud.shoplive.shortformPlayerAppendList({ ids });
    },
  };

  //Shortform の init()
  cloud.shoplive.initShortform({
    accessKey: ACCESS_KEY,
    messageCallback: messageCallback,
  });

  //Shortform API を使う内部サービスから ShortformId を取得する。
  const getShortformId = (function () {
    let page = 1;
    return function () {
      return fetch(`<API_SERVICE_ADDRESS>?page=${page}`)
        .then((response) => response.json())
        .then((data) => {
          const shortformIds = data.map((e) => String(e.shortformId));
         
        	// 次の呼び出しで使う page を増やす。
          page++;

          return shortformIds;
        });
    };
  })();

  //ids を取得した後、startIndex 番目の Shortform から再生する。
  async function showPlayer() {
    const ids = await getShortformId();
    cloud.shoplive.showShortformPlayerModal({ ids: ids, startIndex: startIndex });
  }

</script>