【すぐできるチャットボット】「Talk API」を使った作り方

のえる

2019.08.29

最近はAIや人工知能、機械学習など近未来的なものが増えてきたように思います。

その中の一つに「チャットボット」というものがあり、これは現在大手企業などでどんどん取り入れられている内容だと思います。

チャットボットとは
「チャット」と「ボット」を組み合わせた言葉で、人工知能を活用した「自動会話プログラム」のこと。

ITトレンド – チャットボットとは –

普通のランダム会話と異なる点として、トーク内容を学習して日々賢くなっていくというところがあります。

今回はリクルート様より無料で提要されている A3RT の Talk API というAPIで、チャットボットに触れていこうと思います。

1 開発環境
2 APIキーを取得する
3 会話のための画面を作成する
4 会話のためのプログラムを書く
5 会話してみる
6 さいごに

開発環境

今回の開発環境は下記のとおりです。

PHP	7.1.11
cURL	7.29.0

今回のAPIを実行するにあたり curl が必要となります。

それ以外は特に目立った環境ではありませんので、皆様の開発環境などにも実装できると思います。

APIキーを取得する

まずはAPIキーを取得しましょう。

A3RT の Talk API ページ下にある「API KEY 発行」ボタンからAPIキーを作成しましょう。

この時、利用規約を最下部までスクロールしないと、同意するボタンが押せません。

メールアドレスを入力し、確認後には登録したメールアドレスにAPIキーが送られてきます。

会話のための画面を作成する

まずは会話ができる画面を用意しましょう。


