トップ画像イメージ

GoogleAppScriptとスプレッドシートを使って、2時間でLineBotを作ってみました。

今回は業務システムではなく、ちょっと生活に役に立つものとして、妻と共有できるお買い物リストのLineBotを作ってみました

このLineBot作成ですが、めちゃくちゃ楽しかったです。 RailsやVue.jsを使ったシステム作りも楽しいのですが、自分の生活をちょっとだけ楽にできるツール作りということで、非常にワクワクしながら、製作をすることができました。

今回は、その過程というか、作り方をご紹介したいと思います。⭐️ (2時間で適当に作ったので、酷いコードの部分がありますが、ご容赦ください。)

まずはLINE Developersに登録

こちらのサイトで認証を行います。(既に個人でLINEのアカウントを持っている前提です)

LineDevelopersイメージ

アカウントを作るまで、アカウントを作ってから必要なことなどは、以下のサイトを参考にさせていただきました。

Google Apps ScriptでLINE BOTつくったら30分で動かせた件

LINEのBot開発 超入門(前編) ゼロから応答ができるまで

こちらのサイトにしたがって、自分用のプロバイダー及びchannelを作成しておきます。 筆者の場合以下のように設定

  • アプリ名:買物リスト(仮称)
  • アプリ説明:このbotへ買ってきて欲しいものを送信すると、リストにまとめてくれます。 夫婦で共有し、効率的に旦那をパシらせましょう。
  • Webhook送信:利用する
  • Webhook URL :〜
    • ここは後で設定する
  • 自動応答メッセージ:利用しない
  • 友だち追加時あいさつ:利用する
    • 自分で設定するのが面倒だったので
  • アクセストークンの再発行をしておく。出力された文字列は後で利用します。

これでLineDevelopers側の設定は一定完了です⭐️

Googleスプレッドシートを作成

Googleアカウントを作成していない場合は、

こちらで作成して下さい

作成後、GoogleDriveへ移動

GoogleDriveイメージ

Googleドライブにアクセス後、新規ボタンを押して、Googleスプレッドシートを作成する。

GoogleDrive移動後イメージ

次のように設定

  • スプレッドシートの名前をbuy_listに変更
  • シート1をlistという名前に変更

シートの設定

グーグルスプレッドシートイメージ

スプレッドシートはA列とB1しか利用しません。

A列に買いたい物を一つづつ、セルに格納していき、B1で次のように

=TEXTJOIN(CHAR(10),true,A:A)

という数式を入れることにより、A列の値を改行区切りで繋げるようにしておきます。(これが最新のリストになります)

GASにコーディング

続いて、スプレッドシートの 「ツール」を左クリックし、「スクリプトエディタ」を開きます。

ここで、次のようにコーディングをします。

var CHANNEL_ACCESS_TOKEN = 'line_botのアクセストークン'; // 再発行していたアクセストークンを変数に格納

function doPost(e) {
  var event = JSON.parse(e.postData.contents).events[0];
  var replyToken= event.replyToken;

  if (typeof replyToken === 'undefined') {
    return; // エラー処理
  }
  
  if(event.type == 'message') {
    //ユーザーからのメッセージ
    var userMessage = event.message.text;
    //返信先のURL
    var url = 'https://api.line.me/v2/bot/message/reply';
    //スプレッドシートの読み込み
    var SS = SpreadsheetApp.openByUrl("googleスプレッドシートの編集画面のurl");
    var sheet = SS.getSheetByName("list");
    //必要な買い物リストを返却する処理
    if (userMessage == "リスト" || userMessage == "りすと"){
      //スプレッドシートの読み込み
      var list = sheet.getRange('B1').getValue();
      //メッセージ返信用の変数
      var replyMessage;
      replyMessage = "現在必要な物は\n" + list + "\nです";
    //使い方を教示する処理
    }else if (userMessage == "使い方"){
      var replyMessage = "使い方\n りすとまたはリスト と送信すると買い物が必要な物を一覧で表示できます。\n \n追加 で買物リストの追加ができます。\n(例)\n追加\n白菜\nキャベツ\n\n削除で買物リストの削除ができます。\n(例)\n削除\n白菜\nキャベツ\n\n旦那をパシらせましょう。";
    //リストへの追加。配列に格納して、スプレッドシートに追加する
    }else if (/^追加*/.test(userMessage) == true){
      arr = userMessage.split("\n");
      var lastrow = sheet.getLastRow() + 1;
      n = 1;//配列の2番目の要素からループ開始
      for (var i = 0;i < arr.length - 1;i++){
        if (arr[n] != ""){
            sheet.getRange(lastrow,1).setValue(arr[n]);
            n = n + 1;
            lastrow = lastrow + 1;
          }else{
            n = n + 1;
          }
      }
      var list = sheet.getRange('B1').getValue();
      var replyMessage = "リストに追加しました。\n現在のリストは\n" + list + "\nです";
    //リストからの削除
    }else if (/^削除*/.test(userMessage) == true){
        var lastrow = sheet.getLastRow() + 1;
        var arr = userMessage.split("\n");
        var num = 1;
        //配列の要素ごとに実行
        for (var i = 0;i < arr.length - 1;i++){
          for (var n =1;n < lastrow ;n++){
            if (arr[num] == sheet.getRange(n, 1).getValue()){
              sheet.deleteRow(n);
            }
          }
          num = num + 1;
        }
       var list = sheet.getRange('B1').getValue();
       var replyMessage = "リストから削除しました。\n現在のリストは\n" + list + "\nです";
    }else{
      var replyMessage = "使い方が分からないなら、使い方 と送ってみてください";
    }

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


このようにコーディングしておきます。

なお、

  • CHANNEL_ACCESS_TOKENには、LINE Developeresで再発行していた値を入れます
  • var SS = SpreadsheetApp.openByUrl("googleスプレッドシートの編集画面のurl")の部分には、スプレッドシートのurlを入力しておきます。

この後、

公開 ➡︎ ウェブアプリケーションとして導入 ︎を選択し、

公開するときのイメージ

  • Project versionにnewを選択
  • Execute th app as: Me
  • Who has access to t公開します。he app: Anyone,even anonymous を設定して、公開しておきます。

すると、webアプリとしてのURLが出力されるので、このurlをLine DevelopersのWebhook URLに設定しておきましょう。

利用イメージ

作ったLineBotを、LINEDevelopersのQRコード読み込みで、友達に追加します。

そこで、botとのトークで

「使い方」と送ると

使い方イメージ

とメッセージを返します。

また、

  • 追加
  • 欲しいもの
  • 欲しいもの

という形で、送信すると

使い方イメージ2

とリストに追加することができます。

最後に、

  • 削除
  • 買ったもの
  • 買ったもの

という形で送信すると、

使い方イメージ3

とリストから削除してくれます。

まとめ

  • 2時間ですぐ動くものが作れて、楽しかった
    • javascriptの基本が分かっておけば、このくらいはすぐできると思います
  • 今回のbotにはユーザーという概念がないので、その辺も考慮したい
  • 何回も同じ変数を宣言したり、無駄な記述が多いので、ちゃんとしたものを作る時には気をつけようと思う