本稿の前提として、Talk APIの解説ページが全てです。かなり丁寧でわかりやすいです。
Talk APIでできること
本家ドキュメントから引用させて頂きます。
完全自動の日常会話を可能にするAPIです。例えばあなたの運用しているWebサイトでAPIを呼び出しサイト上でユーザとの会話を可能にします。 さらにユーザとの会話を学習していくことでより賢く・より自然な会話を実現します。
現段階では、Talk APIだけで会話を成立させることは難しいのですが、基本的にサービスを受けるお客様には目的があります。
よって、キーワードを狙ってフックさせておくことで、自社サービスへの流入を自然にしてくれるのではないでしょうか。
APIKEYの取得
各API解説ページの一番下に、APIを使うためのAPIKEY発行ボタンがあります。 利用規約を確認・同意した後、メールアドレス承認→APIKEY受信の流れで、APIKEYを取得します。
注意点
同じEmailアドレスで他のサービスのAPIKEYを取得した場合、そのEmailアドレスに承認情報が紐付けられます。退会申請をすると、紐付けられているAPIKEYすべてが利用できなくなりますので、再度APIKEYを発行する必要があります。
簡単な解説
全文
以下の通りです。
html
<input id="talkapi__input" type="input" placeholder="ここにテキストを入力"/>
<button id="talkapi__request" type="button">リクエスト</button>
<p id="talkapi__reply"></p>
JavaScript
/*---------------------------------------*/
/* HTML(だけ)の読み込みが完了したら */
/*---------------------------------------*/
window.addEventListener('DOMContentLoaded',()=>{
//- イベントリスナー登録
document.getElementById('talkapi__request').addEventListener('click',handler_request_reply);
});
/*---------------------------------------*/
/* 返答をリクエスト */
/*---------------------------------------*/
function handler_request_reply(ev){
/*---------------------------------------*/
/* コメント取得 */
/*---------------------------------------*/
const comment = document.getElementById('talkapi__input').value;
/*---------------------------------------*/
/* レクエストデータ */
/*---------------------------------------*/
let formdata = new FormData();
//- apikeyパラメーター
formdata.append('apikey','<取得したTalkAPIのAPIKEY>');
//- コメント
formdata.append('query',comment);
/*---------------------------------------*/
/* リクエスト */
/*---------------------------------------*/
fetch('https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk',{
method: 'post',
body: formdata,
}).then(response => {
//- レスポンス取得
response.json().then(data => {
//- 返答取得
const reply = data.results[0].reply;
//- 出力
document.getElementById('talkapi__reply').innerHTML = reply;
});
});
}
解説
エンドポイントに対してリクエストできるパラメーターは、apikey,query,callbackの３つで、そのうちapikeyとquery(コメント)が必須のパラメーターになっています。
TalkAPIでは特に気をつける箇所はありませんが、SNSによるあるようなタイムラインを再現するには、ReactやVueといったフレームワークを使うことをオススメ致します。
以下では、HTML5より使えるFormDataクラスを使ってリクエストのパラメーターを設定しています。
//- inputに入力された値を取得
const comment = document.getElementById('talkapi__input').value;
//- FormDataクラスからインスタンスを生成
let formdata = new FormData();
//- apikeyパラメーターをセット
formdata.append('apikey','<取得したTalkAPIのAPIKEY>');
//- queryパラメーターをセット
formdata.append('query',comment);
リクエストするパラメーターを設定したformdataインスタンスを生成したら、後は好きな方法でリクエストします。
# jQueryのajaxを利用する場合、dataにformdataをセット
$.ajax({
method: 'post',
url: <エンドポイント>,
data: formdata,
}).done(response => {
console.log(response);
})
# fetchを利用する場合、bodyにformdataをセット
fetch(<エンドポイント>,{
method: 'post',
body: formdata,
}).then(response => {
//- response.json()はPromiseを返すので解決を待って表示
response.json().then(data => {
console.log(data);
})
})
上記のような感じでしょうか。
所感
以上でTalk APIの解説(リクエスト編)は終了です。
汎用性の高い日常会話を想像すると残念に感じるかもしれませんが、利用するお客様をしっかり捉えることで、FAQや問い合わせページ、商品検索など、既存のサービスにも組み込みやすいと感じました。数年先が楽しみなAPIの１つです。
