LINE BotでFlex Messageを使う (with Spring Boot)

目次

  1. 背景
  2. 作ったもの
  3. Flex Messageを作る流れ
  4. simulatorを使ってメッセージのデザイン
    1. 要素の種類
    2. 要素の追加
    3. Jsonで保存
  5. 実装
    1. Boxの作り方
  6. まとめ
  7. 関連記事
  8. 【PR】おすすめ技術本

背景

こんにちは。karintomania(twitter)です。

この記事はこの記事の続きです。
Spring BootでLINE Botのサンプルを動かす 〜おうむ返しのその先へ〜
LINE Botを開発する際に必ずと言っていいほど(?)使うのがFlex Messageです。
これはメッセージのレイアウトをJsonで記述したもので、
Botから送信するメッセージの自由なレイアウトを可能にしてくれます。
私はこれを利用して、簡単な英単語クイズを作ってみました。

その中で学んだことを記事にしています。

作ったもの

私はFlex Messageを利用して、以下の英単語クイズを作ってみました。

ユーザーが会話を始めると英単語と意味の選択肢が出てきます。
5問解答するとイラストと共に結果を教えてくれるというものです。

クイズ画面

結果レポート

githubにソースを公開しているので、良かったら見てみてください。
https://github.com/karintomania/wordbot

Flex Messageを作る流れ

Flex Messageを開発する流れは以下のような感じでした。

  1. simulatorを使ってメッセージのデザイン
  2. 実装
    一つ一つ見て解説します。

simulatorを使ってメッセージのデザイン

このリンクからFlex Messageのシミュレーターが使えます。
https://developers.line.biz/flex-simulator/

要素の種類

要素一覧を見てください。
(ちなみに要素一覧とか言ってるのは私だけです。説明する上で便宜上言っているだけです)
Flex Messageがどんな要素で構成されているかを説明します。

一番上の階層のbubbleというのが、一つの吹き出しに格納されるメッセージの種類のことです。
これがcarouselだと複数の吹き出しが横並びになるようなレイアウトになります。

その次の階層がheaderとかheroとかです。heroはでかい画像をボンっとおくところを指すようです。
その下に大体Boxというのがあると思います。
これは複数の要素をまとめる単位です。
Boxの中にテキストやイメージを入れていく感じです。

要素の追加

各種操作ボタンの欄を見てみてください。
まあ、直感的なので大体大丈夫と思います。
ちなみに要素を追加する時は、追加したい場所ではなく、
要素を追加したい親要素を選択して+ボタンを押さなきゃいけないのが若干注意が必要ですね。

Jsonで保存

これらをガチャガチャやってみて、
納得がいくまでデザインします。
私はこんな感じになりました。

ここまでできたらJsonで保存しておきましょう。
View as Jsonボタンがあるので、ここからJsonを表示して
コピペしておきます。
個人的にはこのJsonはレイアウトの保存用にしか使いませんでした。
レイアウトを考える上ではシミュレータ使えばいいし、実装ではJson触るわけではないので。

実装

SDKでJsonをイメージしながら実装していきます。
サンプルを見れば大体イメージが湧くと思いますが、
少し解説をします。

Boxの作り方

イメージとしては要素をオブジェクトとして作る
→それを親要素のコンストラクタに配列として渡す
って感じですね。

詳細な実装は公式のkitchen sinkボットが参考になると思います。
ExampleFlexMessageSupplier.javaがFlex Messageを実装しているので
参考にしてください。

ここでは少しだけ解説します。
以下のコードを見てください。
これは問題を出すときの選択肢の一行分をBoxで作っているところです。

回答の選択肢ひとつひとつは回答のテキスト要素と回答ボタン要素からなっています。

選択肢の作成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
private Box createDefBtnBox(int optionNum, Word word) {

// 解答のテキストを作成
Text def = Text.builder()
.size(FlexFontSize.Md)
.flex(5)
.wrap(true)
.text(word.getDefinition())
.build();

// 解答ボタンを作成
Button btn = Button.builder()
.style(ButtonStyle.PRIMARY)
.flex(1)
.color(Const.Quiz.BOTTUN_COLORS.get(optionNum))
.height(ButtonHeight.SMALL)
// 解答ボタンが押された際の挙動を定義。この場合は解答番号がユーザから送信されます。
.action(new MessageAction(Integer.toString(optionNum + 1), Integer.toString(optionNum + 1)))
.build();

// テキストと解答ボタンを一つのBoxに入れる
Box defBtnBox = Box.builder()
.layout(FlexLayout.HORIZONTAL)
.margin(FlexMarginSize.LG)
.contents(asList(def, btn)) // リストとして子要素を格納
.build();

return defBtnBox;
}

まとめ

Flex Messageに最初触った時は、若干クセがあって戸惑ったのですが、笑
今日紹介したようなことに慣れてしまえば
結構、簡単に作れるので、ぜひ挑戦してみてください。

それでは今日はこの辺で。

関連記事

こちらの記事もおすすめ。

前回の記事→Spring BootでLINE Botのサンプルを動かす 〜おうむ返しのその先へ〜
アプリ未経験エンジニアが独学で個人開発Androidアプリを公開するまでにやったこと

【PR】おすすめ技術本

Spring Bootの勉強にはこちらがおすすめです。