テスターちゃん【4コマ漫画】

ソフトウェアテストの用語、やり方などを4コマ漫画でわかりやすく説明する(予定の)ブログです。脱線も多いです。

ClovaのスキルとLINE Messaging APIの連携を実装してみた

Clova SkillとLINE Botの連携を実装してみた

目次

 

 

前回は、Clovaのskillを作成しました。

testerchan.hatenadiary.com

 

今回は、せっかくのLINEのものなのですし、LINE Botと連携させようと思います。

こうすれば連絡とか簡単に作れそうですw

 

では、早速ですがコードです。

Clovaのリクエストを受け取る側のコード

最初はClovaからリクエストを受け取る側のコードです。

前回のコードにcurlを挟んでいるくらいですw

(PHP)

<?php

//レスポンスのjson作成
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
		]
	);
}

//LINEのMessaging APIにcurlでデータを送る
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);
?>

 

何をやっているかというと……

  1. 届いたリクエストからvalueを取得します。ちなみに前回と同じプログラムを使っているので「what」というスロット(前回自分で作ったスロット!)として分析された内容を取得しています。(前回の例でいうと「今日の大阪の天気は」といった場合「what」のスロットには「天気」というvalueが入ります)
  2. 届いたリクエストからuserIdを取得します。これがLINE Botからuserにmessageをpushするために必要です!
  3. clovaにもメッセージを送ります。
  4. curlでLINE BotにもvalueとuserIdを送っています。

これでオッケーです!

要はuserIdを取得して、LINE Botのプログラムにポイっとpostしているだけですw

 

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側では何をしているかというと……

  1. 送られてきたvalueとuserIdを取得します。
  2. LINEに送り返すためのデータを組み立てます。"text"に送りたいメッセージを言えれればOK!
  3. toに取得したuserId, messagesに作ったデータをセットします。messagesは複数の形にしないといけないので"["でくくられる必要があります。
  4. curlhttps://api.line.me/v2/bot/message/pushに投げます。access tokenが必要になるのでLINE Developersで取得しましょう(後述します)

 

ついでにclovaから送られてくるリクエストもペタリしておきますw

{
    "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にもメッセージが送られて来ます。

(スキルの起動クエリなどを区別していないので「〇〇を起動して」といった時点でメッセージが送られます)

f:id:m_training:20180716190724j:plain

 

LINE Bot (LINE Messaging API)の作り方

コードだけでは動かないわけでして。

次はLINE Botの作り方を書いていきます。

 

LINE Developersに遷移して、clova skillを作ったプロバイダーを開きましょう。

https://developers.line.me

 

そしたらガリガリ作っていきましょう!

作るだけでしたら注意事項はあまりないのですが、一つ重要な点。

連携させるClovaスキルと同じ場所にチャンネルを作りましょう!

それと、push messageを使用しますので「Developer Trial」を使用しましょう。

f:id:m_training:20180716192018p:plain

f:id:m_training:20180716192151p:plain

f:id:m_training:20180716192309p:plain

f:id:m_training:20180716192443p:plain

 

これでチャンネル作成自体は完成です。

ですが!!

Clova側からデータを受け取れるようにwebhookなどの設定をする必要があります。

 

LINE BOTをclovaから呼べるように設定する

 

f:id:m_training:20180716192706p:plain

 

ここは色々注意点がありますので記載します。

アクセストーク

LINE Botでmessageを送信するために使用します。「再発行」から発行しておきましょう。

Webhook送信

「利用する」にしないと使えないので忘れずに変更しましょう。

WebhookURL

先ほど作った「LINE Bot側」のプログラムを指定しましょう。

例のごとくhttpsです!

頑張って用意ですw

自動応答メッセージ送信

Messaging APIには「自動応答メッセージ」という、予め設定したメッセージを返してくれる便利機能があります(例:今留守だから話しかけないでね!など)

今回はいらないので「利用しない」に必ずしておきましょう。

QRコード

そもそもLINE Botと友達になっていないと何も送られてこないので、友達になりましょうw

QRコードの下にあるYour User Id

メッセージを送るUser IDです。

テストの時にまずはハードコードでuser idを記載して連携のテストをした後に、送られてきたデータを使用して確認する……といった形の方が最初はわかりやすそうです。

 

いざ起動!

「{呼び出し名}を起動して」というと早速LINEがポンポン飛んでくるかと思いますw

 

 

ClovaとLINE botの連携ができるようになると、todoリストを作ったり、簡易メッセンジャーにしたりと色々できそうですねw