【LINE Messaging API入門①】LINE Messaging APIを使ってスプレッドシートでメッセージを受け取る方法

この記事では、LINEが提供するAPI「LINE Messaging API」を使ってデータをスプレッドシートに受け取る方法を紹介します。

主にこれからLINE Messaging APIを使ってみたい方向け。

これを実践すれば、なんとなくMessaging APIの使い方がわかると思います。あとは発想次第でいかほどにもできるはず!

解説がめちゃくちゃ長くなってしまったので、コードだけ知りたい方はこちらから飛んでください。。

LINE Messaging APIとは?

Messaging APIは、あなたのサービスとLINEユーザーの双方向コミュニケーションを可能にする機能です。
https://developers.line.biz/ja/services/messaging-api/

LINE公式アカウントのメッセ―ジ機能を外部でも使えるようにしたAPI。この機能を使うことで自社サービスとかアプリでもメッセージ機能を組み込めるわけですね。

使い道はいろいろあります。詳しくはこちらの記事
image.png

出典:Messaging APIの概要

今回はLINE Messaging APIを実際に使ってみてどんな値が返ってくるのかなどを見ていきます。

LINE Messaging APIを使ってスプレッドシートでデータを受け取る方法

最初に全体のフローから。今回は以下の手順で行います。

作業手順

  1. スプレッドシート・GASの準備

  2. LINE公式アカウントを作成する

  3. チャネルを作成する

「すでにLINE公式アカウント・チャネルを作成している」という方は2の手順を無視してください。

スプレッドシート・GASの準備

先に、LINEからのメッセージを受信するスプレッドシートを用意します。適当にスプレッドシートを準備してください。

準備できたら、「拡張機能」タブから「Apps Script」を選択します。

image-1.png

そうするとGAS(Google Apps Script)の画面が開かれます。

image-2.png

コードを書いていく

次にLINE Messaging APIから受け取ったデータをスプレッドシートに書き込むためのコードを記述します。

とりあえず全文を記述します。こちらをコードエディタに丸ごと貼り付けてください。

function doPost(e) {
  const sheet = SpreadsheetApp.getActive().getActiveSheet(); // スプレッドシートを取得
  const data = JSON.parse(e.postData.contents); // LINEから受け取ったJSONデータ

  sheet.getRange(1,1).setValue(new Date()); // スプシの1:1に取得日付を書き込み
  sheet.getRange(1,2).setValue(data.events); // 1:2に取得したJSONデータ内のeventsオブジェクトを書き込み
}

※このコードではメッセージの取得よりもまずAPIから返ってくる値を見るためのものです。後ほどコードは改変します。

各コードの意味はコメント通りです。この例ではスプシのA1:1に日付、A1:2に取得データを書き込むようにしています。

関数名のdoPost(e)は、GASにおけるHTTP POSTメソッドです。doPostを使ってデータの受け渡しを行います。

ちなみにAPIから返ってくる中身、{e}の中身はどうなっているのかも見てみましょう。

{
  "destination": "xxxxxxxxxx",
  "events": [
    {
      "type": "message",
      "message": {
        "type": "text",
        "id": "14353798921116",
        "text": "Hello, world"
      },
      "timestamp": 1625665242211,
      "source": {
        "type": "user",
        "userId": "U80696558e1aa831..."
      },
      "replyToken": "757913772c4646b784d4b7ce46d12671",
      "mode": "active",
      "webhookEventId": "01FZ74A0TDDPYRVKNK77XKC3ZR",
      "deliveryContext": {
        "isRedelivery": false
      }
    },
    {
      "type": "follow",
      "timestamp": 1625665242214,
      "source": {
        "type": "user",
        "userId": "Ufc729a925b3abef..."
      },
      "replyToken": "bb173f4d9cf64aed9d408ab4e36339ad",
      "mode": "active",
      "webhookEventId": "01FZ74ASS536FW97EX38NKCZQK",
      "deliveryContext": {
        "isRedelivery": false
      }
    },
    {
      "type": "unfollow",
      "timestamp": 1625665242215,
      "source": {
        "type": "user",
        "userId": "Ubbd4f124aee5113..."
      },
      "mode": "active",
      "webhookEventId": "01FZ74B5Y0F4TNKA5SCAVKPEDM",
      "deliveryContext": {
        "isRedelivery": false
      }
    }
  ]
}

