はじめに
この記事では味のないLINE botをリッチにして味濃いめにするための方法が書かれています。なお、今回は具体的な作り方については解説しません。
この記事で伝えたいこと(Point)
- LINE Botでメッセージを見たいときもっとリッチに送信できるよ
- リッチに送信したいときはFlex Messageが使えるよ
- Flex Messageはツールを使うと簡単に作成できるよ
- 他にもいろんな表現方法があるよ
LINE Botを作るのは良いのだけど
多くの人がテキストベースでLINE Botを開発している頃だと思います。
実際にGoogleで検索するとさまざまなLINE Botの事例が見つかりますが、その多くはテキストベースであるように見えます。
ですが、実際のところはもうちょっと変化のある応答が欲しいなと思う時もあります。
たとえば
- 動画はリンクではなくプレビューとして見せて、ユーザにはプレビューをクリックしてもらう
- 複数のリンクがあるときは箇条書きではなく、ユーザが操作できるようにしておく
- 次に何をしたら良いかぱっと見で判断できるようにしたい
などです。そこでそんな時に使えるのが、Flex Messageです。
Flex Messageとは
簡単に説明するとLINEから送られてくるメッセージを加工してキレイに見せる仕組みです。
公式ドキュメントでは以下のような記載があります。
Flex Messageは、通常のLINEメッセージに比べ、より豊かでインタラクティブなレイアウトが可能なメッセージです。通常のLINEメッセージでは、テキスト、画像、動画など1種類のソースしか配信されません。しかし、Flex Messageでは、CSS Flexible Box（CSS Flexbox） (opens new window)の仕様に基づいて、レイアウトを自由にカスタマイズできます。
キレイに見せる用途もありますが、ユーザに次のアクションを促す仕組みでもあります。
どんな機能があるのか細かく見ていきましょう。
Flex Messageの概要
Flex Messageというのはコンテナ、ブロック、コンポーネントという3つの要素で構成されます。
そして、見せ方としてはバブルとカルーセルというものがあります。
バブルは単一のFlex Messageでカルーセルは横並びのFlex Messageです。
なんだか難しく感じるかもしれません。実際のところ、Flex MessageはJSONで表現されます。
「え、じゃあ、JSONが書けないとFlex Messageは使えないってこと？！」と思ったかもしれませんが、そんなことはありません。Flex MessageはFlex Message Simulatorで簡単に作成できます。
Flex Message Simulatorを使おう
実際に利用するためにはLINEのアカウントが必要です。
なお、Flex Message Simulatorの使い方を覚えたい場合は公式チュートリアルがありますので興味のある人は覗いてみると良いでしょう。
チュートリアル - Flex Message Simulatorでデジタル名刺を作成する
余談：以前はインストールしないと利用できないFlex Message Simulatorでしたが、現在はWebベースで利用できます。
実際に開いてみる
実際に開いてみるとこんな感じで画面が表示されます。
いくつか作ってみましょう。
Flex Message Simulatorを実際に操作する
画面左側が実際に送信された時の画面、ツリー状に表示されている画面が裏側の構成になります。
裏側の構成がJSON形式で送信されるようなイメージです。
headerがまだないので追加してみましょう。
headerにboxを追加してみる
headerをクリックするとboxという文字が表示されますのでクリックします。
細かくてわからないかもしれませんが、左のプレビューを見ると画像の上に余白が作成されたと思います。
テキストを追加する
次に先ほど同じ+ボタンをクリックしてtextを選択します。
追加すると以下のようにhello,worldのテキストが表示されます。
作成したFlex Messageを送信する
プレビュー画面で表示できるとはいえ、実際に送信して見え方を確認したいことがあると思います。
Flex Message SimulatorではSendすることでLINEのメッセージを送信できます。
実際にやってみましょう。画面右側のSend...をクリックします。
送信先を指定するための画面が表示されるため、送信先アカウントを選択してSendをクリックします。
LINEアプリにログインして送信されたメッセージを確認します。
##実行結果
で、実際のところどんな時に使えばいい
なんとなくで操作方法を見ていきましたが、では実際にはどう扱っていけば良いのでしょうか。昨今ではAIを使ったLINE Botが人気です。
AIとおしゃべりする際にテキストを入力してお話をすると思いますが、ワンタップで会話できたのであればUXとしてはとても良いです。入力する際にデータの入力を制限する、入力の余地をなくすといっても良いでしょう。
たとえば
- 日付入力ではdatepickerを表示する
- URLはリンクではなく、ボタンで表示する
- 複数の選択肢を表示するときは、複数のバブル（カルーセル）で表示する
などです。
必要に応じてアクションを使っても良いでしょう。
AIと噛み合わせたいときについてはFunction Callingとの相性が良いため、特定の問い合わせが来たら専用のFlex Messageを飛ばすということも可能です。
まとめ
今回はFlex Messageの概要とFlex Messageの使い方について見ていきました。
テキストをやりとりしても良いですが、可能であればもっとリッチにやりとりできたらインパクトがあると思います。
リッチというとリッチメニューという機能がLINEのプラットフォームにはあります。これもFlex Message同様にユーザに対してアクションを促せるとても重要な機能ですが、Flex Messageとは若干ニュアンスの違うものになります。別の機会に見ていきたいと思います。