Guides

展示モジュール使用方法

Suggest Edits

モジュール化方式

STEP 1. ページ内に適用したい位置に、以下のタグを追加します。id 属性には任意の値を指定してください。

複数の要素に適用する場合、不重複な id を指定して複数のタグを追加します。

<div id="{{任意のタグID}}"></div>

STEP 2. モジュールを初期化します。

📘

パートナーIDは アカウント情報取得APIで確認したIDを指定してください。

<script>
  window.SauceClipCollectionLib.setInit({ partnerId: "mobidoo" });
</script>

STEP 3. オプション設定 (選択形)

STEP 3は選択項目です。実行しない場合、デフォルト設定が適用されます。

選択可能なオプションは以下のとおりです：

  • プレーヤー開啓方式の設定
  • 展示要素のinlineスタイル設定

STEP 3-1. プレーヤー開啓方式の設定

キュレーション内のクリップをクリックした際の、プレーヤー開啓方式を選択できます。

  • リダイレクト（デフォルト）
<script>
  window.SauceClipCollectionLib.setClipPlayerOpenType('redirect');
</script>
  • 新規ウィンドウ
<script>
  window.SauceClipCollectionLib.setClipPlayerOpenType('new-window');
</script>
  • モーダル表示
<script>
  window.SauceClipCollectionLib.setClipPlayerOpenType('modal');
</script>

STEP 3-2. 最大幅の設定

ページの最大幅を指定できます。

  • 1200px (デフォルト)
<script>
  window.SauceClipCollectionLib.setMaxWidth(1200);
</script>
  • 1280px
<script>
  window.SauceClipCollectionLib.setMaxWidth(1280);
</script>
  • 新規ウィンドウで開く場合

STEP 3-3. 展示要素のinlineスタイル設定

特定の要素にCSS inlineスタイルを追加できます。

  • キュレーションナビゲーションコンテナ要素のinlineスタイル
<script>
  SauceClipCollectionLib.setCurationNavigationContainerStyle("{{inlineスタイル文字列}}"); // ex) '{"zIndex": 10}'
</script>
  • キュレーションスクロールボタン要素のinlineスタイル
<script>
  SauceClipCollectionLib.setCurationNavigationScrollButtonStyle("{{inlineスタイル文字列}}"); // ex) '{"zIndex": 100}'
</script>
  • クリップのメディア要素のinlineスタイル
<script>
  SauceClipCollectionLib.setCurationClipMediaStyle("{{inlineスタイル文字列}}"); // ex) '{"zIndex": 90}' 
</script>
  • 横形キュレーションのコンテンツ要素のinlineスタイル
<script>
  SauceClipCollectionLib.setCurationHorizontalContentsStyle("{{inlineスタイル文字列}}"); // ex) '{"padding": "0 16px"}' 
</script>

STEP 4. STEP1で追加したタグに、全体ページやキュレーションがレンダリングされるよう関数を実行します。

複数のページやキュレーションをレンダリングする場合は、関数を複数回実行してください。

STEP 4-1. 全体ページのレンダリング

次のように関数を実行します。
関数のelementIdの値には、STEP1で追加したタグのid属性値を指定します。

<script>
  window.SauceClipCollectionLib.load({ elementId: "{{任意のタグID}}" });
</script>

STEP 4-2. キュレーションのレンダリング

次のように関数を実行します。
関数の curationId パラメーターには、登録されたキュレーションIDの値を指定します。
関数の elementId パラメーターには、STEP 1 で追加した任意の位置にあるタグの id 属性値を指定します。

<script>
  window.SauceClipCollectionLib.loadCuration({ curationId: "{{任意のキュレーションID}}", elementId: "{{任意のタグID}}" });
</script>

STEP5. ページ上で適用状態を確認します。

📘

  • 登録されたキュレーションがない場合、空白の画面が表示されます。
  • キュレーション内に公開状態のクリップがない場合にも空白画面が表示されます。

Updated 21 days ago