GASで気軽にLINEボット開発!カルーセル表示のサンプルコード

  • このエントリーをはてなブックマークに追加

LINEボットを作りたい!という場合、GoogleAppScript(GAS)からLINE MessagingAPIを呼び出せばすぐに実装できます。テキストメッセージではなく、カルーセル表示を使って実装するためのサンプルコードをご紹介します。

カルーセルとは、写真やタイトルリンクがスライドして横に動くやつです。

私が作ったニュース検索ボット「AutomaNews」でも利用していますので、ぜひ友達追加をして使ってみてください!

友だち追加

カルーセルは、LINEの場合はテンプレートメッセージというものを使います。最大10個表示することができます。

以下は、LINE Developers からプロバイダ登録をして、フリープランで設定したチャネルを使用しています。

以下のコードをGASに貼り付けて「公開」→「WEBアプリケーションとして導入」し、生成されるURLをLINEチャネルの「Webhook URL」に設定すればカルーセル2個のサンプルが動くはずです(多分!笑)。

動かなければご連絡ください…!

 

var 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;

  //カルーセルの中身
  reply_colums = [
  {
    "thumbnailImageUrl": "サムネイル画像URL",
    "title": "タイトル1",
    "text": "テキスト1",
    "actions": [
    {
      "type": "uri",
      "label": "»記事を読む",
      "uri": "飛び先URL",
    }]
  },
  {
    "thumbnailImageUrl": "サムネイル画像URL",
    "title": "タイトル2",
    "text": "テキスト2",
    "actions": [
    {
      "type": "uri",
      "label": "»記事を読む",
      "uri": "飛び先URL",   }]
  }];

  reply_message = [{
    "type": "template",
    "altText": "Automa News",
    "template": {
      "type": "carousel",
      "actions": [],
      "columns": reply_colums,
    }
  }];

  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': reply_message,
    }),
  });

  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

 

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*