サンプル例 #1

API Example

AIチャットのアバター風味なAPIリクエスト


	発言

Example Code

<head>
    <script src="https://web-xr.studio/jp/api"></script>
</head>
<body>
    <!-- XRコンテンツ -->
    <div class="xr-studio" data-id="{xrID}" data-option="noConfig, onlyPageFull"></div>
    <!-- メッセージ部 : xrs-wide クラスにはページフル時に xrs-wide--on というモデファイアが付加される　-->
    <div id="message" class="ai-msg xrs-wide"></div>
    <!-- インプット部 : xrs-wide クラスにはページフル時に xrs-wide--on というモデファイアが付加される -->
    <div class="ai-input xrs-wide">
        <input id="input" type="text" placeholder="message..." >
        <div id="button">発言</div>
    </div>
</body>

<script>
    const $say = document.getElementById('button');
    const $msg = document.getElementById('message');
    const $input = document.getElementById('input');
    const _words = ['お辞儀', 'お手上げ', 'はい', 'いいえ'];
    const _you = 'you';
    const _msg = [
        `こんにちは<br>
        Web-XR Studio によるXRコンテンツは、あなたのページに自由に埋め込め、
        APIを介してXRコンテンツを自由に動かすこともできるんです。`,
        '下の入力フォームに「お辞儀」と入力して発言してみてください',
        'ふざけないでください。',
        `親ページからJavaScriptで、ほど良きタイミングでAPIにリクエストを送るだけで
        XRコンテンツを連動できるわけです。<br>
        とても簡単ですね。`,
        `「お辞儀」「お手上げ」「はい」「いいえ」<br>
        この例ではこれらの単語に反応しますので、いくつかお試しください。`
    ];

    setTimeout(() => {
        $msg.innerHTML += <div>${_msg[0]}</div>`;
        setTimeout(() => $msg.innerHTML += <div>${_msg[1]}</div>`, 3000);
    }, 2000);

    const doReply = () => {
        let _id, i;
        if ($input.value.length <= 0) return;
        $msg.innerHTML += `<div>${_you}: ${$input.value}</div>`;
        if (_words.indexOf($input.value) != -1) {
            for (i = 0; i < _words.length; i++) {
                if ($input.value == _words[i]) _id = i + 1;
            }
            xrsApi[0].postMessage({act: 'case', id: _id}, '*');
            $msg.innerHTML += `<div>${_msg[3]}</div>`;
            setTimeout(() => {
                $msg.innerHTML += `<div>${_msg[4]}</div>`
                $msg.scrollTop = $msg.scrollHeight;
            }, 3000);
        } else {
            xrsApi[0].postMessage({act: 'case', id: 4}, '*');
            $msg.innerHTML += `<div>${_msg[2]}</div>`;
        }
        $input.value = '';
        $msg.scrollTop = $msg.scrollHeight;
    };

    $say.addEventListener('click', () => doReply());
    document.addEventListener('keydown', (e) => {if (e.keyCode == 13) doReply()});
</script>


<style>
    // ページフル時に xrs-wide クラスがあるタグに xrs-wide--on が追加される。
    // ai-msg と同階層にあるため、ドットがつながる記述になっている点にも注意
    //
    // xrs-wide　-> xrs-wide--on : ページフル時に全て適応
    // xrs-wide-# -> xrs-wide-#--on : 複数のXRコンテンツを設置した場合、#を付番に変えて個別対応
    .ai-msg.xrs-wide--on {
        position: fixed;
        z-index: 10000;
        bottom: 10%;
        right: 3%;
        width: 40%;
        background: rgba(255,255,255,.7);
        border-radius: 5px;
        padding: 8px;
    }

    .ai-input.xrs-wide--on {
        position: fixed;
        z-index: 10000;
        bottom: 3%;
        width: 40%;
        right: 3%;
    }
</style>