Skip to content

Latest commit

 

History

History
279 lines (239 loc) · 9.54 KB

LINE-中級.md

File metadata and controls

279 lines (239 loc) · 9.54 KB

Messaging APIを使ってチャットボットをつくる (無料)

LINEプラットフォームからくるHTTPリクエストをGASで受け取る

  1. LINE Official Accountを作成 (今回は初級編で利用したものを使用)

  2. LINE Official Account ManagerのSettingsよりMessaging APIを有効にする alt text alt text

  3. プロバイダーとのチャンネルをつくる (オプショナルは無視してOK) alt text プロバイダー: LINEのプラットフォームを利用してサービスを提供しようとしている主体
    チャンネル: プロバイダーとLINEのプラットフォームをつなぐシステム

こんなイメージ
alt text

このような画面が出ればチャンネルができたということ alt text

  1. 新品Google スプレッドシートをつくり、Extentions > App Scriptを作成 alt text

  2. LINEのプラットフォームから来るHTTP POSTリクエストを受けとるGASコードをかく

function doPost(e){
   let sheet = SpreadsheetApp.getActive().getActiveSheet();
   sheet.appendRow([new Date(), e.postData.contents]); 
   // e.postData.contents に LINE からの json 形式データがある
}
  1. GASのアプリをデプロイ alt text

Webアプリを選択し、誰でもアクセスできるように設定 alt text

  1. アクセスを承認 (警告が出てくるけど承認) alt text

  2. このWebアプリのURLがWebhookで使うやつだからコピー alt text

  3. Official Account ManagerのSettings > Messaging APIにあるWebhook URLにペーストして保存 alt text

  4. LINE Devlopersコンソール > プロバイダー > 該当するチャンネル > Messaging APIからQRコードをスマホのLINEでスキャンしてテキストを送ってみる or 検証ボタンを押す alt text

  5. スプレッドシートにタイムスタンプと長いテキストが来てたら成功

今回はテキストが送られるというイベントでWebhookが作動しましたが、それ以外のイベントはこちらを見てみてください

  1. HTTPリクエストで来た長いテキストを確認 JSONオブジェクトはこんな感じ (詳しくはこちら)
{
   "destination":"U********************",
   "events":[
      {
         "type":"message",
         "message":{
            "type":"text",
            "id":"4**************",
            "quoteToken":"a***********************************************",
            "text":"ちゃんとGASに送れてるかなー"
         },
         "webhookEventId":"01*********************",
         "deliveryContext":{
            "isRedelivery":false
         },
         "timestamp":1710674716872,
         "source":{
            "type":"user",
            "userId":"U********************************"
         },
         "replyToken":"d*******************************",
         "mode":"active"
      }
   ]
}

受け取った文章で遊ぶ

doPost()に色々な機能をつけていきます。 今までのコードはもう使わなくてOKです (コメントアウトしちゃう)。

  1. JSON stringをJavascriptのオブジェクトに変換
function doPost(e) {
   let parsed = JSON.parse(e.postData.contents);
}
  1. 後で使う情報をparsedから取り出す
function getContents(data) {
   let events = data.events;
   for(let i = 0; i < events.length; i++) {
      let event = events[i];
      if(event.type == 'message'){
      if(event.message.type == 'text'){
         let texts = event.message.text;
         return {event, texts}
         }
      }
   }
}

doPost()を更新

function doPost(e) {
   let parsed = JSON.parse(e.postData.contents);
   let contents = getContents(parsed); // 追加
   let conEvent = contents.event; // 追加
   let conTexts = contents.texts; // 追加
}

conEvent: あとでトークンを取り出すためのもの
conTexts: 次のステップで遊んでLINEに送り返すテキスト

  1. conTextsを反転する (別に他のことやってもいいよ〜)
function reverseChars(s) {
   let ums = s;
   ms = ums.split('').reverse().join('');
   return ms
}

またdoPost()を更新

function doPost(e) {
   let parsed = JSON.parse(e.postData.contents);
   let contents = getContents(parsed);
   let conEvent = contents.event;
   let conTexts = contents.texts; 
   let replyMes = reverseChars(conTexts); // 追加
}
  1. 返信するmessagesにreplyTokenをつける (replyMesTokenはあとでHTTP POSTする時のbodyになる)
