読者です 読者をやめる 読者になる 読者になる

ノンプログラミングで作る LINE Bot

ご存じの方も多くいらっしゃると思いますが、LINE Bot Awards というイベントが開催されます。 botawards.line.me

弊社アプレッソも API 提供パートナーとして協賛させていただくことになりました。

「LINE Bot を作ってみたいけど、プログラムが書けない・・・」そんな方のために、DataSpider を使ってノンプログラミングで LINE Bot を作る方法をお届けします。

事前準備

LINE Bot を作るためには、大まかに言うと以下の作業が必要です。

  1. LINE Developers で Bot 用アカウントを作る

  2. Access Token を取得する

  3. User ID を取得する

  4. エンドポイントを指定する

  5. Bot アプリケーションを開発する

1~3 の作業は先輩である脇野さんが以前書いてくれたので↓の記事を参考にしてください。 ちなみに、脇野さんが使ったのは「Push Message API」というプッシュ型でメッセージを送信する API です。単純に自動返信してくれる Bot を作るだけではなく、プッシュ通知を活用してスケジュールによる配信の仕組みも作ると更に面白いものになるかもしれませんね。 qiita.com

今回はノンプログラミングで Bot を作るということで、4~5 を DataSpider を使って作っていこうと思います。 f:id:dsstsukky:20161226081142p:plain

Webhook の設定

LINE Bot は LINE developers で指定したエンドポイントあてに Webhook でメッセージが送信され、それに対して Reply Message API を使って返信をします。DataSpider では HTTP トリガーを使ってエンドポイントを作成します。

では、まずはじめに HTTP トリガーででメッセージを受信する仕組みを作ってみましょう。作るスクリプトは以下の通りです。

f:id:dsstsukky:20161226085203p:plain

XML 変数(入力変数)を作成し、受信したデータを XML出力でファイルに書き出します。 では、このスクリプトをサービス化し、HTTP トリガーの設定しましょう。

f:id:dsstsukky:20161226085652p:plain:w300 f:id:dsstsukky:20161226085827p:plain:w300

続いて、HTTP トリガーで発行された URL を LINE developers の Webhook の URL に指定します。

f:id:dsstsukky:20161228053841p:plain:w300

これで設定は完了です。では早速自分のスマホからメッセージを送ってみましょう。 まだ Reply の設定をしていないので特に返事は帰ってきませんが、XML 出力の設定をしていたので XML ファイルが出力されているはずです。 出力された XML ファイルを開いてみるとこんな形で出力されています。

f:id:dsstsukky:20161226091825p:plain

実際に送られてきている情報は json 形式なのですが DataSpider では内部的に XML に変換しており上記のように出力されています。このうち重要な部分3箇所にわかりやすいように赤線を入れました。上から順に

 「repleyToken(返信時に使う)」

 「userId(送信者ごとに振られる一意のID)」

 「text (実際にユーザーから送信されたメッセージ)」

です。これらは後ほど使います。

ここまでで、ユーザーが送信したメッセージを DataSpider が受け取っていることが確認できました。

Reply Message API の設定

それでは、続いて Bot の応答(Reply Message API)の設定の行います。

先程受信することはできましたが、どうやって返事を出せばよいのでしょうか?

LINE の API Referenceを確認してみます。

f:id:dsstsukky:20161226130910p:plain:w400

これを読み解くと・・・ f:id:dsstsukky:20161228054133p:plain:w650 といった感じでしょうか。

次に進む前に json の部分のみテキストにして保存しておきます。(ここでは linereply.json というファイル名で保存したと想定します)

では、REST アダプタを使ってこれらの設定を行っていきましょう。それでは、DataSpider のスクリプトキャンバスに RESTアダプタ(POST)とMapping アイコンを配置しましょう。

まず、REST アダプタから設定します。 接続先(グローバルリソース)では接続先 URL の指定をします。

f:id:dsstsukky:20161226144459p:plain:w350

続いて、[ヘッダ設定]でリクエストヘッダの設定をします。({ENTER_ACCESS_TOKEN}は自分のアクセストークンに置き換えてください)

f:id:dsstsukky:20161226140617p:plain:w350

その後、[リクエスト設定]でデータの入力元として先程保存した json ファイル(linereply.json)を指定します。これは実際の入力データを指定している訳ではなく、入力データのスキーマ情報を指定しているイメージでお考えください。 f:id:dsstsukky:20161226145206p:plain:w350

ここまで来たら REST アダプタは完了して閉じ、続いて Mapping アイコンを開きます。

先程[リクエスト設定]で json ファイルを読み込んだことにより、「出力先」にスキーマ情報が定義されていることを確認します。

f:id:dsstsukky:20161226150232p:plain:w350

続いて、「入力元」で仮スキーマの作成を行い、「スキーマの読み込み」で Webhook の設定 の時に出力された XML ファイルを指定します。 これにより、「入力元」「出力先」それぞれのスキーマの定義が行われました。

f:id:dsstsukky:20161226150835p:plain:w600

上記の状態になったことを確認後、出力先スキーマに対して以下の作業を行います。

  1. スキーマ定義の下の方の element を削除します。

  2. 「object」「array」「text」と書いている箇所については、「単一行文字列定数」アイコンにてそれぞれ「object」「array」「text」と入力し、下図の通り出力スキーマにリンクを張ります。

  3. 「メッセージ」と書いている箇所は、「単一行文字列定数」アイコンにて送信したいメッセージの中身を指定します。

  4. replyToken は入力元から直接出力先にリンクを張ります。

ここまで設定を行ったものが下の画像です。 f:id:dsstsukky:20161226153856p:plain

あとはお作法通り、[Start]から[End]までプロセスフローを繋げて完成です。 f:id:dsstsukky:20161226154515p:plain

試してみよう!

では、早速自分のスマホを使ってメッセージを送ってみましょう!

f:id:dsstsukky:20161228053316p:plain:w300

う~ん・・・ 当たり前ですが、1つしか返事のパターンを設定していないので何を言っても「こんにちは」しか返ってきませんね。これでは Bot とは言えません・・・

少なくとも条件分岐を入れて送った内容によって返答が変わるようにしたいですが、長くなってきたのでそれはまた次回にお届けしたいと思います。