ChatUXでボタンに色付け
FAQのボットを作成しています。
今回ご提供している先から、ボタンに色を付けたいとの相談が来ました。
今回「前に戻る」とかアンケートの機能をつけたのですが、そのボタンを色を変えたいとのことからの要望です。
目次
ChatUXって？
ChatUXって、チャットボットに必要なボタンの表示やらテキストの入力やらのUIのパーツを提供してくれています。
サンプルは参考はこちらから。。
ChatUX自体はこちらから。
アイコンやら、タイトルやらのカスタマイズはできるんですが、ボタンのカスタマイズができないことに、以前からなんとかしたいなぁとは思っていました。
今回、ご相談を受け、コレ幸いにと対応してみることにしました(^^)
さて、始まり始まり。。
今回ボタンのグループを３つに分けています。
１つめ：普通の表示は黒のまま
２つめ：「前に戻る」「最初に戻る」の表示は赤文字にする
３つめ：「☆」「☆☆」「☆☆☆」のアンケートの表示は緑文字にする
このため、このボタンはどのグループかをChatUXにわたす必要があります。
ChatUXには、渡されたグループに基づいて文字の色を変更する機能を追加する必要があります。
今回は、そのあたりについて記載します。
「前に戻る」とかの機能の拡張については、またいつか(^^)
方針
ChatUX自体は、ウィンドウ関連はjFrame、ボタンとかの表示はBotuiを利用しています。
今回は表示の方法を変更するのでBotuiに手をいれることになります。
もちろん、それを呼び出すChatUX自体にも手を入れます。
ただ、ここでどうしたものかと思ったのが、Botuiはのnode_moduleの中に存在するものです。
それに改造するとしても、一般に提供するようなものでもないんで、プルリクするほどのものでもなし。
今後保守をどうしていったもんかなと。。
とりあえずは、パッチを作成しておこうかとは思っています。
それと、ChatUXはgithubからダウンロードして、編集後、webpackして使用します。
改修部分の説明
■クライアント側
最終的にはｗebpackします。
１）node_modules/botui/build/botui.js
if (eachProperty !== ‘type’ && eachProperty !== ‘text’ && eachProperty !== ‘value’) {
→
if (eachProperty !== ‘type’ && eachProperty !== ‘text’ && eachProperty !== ‘value’ && eachProperty !== ‘mode’) {
・templateを編集します。
gulpで編集されるので結合されています。
わかりやすいように、開業して整理していったんですが、実行時にエラーとなりました。
いったん、ばらして、再度結合するという作業をしていました。
<i v-if=\”button.icon\” class=\”botui-icon botui-action-button-icon fa\” :class=\”\’fa-\’ + button.icon\”></i>{{button.text}}
→
<i v-if=\”button.icon\” class=\”botui-icon botui-action-button-icon fa\” :class=\”\’fa-\’ + button.icon\”></i>
<span v-if=\”button.mode == \’non\’\” > {{button.text}} </span>
<span v-if=\”button.mode == \’st\’\” class=\”btn_start\”> {{button.text}} </span>
<span v-if=\”button.mode == \’qa\’\” class=\”btn_qa\”> {{button.text}} </span>
※”btn_start”, “btn_qa”で色を設定しています。
スタイルシートで指定してください。
２）src/chat-ui.js
const text = opt.value;
const mode = opt.mode; ←追加
optActions.push({text: label, value: text, mode : mode}); ←modeを追加
■サーバー側
１）chat.js
サーバー側でchat関連を一手に操作しています。
ここでの操作は、ボタンの定義にボタンのグループを表す項目として”mode”を追加しました。
例）
opts.push({ label: _rec.bot_qa_msg01, value: _rec.bot_qa_msg01, mode: “qa” });
“non” : 通常に表示するボタン名称を示します→黒で表示します。
”qa” : アンケートで表示するボタン名称を示します→赤で表示します。
“st” : 前に戻る、トップに戻るボタン名称を示します→緑で表示します。
※stやqaのときの表示職はスタイルシートで設定できます。
２）index.html
ボタンの色を定義します。
利用の状況に合わせてください。
<style>
.btn_qa {
color : red;
}
.btn_start {
color : green;
}
</style>
終わりに。。
templateでボタン描画のクラスを変えることをすれば背景を変えることもできるのですが、今回は文字のみとしています。
あとは、botuiをいじってしまってるんで、差分の管理を意識していく必要があります。
自分とこ用なので、プルリク出すのもなぁな感じです。
