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

<img class="alignnone wp-image-92" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/1200x630.png" alt="" width="632" height="333" />
#はじめに
先日Line Messaging APIのFlex Messageが公開されたようなので、早速触ってみました。 これまでもImagemapやTemplateなど、視覚的なMessage Objectはありましたが、

<img class="alignnone wp-image-86" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/imagemap-dd854fa7.png" alt="" width="30%" />　<img class="alignnone wp-image-87" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/buttons-86e14165.png" alt="" width="30%" />

&nbsp;

Flexが追加されて表現の幅がいろいろ増えたようです。
<img class="wp-image-88 alignleft" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/bubbleSample-77d825e6.png" alt="" width="100%" />

#Line Developersの登録
とりあえず動かしてみたいと思います。手始めに、LINE Developersの<a class="Md30BtnCv mdBtnL" href="https://developers.line.me/console/register/messaging-api/provider/"><span data-btn="comment">Start using Messaging API</span></a>からアプリを登録します。
[Line Developers](https://developers.line.me/en/)
&nbsp;

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

<img class="alignnone wp-image-100" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/CreateNewProvider01.jpg" alt="" width="391" height="491" />

&nbsp;

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

   * Developer Trial - Reply Messageに加えPush Messageも使用できる。友だち登録可能数は50ユーザーまで。
   * Free - Replyのみ。友だち登録可能数無制限。Push可能の有料プランに変更できる。
 
<img class="alignnone  wp-image-101" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/CreateNewChannel-721x1024.jpg" alt="" width="389" height="553" />

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

&nbsp;

<img class="alignnone wp-image-109" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/ChannelSecret.jpg" alt="" width="45%" />
<img class="alignnone wp-image-110" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/AutoReply01.jpg" alt="" width="45%"/>
登録が完了すると、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](https://glitch.com)

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

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

<div>コードはひとまず最小構成で。event.reply()に渡すMessage Objectは、<a href="https://developers.line.me/en/docs/messaging-api/reference/#flex-message">LINE API reference</a>に乗っているFlex Message exampleのjsonをそのまま貼り付けます。</div>

```javascript

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](https://glitch.com/~lineflextest)

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

　Messaging settingsのWebhook URLにglitchプロジェクトのエンドポイントURL　https://[プロジェクト名].glitch.me/ を設定します。（最後の / を省略すると動きません。後、写真では忘れてDisabledになっていますが汗　Use WebhookをEnabledにするのも忘れないでください！　）
<img class="alignnone  wp-image-164" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/WebhookURL-01-1024x640.jpg" alt="" width="690" height="431" />

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

<img class="alignnone wp-image-158" src="https://pragma-curry.com/wp/wp-content/uploads/2018/06/Talk180615.jpg" alt="" width="292" height="498" />

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

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

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