function addReplyToken(event, repTexts) {
   let repToken = event.replyToken;
   let replyMesToken = {
   replyToken: repToken,
   messages: [{ type: 'text', text: repTexts }],
   };
   return replyMesToken
}

はいdoPost()を更新

function doPost(e) {
   let parsed = JSON.parse(e.postData.contents);
   let contents = getContents(parsed);
   let conEvent = contents.event;
   let conTexts = contents.texts; 
   let replyMes = reverseChars(conTexts);
   let repTokenAdded = addReplyToken(conEvent, replyMes); // 追加
}
  1. LINEプラットフォームに送信する (詳しくはこちら)
function reply(contents){
   let channelAccessToken = "下の画像で得るトークンをペースト";
   let replyUrl = "https://api.line.me/v2/bot/message/reply";
   let options = {
      method: 'post',
      contentType: 'application/json',
      headers: {
      Authorization: 'Bearer ' + channelAccessToken
      },
      payload: JSON.stringify(contents)
   };
   UrlFetchApp.fetch(replyUrl, options);
}

送信に必要なチャンネルアクセストークンを発行しコピーペースト (LINE Devlopersコンソール > プロバイダー > 該当するチャンネル > Messaging APIから一番下までスクロール) alt text

doPost()を更新〜

function doPost(e) {
   let parsed = JSON.parse(e.postData.contents);
   let contents = getContents(parsed);
   let conEvent = contents.event;
   let conTexts = contents.texts; 
   let replyMes = reverseChars(conTexts);
   let repTokenAdded = addReplyToken(conEvent, replyMes);
   reply(repTokenAdded); // 追加
}

最終的にGASはこうなる

function doPost(e) {
   // let sheet = SpreadsheetApp.getActive().getActiveSheet();
   let parsed = JSON.parse(e.postData.contents);
   let contents = getContents(parsed);
   let conEvent = contents.event;
   let conTexts = contents.texts;
   let replyMes = reverseChars(conTexts);
   let repTokenAdded = addReplyToken(conEvent, replyMes);
   reply(repTokenAdded);
   // sheet.appendRow([new Date(),JSON.stringify(repTokenAdded)]); 
}

function getContents(data) {
   let events = data.events;
   for(let i = 0; i < events.length; i++) {
      let event = events[i];
      if(event.type == 'message'){
      if(event.message.type == 'text'){
         let texts = event.message.text;
         return {event, texts}
         }
      }
   }
}

function reverseChars(s) {
   let ums = s;
   ms = ums.split('').reverse().join('');
   return ms
}

function addReplyToken(event, repTexts) {
   let repToken = event.replyToken;
   let replyMesToken = {
   replyToken: repToken,
   messages: [{ type: 'text', text: repTexts }],
   };
   return replyMesToken
}

function reply(contents){
   let channelAccessToken = "チャンネルアクセストークン";
   let replyUrl = "https://api.line.me/v2/bot/message/reply";
   let options = {
      method: 'post',
      contentType: 'application/json',
      headers: {
      Authorization: 'Bearer ' + channelAccessToken
      },
      payload: JSON.stringify(contents)
   };
   UrlFetchApp.fetch(replyUrl, options);
}

デプロイ

  1. Manage deploymentsから鉛筆マークをクリック alt text

  2. Versionは新しく、Descriptionはなんでも alt text

  3. デプロイしたらWeb app URLをコピーしてOfficial Account ManagerのSettings > Messaging APIにあるWebhook URLにペーストして保存 alt text GASアプリのURLはデプロイするごとに変わってしまうので新しくWebhookに登録する必要がある...がもしURLをそのままにできる方法があれば知りたいっす

  4. LINEからメッセージを送ってみる
    どうでしたか？自分が送信したテキストが逆から書かれて返信されましたか？

LINE_chatbot_demo.mov

終わり

文中以外の参考資料

神戸大学国際人間科学部の学部共通科目「プログラミング基礎演習１・２」より「Google Apps Script で LINE Bot を作成する」
LINE Developersより「Messaging APIを始めよう」