どうも、まさとらん（@0310lan）です！
今回は、ブラウザ上で動作するPC・スマホ対応の「チャットボット」を、超簡単にJavaScriptでプログラミングできるライブラリのご紹介です！
Vue.jsとPromiseをベースにしたとても簡単な構造になっているのが特徴で、カスタマイズ性も高いので手軽に自分だけのボットを作って公開することが可能ですよ。
【 BotUI 】
■「BotUI」の使い方
それでは、まず最初に「BotUI」を使うための基本的な準備を簡単に済ませておきましょう！
「BotUI」はVue.jsをベースに作られているので、「vue.js」の本体ファイルと「BotUI」関連のファイル（JS / CSS）が必要になります。
「npm」や「Webpack」を使って導入しても良いですし、CDN経由で以下のファイルを読み込んでもOKです！
// メインのスタイルシート及びデフォルトテーマ https://unpkg.com/botui/build/botui.min.css https://unpkg.com/botui/build/botui-theme-default.css // Vue.jsのメインファイル https://cdn.jsdelivr.net/vue/latest/vue.min.js // BotUIのメインファイル https://unpkg.com/botui/build/botui.min.js
これらのファイルは、GitHubからダウンロードして利用することもできます。
そして、次のようなHTMLファイル（index.html）を作成しておきましょう！
<div class="botui-app-container" id="chat-app"> <!-- チャットの表示 --> <bot-ui></bot-ui> </div>
任意の「id名」を付与したdivタグ内に、「bot-uiタグ」を設置することでこれから作成するボットとの会話が表示されるようになります。
divタグのclass名は任意ですが、「botui-app-container」を付与するとチャットの会話が画面中央に配置されるので見やすいでしょう。
■「BotUI」の基本概念
「BotUI」を使ったプログラミングは、Promiseをベースにしたメソッドチェーンを繋げていくだけの非常にシンプルな構造になっているのが特徴です。
例えば、「ボット側」と「ユーザー側」の会話をプログラミングしようと思えば次のような感じになります。
ui.message.bot({ //ボット側の処理を書く }).then(function() { ui.message.human({ //ユーザー側の処理を書く }); }).then(function() { ui.message.bot({ //ボット側の処理を書く }); }
このように、両者の処理を「then」で繋いでいくだけで実現できるわけです。
これを踏まえれば、お互いが挨拶だけをするチャットプログラムも簡単に構築できます！
//インスタンスの作成 var ui = new BotUI('chat-app'); //ボット側のチャット処理 ui.message.bot({ //メッセージを表示する content: 'こんにちは、ボットです！' }).then(function() { //ユーザー側のチャット処理 ui.message.human({ content: 'こんにちは、ユーザーです！' }); });
「ui.message.bot()」のように、「message」を使うことで好きなテキストを表示することができます。
実行すると、こんな感じになります！
さらに、「message」ではなく「action」を使えば、「入力フォーム」や「ボタン」などのインタラクティブなコンテンツも扱えます。
//「入力フォーム」を表示する ui.action.text({ action: { placeholder: '名前を入力してください' } }).then(function() { //「ボタン」を表示する ui.action.button({ //「はい」「いいえ」のボタンを作成 action: [{ text: 'はい', value: true }, { text: 'いいえ', value: false }] }); });
「ui.action.text()」や「ui.action.button()」のように、直感的に理解しやすい構造になっているのが分かりますね。
「text」でボタンに表示する文字列を指定し、「value」で値を設定することで条件分岐などの処理を行えるようにしています。
実行すると、次のようなフォーム部品が生成されて表示されます。
このように、「BotUI」を使いこなすために重要なポイントは3つだけです！
それは、「message」「action」「then」の3つだけ。
- 「message」：テキスト（埋め込みコンテンツも含む）を表示する
- 「action」：入力フォームやボタンなどで、ユーザーからの入力を受け取る
- 「then」：チャットの処理を繋げていく
この3つの特徴を理解するだけで、「BotUI」は誰でも簡単に扱えるようになります！
■ぜひ活用したい便利技！
「BotUI」では、多彩なチャットアプリが作れるようにさまざまな便利機能が用意されています！
例えば、「GIPHY」や「YouTube」などが提供している埋め込みコンテンツを、チャットのメッセージに表示することが可能です。
先ほど利用した「message」に、「type: ‘embed’」を指定して埋め込み用のURLを記述すればOKです！（以下はYouTube動画を埋め込む例です）
ui.message.bot({ content: 'これはYouTubeの動画です！' }).then(function() { ui.message.bot({ //埋め込み用のYouTubeコンテンツを表示する type: 'embed', content: 'https://www.youtube.com/embed/9k0WIttNv7c' }); });
実行すると、こんな感じです！
もちろん、クリックすれば動画が再生されます。
また、FontAwesomeのアイコンを簡単に利用できる機能があり、例えばボタンにアイコンを追加するには次のようにします。
ui.action.button({ action: [{ icon: 'check', //FontAwesomeのアイコン名を指定 text: '了解', value: true }, { icon: 'cog', text: '設定', value: 'setting' }, { icon: 'search', text: '検索', value: 'search' }] });
このように、「icon: アイコン名」という指定をするだけで良いのは簡単で便利ですね。
こちらの実行結果は次のとおり！
さらに、GIFで「ローディング中」のアニメーションを表示することも可能です！
ui.message.bot({ content: '今は、ローディング中です…' }).then(function() { ui.message.bot({ loading: true //GIFアイコンを表示 }); });
「message」に、「loading: true」を指定するだけでGIFアイコンが以下のように表示されます！
外部のサーバーからデータを取得するなど、回答に少し時間が掛かりそうなケースで利用すると効果的でしょう。
他にも、入力フォームで「sub_type: ‘email’」のように設定することで、入力テキストのフォーマットを指定することが可能です。
また、「content」のテキストをマークダウン形式で記述できたり、「cssClass」を適用することで自由に見た目のデザインを変更できる機能も用意されているので便利です。
（公式マニュアル参照）
■GitHub APIを使ったサンプル例
それでは、これまで学んだことを踏まえて、簡単なチャットアプリのサンプルデモを作ってみましょう！
今回は、GitHubが提供しているAPIの「search」を利用して、入力されたキーワードに関連するリポジトリの総数を回答してくれるボットを作りたいと思います。
利用するエンドポイントは以下のとおり！
https://api.github.com/search/repositories?q=【キーワード】
例えば、キーワードを「javascript」にして実行すると、以下のようにJSON形式で結果が返ってくるのが分かります。
このデータの中にある「total_count」という項目が、キーワードに関連するリポジトリの総数になるので、これをボットが回答してくれるようにしてみましょう！
そこで、まずはユーザーから「キーワード」を入力してもらいたいので、入力フォームを表示するようにします。
ui.message.bot({ delay: 1500, content: '気になるキーワードで、GitHubの総リポジトリ数をお答えします！' }).then(function() { // キーワードの入力 // ★「return」を記述して入力待ち状態にする return ui.action.text({ delay: 1000, //メッセージの表示タイミングを1秒ずらす action: { placeholder: '例：javascript' } }); }).then(function(res) { //入力されたキーワードは「res」に格納される })
このように、これまで学んできた「message」「action」「then」の3種類を使えば簡単に構築できますね。
ユーザーが入力したキーワードは、そのあとに「then」で連結した「funcion(res){}」の「res」に格納されており「res.value」で取得できます。
注意点としては、「action」を使ってユーザーから入力を受け取る場合には「return」で情報を返す必要があるという点です。
このようにすることで、ユーザー入力が終わってから次の処理へ進むように命令することができるわけです。
キーワードを取得したら、あとは簡単です！
最初にご紹介した「GitHub API」と「キーワード」を組み合わせて、次のような通信処理を行います。
var url = 'https://api.github.com/search/repositories?q='; var xhr = new XMLHttpRequest(); //取得したキーワードでリポジトリを検索する xhr.open( 'GET', url + res.value ); xhr.onload = function() { var result = JSON.parse(xhr.responseText); //取得したリポジトリ総数は「result.total_count」で取得できる } xhr.send();
「url + res.value」の組み合わせで関連するリポジトリの総数を取得するようにして、返ってきた結果を「JSON.parse」でJSON形式に変換します。
このようにすると、JSONデータ内にある「total_count」からリポジトリ総数を取得できますね。
最後に、チャットを続けるかどうかのメッセージと「はい」「いいえ」のボタンを表示してみましょう！
ui.message.bot({ content: 'まだ続けますか？' }).then(function() { //「はい」「いいえ」のボタンを表示 // 「return」を記述して入力待ち状態にする return ui.action.button({ delay: 1000, //表示タイミングを1秒ずらす action: [{ icon: 'circle-thin', //FontAwesomeのアイコンを指定 text: 'はい', value: true }, { icon: 'close', text: 'いいえ', value: false }] }); }).then(function(res) { //「続ける」か「終了」するかの条件分岐処理 res.value ? 【継続処理】 : 【終了処理】; });
こちらも、先ほどの入力フォームと同じく「return」を記述することで、ユーザーがボタンをクリックするまで次の処理に進まないようにしています。
ちなみに、「delay」にミリ秒を設定することで、メッセージの表示タイミングを遅らせることができるので、活用すればチャットらしい会話を表現できますよ。
そして、最終的に次のようなチャットアプリが完成します！
こちらのサンプルデモは、以下のURLから実際にブラウザ上で試すことができます！
■JavaScript講座も公開中！動画でプログラミングが学べるレッスン
paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を公開しています。
今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、Python、Java、C言語、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください！
また、現在paizaラーニングではRailsの有料講座を期間限定で無料公開しているので、興味のある方はぜひごらんください。
無料公開の期間など、詳しくはこちら↓
paiza.hatenablog.com
■まとめ
今回は、JavaScriptでチャットアプリを簡単に構築できる「BotUI」の基本的な部分をご紹介しました！
他にも、チャット画面のオリジナルテーマを自作できる機能なども公式マニュアルで紹介されているので、オリジナリティを表現したい人には最適でしょう。
みなさんも、自分だけのチャットアプリを作ってぜひ公開してみてください！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
