APIによるコンテンツの操作

親ページの JavaScript でXRコンテンツを制御する

window.postMessage()

Script Boardで設定済みの Caseを自由に呼び出せます。
親ページの JavaScript で window.postMessage() を使い、XRコンテンツに Case ID を送るだけです。

Case の呼び出し

xrsApi[0].postMessage({act: 'case', id: [任意のCaseID]}, '*');
//act: 'case'などは固定です。[任意のケースID]の部分だけ入れ替えてください。
//xrsApi[0]<-一つ目のXRコンテンツを意味します。
//複数のXRコンテンツを配置している場合は、二つ目が[1]、三つ目が[2]となっていきます。

以下にコード例を記します。
Example Code はボタンの押下で Caseを呼び出すだけですが、通常は任意のタイミング、任意のアクションを受けて呼び出しを行います。親ページの JavaScript 次第で自由自在な表現を行えます。
Case の呼び出しにより多彩な表現が生まれます。こちらの API Examples をご覧ください。

Example Code

<!DOCTYPE html>
<html>
     <head>
         <title>Example API</title>
         <script src="https://web-xr.studio/jp/api"></script>
     </head>
     <body>
         <div style="width: 300px; height: 300px">
             <div class="xrstudio" data-id="あなたのxrID"></div>
         </div>
         <button id="button">ボタン</button>
         <script type="text/javascript">
             window.onload = function() {
                 var button = document.getElementById('button');

                 button.addEventListener('click', () => {
                     // この一行を任意のタイミングで発動させる。
                     xrsApi[0].postMessage({act: 'case', id: 1}, '*');
                 });
             };
         </script>
     </body>
</html>