<html lang="ja">
    <head>
        <title>Make Chatbot</title>
        <script src="./js/jquery.min.js" type="text/javascript"></script>
        <link rel='stylesheet' href='./css/style.css' />
        <script>
            $(function() {
                const MESSAGE_TYPE_AI = 1;
                const MESSAGE_TYPE_USER = 2;

                // 会話ログ表示
                var talk = function(messageType, message) {
                    let div = $('<div>');
                    let p = $('<p>');
                    if(messageType == MESSAGE_TYPE_USER) {
                        $(p).addClass('user');
                    } else {
                        $(p).addClass('ai');
                    }
                    $(p).text(message);
                    $(div).append(p);
                    $('#talk_history').append(div);

                    $('#talk_history').scrollTop($('#talk_history')[0].scrollHeight);
                };

                // チャット送信
                var sendChat = function(message) {
                    $.ajax({
                        url: "talk.php",
                        type: "POST",
                        data: {
                            "message": message
                        }
                    }).then(
                        (data) => {
                            var aiText = data.message;

                            talk(MESSAGE_TYPE_AI, aiText);
                        },
                        (error) => {
                        },
                    );
                };

                // 送信ボタン押下時
                $('input[type="submit"]').on('click', function(e) {
                    var obj = $('input[name=chat_text]');
                    var chatText = $.trim(obj.val());
                    if(0 < chatText.length) {
                        talk(MESSAGE_TYPE_USER, chatText);

                        sendChat(chatText);

                        $('input[name=chat_text]').focus();
                    }

                    obj.val('');
                });

                // 起動時の会話
                setTimeout(function() {
                    var startMessage = "何かお話しませんか？";
                    talk(MESSAGE_TYPE_AI, startMessage);
                }, 0.4 * 1000);

                $('input[name=chat_text]').focus();
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h3>Chatbot</h3>

            <!-- 会話ログ領域 -->
            <div id="talk_history"></div>

            <!-- 入力領域 -->
            <div class="container__div">
                <input type="text" name="chat_text" value="" />
                <input type="submit" value="送信" />
            </div>
        </div>
    </body>
</html>

<head>

<title>Make Chatbot</title>

$(function() {

const MESSAGE_TYPE_AI = 1;

const MESSAGE_TYPE_USER = 2;

// 会話ログ表示

var talk = function(messageType, message) {

let div = $('<div>');

let p = $('<p>');

if(messageType == MESSAGE_TYPE_USER) {

$(p).addClass('user');

} else {

$(p).addClass('ai');

}

$(p).text(message);

$(div).append(p);

$('#talk_history').append(div);

$('#talk_history').scrollTop($('#talk_history')[0].scrollHeight);

};

// チャット送信

var sendChat = function(message) {

$.ajax({

url: "talk.php",

type: "POST",

data: {

"message": message

}

}).then(

(data) => {

var aiText = data.message;

talk(MESSAGE_TYPE_AI, aiText);

(error) => {

);

};

// 送信ボタン押下時

$('input[type="submit"]').on('click', function(e) {

var obj = $('input[name=chat_text]');

var chatText = $.trim(obj.val());

if(0 < chatText.length) {

talk(MESSAGE_TYPE_USER, chatText);

sendChat(chatText);

$('input[name=chat_text]').focus();

}

obj.val('');

});

// 起動時の会話

setTimeout(function() {

var startMessage = "何かお話しませんか？";

talk(MESSAGE_TYPE_AI, startMessage);

}, 0.4 * 1000);

$('input[name=chat_text]').focus();

});

</script>

</head>

<body>

<h3>Chatbot</h3>

</div>

</body>

</html>

分かりやすさを重視するために、ファイルは分けずに1ページで完結してあります。
また、CSSは省略していますので、LINE風やdiscord風など、お気に入りの形で良いと思います。

会話のためのプログラムを書く

では肝心のAPIを呼び出すプログラムを書いてみましょう。

気を付ける点としては、記事執筆時点で「HTTP POSTリクエストのボディサイズに関する制限事項として、上限値が 2048 bytes」というところでしょうか。
あまり膨大なテキストは送ることができないので気を付けてください。


<?php

// パラメータ取得
$message = (isset($_POST['message'])) ? trim($_POST['message']) : '';

// パラメータチェック
if(mb_strlen($message) <= 0) {
    header('HTTP', true, 400);
    exit();
}

// APIキーを設定
$apiKey = '[取得したAPIキー]';

// エンドポイントURLを設定
$endPoint = 'https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk';

// 送信データを作成
$data = [
    'apikey' => $apiKey,
    'query' => $message,
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $endPoint);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

$responseJsonStr = curl_exec($ch);

// エラーチェック
$errorNo = curl_errno($ch);
$errorMsg = curl_error($ch);
if (CURLE_OK !== $errorNo) {
    echo sprintf("[CurlErrorCode: %s] %s", $errorNo, $errorMsg);
}

curl_close($ch);

// 結果をPHP配列化
$result = json_decode($responseJsonStr, true);
if($result === false || is_null($result)) {
    header('HTTP', true, 500);
    exit();
}

// 結果ステータスチェック
if($result['status'] != 0) {
    header('HTTP', true, 500);
    exit();
}

// 画面に返す形を作成
$responseText = $result['results'][0]['reply'];
$response = [
    'message' => $responseText,
];

// JSON出力
header('content-type: application/json; charset=utf-8');
echo json_encode($response);

exit();

<?php

// パラメータ取得

$message = (isset($_POST['message'])) ? trim($_POST['message']) : '';

// パラメータチェック

if(mb_strlen($message) <= 0) {

header('HTTP', true, 400);

exit();

}

// APIキーを設定

$apiKey = '[取得したAPIキー]';

// エンドポイントURLを設定

$endPoint = 'https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk';

// 送信データを作成

$data = [

'apikey' => $apiKey,

'query' => $message,

];

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $endPoint);

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_HEADER, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

$responseJsonStr = curl_exec($ch);

// エラーチェック

$errorNo = curl_errno($ch);

$errorMsg = curl_error($ch);

if (CURLE_OK !== $errorNo) {

echo sprintf("[CurlErrorCode: %s] %s", $errorNo, $errorMsg);

}

curl_close($ch);

// 結果をPHP配列化

$result = json_decode($responseJsonStr, true);

if($result === false || is_null($result)) {

header('HTTP', true, 500);

exit();

}

// 結果ステータスチェック

if($result['status'] != 0) {

header('HTTP', true, 500);

exit();

}

// 画面に返す形を作成

$responseText = $result['results'][0]['reply'];

$response = [

'message' => $responseText,

];

// JSON出力

header('content-type: application/json; charset=utf-8');

echo json_encode($response);

exit();

本来ですとリファラやメソッドなど、チェックしなければならないことは多々ありますが、このプログラムでは最低限のチェックのみとなってます。

会話してみる

では、さっそく作ったチャットボットとお話をしてみましょう。

それっぽい会話で来てるでしょうか？
会話の学習については自動で行われるみたいですので、特に難しいこともありませんね。

さいごに

いかがでしょうか？
それっぽいチャットボットはできましたか？
業務で使う場合はビジネスフローに沿ってカスタマイズが必要だとは思いますが、チャットボットへの導入としては十分ではないでしょうか。

おすすめ記事

POPULAR

のえる

Full-stack Developer

記事一覧

jQueryはもう不要？2019年のフロントエンド事情を考えてみる

初心者を卒業！現役が教えるプログラミング上達方法

のえる

Full-stack Developer

お休みはゲーム三昧。目指すは生涯自由人。ツナ缶大好き。

記事一覧

【すぐできるチャットボット】「Talk API」を使った作り方

開発環境

APIキーを取得する

会話のための画面を作成する

会話のためのプログラムを書く

会話してみる

さいごに

Git初心者必見！最低限これは覚えておこう

イラストレーターで座標に変な小数点が入ったときに消す方法

WebブラウザからWindowsアプリケーションを開く[追記あり]

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない

【すぐできるチャットボット】「Talk API」を使った作り方

開発環境

APIキーを取得する

会話のための画面を作成する

会話のためのプログラムを書く

会話してみる

さいごに

リクルートのAI「Listing API」を使ったレコメンドの作り方

AIに美味しそうなお肉を判断してもらう

クラスタリングのk-meansで画像の分類に挑戦

Git初心者必見！最低限これは覚えておこう

イラストレーターで座標に変な小数点が入ったときに消す方法

WebブラウザからWindowsアプリケーションを開く[追記あり]

PHPで日付をフォーマットするならCarbonを使おう

Git初心者必見！最低限これは覚えておこう

イラストレーターで座標に変な小数点が入ったときに消す方法

WebブラウザからWindowsアプリケーションを開く[追記あり]

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない