Clova SkillとLINE Botの連携を実装してみた
目次
前回は、Clovaのskillを作成しました。
testerchan.hatenadiary.com
今回は、せっかくのLINEのものなのですし、LINE Botと連携させようと思います。
こうすれば連絡とか簡単に作れそうですｗ
では、早速ですがコードです。
Clovaのリクエストを受け取る側のコード
最初はClovaからリクエストを受け取る側のコードです。
前回のコードにcurlを挟んでいるくらいですｗ
(PHP)
<?php
function makeSentense(
$message,
$shouldEndSession
){
return array(
'version' => "1.0",
'sessionAttributes' => null,
'response' => [
'outputSpeech' =>[
'type' => "SimpleSpeech",
'values' => [
'lang' => 'ja',
'type' => 'PlainText',
'value' => $message
]
],
'directives' => null,
'shouldEndSession' => $shouldEndSession
]
);
}
function curl($value, $userId){
$ch = curl_init("https://xxxxxxx/beta/clova/push.php");
$data = array(
"value" => $value,
"userId" => $userId
);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, 'Content-Type: application/json; charser=UTF-8');
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
$json_string = file_get_contents('php://input');
$jsonObj = json_decode($json_string);
$value = $jsonObj->{"request"}->{"intent"}->{"slots"}->{"what"}->{"value"};
$userId = $jsonObj->{"session"}->{"user"}->{"userId"};
$response = makeSentense("値は".$value, false);
header("Content-Type: application/json; charset=utf-8");
echo json_encode($response);
$response = curl($value, $userId);
?>
何をやっているかというと……
- 届いたリクエストからvalueを取得します。ちなみに前回と同じプログラムを使っているので「what」というスロット（前回自分で作ったスロット！）として分析された内容を取得しています。（前回の例でいうと「今日の大阪の天気は」といった場合「what」のスロットには「天気」というvalueが入ります）
- 届いたリクエストからuserIdを取得します。これがLINE Botからuserにmessageをpushするために必要です！
- clovaにもメッセージを送ります。
- curlでLINE BotにもvalueとuserIdを送っています。
これでオッケーです！
要はuserIdを取得して、LINE Botのプログラムにポイっとpostしているだけですｗ
LINE Bot側のコード
以下が、clovaから値を受け取って、LINEにpushする側のコードです。
<?php
function curl($postData, $accessToken){
$ch = curl_init("https://api.line.me/v2/bot/message/push");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($postData));
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: application/json; charser=UTF-8',
'Authorization: Bearer ' . $accessToken
));
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
$accessToken =
'あなたのアクセストークン！';
$json_string = file_get_contents('php://input');
$jsonObj = json_decode($json_string);
$value = $jsonObj->{"value"};
$userId = $jsonObj->{"userId"};
$responseFormatText = [
"type" => "text",
"text" => "値 : ".$value
];
$postData = [
"to" => $userId,
"messages" => [$responseFormatText]
];
$result = curl($postData, $accessToken);
?>
LINE Bot側では何をしているかというと……
- 送られてきたvalueとuserIdを取得します。
- LINEに送り返すためのデータを組み立てます。"text"に送りたいメッセージを言えれればOK!
- toに取得したuserId, messagesに作ったデータをセットします。messagesは複数の形にしないといけないので"["でくくられる必要があります。
- curlでhttps://api.line.me/v2/bot/message/pushに投げます。access tokenが必要になるのでLINE Developersで取得しましょう（後述します）
ついでにclovaから送られてくるリクエストもペタリしておきますｗ
{
"version": "1.0",
"session": {
"sessionId": "xxx",
"user": {
"userId": "ここのuserIdを使うよ！",
"accessToken": "xxx"
},
"new": true
},
"context": {
"System": {
"application": {
"applicationId": "com.otameshi01.com"
},
"user": {
"userId": "xxx",
"accessToken": "xxx"
},
"device": {
"deviceId": "xxx",
"display": {
"size": "l100",
"orientation": "landscape",
"dpi": 96,
"contentLayer": {
"width": 640,
"height": 360
}
}
}
}
},
"request": {
"type": "IntentRequest",
"intent": {
"name": "test_intent",
"slots": {
"what": {
"name": "what",
"value": "天気"
},
"when": {
"name": "when",
"value": "今日"
}
}
}
}
}
これで、スキルを起動して話しかければclovaも話すしLINEにもメッセージが送られて来ます。
（スキルの起動クエリなどを区別していないので「〇〇を起動して」といった時点でメッセージが送られます）
LINE Bot (LINE Messaging API)の作り方
コードだけでは動かないわけでして。
次はLINE Botの作り方を書いていきます。
LINE Developersに遷移して、clova skillを作ったプロバイダーを開きましょう。
https://developers.line.me
そしたらガリガリ作っていきましょう！
作るだけでしたら注意事項はあまりないのですが、一つ重要な点。
連携させるClovaスキルと同じ場所にチャンネルを作りましょう！
それと、push messageを使用しますので「Developer Trial」を使用しましょう。
これでチャンネル作成自体は完成です。
ですが！！
Clova側からデータを受け取れるようにwebhookなどの設定をする必要があります。
LINE BOTをclovaから呼べるように設定する
ここは色々注意点がありますので記載します。
LINE Botでmessageを送信するために使用します。「再発行」から発行しておきましょう。
Webhook送信
「利用する」にしないと使えないので忘れずに変更しましょう。
WebhookURL
先ほど作った「LINE Bot側」のプログラムを指定しましょう。
例のごとくhttpsです！
頑張って用意ですｗ
自動応答メッセージ送信
Messaging APIには「自動応答メッセージ」という、予め設定したメッセージを返してくれる便利機能があります（例：今留守だから話しかけないでね！など）
今回はいらないので「利用しない」に必ずしておきましょう。
そもそもLINE Botと友達になっていないと何も送られてこないので、友達になりましょうｗ
QRコードの下にあるYour User Id
メッセージを送るUser IDです。
テストの時にまずはハードコードでuser idを記載して連携のテストをした後に、送られてきたデータを使用して確認する……といった形の方が最初はわかりやすそうです。
いざ起動！
「{呼び出し名}を起動して」というと早速LINEがポンポン飛んでくるかと思いますｗ
ClovaとLINE botの連携ができるようになると、todoリストを作ったり、簡易メッセンジャーにしたりと色々できそうですねｗ
