前提条件

BotUIが動作可能なセッティングが完了しているものとします。
まだ何もしていなくてこれからという方は、こちらの記事をどうぞ
BotUI のバージョンは、0.3.4。

やってみる

テキストのみのボタンを表示する

まずはチャットウィンドウにテキストのみのボタンを表示させてみます。

botui.message.bot({
  content: 'どのスマートフォンが好きですか？'
}).then(function(){
  botui.action.button ({
    action: [{
      text: 'android',
      value: 'android'
    }, {
      text: 'iphone',
      value: 'iphone'
    }, {
      text: 'windows',
      value: 'windows'
    }]
  }).then(function(res){
    botui.message.bot({
      content: res.value
    });
  });
});

するとこんなふうに表示されます。
f:id:tacoyaky:20180505013604p:plain

ボタンにアイコンを表示する

ボタンにアイコンを表示するには、actionにicon:を指定します。

botui.message.bot({
  content: 'どのスマートフォンが好きですか？'
}).then(function(){
  botui.action.button ({
    action: [{
      icon: 'android',
      text: 'android',
      value: 'android'
    }, {
      icon: 'apple',
      text: 'iphone',
      value: 'iphone'
    }, {
      icon: 'windows'
      text: 'windows',
      value: 'windows'
    }]
  }).then(function(res){
    botui.message.bot({
      content: res.value
    });
  });
});

こんなふうに表示されます。
f:id:tacoyaky:20180505013610p:plain

さてここで、どのようなアイコンが使用可能なのかが気になります。 BotUIのドキュメントを見ると、BotUIではFontAwesomeを使用しているそうなので、FontAwesomeで提供されているたくさんのアイコンを使うことができます。

Memo:FontAwesomeとは？

FontAwesomeとは、Webでよく使われるアイコンをWebフォントにして提供してくれているものです。画像ではなくWebフォントなので、フォントサイズやカラー、アニメーションなどもCSSで指定することができます。
その数がとても多く、2780アイコンもあります！（2018/5/3現在）
Awesome（素晴らしい）!!

ちょっとした困り事

ボタン数が多く表示領域を超えた場合、キレイに表示されない。

~~こんな感じ~~

　　↓↓
【訂正追記】
※CDNのコードを利用すると上記のようになるのですが、GitHubにある最新コードをcloneしてきて利用すると修正されていて下画像のようにきれいに配置されるようになっていました（2018/6/1 時点）。
f:id:tacoyaky:20180702122103p:plain

ボタンにテキストを表示せずにアイコンだけにした（valueは設定している）場合、クリックされたボタンのvalueを取得できない。

botui.action.button ({
  action: [{
    icon: 'check',
    text: 'OK',
    value: 'ok'
  }]
}).then(function(res){
  botui.message.bot({
    content: res.value
  });
});

このコードだと、ボタンをクリックすると"ok"という値がresに格納されて、Bot側に表示されます。
しかし次のようにtextを指定しないでおくと、

botui.action.button ({
  action: [{
    icon: 'check',
//    text: 'OK',
    value: 'ok'
  }]
}).then(function(res){
  botui.message.bot({
    content: res.value
  });
});

ボタンをクリックしてもresに値が格納されず、"ok"が表示されません。。。なぜ!?

おいおい深掘りしていこうと思います。

たころぐ

興味の向くままに

BotUI でボタンにアイコンを表示したい