5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

APIを利用したLINE公式アカウントの簡単な活用方法

Posted at

はじめに

こんにちは。
最近では、LINE公式アカウントを利用している事業者が非常に多くなってきました。
LINE公式アカウントは、Web上の管理画面で行えることも非常に多いのですが、
APIを利用するとにより、より柔軟でユーザーフレンドリーなサービス提供を行うことができます。

本日は、APIを利用したLINE公式アカウントでのメッセージ送信の基礎について紹介します。

LINE公式アカウントのメッセージについて

LINE公式アカウントのAPIを利用したメッセージの送信には、複数のメッセージタイプが利用可能ですが、最も柔軟なメッセージとしてFlex Messageを利用することができます。

例えば、このようなメッセージを送信したい場合は、

以下のようなJSONデータとなります。
メッセージ内容はシンプルですが、JSONで見てみるとけっこう情報量が多く感じます。

{
  "type": "bubble",
  "header": {
    "type": "box",
    "layout": "vertical",
    "flex": 0,
    "backgroundColor": "#7C3AED",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "サンプルメッセージ",
            "weight": "bold",
            "size": "lg",
            "color": "#FFFFFFFF",
            "align": "center",
            "wrap": true,
            "contents": []
          }
        ]
      }
    ]
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "spacing": "xs",
        "paddingBottom": "md",
        "contents": [
          {
            "type": "text",
            "text": "これはサンプルです",
            "weight": "bold",
            "size": "lg",
            "wrap": true,
            "contents": []
          },
          {
            "type": "box",
            "layout": "vertical",
            "paddingTop": "lg",
            "paddingBottom": "lg",
            "contents": [
              {
                "type": "text",
                "text": "サンプルメッセージです。",
                "size": "sm",
                "wrap": true,
                "contents": []
              }
            ]
          },
          {
            "type": "button",
            "action": {
              "type": "uri",
              "label": "すごいボタン",
              "uri": "https://linecorp.com"
            },
            "style": "primary"
          }
        ]
      }
    ]
  }
}

フレックスメッセージを作成する

フレックスメッセージは、柔軟とはいえ、一から自分でJSONを記述していくのはとても大変なので、公式に2つの便利ツールが用意されています。

Flex Message Simulator

Flex Message Simulatorは、Web上のGUIでフレックスメッセージを作成できるツールとなっています。
利用するにはLINEビジネスIDが必要となります。

作成したメッセージのJSONデータをコピーすることができるので、
そのままAPIを利用してメッセージ送信が可能となっています。
複数のテンプレートも用意されているので、
自分が作成するイメージに近いテンプレートをもとに作成していくのがおすすめです。

最近では、このシミュレーターから自分のLINEアカウントに対して、作成したメッセージをテスト送信することも可能になりました。
ちょっとしたメッセージをさっと作成するのにおすすめです。

LINE Bot Designer

LINE Bot Designerはローカルのアプリケーションで、フレックスメッセージだけでなくLINE公式アカウントで扱うBotなどのシナリオ全体を作成できるツールとなっています。
こちらは、アカウント登録なく利用することが可能です。

Flex Message Simulatorとは異なり、作成したメッセージ全体や各種パーツのコピペができたり、プレビューされたメッセージの編集したい箇所をクリックすると、自動で該当フォームに遷移してくれるなど、かなり使い勝手がいいです。

ファイルとしても保存できるので、複数のメッセージを取り扱う場合はこちらがおすすめです。

チャネルアクセストークンを発行する

チャネルアクセストークンには、大きく長期のトークンと短期のトークンの2種類がありますが、特別な理由がない限りは、セキュリティ面より、短期のトークンを利用することをおすすめします。

送り先のLINE IDを取得する

LINE公式アカウントのAPIは、送信先としてLINE IDを指定する必要があります。
このLINE IDは、LINEアプリで各自が設定しているIDとは異なり、
LINE公式アカウントごとに相手を識別するための一意なIDとなっています。
よって、全く同じ人でもLINE公式アカウントごとにIDは異なります。

まずは、ユーザーリストを取得する必要があります。LINE公式アカウントを友だち追加してくれたLINE IDの一覧を取得します。ただし、この方法は認証済アカウントである必要があります。

curl -H 'Authorization: Bearer {チャネルアクセストークン}' https://api.line.me/v2/bot/followers/ids

{
  "userIds": [
    "xxxxx",
    "yyyyy",
    ...
  ]
}

さらにLINE IDが誰を指しているのかを知るには、別途プロフィールを取得する必要があります。

curl -H 'Authorization: Bearer {チャネルアクセストークン}'  https://api.line.me/v2/bot/profile/{LINE ID}

{
  "userId": "xxxxx",
  "displayName": "すごい人",
  "pictureUrl": "URL",
  "language": "ja"
}

メッセージを送信する

LINE公式アカウントのAPIを利用してフレックスメッセージを送信する方法を紹介します。
今回はNode.jsのSDKを利用して送信しています。

import { Client, Message } from '@line/bot-sdk';

// 送りたい相手のLINE ID
const lineId = 'xxxxx';

// 先ほどのサンプルメッセージ
const message: Message = {
  type: 'flex',
  altText: 'サンプルメッセージ',
  contents: {
    type: 'bubble',
    ...
  }
};

// LINE公式アカウントの管理画面で発行したチャネルアクセストークン
const channelAccessToken = 'xxxxxxxxxx';

// 送信!
const client = new Client({ channelAccessToken });
client.pushMessage(lineId, message);

おわりに

今回はAPIを利用したLINE公式アカウントを活用する、ごく簡単な例を紹介しました。
今度は、LINE Front-end Framework(LIFF)の活用やBot開発についてなど紹介したいと思います。

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?