はじめに

先日Line Messaging APIのFlex Messageが公開されたようなので、早速触ってみました。これまでもImagemapやTemplateなど、視覚的なMessage Objectはありましたが、

Flexが追加されて表現の幅がいろいろ増えたようです。

Line Developersの登録

とりあえず動かしてみたいと思います。手始めに、LINE DevelopersのStart using Messaging APIからアプリを登録します。
Line Developers

Lineアカウントでログインしたら、まず、Provider名を登録します。（注：Provider名はユーザーがLine Botを友だち登録する際に表示されます。）

次に、アイコンの画像を設定し、アプリ名と説明を入力します。プランはDeveloper TrialとFreeの２種類から選べます。簡単に説明すると↓

Developer Trial - Reply Messageに加えPush Messageも使用できる。友だち登録可能数は50ユーザーまで。
Free - Replyのみ。友だち登録可能数無制限。Push可能の有料プランに変更できる。

今回はテストなので、ひとまずDeveloper Trialで登録します。

登録が完了すると、Channel ID, Channel secretが自動的に発行されます。Channel access tokenはIssueボタンで発行できます。(Time until token becomes invalidは0でいいです。)

もう１つ大事な設定として、Auto-replyがデフォルトではEnableになっているので、Disabledに変更してください！

サーバの準備

次に、Webhook用のサーバを用意します。SSL必須です。今回はNode.jsが使えるPaaSのGlitchを使います。（サインアップが必要です。Githubのアカウントでもログインできます。）
Glitch

expressとdotenvプラグインが最初からglitchに入っています。サードパーティSDKの linebot だけ追加します。package.jsonを開いて"Add Package"からlinebotを検索してインストールします。

CHANNEL_ID, CHANNEL_SECRET, CHANNEL_ACCESS_TOKENは先ほどLine Developersで取得した文字列を、glitchのルートフォルダにある.envに書き込みます。

コードはひとまず最小構成で。event.reply()に渡すMessage Objectは、LINE API referenceに乗っているFlex Message exampleのjsonをそのまま貼り付けます。


const express = require('express');
const linebot = require('linebot');
require('dotenv').config();

const app = express();

const bot = linebot({
  channelId: process.env.CHANNEL_ID,
  channelSecret: process.env.CHANNEL_SECRET,
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
  verify: true
});

const linebotParser = bot.parser();
app.post('/', linebotParser);

bot.on('message', function (event) {
  event.reply([
    {  
      "type": "flex",
      "altText": "this is a flex message",
      "contents": {
        "type": "bubble",
        "body": {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "text",
              "text": "hello"
            },
            {
              "type": "text",
              "text": "world"
            }
          ]
        }
      }
    }
  ]).then(function (data) {
    console.log('Success', data);
  }).catch(function (error) {
    console.log('Error', error);
  });
});
app.listen(process.env.PORT || 80, function () {
  console.log('LineBot is running.');
});

今回glitchプロジェクト[lineflextest]という名前で作りました↓
lineflextest

Webhookの設定

　Line Developersに一旦戻り、Webhookの設定をします。

　Messaging settingsのWebhook URLにglitchプロジェクトのエンドポイントURL　https://[プロジェクト名].glitch.me/ を設定します。（最後の / を省略すると動きません。後、写真では忘れてDisabledになっていますが汗　Use WebhookをEnabledにするのも忘れないでください！　）

Webhookの設定が終わったら、Line Developersの下の方にあるQR code of your botを読み込んでLineで友だちに追加し、テストしてみます。

全く会話になっちゃいませんが、とにかくFlex Messageの受信成功です。

これをベースに色々カスタマイズして遊んでみようと思います！

何だかFlex MessageというよりほとんどMessaging APIの説明になってしまった気が・・・

Line Messaging API のFlex Messageを触ってみる

はじめに

Line Developersの登録

サーバの準備

Webhookの設定