2020-04-15

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

背景

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

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

作ったもの

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

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

クイズ画面

結果レポート

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

Flex Messageを作る流れ

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

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

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で作っているところです。

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

選択肢の作成

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

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

PR

あなたの会社はあなたの技術を評価してくれていますか？
技術力を高めようと頑張っているのに、
技術が評価されないような会社にいたらそれは良い環境なのでしょうか？
エンジニアとして技術を高めたいのなら環境を選ぶことも大事です。

レバテックキャリア
エンジニアとして働いていて実務経験があるなら、
求人数の充実具合からレバテックキャリアがおすすめです。
IT転職ではデファクト・スタンダードですね。
▼レバテック　キャリア登録はこちら▼

Tech Clips
Tech Clipsは年収500万以上＆自社サービスを持った会社に特化した求人サイトです。
首都圏限定になってはしまいますが、
収入を増やしたい、自社サービスを持った企業への転職をしたい人におすすめです。

▼Tech Clips 登録はこちら▼

寝室コンピューティング