# はじめに
先日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
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の説明になってしまった気が・・・