Help us understand the problem. What is going on with this article?

LINE連携 ハンズオン

はじめに

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

なお、LINE連携の動画もありますので、併せて御覧ください。

必要条件

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

  • 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コンソールにログインします。

  • ブラウザでログイン画面を表示し、LINEに登録してあるメールアドレスとパスワードでログインをします。

LINE_1.png

手順2. 開発者として登録する(初回ログイン時のみ)

名前とメールアドレスを入力して、LINE Developesコンソールで開発者アカウントを作成します。

LINE_2.png

手順3. 新規プロバイダーを作成する

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

LINE_3.png

手順4. チャネルを作成する

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

image (2).jpeg

手順5. 確認する

利用規約に同意して、作成ボタンを押します。

スクリーンショット 2018-05-06 10.19.06.png

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

作成したチャネルを選択します(左矢印をクリックします)。
スクリーンショット 2018-05-06 10.29.18.png

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

スクリーンショット 2018-05-06 10.32.23.png
- アクセストークンを再発行しますか?が表示されるので、再発行ボタンを押します。

スクリーンショット 2018-05-06 10.47.00.png

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

スクリーンショット 2018-05-06 10.35.27.png

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

スクリーンショット 2018-05-06 10.37.28.png

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

Twilio Channelsの設定

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

  • ブラウザでログイン画面を表示し、配布されたIDとパスワードでログインをします。

スクリーンショット 2018-05-04 10.13.08.png

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

  • 右上の歯車アイコンをクリックし、Subaccountsを選択します。
    スクリーンショット 2018-05-04 10.14.46.png

  • サブアカウントの一覧が表示されたら、ご自分のユーザ名(userXX)の右側にあるサブアカウントを表示をクリックします。

  • 右上にご自分のユーザ名が表示されることを確認します。

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

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

スクリーンショット 2018-05-06 10.52.17.png

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

スクリーンショット 2018-05-06 10.54.04.png

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

スクリーンショット 2018-05-06 10.54.44.png

  • 以下の内容を設定して、最後に保存ボタンを押します。
設定項目 内容
Programmable SMS Inbound チェックする
CHANNLE ID 控えておいたLINEのChannel ID
CHANNEL ACCESS TOKEN 控えておいたLINEのアクセストークン(ロングターム)

image (4).jpeg

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

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

スクリーンショット 2018-05-06 11.03.14.png

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

スクリーンショット 2018-05-06 11.05.17.png
- 更新ボタンを押します。
- 接続確認ボタンを押して、成功しましたと表示されることを確認します。

スクリーンショット 2018-05-06 11.06.53.png

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

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

スクリーンショット 2018-05-06 11.12.30.pngスクリーンショット 2018-05-06 11.12.55.png

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

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

手順1. Twilio Studioを作成する

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

スクリーンショット 2018-05-06 11.25.45.png
- Create a flowボタンを押します。
- FLOW NAME欄に「LINEBot」と入力し、Nextボタンを押します。

スクリーンショット 2018-05-06 11.26.57.png

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

スクリーンショット 2018-05-06 11.27.57.png

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

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

スクリーンショット 2018-05-06 11.30.39.png

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

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

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

スクリーンショット 2018-05-06 11.35.11.png

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

手順4. テスト

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

スクリーンショット 2018-05-06 11.40.14.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

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

スクリーンショット 2018-05-07 11.53.21.png

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

スクリーンショット 2018-05-07 13.15.05.png

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

スクリーンショット 2018-05-07 13.05.10.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

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

スクリーンショット 2018-05-07 13.43.23.png

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

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

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

007 (1).png
- Runtimeメニューの中から、Functionsを選択します。
- さらにConfigureを選択します。
- Enable ACCOUNT_SID and AUTH_TOKENのチェックを入れます。

スクリーンショット 2018-05-08 09.54.16.png

  • Saveボタンを押します。

手順3. Twilio Functionsを作成する

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

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

スクリーンショット 2018-05-07 14.58.19.png

  • ACCESS CONTROLのチェックはOFFにします。
  • EVENTはそのままでOKです。
  • CODEに書かれているデフォルトのコードを削除し、以下のコードを貼り付けます。
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));
};
  • tofromをそれぞれユーザのLINE ID(先程調べたもの)と、LINEのチャネルIDに書き換えます。
  • Saveボタンを押して、保存とデプロイを行います(デプロイには少し時間がかかりますが、デプロイが完了すると画面上に緑色のメッセージバーが表示されます)。
  • PATH欄に表示されているURLをコピーします。

手順3. テスト

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

まとめ

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

mobilebiz
フルスタックエンジニア。趣味は料理。 2014年7月に、留守番電話が文字で届く国内初の留守電サービス「TRANSREC」をリリース。 2015年4月にSmart Communication Award 2015で「自動電話リレーサービス」が最優秀賞を受賞。 2016年2月よりTwilioエヴァンジェリスト。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした