ClovaからLINEアプリに通知する(Messaging APIなるものを使ってみる)

# Clovaにはカードがない

VUIからGUIにユーザーを移動させたい時があります。
例えば、最新のニュースを教えてくれるClovaのスキルがあったとして、Clovaに言わせるのはタイトル程度。
記事の詳細はWEB（ブラウザなど)で見て欲しい時があります。

こういったときは、Alexaなどは「カード」と言うものがあってアレクサアプリで見ることができます。

ただ、Clovaには現状そのような機能がないみたいです。

おそらくLINEアプリ(チャットのアプリ)でボットを作ってそれに通知しろ。って意図がある気がします。

# この記事でできること

Clovaスキルから、LINE Botにメッセージを送ることができます。

Twitterですが、簡単に実装してみた動画です。


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【拡散希望】<br>多くのシンガーさんを「知るきっかけ」を作っています！<br><br>曲を数秒聞いて「いいね！」と思ったら歌とシンガーさんのTwitterのプロフィールなどを見れるアプリです！<br><br>もし、僕の、私の曲使っても良いよ！ってシンガーさんがいましたらリプかDMください！🙇<br><br>沢山のシンガーさんに届け！ <a href="https://t.co/a8KtWcb2tQ">pic.twitter.com/a8KtWcb2tQ</a></p>&mdash; imajo (@imasirooo) <a href="https://twitter.com/imasirooo/status/1030077141625401345?ref_src=twsrc%5Etfw">2018年8月16日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




# Messaging APIを使う

## Messagin APIとは

簡単に言うとBotですね。
LINEの公式アカウントのチャット画面で話しかけると、秒でメッセージが返ってくるあれです。

ただ、こっちが会話を送ってなくてもPOSTなどのイベントで好きなユーザーに通知を送れるのでそれを使ってClovaスキルからBotに何かしらのテキストを送ってみたいと思います。

## プロバイダー、チャネルを作成する

「Botest」と言うプロバイダーを作成してください。（名前はなんでもいい。すでに使いたいClovaスキルが存在するならば、それと***同じプロバイダー***を使用してください)
すると、以下の画面になると思いますので、Messaging APIのチャネルを作成します。

![LINE_Developers.png](https://qiita-image-store.s3.amazonaws.com/0/195882/a97e1857-d2f9-e157-1084-6d34a54ea435.png)

新規チャネル作成画面が表示されるので以下を入力

* アプリ名: clova bot
* アプリ説明: ClovaのLINE通知に使う。
* プラン: Developer Trial ***(ここは間違ってはいけない)***
* 大業種: ご自身に合わせてお選びください
* 小業種: ご自身に合わせてお選びください
* メールアドレス: ご自身に合わせてお選びください


入力したら「入力内容を確認」→「同意する」→「作成する」を押します。

すると、一度プロバイダートップ画面に移動するのでもう一度、今作成したチャネルを開きます。
「Webhook送信」の欄を利用するに変更して、更新します。

![LINE_Developers.png](https://qiita-image-store.s3.amazonaws.com/0/195882/1f42fae1-9a23-3f64-77e8-3ee579b090c5.png)

その上の、アクセストークンの欄でトークンを再発行し、発行されたトークンをメモります。

![LINE_Developers.png](https://qiita-image-store.s3.amazonaws.com/0/195882/76c968a6-8ca1-82a1-88d6-5839fad9207b.png)

さらに、画面下のQRからLINEアプリで検索し、友達追加しておきます。
さらにさらに、そのほかのYour User IDもメモします。

![LINE_Developers.png](https://qiita-image-store.s3.amazonaws.com/0/195882/65f3596b-6460-454c-f884-361e363c4a5f.png)

## curlでテストしてみる

先ほどメモったトークンとuseridを変更して以下のcurlで試してみてください。。

```
curl -v -X POST https://api.line.me/v2/bot/message/push \
-H 'Content-Type:application/json' \
-H 'Authorization: Bearer {メモしたアクセストークン}' \
-d '{
    "to": "メモしたYour user ID",
    "messages":[
        {
            "type":"text",
            "text":"Hello, world1"
        },
        {
            "type":"text",
            "text":"Hello, world2"
        }
    ]
}'
```

すると、先ほど登録したBotにメッセージがあなた宛に届くと思います。

# Clovaスキルでメッセージを送る

```
重要

スキルは使用するBot(Messaging APIと同じプロバイダーである必要があります。
```

Clovaスキル作成の詳細は省きますが、スキルをユーザーのIDがエンドポイント側で取得すれば、使ったユーザーだけにメッセージを送ることが可能なのがわかります。

## スキルとBotを連携させる

スキルの基本設定画面で、「Extensionと連携するLINE ID」を先ほど作成したBotを選択します。

<img width="1276" alt="Clova_Developer_Center_β.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/f35cb528-fc66-3094-f679-c116c56a1c8b.png">


## userIDを取得する

送られてきたJSONの`session.user.userId​`で取得することができます。

![sample_js.png](https://qiita-image-store.s3.amazonaws.com/0/195882/ab235312-4b8d-cb0f-46a0-f164c3a53b9a.png)

## LINE Botに送る

単純にPOSTするのでもいいけれど、LINEさんが便利なSDKを用意してくださってます。


```
npm install --save @line/bot-sdk
```

ほぼ丸パクリのコードですが、

```js
const line = require('@line/bot-sdk');

const client = new line.Client({
  channelAccessToken: '<channel access token>'
});

const message = {
  type: 'text',
  text: 'チャットに送る内容'
};

const userId = request.​session.user.userId​​​;
client.pushMessage(userId, message)
  .then(() => {
    // 成功したとき。CEKにレスポンスを返したり。
  })
  .catch((err) => {
    // エラーしたとき
  });​
```

# テストでの注意点

現在、ブラウザ上でのテストではうまくいきません。
なぜかと言うと、`userId`が正しくないからです。
なので、ちゃんとLINEに通知がくるかは実機で試しましょう。

# 参考

https://clova-developers.line.me/guide/#/CEK/Guides/Link_Messaging_API.md
https://developers.line.me/ja/docs/messaging-api/building-bot/