소개

요 전날 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의 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으로 좋습니다.)

또 하나 중요한 설정으로서 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의 설명이 되어 버린 생각이・・・