jQueryでWebブラウザで動くボットを作るTweetおはようございます、岡田です。APIとして扱う事ができる仕組みが用意されています。APIとjQueryを組み合わせれば、WebブラウザでBotと会話できる事はもちろん、Botに柔軟なUIを与えてあげる事ができそう。APIですので、HTTP通信さえできればプログラミング言語やデバイスを問わず、様々なシーンでBotを呼び出せるというメリットがあります。覚えといて損はありません。記事の最後には、すぐに試せるデモとサンプルコードもありますので、参考にしてみてください。Bots」を開きます。APIを使用したいBotをクリックして、Botの管理画面に進みます。LineのAddをクリックします。secret」のボタンをクリックし、Secretキーを発行します。Secretキーが発行されますので、こちらをコピーして保管しておきましょう。APIを使っていきましょう。APIには基本となる3つの動作があります。以上3つの操作で、Botとの対話をしていきます。順に解説していきます。APIでBotと対話をするためには、conversationIdというものを発行する必要があります。APIが、あなたとBotの会話ログを記録しておくためのIDで、このIDがないとBotと対話する事はできません。サーバにリクエストを送るのには、$.ajax()関数を使用します。YOUR_SECRET_KEY”を指定します。上記コードを実行すると、ブラウザのコンソールに以下のようなオブジェクトが返されます。"xkyR6XSfVQM.dAA.MgB5ADcAWQBSAGMAWgBBAHgANABmAA.O1R3HwvL0QE.-2L97p8XuRA.XpyptkBFriShOOg_ujewf9hD2kxi0rpwp-xClpwSIpI"}この中の「conversationId」は、Botとのメッセージとのやり取りをするために必要になってきます。ちなみにこのIDは、30分たつと自動で消去されるようになっていますので、30分ごとに作成する必要があります。Botにメッセージを送信するさて、いよいよBotにメッセージを送信します。"自己紹介して");上記コードでは、conversationIdと送信するメッセージを引数にとるsendMessageという関数を作成しました。先ほどと同様に、POSTメソッドでリクエストを送信します。}というデータを送ります。その他にも送信できるデータはありますが、詳しくは公式ドキュメントをご覧ください。fromを指定する事で、「同じユーザーからのメッセージですよ」という事をBotに伝えることができます。逆に、fromの指定がないと、「違うユーザーからのメッセージだ」とBotが勘違いして、Botとの受け答えや会話が正しく成立しなくなってしまうので注意。上記コードを実行して、メッセージ送信に成功すれば、「メッセージを送りました!」という文字がブラウザのコンソールに表示されるはずです。Botのメッセージを受信するさて、いよいよBotからのメッセージを取得します。上記コードでは、conversationIdとwatermarkを引数にとる、getMessageという関数を作成しました。Botからメッセージを取得するには、エンドポイントにhttps://directline.botframework.com/api/conversations/{conversationId}/messagesを指定し、GETメソッドでリクエストを送信します。今回は、認証用のヘッダーだけで大丈夫です。サンプルコードは下記の通りです。});}getMessage("2y7YRcZAx4f");上記コードを実行すると、下記のようなオブジェクトが返ってきます。"こんにちは!ぼくの名前は、かぶっぴー。"131113209945100859"}あとは、このオブジェクトからメッセージを抜き出していけば、好きなUIを作成していく事ができます。オブジェクトの解説オブジェクトの解説をしますと、messagesの中には、配列として、ユーザとBotのやり取りが入っています。watermarkというのが、「メッセージをここまで取得しました」という印になっています。"/messages";}とあります。このwatermarkをエンドポイントにつけて、リクエストをすると、そのwatermark以降のメッセージだけ取得できます。「新着メッセージ」だけを取得する事ができます。こちらデモでは、一度convertationIdを作成したら、30分間クッキーに保存するという機能もつけています。APIを使用してBotと対話する所までできました。HTTP通信ができれば、jQueryだけでなくどんなプログラムからでも大丈夫ですので、ぜひお試しください。APIを使用して本格的なチャットUIを作成したいと思います。孟典14歳からwebプログラミングを始め、いままでに20個以上のwebサービスをリリース。現在はディープラーニングエンジニア兼ライターとして活動。システム設計から、開発、デザイン、コンテンツライティングまで一通りできるのが強み。Thu人間の約830倍高速化を実現。HoloLensを展開。