展示使用例
サンプルコード
ステージ環境にて、サンプルページに展示するための例示コードです。
全体ページをレンダリングする方式
パートナーIDの入力が必要です。
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>[Stage] ソースクリップ展示：全体ページレンダリング方式デモ</title>
</head>
<body>
<header>
<section class="left">
<a href="https://sauce.im">
<img
alt="logo"
src="https://sauce.im/_next/image?url=%2Fimages%2Flogos%2Forange_logo.png&w=256&q=75"
width="120"
height="30"
decoding="async"
loading="lazy"
style="color:transparent"
/>
</a>
</section>
<section class="center"></section>
<section class="right">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</header>
<main>
<!-- STEP1. タグの追加 -->
<div id="sauce_clip_collection"></div>
</main>
<script>
/* 共通STEP. スクリプトの追加 */
const clipCollectionScriptEl = document.createElement("script");
clipCollectionScriptEl.setAttribute(
"src",
"https://stage.showcase.sauceclip.com/static/js/SauceClipCollectionLib.js"
);
clipCollectionScriptEl.setAttribute("async", "");
document.head.append(clipCollectionScriptEl);
clipCollectionScriptEl.addEventListener("load", () => {
/* STEP2. レンダリング関数の呼び出し */
window.SauceClipCollectionLib({ partnerId: 'mobidoo' });
});
</script>
</body>
<style>
html, body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
header {
display: flex;
justify-content: space-between;
padding: 32px;
border-bottom: 2px solid rgba(0, 0, 0, 0.20);
width: 100%;
height: 98px;
}
header .right ul {
list-style: none;
display: flex;
gap: 8px;
}
header .right ul li {
width: 60px;
height: 30px;
border-radius: 8px;
background-color: #e6e6e6;
}
main {
width: 100%;
}
</style>
</html>
モジュール化方式
- パートナーID の入力が必要です。
- キュレーションID の入力が必要です。
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>[Stage] ソースクリップ展示モジュール方式デモ</title>
</head>
<body>
<header>
<section class="left">
<a href="https://sauce.im">
<img
alt="logo"
src="https://sauce.im/_next/image?url=%2Fimages%2Flogos%2Forange_logo.png&w=256&q=75"
width="120"
height="30"
decoding="async"
loading="lazy"
style="color:transparent"
/>
</a>
</section>
<section class="center"></section>
<section class="right">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</header>
<main>
<!-- STEP1. タグの追加 -->
<div id="sauce_clip_collection"></div>
<div id="sauce_clip_curation_1"></div>
<div id="sauce_clip_curation_2"></div>
<div id="sauce_clip_curation_3"></div>
</main>
<script>
// 共通STEP. スクリプトの追加
const clipCollectionScriptEl = document.createElement("script");
clipCollectionScriptEl.setAttribute(
"src",
"https://stage.showcase.sauceclip.com/static/js/SauceClipCollectionLib.js"
);
clipCollectionScriptEl.setAttribute("async", "");
document.head.append(clipCollectionScriptEl);
clipCollectionScriptEl.addEventListener("load", () => {
/* STEP2. モジュールの初期化 */
window.SauceClipCollectionLib.setInit({ partnerId: "mobidoo" });
/* STEP3. オプション設定 */
/* STEP 3-1.プレーヤー実行方式の設定 */
var clipPlayerOpenType = 'redirect'; // リダイレクト
// var clipPlayerOpenType = 'new-window'; // 新規ウィンドウ
// var clipPlayerOpenType = 'modal'; // モーダル表示
window.SauceClipCollectionLib.setClipPlayerOpenType(clipPlayerOpenType);
/* STEP 3-2.展示要素の inline style 設定 */
/* キュレーションナビゲーションコンテナ要素の inline style 設定 - z-index を下げる */
SauceClipCollectionLib.setCurationNavigationContainerStyle('{"zIndex": 100}');
/* キュレーションナビゲーションスクロールボタン要素の inline style 設定 - z-index を下げる */
SauceClipCollectionLib.setCurationNavigationScrollButtonStyle('{"zIndex": 10}');
/* キュレーション内のクリップメディア要素の inline style 設定 - z-index を下げる*/
SauceClipCollectionLib.setCurationClipMediaStyle('{"zIndex": 90}');
/* 横型キュレーション内のコンテンツ要素の inline style 設定 - 左右に余白を追加する */
var paddingValue = "16px"; // 余白の値
window.SauceClipCollectionLib.setCurationHorizontalContentsStyle(`{"padding-left": "${paddingValue}", "padding-right": "${paddingValue}", "overflow-x": "hidden"}`);
/* STEP4. レンダリング関数の呼び出し */
/* STEP 4-全体ページのレンダリング */
window.SauceClipCollectionLib.load({ elementId: "sauce_clip_collection" });
/* STEP 4-キュレーションのレンダリング*/
window.SauceClipCollectionLib.loadCuration({ curationId: "000", elementId: "sauce_clip_curation_1" });
window.SauceClipCollectionLib.loadCuration({ curationId: "000", elementId: "sauce_clip_curation_2" });
window.SauceClipCollectionLib.loadCuration({ curationId: "000", elementId: "sauce_clip_curation_3" });
});
</script>
<script>
window.addEventListener("load", () => {
window.addEventListener(
"message",
function (e) {
// ブリッジの処理はこちらで行えます。
},
false
);
});
</script>
</body>
<style>
html, body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
header {
display: flex;
justify-content: space-between;
padding: 32px;
border-bottom: 2px solid rgba(0, 0, 0, 0.20);
width: 100%;
height: 98px;
}
header .right ul {
list-style: none;
display: flex;
gap: 8px;
}
header .right ul li {
width: 60px;
height: 30px;
border-radius: 8px;
background-color: #e6e6e6;
}
main {
width: 100%;
}
</style>
</html>
Updated 21 days ago