こんにちは、制作部 夏目です。
ブログアワード（会社内でブログのPV数が一定数以上の記事を書いた人にギフト券をプレゼントする制度）
が、単発記事ではなく、その人が月内に書いた記事のPVの累計で決まると知って、それならできるんじゃね？と思っている今日この頃です。
さて、この時期になると、中学生や、高校生、大学生はテストの時期ですね。
自分も昔、受けました（結果はあえて言わない）が、家だと集中できないと言う方多いんじゃないでしょうか。
これは学生に限った話ではなく、社会人の皆さんも勉強しようと思っても家だと誘惑(色々な)がいっぱいあって集中できないと言う方は多いはず。
そこで、今日はそんな皆さんにぴったりの勉強場所を教えたいと思います。
“家じゃ勉強に集中できない。それなら・・・” の続きを読む
こんにちはー。
バーチャルYoutuber（Vtuber）を担当する声優さんのことを業界用語で魂（たましい）というらしいですよ。
へー。
神尾です。
今回はWebサイトにチャットボットを組み込む話。
いつも弊社製品のFirstContactを使ってチャットボットを作っているのですが、今回は自分で頑張ってみたいと思います。
チャットボット本体（魂といえるかもしれない）は以前Watson Assistantで作った恋人ボットを使います。
入力ボックスとレスポンスを表示する領域だけのシンプルな作りにしてみました。
まあまあじゃないでしょうか。
APIのリクエストを送るんですが、内容が正しいかどうかテストしておきたいですね。
あんまり使い慣れないんですが、コマンドプロンプトからcurlコマンドでやってみます。
公式のドキュメントを調べて書いたコマンドはこんな感じ。
curl -X POST -u "apikey:********************************************" --header "Content-Type:application/json" --data "{\"input\": {\"text\": \"Hello\"}}" "https://gateway.watsonplatform.net/assistant/api/v1/workspaces/************************************/message?version=2018-09-20"
結果：
結果は成功してるけど日本語部分が文字化けしてる！！
これはコマンドプロンプトの文字コードが問題だったみたいです。
以下のコマンドで直りました。
chcp 65001
結果：
無事取得できたみたいです。
ご覧の通り、Watson AssistantのレスポンスはJSON形式なので、ここからデータを取り出す必要がありますね。
それはあとでやります。
ただ、チャットボットをシナリオには起動した時のメッセージが入っていたはず。
それを取得するにはどうすればいいかな。
とりあえず、–data オプションを外してみます。
curl -X POST -u "apikey:********************************************" --header "Content-Type:application/json" "https://gateway.watsonplatform.net/assistant/api/v1/workspaces/************************************/message?version=2018-09-20"
いけましたね。
では、早速Webページのjavascriptから呼び出してみます。
XMLHttpRequestでAjax的に呼び出せるでしょうかね。
curlをXMLHttpRequestに直してみました。
これでページ読み込み後にwelcomeメッセージを表示してもらえるはず。
window.onload=function(){
sendmessage_api = new XMLHttpRequest();
sendmessage_api.onreadystatechange = function() {
if(sendmessage_api.readyState==4) {
if( sendmessage_api.status == 200 || sendmessage_api.status == 304 ) {
document.getElementById("chatbot_serif").innerText = sendmessage_api.responseText;
}else{
console.log( 'Failed. HttpStatus: '+sendmessage_api.statusText );
document.getElementById("chatbot_serif").innerText = "具合が悪そうです";
}
}
};
sendmessage_api.open("POST","https://gateway.watsonplatform.net/assistant/api/v1/workspaces/*******************************/message?version=2018-09-20");
sendmessage_api.setRequestHeader('Authorization', 'Basic apikey:***************************************');
sendmessage_api.setRequestHeader('Content-Type', 'application/json');
sendmessage_api.send();
};
ん？？
あれ、エラーが出ていますね。（そんなエラーメッセージはどうなんだ？）
コンソールを見てみると、「クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、https://gateway.watsonplatform.net/assistant/api/v1/workspaces/*********************/message?version=2018-09-20 にあるリモートリソースの読み込みは拒否されます」と出てます。
ブラウザから直接読むなって怒られた感じですかね。
というかパスワードとかも丸見えですしね。
やっぱり横着はいけません。
なので次回はphpかpythonでやってみようと思います。
続く。
こんにちは。チャットボットの神尾です（語弊）。
世にあるチャットボット製品って、当社製品しかりサイトの右下ないし左下にフロートで出現するんですが、
ブログに表示するんだったら埋め込みの方が便利だろうなと思っていました。
WordPressやEC-CUBEのウェジェットとして使えたら面白いんじゃないかな。
なんで、弊社チャットボットFirstContactを弊社ブログに埋め込んだらどうなるか勝手に試してみました。
こうなりました。
ウェジェットとしてかなり自然な感じの見た目ですね（自分で作った背景がダサイことを除いて）
会話もできます。
以前のブログで作った恋人BOTを連携させています。
自分のブログに彼氏が常駐してくれるのは嬉しいですね。
まあ、他の女と話さないでほしいですけど・・
ただ、これはフロントで調整しているだけなので、
実際のサイトに表示するとなるとレスポンシブに対応したりでかなり調整が必要ですね。
なお、社内用のアカウントを業務以外のことに使っているので怒られそうです。
本年も当社製品をよろしくお願いします！
