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

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

 

 

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

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

 

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

 

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

  • 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でいいです。)  もう1つ大事な設定として、Auto-replyがデフォルトではEnableになっているので、Disabledに変更してください!

 

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

Glitch – The Friendly, Creative Community

We can’t wait to see what you create!

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

We can’t wait to see what you create!

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の説明になってしまった気が・・・

 

ちなみに今回作ったBotのQRコードは以下です↓

Leave a Reply

Your email address will not be published. Required fields are marked *