LINE連携 ハンズオン

:::note alert
2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。
:::

# はじめに

本ドキュメントは、2018/4/24に発表された、Twilio ChannelsのLINEカタログを利用したハンズオンです。
Twilio Channelsを利用することで、LINEのMessaging APIを意識することなく、LINE botを作成したり、LINEユーザに対してTwilio Messaging API経由でメッセージを送ることができます。

なお、[LINE連携の動画](https://www.youtube.com/watch?v=zMAurdf72ws)もありますので、併せて御覧ください。

## 必要条件

本ハンズオンを実施するための条件は以下の通りです。

- Twilioアカウント（トライアルアカウントでも可）を持っていること。
- LINEアカウント（メールアドレスを登録してあること）を持っていること。
- ブラウザ（Chrome）が動作するPCを持っていること。

## 全体フロー

- LINE Developersコンソール経由で、Messaging APIのチャネルを作成する。
- 生成された情報を使って、Twilio Channelsを設定する。
- Twilio Channelsで生成されたWebhook URLを、LINEのMessaging APIに設定する。
- Twilio Studioを利用して、LINE botを作成する。
- Twilio Messaging APIを利用して、LINEユーザにメッセージを送る。

## LINEのMessaging APIチャネルを作成する

LINE Messaging APIを利用するためには、まずLINE Developersコンソールでチャネルを作成する必要があります。

#### チャネルとは
LINEプラットフォームを利用するには、アプリがチャネルにリンクされていなければなりません。チャネルを作成すると、固有のチャネルIDが識別用に発行されます。チャネルには、名前、説明文、およびアイコン画像が必要です。

### 手順1. LINE Developersコンソールにログインします。

- ブラウザで[ログイン画面](https://developers.line.me/console/register/messaging-api/provider/)を表示し、LINEに登録してあるメールアドレスとパスワードでログインをします。

![LINE_1.png](https://qiita-image-store.s3.amazonaws.com/0/86046/876f90b7-0c15-1df8-4327-a477b4341e30.png)

### 手順2. 開発者として登録する（初回ログイン時のみ）
名前とメールアドレスを入力して、LINE Developesコンソールで開発者アカウントを作成します。

![LINE_2.png](https://qiita-image-store.s3.amazonaws.com/0/86046/0fac66a3-4790-012a-10bc-a0c5c91b0abf.png)

### 手順3. 新規プロバイダーを作成する
プロバイダー名を入力します。プロバイダーとは、アプリを提供する組織のことです。ご自分の名前、あるいは企業名などを入力してください。

![LINE_3.png](https://qiita-image-store.s3.amazonaws.com/0/86046/408f623c-5103-ec62-eb6a-479680bc13d2.png)

### 手順4. チャネルを作成する
チャネルに必要な情報を入力します。
アプリ名は20文字以内（スペース、アンダーバー不可）で指定します。
Twilio ChannelsのLINE連携機能では、Push Messagesを利用しますので、**Developer Trial**プランを選択してください。
アプリ説明、大業種、小業種、メールアドレスを入力して、**確認**ボタンを押します。

![image (2).jpeg](https://qiita-image-store.s3.amazonaws.com/0/86046/e98520ba-3ce3-60e0-67ed-b5f0e12cd30f.jpeg)

### 手順5. 確認する
利用規約に同意して、**作成**ボタンを押します。

<img width="378" alt="スクリーンショット 2018-05-06 10.19.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/61d42148-eb17-db66-7c0d-c871cbb9017d.png">

### 手順6. 設定情報を控える

作成したチャネルを選択します（左矢印をクリックします）。
<img width="302" alt="スクリーンショット 2018-05-06 10.29.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/e6ac408a-c091-c1bb-bf91-5852e118944d.png">

- **メッセージ送受信設定**の**アクセストークン**に表示されている**再発行**ボタンを押します。

<img width="627" alt="スクリーンショット 2018-05-06 10.32.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/ba5bbbaa-0b3e-26c7-0fcb-678eebf31b09.png">
- **アクセストークンを再発行しますか？**が表示されるので、**再発行**ボタンを押します。

<img width="421" alt="スクリーンショット 2018-05-06 10.47.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/e25bcad8-28e8-c8f1-d520-1389792143df.png">

- **Webhook送信**の右側にある鉛筆アイコンを押して、**利用する**を選択し、**更新**ボタンを押します。

<img width="590" alt="スクリーンショット 2018-05-06 10.35.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/78c17ebb-0159-5cd4-5221-a723761d24b1.png">

- **LINE@機能の利用**の中の**自動応答メッセージ**の右側にある鉛筆アイコンを押して、**利用しない**を選択して**更新**ボタンを押します。

<img width="616" alt="スクリーンショット 2018-05-06 10.37.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/f427f3cc-6892-b0ad-551f-db728c358ed6.png">

- ここまで設定が完了したら、以下の内容をメモ帳に控えておきます。
 - Channel ID
 - アクセストークン（ロングターム）

## Twilio Channelsの設定

### 手順1. Twilioの管理コンソールにログインします。

- ブラウザで[ログイン画面](https://jp.twilio.com/login/kddi-web)を表示し、配布されたIDとパスワードでログインをします。

![スクリーンショット 2018-05-04 10.13.08.png](https://qiita-image-store.s3.amazonaws.com/0/86046/c0111212-a218-c0f9-9fcb-8838ca68ec84.png)

**今回のハンズオンでは、ログインIDはすべて共通となります。パスワードを間違えると他の方がロックアウトされてしまうので、間違えないようにしてください。**
**また、二要素認証を有効にしないように注意してください。**

- 右上の歯車アイコンをクリックし、**Subaccounts**を選択します。
![スクリーンショット 2018-05-04 10.14.46.png](https://qiita-image-store.s3.amazonaws.com/0/86046/ced963f3-f45b-b9fe-794b-64510fab9423.png)

- サブアカウントの一覧が表示されたら、ご自分のユーザ名（userXX）の右側にある**サブアカウントを表示**をクリックします。
- 右上にご自分のユーザ名が表示されることを確認します。

### 手順2. LINE Channelsをインストールする

- 管理コンソールの左側のスライドメニューを開き（ボタンが３つあるアイコンをクリック）、一覧の中から**Channels**を選択します。

<img width="340" alt="スクリーンショット 2018-05-06 10.52.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/1062d2a3-7421-09ea-e898-961539ba2d24.png">

- カタログの一覧の中から、**LINE**を選択します。
- **インストール**ボタンを押します。

<img width="465" alt="スクリーンショット 2018-05-06 10.54.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/37f5ad18-6e4e-a60c-29bd-566ce598e551.png">

- LINEをインストールする確認ダイアログが表示されるので、同意にチェックをして**同意してインストール**ボタンを押します。

<img width="598" alt="スクリーンショット 2018-05-06 10.54.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/4211d137-bd2e-da0b-c2b2-5b5a5db64b04.png">

- 以下の内容を設定して、最後に**保存**ボタンを押します。

|設定項目|内容|
|:---|:---|
|Programmable SMS Inbound|チェックする|
|CHANNLE ID|控えておいたLINEのChannel ID|
|CHANNEL ACCESS TOKEN|控えておいたLINEのアクセストークン（ロングターム）|

![image (4).jpeg](https://qiita-image-store.s3.amazonaws.com/0/86046/9eb55e0a-b10a-2067-2ef3-df17bb4bf97b.jpeg)

### 手順3. LINE側のWebhook URLを設定

- 保存された画面から、**受信チャネルURL**に表示されているURLをコピーします。

<img width="679" alt="スクリーンショット 2018-05-06 11.03.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/0268f908-66c3-eab6-da6e-f7e658c33d1a.png">

- LINE側のコンソールに移動し、**Webhook URL**の右側にある鉛筆アイコンをクリックし、コピーしたURLを貼り付けます。貼り付ける際に、先頭のhttpsを削除してください。

<img width="585" alt="スクリーンショット 2018-05-06 11.05.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/82d2e584-c0c0-7449-906b-6ce57ac3040f.png">
- **更新**ボタンを押します。
- **接続確認**ボタンを押して、**成功しました**と表示されることを確認します。

<img width="590" alt="スクリーンショット 2018-05-06 11.06.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/41c23297-3512-6f69-4081-465412317e89.png">

### 手順4. LINEチャネルに友達登録

- LINE側に表示されているQRコードを使って、この時点でLINEチャネルに友達登録しておきます。

<img width="390" alt="スクリーンショット 2018-05-06 11.12.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/b4c4164c-b008-5a5d-b841-94b12092b83e.png"><img width="393" alt="スクリーンショット 2018-05-06 11.12.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/04859ed5-0e7b-aecf-1091-bd5c093d7a92.png">

## Studioを使ってLINE Botを作成する

今回は、ノンコーディングでコールフローが作成できるTwilio Studioを利用し、LINE側にメッセージが届いたら、自動で応答するボットを作成したいと思います。

### 手順1. Twilio Studioを作成する

- Twilioの管理コンソールの左側にあるスライドメニューから、**Studio**を選択します。

<img width="338" alt="スクリーンショット 2018-05-06 11.25.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/a8b9347a-441e-adf1-f614-b67c141cfc7e.png">
- **Create a flow**ボタンを押します。
- **FLOW NAME**欄に「LINEBot」と入力し、**Next**ボタンを押します。

<img width="600" alt="スクリーンショット 2018-05-06 11.26.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/400278b8-1e00-86c1-2bcf-4443d558e274.png">

- New Flowダイアログが表示されるので、**Start from scratch.**が選択されていることを確認してから、**Next**ボタンを押します。

<img width="599" alt="スクリーンショット 2018-05-06 11.27.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/e579eb5b-3753-658f-0855-e671b24692d0.png">

### 手順2. 単純にオウム返しをするボットを作成する

- **WIDGET LIBRARY**から、**Send Message**ウィジェットをキャンバスにドラッグ・アンド・ドロップします。
- Triggerボックスの**Incoming Message**と、追加したウィジェットの左上の丸をつなぎます。

<img width="370" alt="スクリーンショット 2018-05-06 11.30.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/8c5c5b3a-5433-9830-c43c-83db6422ef91.png">

- **send_message_1**ボックスを選択し、表示されるプロパティ画面の**MESSAGE BODY**欄に、{{trigger.message.Body}}と入力して、**Save**ボタンを押します。

### 手順3. Twilio ChannelsのWebhookを設定する

- Triggerボックスを選択し、プロパティ画面の**WEBHOOK URL**に表示されているURLをコピーします。

<img width="315" alt="スクリーンショット 2018-05-06 11.35.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/bfb1bc1f-edcb-213f-0c8a-4fb1be03feec.png">

- LINE Channelsの設定画面に移動し、**Configuration**の中の**CALLBACK URL**に、今コピーしたURLを貼り付けます。
- **保存**ボタンを押します。

### 手順4. テスト

- LINEでメッセージを送信すると、送信したメッセージが返信されることを確認します。

<img width="349" alt="スクリーンショット 2018-05-06 11.40.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/deb0809f-00b7-c8bb-baef-23a4ff4c2100.png">

## メッセージの内容に従って、応答内容を変えてみる

ここでは、Twilio Studioの機能をもう少し色々使って、ユーザからのメッセージに応じて返信内容を変更してみたいと思います。具体的には、「クーポン」という文字が含まれるメッセージを受け取ったら、クーポンを送信するように変更します。

### 手順1. 先程作成したStudioフローを開く

- Twilio管理コンソールのスライドメニューから、**Studio**を選択します。
- 先程作成したFLOW（LINEBot）を選択して開きます。

### 手順2. クーポン送信用ウィジェットを準備する

- **WIDGET LIBRARY**から**Send Message**ウィジェットをキャンバスにドラッグします。
- プロパティページの**MESSAGE BODY**に、「クーポンをお送りします。」と入力します。
- 同じくプロパティページの**MEDIA URL**に、`https://thistle-anteater-5871.twil.io/assets/LINECoupon.jpg`と入力します。
- **Save**ボタンを押します。

### 手順3. Splitウィジェットを準備する

- **WIDGET LIBRARY**から**Split Based On...**ウィジェットをキャンバスにドラッグします。
- **Trigger**ボックスの**Incoming Message**から伸びている線を、今ドラッグしたSplitボックスにつなぎ直します。

![スクリーンショット 2018-05-07 12.56.12.png](https://qiita-image-store.s3.amazonaws.com/0/86046/e4016b88-e9b8-f41b-e289-610fc4b94a72.png)

- Splitボックスを選択し、プロパティページの**COMPARISON VALUE**から、**triger.message.Body**を選択します。

![スクリーンショット 2018-05-07 11.53.21.png](https://qiita-image-store.s3.amazonaws.com/0/86046/a9619339-dea8-48bf-cef7-a069461c419c.png)

- **Transitions**タブに移動し、**NEW CONDITION**の**+**アイコンをクリックします。
- **IF VALUE EQUAL_TO...**を以下のように設定します。

![スクリーンショット 2018-05-07 13.15.05.png](https://qiita-image-store.s3.amazonaws.com/0/86046/63d7d672-270a-e66c-097a-562b2fb96146.png)

- **No Condition Matches**の線を、元々作成していた**send_message_1**ボックスにつなぎます。

![スクリーンショット 2018-05-07 13.05.10.png](https://qiita-image-store.s3.amazonaws.com/0/86046/b253351a-cec7-fa30-85d3-2c2b0633a577.png)

- **Save**ボタンを押します。

### 手順4. テスト

再度LINEのメッセージを送信してみます。
「クーポン」を含むメッセージを送信した時だけ、クーポンが送られてくることを確認します。

## Twilio Messaging API経由でLINEにメッセージを送る

今までの手順では、ユーザからのメッセージに応答するBotを扱いましたが、ここではTwilio Messaging APIを使って、システムからユーザにメッセージを送りたいと思います。

### 手順1. LINEのユーザIDを控える

Messaging APIを使ってメッセージを送信するためには、宛先IDが必要です。LINEの場合は、`line:`で始まる文字列が該当します。今回は、Studioでやり取りしたときのログから、ユーザのIDを検索します。なお、チャネル側のIDは、LINE側で生成されたLINEのChannel IDに`line:`を付加したものとなります。

- 先程作成したStudioフローを開き、ログの一覧を表示させます。

![スクリーンショット 2018-05-07 13.31.38.png](https://qiita-image-store.s3.amazonaws.com/0/86046/b5827db1-56e4-0a18-8ab7-b36a967b70fe.png)

- いずれかのログ（正しくメッセージ応答されたもの）を開きます。
- **Trigger**ログを展開し、**Widget & Flow Properties**を開きます。
- **Flow Data**の内容を確認し、**message**の**From**に表示されている`line:`から始まる文字列を控えておきます。

![スクリーンショット 2018-05-07 13.43.23.png](https://qiita-image-store.s3.amazonaws.com/0/86046/4599c70b-b638-d6b5-2602-bc05c3d03c15.png)

### 手順2. Twilio Functionsの環境を整える

今回は、Messaging APIを実行するために、Twilio Functionsを利用します。Twilio Functionsは、Twilioが提供するサーバーレスのソリューションで、Node.jsで書かれたコードをTwilio上で実行することができます。
まずは、Function内部からRestAPIを呼び出すための準備をします。

- 管理コンソールにスライドメニューを開き、**Runtime**を選択します。

![007 (1).png](https://qiita-image-store.s3.amazonaws.com/0/86046/8e006277-a734-bf8d-081b-d110455070d0.png)
- **Runtime**メニューの中から、**Functions**を選択します。
- さらに**Configure**を選択します。
- **Enable ACCOUNT_SID and AUTH_TOKEN**のチェックを入れます。

<img width="1372" alt="スクリーンショット 2018-05-08 09.54.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/befcc743-989b-5a61-8c6f-2847aaf031fe.png">

- **Save**ボタンを押します。

### 手順3. Twilio Functionsを作成する

実行するコードを準備します。

- **Runtime**メニューの中の**Functions**、**Manage**を選択します。
- **Create a Function**ボタンを押して、新規にFunctionを作成します。
- **New Function**ダイアログが表示されますので、**Blank**を選択して、**Create**ボタンを押します。
- **FUNCTION NAME**に、「sendMessage」と入力します。
- **PATH**に、「/sendMessage」と入力します。

![スクリーンショット 2018-05-07 14.58.19.png](https://qiita-image-store.s3.amazonaws.com/0/86046/032fc64e-9488-9ba3-499b-2a59cb8f0d75.png)

- **ACCESS CONTROL**のチェックはOFFにします。
- **EVENT**はそのままでOKです。
- **CODE**に書かれているデフォルトのコードを削除し、以下のコードを貼り付けます。

```lang:sendMessage
exports.handler = function(context, event, callback) {
  context.getTwilioClient().messages.create({
    to: 'line:xxxxxxxxxxxxxxxxxxxxxx',
    from: 'line:xxxxxxxxxx',
    body: 'クーポンを送ります。',
    mediaUrl: 'https://thistle-anteater-5871.twil.io/assets/LINECoupon.jpg'
  }).then(msg => {
    callback(null, msg.sid);
  }).catch(err => callback(err));
};
```

- **to**と**ｆrom**をそれぞれユーザのLINE ID（先程調べたもの）と、LINEのチャネルIDに書き換えます。
- **Save**ボタンを押して、保存とデプロイを行います(デプロイには少し時間がかかりますが、デプロイが完了すると画面上に緑色のメッセージバーが表示されます)。
- **PATH**欄に表示されているURLをコピーします。

### 手順3. テスト

- ブラウザで新しいタブを開き、手順２でコピーしたURLを実行します。
- クーポンがLINEに届くことを確認します。

## まとめ

Twilio Channelsを使うことで、LINEを始めとする様々なチャネルを、Twilioと簡単に接続することができます。特に、TwilioのMessaging APIを通じてメッセージが送れるということで、宛先アドレスを変更するだけで、LINEやSMS、Facebookなど同じコードでメッセージが送れます。
今後、AlexaやTwitterなど、色々なチャネルが追加される予定ですので、今後のTwilio Channelsにもご期待下さい。