How to make datas our friends

「エンジニアは発信していくことが責務である」という言葉に感化されて始めた勉強したことを書き留めていく備忘録的なやつ。

LINE API x Google App Script で bot を作成した話

f:id:minion024:20170717181521p:plain

あらすじ

友達とLINEしてるときに、グループにBotを追加したら面白そう!便利そう!夢がある!と思いたちBotの作成にチャレンジしました。

LINEが Messaging API というものを提供しているので、今回はこれを使用します。
business.line.me

サーバーを用意するのが面倒だったので、GASで出来ないかちょっと調べたらGASで実装している先人が結構いたので、僕もGASを使用して実装することにしました。

作成手順

まずは、LINE BUSINESS CENTERからアカウントの作成を行います。
アカウントの作成は手順通りにやれば5分くらいで終わりました。
ちなみに今回は Developer Trial でやります。

ちなみに料金はこんな感じ。(2017/07/14時点)
f:id:minion024:20170716023401p:plain

アカウントの作成が完了したらアカウントリストからBot用のビジネスアカウントを作成します。

ビジネスアカウントの作成が完了したらLINE@ MANAGERから作成したビジネスアカウントの設定が変更できるようになります。

APIを有効にするため、FVに以下のような画面が表示されているので Enable API のボタンを押下。
f:id:minion024:20170716024407p:plain

APIを有効にするといくつか使用できない機能があるっぽいです。
f:id:minion024:20170716024719p:plain

問題ないのでそのまま進めると Setting 画面が表示されます。
全て使用したいので全て許可しました。笑
f:id:minion024:20170716025028p:plain:w300

BOTの名前が思いつかなったのでとえりあえず「さちこ」にしました。
よろしくね、さちこちゃん。
f:id:minion024:20170716030903p:plain:w300

つづいてGASを使用してサーバーをたてます。
GoogleDriveにアクセスしてGoogle App Scriptを新規作成します。
「その他」にGASがなければ「+アプリを追加」で選択可能になります。
f:id:minion024:20170716032157p:plain

Script内に下記を記載して適当なタイトルを付けて保存。

function doGet() {
  return ContentService.createTextOutput('さちこです')
}

メニューの「公開」から→「ウェブアプリケーションとして導入」を選択。
権限周りの設定を行い、更新すると公開用のURLが作成されるので、コピーしてどこかに保存しておきましょう。

f:id:minion024:20170717173759p:plain:w300

このURLにアクセスすると「さちこです」と健気に表示されるはず。
これでサーバーの用意は完了したので、先程のURLをLINE側で設定します。

LINE Developersにアクセスして、Basic information から Webhook URL の設定を変更できるので先程のURLを設定。

これで、Botが返信できるようになったはずです。

とりあえず、メッセージを送信するとオウム返しで "「◯◯」ですか?" と返信するコードを書いてみます。

var CHANNEL_ACCESS_TOKEN = 'LINE DevelopersからコピーしてきたChannel Access Token';

function doPost(e) {
  var reply_token= JSON.parse(e.postData.contents).events[0].replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }
  var user_message = JSON.parse(e.postData.contents).events[0].message.text;
  var url = 'https://api.line.me/v2/bot/message/reply';
  
  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': [{
        'type': 'text',
        'text': '「' + user_message + '」ですか?',
      }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);*/
}

コードを書いたら、再度メニュー「公開」からデータの更新をかけます。
このとき、「プロジェクトバージョン」を「新規作成」にしないと、編集が反映されないので注意です。

ここまで、やればBotがオウム返しで返信してくれるようになっているはず。
友達追加で作成したBotを追加して、メッセージを送信します。

オウム返しでかえってくるはず。

f:id:minion024:20170717174231j:plain:w300

もし、返ってこないときはGASの公開範囲周りをいじってみてください。全員アクセスできる権限になっていないとレスポンスが返ってこないです。

とりあえずBotの土台が出来上がったので、後は好きなように改造するだけです。
初めてBotを作りましたが、意外と簡単にできました〜。

暇なときに改造して、賢いBotにしていこうと思います。笑

f:id:minion024:20170717175412j:plain:w300