こんにちは。制作部の橘野です。

個人的にデザインする上で大事にしてるのはバランス！

その中でカーニングも細かいところですが重要なポイントです。

“カーニングしてますか？” の続きを読む

こんにちは、制作部の稲葉です。

先日カーニングをゲーム感覚で学べるサイトを知ったのですが、
他にも何かないか探してみました。
今回はデザインについてゲーム感覚で学べるサイトをいくつか紹介させていただきます。

“ゲーム感覚でデザイン感覚を学べるサイトで遊んでみる” の続きを読む

こんにちはー。

バーチャルYoutuber（Vtuber）を担当する声優さんのことを業界用語で魂（たましい）というらしいですよ。

へー。

神尾です。

WebサイトにWatson Assistantを組み込むぞい

今回はWebサイトにチャットボットを組み込む話。
いつも弊社製品のFirstContactを使ってチャットボットを作っているのですが、今回は自分で頑張ってみたいと思います。
チャットボット本体（魂といえるかもしれない）は以前Watson Assistantで作った恋人ボットを使います。

まずはサイトのガワを作る

入力ボックスとレスポンスを表示する領域だけのシンプルな作りにしてみました。

まあまあじゃないでしょうか。

curlでテストする

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形式なので、ここからデータを取り出す必要がありますね。
それはあとでやります。

Welcomeメッセージを取得する

ただ、チャットボットをシナリオには起動した時のメッセージが入っていたはず。
それを取得するにはどうすればいいかな。

とりあえず、–data オプションを外してみます。
curl -X POST -u "apikey:********************************************" --header "Content-Type:application/json" "https://gateway.watsonplatform.net/assistant/api/v1/workspaces/************************************/message?version=2018-09-20"

いけましたね。

XMLHttpRequestでやってみる

では、早速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でやってみようと思います。

続く。

2019年2月7日（木）・8日（金）に開催されたマーケティングテクノロジーフェアにチャットボット「FirstContact」とベトナムオフショア開発を出展してきました。

“チャットボットとベトナムオフショア開発をマーケティングテクノロジーフェアに出展しました” の続きを読む

こんにちは。チャットボットの神尾です（語弊）。

世にあるチャットボット製品って、当社製品しかりサイトの右下ないし左下にフロートで出現するんですが、
ブログに表示するんだったら埋め込みの方が便利だろうなと思っていました。

WordPressやEC-CUBEのウェジェットとして使えたら面白いんじゃないかな。

なんで、弊社チャットボットFirstContactを弊社ブログに埋め込んだらどうなるか勝手に試してみました。

こうなりました。

ウェジェットとしてかなり自然な感じの見た目ですね（自分で作った背景がダサイことを除いて）

会話もできます。

以前のブログで作った恋人BOTを連携させています。

自分のブログに彼氏が常駐してくれるのは嬉しいですね。
まあ、他の女と話さないでほしいですけど・・

ただ、これはフロントで調整しているだけなので、
実際のサイトに表示するとなるとレスポンシブに対応したりでかなり調整が必要ですね。

なお、社内用のアカウントを業務以外のことに使っているので怒られそうです。

本年も当社製品をよろしくお願いします！

制作部の里山です。

ここ最近で、自分が注目しているOSSが2つメジャーバージョンアップしました。

WordPress：5.0へバージョンアップ
Redmine：4.0へバージョンアップ
“メジャーバージョンアップ” の続きを読む