Vanilla JS 全体例
以下のコードを index.html として保存し、{VERSION}、YOUR_SDK_KEY、YOUR_AVATAR_ID を実際の値に置き換えてブラウザで開いてください。SDK の状態変更やイベントはブラウザの開発者コンソールで確認できます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Klleon Chat SDK - Vanilla JS 最小例</title>
<!-- TODO: {VERSION} を実際の SDK バージョンに変更してください（例: 1.2.0） -->
<script src="https://web.sdk.klleon.io/{VERSION}/klleon-chat.umd.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: flex;
width: 900px;
max-width: 100%;
height: 600px;
gap: 20px;
margin-top: 20px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.avatar-section {
flex: 2;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.chat-controls-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
avatar-container {
width: 100%;
height: 100%;
background-color: #e0e0e0;
}
chat-container {
height: 400px;
border: 1px solid #ddd;
border-radius: 8px;
overflow-y: auto;
padding: 10px;
background-color: #fff;
}
.input-group {
display: flex;
margin-bottom: 10px;
}
.input-group label {
margin-right: 5px;
align-self: center;
width: 40px;
}
.input-group input[type="text"] {
flex-grow: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
outline: none;
}
.input-group button {
padding: 8px 12px;
border: 1px solid #ccc;
border-left: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 0 4px 4px 0;
}
.input-group button:hover {
background-color: #0056b3;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Klleon Chat SDK - メソッドテスト</h1>
<div class="container">
<div class="avatar-section">
<avatar-container
volume="100"
videoStyle='{"borderRadius": "24px"}'
></avatar-container>
</div>
<div class="chat-controls-section">
<chat-container
delay="30"
type="text"
isShowCount="true"
></chat-container>
<div class="input-group">
<label for="messageInput">text:</label>
<input
type="text"
id="messageInput"
placeholder="送信するメッセージを入力..."
/>
<button id="sendMessageBtn">送信</button>
</div>
<div class="input-group">
<label for="echoInput">echo:</label>
<input
type="text"
id="echoInput"
placeholder="アバターが話す内容..."
/>
<button id="echoBtn">発話</button>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", async () => {
// TODO: 下記の YOUR_SDK_KEY と YOUR_AVATAR_ID を実際の値に置き換えてください。
const sdkKey = "YOUR_SDK_KEY";
const avatarId = "YOUR_AVATAR_ID";
const messageInput = document.getElementById("messageInput");
const sendMessageBtn = document.getElementById("sendMessageBtn");
const echoInput = document.getElementById("echoInput");
const echoBtn = document.getElementById("echoBtn");
if (!window.KlleonChat) {
console.error(
"Klleon Chat SDK が読み込まれていません。HTML の script タグを確認してください。"
);
return;
}
console.log("SDK のロード確認済み。初期化を試行します...");
try {
// イベントリスナーを先に登録
window.KlleonChat.onStatusEvent((status) => {
console.log(`SDK Status Event: ${status}`);
if (status === "VIDEO_CAN_PLAY") {
console.log(
"アバター映像の再生準備完了！SDK メソッドが利用可能です。"
);
}
});
window.KlleonChat.onChatEvent((chatData) => {
console.log(`SDK Chat Event: ${JSON.stringify(chatData)}`);
});
// SDK の初期化
await window.KlleonChat.init({
sdk_key: sdkKey,
avatar_id: avatarId,
log_level: "info",
});
console.log("SDK 初期化成功！");
sendMessageBtn.addEventListener("click", () => {
const message = messageInput.value.trim();
if (message) {
try {
window.KlleonChat.sendTextMessage(message);
console.log(`sendTextMessage 呼び出し: "${message}"`);
messageInput.value = "";
} catch (error) {
console.error(
`sendTextMessage エラー: ${error.message || error}`
);
}
}
});
echoBtn.addEventListener("click", () => {
const textToEcho = echoInput.value.trim();
if (textToEcho) {
try {
window.KlleonChat.echo(textToEcho);
console.log(`echo 呼び出し: "${textToEcho}"`);
echoInput.value = "";
} catch (error) {
console.error(`echo エラー: ${error.message || error}`);
}
}
});
} catch (error) {
console.error(
`SDK 初期化またはイベントリスナー設定エラー: ${
error.message || error
}`
);
}
window.addEventListener("beforeunload", () => {
if (
window.KlleonChat &&
typeof window.KlleonChat.destroy === "function"
) {
console.log("ページ離脱前に SDK リソースを解放します。");
window.KlleonChat.destroy();
}
});
});
</script>
</body>
</html>