SDKをつかってオリジナルページをつくる – ヘルプセンター

Build Your Own（BYO）体験（エクスペリエンス）を提供するために、完全オリジナルなフロントエンドを構築しましょう。ここでは、オリジナルなユーザーインターフェース（UI）を作成する手順を紹介します。

私たちはuneeq-js SDKを提供し、デジタルヒューマンの体験をあなたのウェブサイトやウェブアプリケーションに、あなたの基準に従ってインストールすることを可能にします。

SDKはそのウェブアプリケーションとプラットフォーム間の通信を容易にし、デジタルヒューマンの実装を完全に制御することができます。

⚠️

SDKを使用したデジタルヒューマン体験の構築にはWEBに関連する技術、WebRTCに関連する技術、音声認識、音声合成、会話AIなど、さまざまな技術的な知識と開発が必要です。弊社ではホステッドエクペリエンスを使用することをおすすめしています。

アプリの例

ReactとNodeのフロントエンド・アプリケーションのサンプルをご覧ください。

次のビデオは、Reactのサンプルを使って起動する方法を示しています。

インストール

npmを使ってインストールするには

npm install uneeq-js

初期化

デジタルヒューマンとの会話を開始するには、オプションパラメータを指定してUneeqクラスの新しいインスタンスを作成する必要があります。

let uneeq = new Uneeq(options);
uneeq.initWithToken(token);

initWithToken()メソッドで使用するトークンは、チャットボットプラットフォームがアクセストークンを要求したときに受け取るものです。

参照：アクセストークン

オプションのパラメータは、デジタルヒューマンプラットフォームが会話を開始するために必要な情報をすべて伝えます。このパラメータには、以下のプロパティを含める必要があります。

プロパティ	説明	例
conversationId	会話を開始したいペルソナを識別する ID です。PersonaId は、カスタマーサクセスチームがこの ID を提供します。	48f0d553-f1ab-49c2-92d5-50328dad6041
url	ペルソナがプロビジョニングされているデジタルヒューマンプラットフォームのリージョンへのURLです。URL の一覧はこちらからご覧いただけます。	https://api.us.uneeq.io
avatarVideoContainerElement	デジタルヒューマン動画が提示されるHTML Div要素。	document.getElementById('remoteVideo')
localVideoContainerElement	ユーザーのローカルカメラが表示されるHTML Div要素。ユーザーのカメラを表示したくない場合は、ユーザーのカメラが表示されるHTML Div要素の値document.createElement('div')	document.getElementById('localVideo')
messageHandler	デジタルヒューマンプラットフォームからリアルタイムメッセージオブジェクトを処理するメソッド	fmMessageHandler (a javascript method you have defined)
playWelcome	ウェルカムメッセージを再生します。オプションのブール値。デフォルトはfalseです。	false
sendLocalVideo	セッション開始時にユーザのローカルビデオストリーム（カメラ）を送信するかどうかを定義します。Boolean型。trueの場合、ユーザーは自分のデバイスの使用を許可する必要があります。デフォルト値はtrueです。	true
sendLocalAudio	セッション開始時にユーザーのローカルオーディオストリーム（マイク）を送信するかどうかを定義します。trueの場合、ユーザーは自分のデバイスの使用を許可する必要があります。Boolean型。デフォルト値は true です。	true

const options = {
    url: 'https: //api.us.uneeq.io',
    conversationId: 'YourPersonaId',
    avatarVideoContainerElement: document.getElementById('your-div-element'),
    localVideoContainerElement: document.getElementById('your-div-element'),
    messageHandler: (msg) => messageHandler(msg),
    playWelcome: false,
    sendLocalVideo: false,
    sendLocalAudio: true
};

リージョンURL

デジタルヒューマンセッションを初期化する際には、デジタルヒューマンがプロビジョニングされている URL を指定する必要があります。通常はNorth Americaに格納されます。

ご自身のデジタルヒューマンがプロビジョニングされている地域がわからない場合は、カスタマーサクセス・チームにお問い合わせください。

Region	URL
North America	https://api.us.uneeq.io
Europe	https://api.eu.uneeq.io
~~Asia~~	~~https://api.sg.uneeq.io~~
Oceania	https://api.au.uneeq.io
Japan	現在準備中です。デジタルヒューマン株式会社までお問い合わせください。

音声送信

JavaScript SDKを使用すると、顧客は「プッシュトゥトーク」対話モードを使用してデジタルヒューマンと話すことができます。

これは、ユーザーがデジタルヒューマンに話しかける間キーボードを押し続けることを意味します。

これを有効にするには、録音の最初と最後に、startRecording()メソッドとtopRecording()メソッドを呼び出す必要があります。

以下の例では、ユーザーがスペースバーを使用して話すことができます。

window.onkeydown = (e) => {
    if( e.code === 'Space' && !e.repeat ) {
        uneeq.startRecording();
    }
};
window.onkeyup = (e) => {
    if( e.code === 'Space' && !e.repeat ) {
        uneeq.stopRecording();
    }
};

会話のイベント

JavaScript SDKを使用すると、現在の会話に関するプラットフォームからのメッセージを購読する(subscribe)ことができます。

これらのメッセージを購読(subscribe)するには、Uneeqクラスをインスタンス化するときに、メソッド参照をパラメーターとして渡す必要があります。

let fmMessageHandler = (msg) => {
    console.log('Uneeq Message: ', msg);
   if( msg.uneeqMessageType === 'Ready' ) {
        //The Digital Human is setup and streaming to the end user
    } else if ( msg.uneeqMessageType === 'AvatarQuestionText' ) {
        //Question asked of the Digital Human
    } else if ( msg.uneeqMessageType === 'AvatarAnswer' ) {
        //Response to the question, including meta data.
    }
};

メッセージの特定のペイロードは、SDKリファレンスドキュメントで定義されています。

サポートブラウザ

本SDKは、Windows 10とMacOS（High Sierra以降）でのChrome、MacOSでのSafariをサポートしています。また、Android（6.0以上）ではChrome、iOS（11以上）ではSafariをモバイルブラウザとしてサポートしています。特に明記されていない限り、SDKは最新バージョンのOSで実行されている最新バージョンのブラウザをサポートしています。

エラーハンドリング

デジタルヒューマンとのセッション中にエラーが発生した場合、SessionErrorMessage(error: string)を受け取ることができます。これらのエラーは常に致命的なものではなく、ネットワーク接続が断続的であるなどの一時的なエラーである可能性もあります。しかし、これらのセッションエラーメッセージを監視し、致命的なエラーがないかどうかを確認することは重要です。以下のエラーメッセージは致命的なものです。