BLOG【GAS】悩みを解決してくれるLINEbotを1時間で作る

コペイ
  1. HOME
  2. ブログ
  3. フロントエンド
  4. 【GAS】悩みを解決してくれるLINEbotを1時間で作る

こないだ病院でレントゲンを撮る機会があったんだけど、

先生に

「骨が老化してるね、まだ20代なのに」

って言われました。

どうも
初老のコペイ(@kopey44)です。

今回は巷で話題沸騰の

励ましてくれる鈴木

の作り方を大公開します!!(☝︎ ՞ਊ ՞)☝︎

え?知らない?そんな人は下のQRを読み込んで友達追加。
悩み相談するとなんでも解決してくれるよ!

目次

  1. LINE編
  2. Google編
    1. Google スプレットシート作成
    2. Google Apps Script 作成
    3. 公開
  3. 完成!
  4. 最後に

LINE編

まず、LINEにて事前準備をしなくてはならないので、

【懇切丁寧ver】LINEbotを作る前の登録とMessaging APIの設定の仕方

で先に「LINE Developer」アカウントを作って下さい。

Google編

そもそもGASってなんぞ?

Google Apps Scriptとは、Googleが提供しているJavaScriptを元にしたプログラミング言語です。「Google Apps Script」の頭文字をとってGASと略され、Google Apps Script を利用すれば、GmailやGoogleカレンダー、Googleドライブなど、Googleが提供しているさまざまなサービスを連携して活用することができます。

ふむふむ。。。しかもJavaScriptが元になっていると!書きやすそう!(安直)

Google スプレットシート作成

まず、GoogleドライブからGoogle スプレットシートを作ってシートのA1から下に言葉を入れていく

この時シートの名前は実際はなんでもいいけど、ここではスプレッドシートは「良い言葉」、シートは「word」にする

こんな感じ。

LINEからPOSTされた時のjsonデータログを溜める用のスプレッドシートも作成します。
新たにシートを作成して名を「log」にします。

ここで重要なのは新規スプレッドシートではなくシートということ

こんな感じ。

Google Apps Script 作成

おなじくGoogleドライブからGoogle Apps Scriptを作成

GASを開いたら適当に「line-bot」とか名前つけてエディタに下をコピペする

// LINE Developerのアクセストークン
var access_token = "あなたのアクセストークン"
// 良い言葉リストのスプレッドシートID
var goodword_spreadsheet_id = "あなたのスプレッドシートのID"
 
/**
 reply
 */
function reply(data) {
  var url = "https://api.line.me/v2/bot/message/reply";
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + access_token,
  };
  var text = "";
  
  switch(data.events[0].message.type) {
    case 'text':
      // 良い言葉リストスプレッドシートを取得
      var goodword = SpreadsheetApp.openById(goodword_spreadsheet_id).getSheetByName('word');
      // wordのA1セルから入力されている最終行まで一気に取得
      var goodwordData = goodword.getRange(1,1, goodword.getLastRow());
      // ランダムで候補を選ぶ
      var intRandomNum = Math.round(Math.random()*goodword.getLastRow());
      
      text = goodwordData.getValues()[intRandomNum][0];
      break;
     
    case 'image':
      // 良い言葉リストスプレッドシートを取得
      var img = SpreadsheetApp.openById(goodword_spreadsheet_id).getSheetByName('word2');
      // word2のA1セルから入力されている最終行まで一気に取得
      var imgData = img.getRange(1,1, img.getLastRow());
      // ランダムで候補を選ぶ
      var imgRandomNum = Math.round(Math.random()*img.getLastRow());
      
      text = imgData.getValues()[imgRandomNum][0];
      break;
      
     case 'sticker':
      // 良い言葉リストスプレッドシートを取得
      var sticker = SpreadsheetApp.openById(goodword_spreadsheet_id).getSheetByName('word3');
      // word3のA1セルから入力されている最終行まで一気に取得
      var stickerData = sticker.getRange(1,1, sticker.getLastRow());
      // ランダムで候補を選ぶ
      var stickerRandomNum = Math.round(Math.random()*sticker.getLastRow());
      
      text = stickerData.getValues()[stickerRandomNum][0];
      break;
  }
 
  var postData = {
      "replyToken" : data.events[0].replyToken,
      "messages" : [
        {
          'type':'text',
          'text':text,
        }
      ]
    };
 
  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };
 
  return UrlFetchApp.fetch(url, options);
}
 
/**
 LINEからのPOST受け取り
 */
function doPost(e) {
  var json = JSON.parse(e.postData.contents);
  var data = SpreadsheetApp.openById(goodword_spreadsheet_id).getSheetByName('log').getRange(1, 1).setValue(json.events);
 
  reply(json);
  return response.getResponseCode();
}

このままコピペして、もし、画像やらスタンプに対応したくなったらスプレッドシートに「word2」「word3」を追加してみてください。

アクセストークンの確認方法

アクセストークンはLINE Developerで発行されてるからそれを使う

スプレットシートIDの確認方法

スプレッドシートのIDはスプレッドシートURLの中に記載されている

https://docs.google.com/spreadsheets/d/1iUAGSrJIllZxxxxxxxxxxxxxxxxxWdqPuI/edit#gid=0

こんな感じに記載されているので

1iUAGSrJIllZxxxxxxxxxxxxxxxxxWdqPuI

この部分がIDとなる

このIDを入れるだけでサーバーレスで開発できるんだからGASってめっちゃ便利!

公開

GAS のメニューに公開とあるのでそこからウェブアプリケーションとして導入をクリック

するとこんなモーダルが出てくる
保存するときは必ず

  • project versionを『NEW』
  • Execute the app asを『Me(自分のアドレス)』
  • Who has access to the appを『Anyone, even anonymous』つまり全員

で設定すること。
NEWにしてGitのごとく保存にバージョンをつけることでしっかり反映される
また権限承諾を自分にして誰でもアクセスできるようにしないと上手く接続できない。

ここで軽くハマったのが、承認作業。
googleのアカウントで承認作業が必要なのですが。。。ど、どこにもない!!?

そんなとき【初心者向けGAS】スクリプト実行時の「承認」でびっくりしないためにで解決しました。ありがとうございます!

Current web app URL

更新ボタン押して承認まで済ませているとこのモーダルになります。
ここでとっても大切なのが、このCurrent web app URL

これをLINE DeveloperのWebhook設定に記入して接続します。

編集でURL入れて検証押して「成功」と出れば完成!!!

成功以外が出る時は大概jsが間違えてるか承認できてないとかそんな感じです。

完成!

遠かった、、、
怖かった、、、
でも
時に素晴らしい夜もあった

ってことで多分本気出せば30分、LINE登録でハマっても1時間で作れるはずです。

cssつけたり選択カードやチャットも作れるのでLINEを利用して、
是非みなさんオリジナルのLINE botを作って欲しいです!

そして「励ましてくれる鈴木」利用者の絶賛(?)の声が届いてます!!

最後に

「チムドンドン」とは
沖縄の方言で
「胸がドキドキする」という意味