FlexMessageの作成手順

この記事はdclab Advent Calendar 2023の2023-12-03の記事です

https://gyazo.com/6400b4f8e8230979dec7bb858fbfbf37

はじめに

はじめまして, 小栗研究室の丹羽です.本記事は,研究で作成しているLINEBotで使用するFlexMessageの作成手順についてまとめた内容になります.

FlexMessageとは

そもそもFlexMessageとはなんぞや？という話ですがLINE Developersでは,

Flex Messageは、CSS Flexible box (CSS Flexbox) (opens new window)を基盤に自由にカスタマイズできるメッセージです。必要に応じて、メッセージのサイズを調整したり、特定の場所にテキスト、画像、アイコンを割り当てたり、インタラクティブなボタンを追加したりできます。

というように書かれていますが, 図1のような画像やボタンなどを追加した少し豪華なメッセージです.

https://gyazo.com/922be617cce7121dea1d6199c289fbe3

図1 FlexMessage例

LINEBotを作成するにあたってただのテキストメッセージが返ってくるだけで寂しい!もっと複雑な操作をさせたい!という時があると思います.そんな時にこのFlexMessageを使うのです!!

FlexMessageの作成手順

FlexMessageの作成手順について話していくわけですが,あくまで私が実践した手順を紹介するだけなのでもっといい方法はあるかもしれません. こんな方法でやってるんだ〜的な視点で見てもらえると幸いです.

大まかな手順としては2つで,作成したいFlexMessageデザインの作成することと, 作成したデザインをFlexMessageSimulatorで再現することです.

FlexMessageSimulatorとは, その名の通りFlexMessageを手軽にシミュレーションできるサイトで, 実際にメッセージを送信しなくても描画された状態を確認できるものです.

1. FlexMessageデザインの作成

FlexMessageを作成する際にただ漠然とFlexMessageSimulatorで作成してもなかなか良いものは作れません. そこで明確なゴールを定めるためにまずどのようなデザインのものを作りたいか考えます.

私の場合は,スタンプラリーができるLINEBotを作成している際に,スタンプを獲得したことがわかるFlexMessageを作りたいと考えていました.

その時に必要な要素として

スタンプを獲得したことがわかること

どこに訪れたかわかること

何回訪れたかわかること

その文化財の情報に遷移できるようなボタンがあること

これらの要素を盛り込みたいと考えていました.

これらの要素を盛り込んだ上でデザインを考え図2のようなものを作成しました. (このデザインはざっくりしすぎなのでもっと具体的に作り込んだデザインの方が後々苦労しないかも笑)

https://gyazo.com/800921acc113741ccaa7a821ad70ec77

図2 FlexMessageデザイン案

デザインを作成するツールは別になんでもよく, そのデザインで作っていくという明確なゴールにさえなっていれば手書きでもなんでもいいと思います.

デザインの作成に詰まったら色々な公式LINEを探すのもおすすめです.

例えば図3 Zoffや図4 ヤマト運輸など色々な公式LINEと友達になってみると良いデザインに出会えるかもしれません.

https://gyazo.com/d081426fff171802c9db5a4162a96575　https://gyazo.com/9dff4c48eb526b6aa175f707538603d2

図3 ZoffのFlexMessage 　図4 ヤマト運輸のFlexMessage

2. 作成したデザインをFlexMessageSimulatorで再現

デザインが確定したらあとはFlexMessageSimulatorで再現するだけです.

FlexMessageSimulatorの詳しい使い方はチュートリアル - Flex Message Simulatorでデジタル名刺を作成するに載っていますが実際に触ってみるのが早いと個人的には思う.

作成したデザインを再現したものが図3になります.

https://gyazo.com/ea49920ee1ad39d9e45f2babc9ec9fb9

図5 FlexMessageSimulatorで作成した

このデザインは比較的シンプルなものだったので簡単に再現できましたが, あくまでLINEメッセージの範囲でしか作成できないのであまりにも複雑なものなどは妥協が必要かもしれません.

FlexMessageSimulatorの中にあるShowcaseの中にサンプルメッセージ図4などもあるのでもしかしたら参考になるかもしれません.

https://gyazo.com/9566953243802071cc4d5486c5ba8e95

図6 サンプルメッセージ

納得のいくFlexMessageが完成したら</>View as JSONから作成したFlexMessageをcopyし, LINEBotで送信すれば作成したFlexMessageの実装完了です!

まとめ

この記事では研究で作成したFlexMessageの作成手順について紹介しました.

これでみなさんもFlexMessageマスターですね!とまでは言いませんが少しでもFlexMessageを作るときの助けになればと思います.

上記でも述べたようにこの記事では, あくまで私が行った手順を紹介しただけなのでもっと良い方法はあると思います.ただこの記事を読んで少しでもFlexMessageを作ってみたいと感じてもらえれば幸いです.