近年、ChatGPTやその他の大規模言語モデル(LLM)を活用したチャットボットが急速に普及しています。これに伴い、チャット形式のユーザーインターフェース(UI)やユーザーエクスペリエンス(UX)にも注目が集まっています。典型的なチャットUIは、左右に交互に表示されるメッセージ(吹き出し)で構成されます。このようなUIを簡単に実装できるライブラリ、「chat-bubble」を紹介します。
chat-bubbleとは?
chat-bubbleは、WebアプリケーションにチャットUIを簡単に追加できるJavaScriptライブラリです。事前に定義したシナリオに基づいて対話を進行させることができ、ユーザーの選択や入力に応じて柔軟に会話を展開できます。
chat-bubbleのインストール方法
chat-bubbleは、様々な開発環境に対応しています。今回は、直接ファイルをダウンロードして使用する方法を説明します。
- GitHubからZipファイルをダウンロードします。GithubのURLは、こちらです。(https://github.com/dmitrizzle/chat-bubble)
- ダウンロードしたZipファイルを解凍し、componentフォルダをchat-bubbleフォルダとして名前を変更して、プロジェクトの適切な場所にコピーします。
以下のような構成でファイルを配置します:
your-project/
├── chat-bubble/
│ ├── styles/
│ │ ├── setup.css
│ │ ├── says.css
│ │ ├── reply.css
│ │ ├── typing.css
│ │ └── input.css
│ └── Bubbles.js
└── index.html
- HTMLファイル(例:
index.html
)で、これらのファイルを読み込みます:
<!-- chat-bubble CSS files -->
<link rel="stylesheet" media="all" href="chat-bubble/styles/setup.css">
<link rel="stylesheet" media="all" href="chat-bubble/styles/says.css">
<link rel="stylesheet" media="all" href="chat-bubble/styles/reply.css">
<link rel="stylesheet" media="all" href="chat-bubble/styles/typing.css">
<link rel="stylesheet" media="all" href="chat-bubble/styles/input.css">
<!-- chat-bubble JavaScript file -->
<script src="chat-bubble/Bubbles.js"></script>
これで、chat-bubbleを使用する準備が整いました。
chat-bubbleの基本的な使い方
chat-bubbleを使用するには、まずチャットウィンドウを初期化します:
const chatWindow = new Bubbles(
document.getElementById("chat"),
"chatWindow",
options // オプション設定(後述)
);
オプションの設定
options
オブジェクトでは、チャットの動作やスタイルをカスタマイズできます。主なオプションには以下があります:
animationTime
: チャットバブルのアニメーション時間(デフォルト: 200ms)typeSpeed
: タイピング効果の速度(デフォルト: 5)widerBy
: バブルの余白幅(デフォルト: 2)sidePadding
: 吹き出しの左右パディング(デフォルト: 6)recallInteractions
: 履歴として保持するインタラクション数(デフォルト: 0)inputCallbackFn
: ユーザー入力時のコールバック関数responseCallbackFn
: ユーザーが選択肢をクリックした時のコールバック関数
チャットシナリオの作成と実行
チャットを開始するには、talk
メソッドを使用します。このメソッドには、会話のシナリオを定義したオブジェクトを渡します。
基本的な会話の例:
chatWindow.talk({
ice: {
says: ["こんにちは", "あなたは人ですか?"],
}
});
このコードは、chat-bubbleの基本的な機能を示しています。
chatWindow.talk()
メソッドは対話を開始し進行させる中心的な役割を果たします。メソッドに渡されるオブジェクトが対話のシナリオを定義します。
ice
キーワードは「アイスブレーカー」の略で、会話の開始点を示します。says
プロパティ内の配列には、チャットボットが順番に表示するメッセージが含まれています。
このコードを実行すると、チャットウィンドウが開き、"こんにちは" というメッセージが表示され、続いて "あなたは人ですか?" というメッセージが現れます。
この例ではユーザーの応答オプションは提供されていないため、メッセージ表示後にチャットは一時停止します。より対話的な体験を作るには、reply
プロパティを使用してユーザーの応答オプションを追加する必要があります。
選択肢を提示する例:
この例では、ユーザーに性別を尋ね、選択に応じて異なる応答を返します。また、会話を最初からやり直すオプションも提供しています。
chatWindow.talk({
ice: {
says: ["こんにちは", "あなたは男性ですか、女性ですか?"],
reply: [
{
question: "男性",
answer: "man",
},
{
question: "女性",
answer: "woman",
}
]
},
man: {
says: ["あなたは男性ですね"],
reply: [
{
question: "もう一度試しますか?",
answer: "ice",
}
]
},
woman: {
says: ["あなたは女性ですね"],
reply: [
{
question: "もう一度試しますか?",
answer: "ice",
}
]
}
});
まず、chatWindow.talk()
メソッドが呼び出され、複数の対話シナリオを含むオブジェクトが渡されています。このオブジェクトは、チャットボットの応答と、ユーザーに提示される選択肢を定義しています。
会話は 'ice' (アイスブレーカー)セクションから始まります。
チャットボットは "こんにちは" と挨拶し、続いて "あなたは男性ですか、女性ですか?" と質問します。この質問に対して、ユーザーには "男性" と "女性" という2つの選択肢が提示されます。
ユーザーが "男性" を選択した場合、対話は 'man' セクションに移ります。ここでチャットボットは "あなたは男性ですね" と応答し、その後 "もう一度試しますか?" という新たな選択肢を提示します。
同様に、ユーザーが "女性" を選択した場合は、'woman' セクションに移り、"あなたは女性ですね" という応答が表示されます。ここでも "もう一度試しますか?" という選択肢が提示されます。
どちらの場合も、"もう一度試しますか?" という質問に対する回答として 'ice' が設定されています。これは、ユーザーが "はい" を選択した場合、対話が最初の 'ice' セクションに戻ることを意味します。
このコードは、chat-bubbleを使用して分岐のある対話フローを作成する方法を示しています。ユーザーの選択に応じて異なる応答を返し、さらに対話を継続するオプションも提供しています。
高度な機能
キーボード入力の処理
ユーザーからのテキスト入力を受け付けるには、inputCallbackFn
オプションを使用します:
const chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow", {
inputCallbackFn: (o) => {
console.log(o.input); // ユーザーの入力内容
// ここで入力内容に応じた処理を行う
}
});
特定の関数の実行
選択肢の answer
に関数名を指定することで、特定のアクションを実行できます:
const convo = {
ice: {
says: ["どの果物が好きですか?"],
reply: [
{
question: "バナナ",
answer: "bananaFunction",
},
]
}
};
const bananaFunction = function () {
alert("バナナが好きなんですね!");
chatWindow.talk(convo, "ice");
};
まず、convo
オブジェクトが定義されています。これは対話のシナリオを表現しています。ice
セクションでは、チャットボットが "どの果物が好きですか?" という質問を投げかけます。
この質問に対する回答オプションとして、"バナナ" が提供されています。この選択肢の answer
プロパティに "bananaFunction" が指定されていることです。これは、ユーザーが "バナナ" を選択した際に実行される関数の名前を示しています。
次に、bananaFunction
が定義されています。この関数は以下の2つの動作を行います:
- "バナナが好きなんですね!" というメッセージをアラートとして表示します。
chatWindow.talk(convo, "ice")
を呼び出し、対話をconvo
オブジェクトのice
セクションに戻します。
このコードの特徴は、ユーザーの選択に応じてJavaScript関数を直接実行できる点です。これにより、単純なテキスト応答以上の柔軟な対応が可能になります。例えば、データベースへの保存、APIの呼び出し、複雑な計算の実行など、様々な操作を行うことができます。
また、対話を最初のセクション(この場合は ice
)に戻すことで、ループする対話フローを作成しています。これにより、ユーザーは何度でも果物の好みを選択し直すことができます。
マルチメディアコンテンツの表示
chat-bubbleは、テキスト以外にも画像やその他のHTML要素を表示することができます。これにより、より豊かで対話的なチャット体験を提供できます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2024/07/video-1.mov-1.gif?w=1118&ssl=1)
chat-bubbleの活用シーン
chat-bubbleは、事前に定義されたシナリオに基づいて対話を進める形式のため、以下のようなシーンで特に効果的です:
- カスタマーサポート: よくある質問への自動応答
- 製品案内: 顧客の興味に応じて製品情報を段階的に提示
- 予約システム: レストランや美容院などの予約プロセスをガイド
- オンボーディング: 新規ユーザーに対するサービス説明や初期設定の案内
- 教育コンテンツ: インタラクティブな学習教材の提供
まとめ
chat-bubbleは、アプリケーションにチャットUIを簡単に実装できる強力なツールです。事前に設計されたシナリオに基づいて対話を進行させる特性は、多くのビジネスシーンで活用できます。
ただし、効果的に使用するためには、綿密なシナリオ設計が重要です。ユーザーのニーズを予測し、適切な選択肢や情報を提供できるよう、慎重に会話フローを設計することが成功の鍵となります。
chat-bubbleを活用することで、ユーザーフレンドリーなインターフェースを持つアプリケーションを素早く開発できます。ぜひ、あなたのプロジェクトでも試してみてください。