ゆとりSEですがなにか

忘れないようにメモしてます。

調べ物してくれるLINE BOTを作った【GAS】【LINE Message API】

IT

背景

前回、天気を通知してくるトークルームを作りました。次はLINE BOT と呼ばれるモノを作ってみたのでその構築手順を公開します。

ほしいもの

構成

  • 調べた結果、下記の構成でできそうだった。

f:id:yasuhiroa24:20200710165345j:plain

必要要素

  • LINE Messaging API

Messaging APIとは、LINE公式アカウントのオプション機能で、LINEのアカウントを通じてユーザーとの双方向コミュニケーションを実現するAPI（Application Programming Interface）です。

Googleが提供しているJavaScriptベースの開発環境Google Apps Script（GAS）

キーワードを指定すると、その言葉に関するwikipediaの記述をダイジェストとして返します。

構築手順

STEP1 GASでプロジェクトを作成

f:id:yasuhiroa24:20200710161910j:plain

f:id:yasuhiroa24:20200710161936p:plain

  • スクリプトエディタが開くので、起動したプロジェクトに名前をつける

f:id:yasuhiroa24:20200710161958j:plain

f:id:yasuhiroa24:20200710162024j:plain

  • 下記の項目を設定
    • プロジェクトバージョン：New
    • 次のユーザーとしてアプリケーションを実行：自分（アドレス）
    • アプリケーションにアクセスできるユーザー：全ユーザ（匿名ユーザーを含む）

f:id:yasuhiroa24:20200710162110j:plain

画像はアプリケーションにアクセスできるユーザが「全ユーザ」で設定ミス。

f:id:yasuhiroa24:20200710162229j:plain

STEP2 LINE Messaging API の設定

  • LINE Developersにアクセスして、自分のLINEアカウント情報でログイン。

f:id:yasuhiroa24:20200710162248p:plain

  • 開発者名、メールアドレスを登録

  • コンソールページ内の「新しいプロバイダを作成する」ボタンをクリック。プロバイダ名などを設定する。プロバイダ名は、会社名や個人名にする場合が多い。

f:id:yasuhiroa24:20200710162741p:plain

  • プロバイダを作ったら「チャネル作成」ボタンで、Messaging APIのチャネルを作成し、下記の項目を設定
    • アプリアイコン画像:任意
    • アプリ名: 任意
    • アプリ説明: 任意
    • プラン: 任意
    • 大業種: 任意
    • 小業種: 任意
    • メールアドレス: 自身のメールアドレス

f:id:yasuhiroa24:20200710162315j:plain

f:id:yasuhiroa24:20200710162333j:plain

  • メッセージングAPIの下記の項目に設定

    • Webhook URL・・・先程コピーしたGoogle Apps ScriptのURLを指定
    • Webhookを使用する・・・「チェック」

f:id:yasuhiroa24:20200710162807j:plain

  • 確認ボタンで成功を確認しておく。もし失敗したら、GASのアプリケーションにアクセスできるユーザーの設定が「Anyone,even anonymous」になっているか確認。

  • チャネルアクセストークンを控えておく

  • QRコードをLINEアプリで読み込んで調べ物ボットを友達追加する

f:id:yasuhiroa24:20200710162827j:plain

f:id:yasuhiroa24:20200710163600p:plain

STEP3 コードを書く

  • GAS でコードを書く。（参考サイトの写経）
var CHANNEL_ACCESS_TOKEN = 'チャネルアクセストークン';
var line_endpoint = 'https://api.line.me/v2/bot/message/reply';
var simple_wikipedia_api = 'http://wikipedia.simpleapi.net/api';

// メッセージを受けて返信する
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 reply_messages = ['解読不可能'];

  //メッセージに「とは」があるかチェック
  if (/とは？?$/.test(user_message)) {
    // q にキーワード格納
    var q = user_message.match(/(.*)とは？?$/)[1];
    //キーワードでwikipediaapiに投げる
    var url_and_body = getWikipediaUrlAndBody(q);
    
    if (url_and_body !== null) {
      reply_messages = [
        '「' + q + '」' + 'を説明しよう。',
        url_and_body.body.substr(0, 140) + '...',
        '長いのでこの先は下記からどうぞ',
        url_and_body.url,
      ];
    }
  }
  
  var messages = reply_messages.map(function (v) {
    return {'type': 'text', 'text': v};
  });

  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': messages,
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

function getWikipediaUrlAndBody(q) {
  var url = simple_wikipedia_api + '?keyword=' + encodeURIComponent(q) + '&output=json';
  var res = JSON.parse(UrlFetchApp.fetch(url));
  if (res !== null) {
    return {'url': res[0].url,'body': res[0].body};
  } else {
    return null;
  }
}

  • GAS で「公開」から「ウェブアプリケーションとして導入」をクリック

  • プロジェクトバージョン：New にして公開。これをしないとコードが最新バージョンにならない。要注意

STEP4 テスト

  • 質問してみる。返してくれる！

f:id:yasuhiroa24:20200710163753p:plain

感想

ほぼ写経のように参考サイトを写させてもらいました。 GASとLINEに設定箇所が多く、最初設定ミスでうまく動作せず焦りました。

参考

https://qiita.com/t_o_d/items/7dcc5637ab06996c8eaa

https://devpixiv.hatenablog.com/entry/2016/11/14/150000