こちらはMessaging APIリファレンスに記述されている例です。

色々と書いていますが、とりあえず {events} オブジェクトにテキスト情報などの値が入っていることが分かればOKです。

デプロイする

では先程書いたコードを動かすため、「デプロイ」しましょう。まずは、右上の「デプロイ」をクリック。その後「新しいデプロイ」をクリックします。

abfe4c4eb2daef67c532fc38316c9cae.png

デプロイタイプを選択してくださいと言われるので、ウェブアプリを選択します

6f265a411734603a6fddbc1f496cc4f5-1.png

共通先を「全員」に変更しデプロイをクリック。

abfe4c4eb2daef67c532fc38316c9cae-1.png

デプロイが完了したら、下記の画面が出てくるのでURLをコピーします。

abfe4c4eb2daef67c532fc38316c9cae-2.png

ここまでで、GASの準備は完了です。次はAPI側(LINE)の設定を行っていきます。

LINE公式アカウントを作成する

アカウントを作成済の方はこの手順は飛ばし、ログインしてSTEP2に進んでください。

アカウントの作成

アカウントの開設|LINE for Business

  • 上記リンクから「LINE公式アカウントをはじめる」をクリック

  • LINEアカウントから作成 or メールアドレスで登録してください。

まずはアカウントを作成してダッシュボードに移動します。

webhookをオンにする

ダッシュボード上の「設定」メニューを選択し、「応答設定」→「Webhook」をオンにしてください。
d5bd425733e2dfb591b54063c00d266d-1024x735.png

チャネルを作成する(LINE Developer)

おつぎに、さっきWebhookをオンにした下のリンク「Messaging APIの設定画面を開く」をクリック。そしたら「LINE Developer」に飛びます。

初期状態だとログインする必要があるので、ヘッダーにあるボタン「コンソールにログイン」を押してログインしておいてください。

ログインしたらダッシュボード画面が開かれるので、まずはプロバイダーを作成してください。

LINE_Developers-1-1024x445.png

作成したら、チャネルを作れと言われますので、Messaging APIを選択しましょう

LINE_Developers-1024x661.png

選択したらチャネル作成の画面に飛びます。色々と入力しなければならないですがここは適当に入力してください!

入力が必須な項目

  • 会社・事業者の所在国・地域

  • チャネル名

  • チャネル説明

  • 大業種

  • 小業種

作成できたらダッシュボードが表示されます。

「Messaging API」のタブを開き下記の「Webhook設定」でさっきGAS上でコピーしたウェブアプリURLを貼り付けます。

LINE_Developers-2.png

これで準備はOKです。

LINEメッセージをスプレッドシートで受け取ってみよう

ようやく記事の本題です!(長かった...)

というわけでLINEメッセージをスプレッドシートで受け取ってみます。といってもGASを準備するで解説したコードを少し変更するだけです。

コードを更新する

function doPost(e) {
  let sheet = SpreadsheetApp.getActive().getActiveSheet(); // スプレッドシートを取得
  let eventData = JSON.parse(e.postData.contents).events[0]; // LINEから受け取ったJSONデータ

  // シートの最終行に、取得日付とテキストを書き込み
  sheet.appendRow(
    [
      new Date(),
      eventData.message.text,
    ]
  );
}

※ちなみに今回のコードだとスタンプや画像を送ると、テキスト情報がないので日時だけ表示されるみたいな形になると思います。

デプロイを更新する

デプロイバージョンを更新しないと反映されないので更新します。

  1. 更新したコードをCtrl + Sで上書き保存

  2. 「デプロイ」ボタン→「デプロイを管理」を選択

  3. 右上の鉛筆マークをクリック⇒バージョンを「最新のバージョン」に選択

  4. 更新する

この手順で更新すれば、正常に更新後のコードが反映されるようになります。

これで先ほど作ったLINE公式アカウントに対してメッセージを送ってみます。

image-4.png

こんな感じでメッセージが書き込まれているはずです!

まとめ

というわけで、LINE MEssaging APIでメッセージをスプシに受け取る方法を解説しました。

内容的には、APIからJSONデータを受け取って表示させるというごくごく普通の内容でしたが。。最初にリファレンスを見たときによくわからなかったので、備忘録として。。

誰かの参考になればうれしいです。

では!