NobyAPIであっさりロボットチャット
NobyAPIであっさりロボットチャット
NobyAPIを使う事で、とても簡単にロボットチャットを実装する事が出来ます。
(サイトも可愛いですね!!)
今回は、"NobyAPI"と、"Axios"を使って簡単なチャットシステムを作ってみます。(とても簡単です!!)
※Axiosの使い方については、Axiosであっさりファイルアクセスをご参照ください。
完成イメージ
アカウントとAPIキーを取得する
NobyAPIを利用するには、アカウントとAPIキーが必要になります。
左メニューにある"アカウントとAPIキー取得"から、CotoGotoコンソール画面に進み、アカウントを取得しましょう。
アカウントを取得するには、FacebookアカウントかLineアカウントのいずれかが必要になります。
アカウントの取得に成功すると、APIキーが表示されますのでコピーしておきましょう。
プロジェクトを用意する
次の様にプロジェクトを作ります。
MyProject01/
├ index.html (プログラムを起動するファイルです)
├ main.js (メインのプログラムを記述するファイルです)
HTMLファイルを用意する
では、作っていきましょう。
HTMLファイルを用意して、下記コードを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
<script src="./custom.js"></script>
</head>
<body>
<input id="myText" type="text" value="こんにちは"/>
<button id="myBtn">送信</button>
<ul id="myChat"></ul>
</body>
</html>
"Axios"のロードには、CDN(Contents Deliverly Network)を使っています。
(URLから直接ダウンロードする事で、プロジェクトがコンパクトになりますね)
body部分には、入力フォーム、送信ボタン、チャット表示部分を記述しておきます。
JavaScriptファイルを用意する
次はメインのプログラムです。
ここからは、次の順番で解説をしていきますね。
- NobyAPIに送信するデータを用意する
- AxiosでNobyAPIにアクセスする
- 受け取ったデータを確認する
1, NobyAPIに送信するデータを用意する
NobyAPIには、入力フォームから取り出した文字列と、先ほど取得したAPIキーを送信します。
Axiosを使って送信する場合は、次の様に記述します。
const params = {params:{"text": 送信するテキスト, "appkey": APIキー}};
2, AxiosでNobyAPIにアクセスする
"Axios"を読み込んだ事で、"axios"オブジェクトを使う事ができる様になっています。
"axios.get関数"を使って、次の様に記述します。
※Axiosの使い方については、Axiosであっさりファイルアクセスをご参照ください。
axios.get(NobyAPIへのURL, 送信するデータ).then(res=>{
// 通信が成功した場合はこちらが実行されます
}).catch(err=>{
// 通信が失敗した場合はこちらが実行されます
});
滞りなく通信が成功すると、"then"にあるコールバックが実行されます。
この引数にある"res.data"に様々なデータが格納されています。(ワクワクしますね!!)
3, 受け取ったデータを確認する
先ほどの、"res.data"にはNobyから返された様々な反応が格納されています。
簡単にまとめると次の様になります。
| 種類 | 意味 |
|---|---|
| res.data.text | 会話の返事を返します |
| res.data.mood | 会話のムードを返します |
| res.data.negaposi | ネガポジ(ネガティブ -3 <---> 3 ポジティブ)を返します |
| res.data.negaposiList.word | ネガポジの単語を返します |
| res.data.negaposiList.score | アニメーションを停止状態にする(true/false) |
| res.data.emotion.angerFear | 感情のスコア(怖れ -3 <---> 3 怒り)を返します |
| res.data.emotion.joySad | 感情のスコア(悲しい -3 <---> 3 嬉しい)を返します |
| res.data.emotion.likeDislike | 感情のスコア(嫌い -3 <---> 3 好ましい)を返します |
他にも様々なレスポンスがありますので、Nobyからのレスポンスをご参照ください。
全体のコード
最後に全体のコードを載せておきますね。
const NOBY_API = "https://www.cotogoto.ai/webapi/noby.json";
const NOBY_KEY = "あなたのAPIキー";
window.onload = function(){
// ボタンのクリックイベント
document.getElementById("myBtn").onclick = ()=>{
const text = document.getElementById("myText").value;// 入力フォームから文字列
addToChat("You:" + text);// チャットに追加
const params = {params:{"text": "Hello", "appkey": NOBY_KEY}};// NobyAPIへ送信するデータ
axios.get(NOBY_API, params).then(res=>{// NobyAPIへ送信
addToChat("Noby:" + res.data.text);// チャットに追加
}).catch(err=>{
console.log(err);
});
};
// チャットに追加する関数
function addToChat(str){
const elem = document.createElement("li");
elem.innerHTML = str;
document.getElementById("myChat").appendChild(elem);
}
}
見事に、NobyAPIと会話をする事ができました。(会話が落ち着くと晩酌を始めるNoby!!)
最後に
今回は、NobyAPIを使って簡単なロボットチャットに挑戦してみました。
コードとしてもとても短いので、JavaScriptに少しだけ慣れてきたら是非挑戦してみてください!!
ここまで読んでいただき有難うございました。
Discussion