Flex Messageという新しいタイプのメッセージがMessaging APIに追加されました。これまでMessaging APIでは、シンプルなテキストの他にスタンプや画像といったメディアを表示することができるメッセージや、テンプレートという複数のボタンやURLを配置可能なメッセージタイプが利用可能でした。
テンプレートはユーザーに複数の選択肢から回答を選んでもらうようなシチュエーションで特に有効でしたが、ボタンテンプレートでは配置できるボタンの数が4つまでだったり、タイトル、本文、ボタン、というようにレイアウトが画一的だったりという制約がありました。
Flex Messageは極めて自由なレイアウトが可能なメッセージタイプで、その可能性はほぼ無限と言えます。一定の表示フレームがありつつも、HTMLに近い感覚でレイアウトをカスタマイズでき、各コンポーネントが美しく整頓されるような仕組みが提供されています。一例として、下図のようなメッセージを作成することが可能です。
では実際にFlex Messageを使ったChatbotを二つほどご紹介します。
サンプル1. The QUIZ
このChatbotは、クイズを作成して友だちに出題することができるという機能を提供するもので、上記QRコードから誰でも友だち追加して試してみることができます。
Chatbotを友だちに追加するとクイズにチャレンジ（Challenge）するか、自分でクイズを作成する（Create）か聞かれます。Challengeを選択すると2問のクイズがはじまります。回答は選択形式で、選択肢の番号を緑のボタンで選択します。
このようにボタンを水平方向に並べていくことが可能です。また、ボタンは必ずしもフッター部分である必要はなく、メッセージの中程やヘッダー部分にも配置可能です。上図メッセージのメッセージオブジェクトはこちらです。
{
"type": "flex",
"altText": "Q1. Which is the API to create chatbot?",
"contents": {
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"spacing": "md",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "Q1",
"align": "center",
"size": "xxl",
"weight": "bold"
},
{
"type": "text",
"text": "Which is the API to create chatbot?",
"wrap": true,
"weight": "bold",
"margin": "lg"
}
]
},
{
"type": "separator"
},
{
"type": "box",
"layout": "vertical",
"margin": "lg",
"contents": [
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "text",
"text": "1.",
"flex": 1,
"size": "lg",
"weight": "bold",
"color": "#666666"
},
{
"type": "text",
"text": "Login API",
"wrap": true,
"flex": 9
}
]
},
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "text",
"text": "2.",
"flex": 1,
"size": "lg",
"weight": "bold",
"color": "#666666"
},
{
"type": "text",
"text": "Messaging API",
"wrap": true,
"flex": 9
}
]
},
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "text",
"text": "3.",
"flex": 1,
"size": "lg",
"weight": "bold",
"color": "#666666"
},
{
"type": "text",
"text": "Graph API",
"wrap": true,
"flex": 9
}
]
},
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "text",
"text": "4.",
"flex": 1,
"size": "lg",
"weight": "bold",
"color": "#666666"
},
{
"type": "text",
"text": "Cartoon API",
"wrap": true,
"flex": 9
}
]
}
]
}
]
},
"footer": {
"type": "box",
"layout": "horizontal",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "primary",
"height": "sm",
"action": {
"type": "message",
"label": "1",
"text": "Login API"
}
},
{
"type": "button",
"style": "primary",
"height": "sm",
"action": {
"type": "message",
"label": "2",
"text": "Messaging API"
}
},
{
"type": "button",
"style": "primary",
"height": "sm",
"action": {
"type": "message",
"label": "3",
"text": "Graph API"
}
},
{
"type": "button",
"style": "primary",
"height": "sm",
"action": {
"type": "message",
"label": "4",
"text": "Cartoon API"
}
}
]
}
}
}
サンプル2. 目黒の図書館
このChatbotでは目黒区の図書館の蔵書を検索でき、目黒区の図書館利用者カードをお持ちの方は貸出券番号とパスワードを登録しておくことで実際に本を予約することができます。
予約が完了すると、「予約票」というメッセージで現在予約中の本を確認することができ、それぞれの予約の右側に配置された赤いXボタンで予約をキャンセルすることができるようになっています。この予約票のメッセージオブジェクトはこちらです。
{
"type": "flex",
"altText": "予約票",
"contents": {
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"spacing": "xl",
"contents": [
{
"type": "text",
"text": "予約票",
"align": "center",
"size": "xl",
"color": "#1DB446"
},
{
"type": "separator"
},
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "box",
"layout": "vertical",
"flex": 8,
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "10年後の仕事図鑑",
"weight": "bold"
},
{
"type": "text",
"text": "順番：191/233",
"size": "xs",
"color": "#aaaaaa"
}
]
},
{
"type": "button",
"style": "primary",
"color": "#ff0000",
"flex": 2,
"height": "sm",
"action": {
"type": "postback",
"label": "X",
"displayText": "10年後の仕事図鑑をキャンセル",
"data": "{\"_type\":\"intent\",\"intent\":{\"name\":\"cancel-reservation\",\"parameters\":{\"reservation_number\":\"1 \"}}}"
}
}
]
}
]
}
}
}
このようにFlex Messageのレイアウトは「ボックス」とよばれるコンポーネントを水平方向または垂直方向にならべ、さらにそれを入れ子にすることで自由自在にアレンジできます。
また、ボタンには従来からあるactionオブジェクトをそのまま適用できるので、これまで通りテキスト、ポストバック、URIといったアクションを引き起こすことが可能です。
実装方法
Flex Messageは新しく追加されたflexタイプのメッセージオブジェクトを指定することで送信できます。大きく分けて2種類あり、吹き出しが一つだけ表示されるものと、テンプレートメッセージのカルーセルのように横方向にスクロールできる複数の吹き出しが表示されるものがあります。
メッセージオブジェクトのフォーマットについて詳しくは公式ドキュメントを参照ください。
Flex Messageは拡張性が高さはすでにご覧いただいた通りですが、これを表現するためのメッセージオブジェクトの情報量はそれなりのボリュームかつ多段階層になります。表示の調整や正しいフォーマットでオブジェクトを作成するためには手元でメッセージの出力結果を確認できるツールが不可欠です。そのためにFlex Message Simulatorが同時にリリースされており、このシミューレーターでいくつかのサンプルを提供すると同時に、JSONオブエクトを編集してメッセージの表示を確認しながらメッセージオブジェクトを作成できるようになっています。
Enjoy.
Related Posts
-
LINE Engineer Insights vol.8「Messaging API開発者が語るFlex Messageへのこだわりと今後の展望」 LINEで働くエンジニアに色々と話を聞いていく「LINE Engineer Insights」の第8弾です。当コーナーでは、インタビュアーにLINEで働くエンジニア tokuhirom を迎え、エンジニア同士でざっくばらんに話を聞くという形で進めています。今回も、LINEのエンジニアは一体どんな人達なのか、その内面に迫っていきたいと思います。 第8弾は開発1センターBパートの小野侑一さんに、BOTの開発者がユーザーとやりとりするために使用するMessaging APIの中でも、2016年にリリースされたTemplate Messageと、2018年6月にリリースされたFlex Messageの開発に至った流れやこだわり、今後の展望について聞いてきました。 -
Excel管理の座席表をLeafletでWeb化した話 こんにちは、LINEのIT支援室で社内システムの開発と運用をしている岩月です。この記事はLINE Advent Calendar 2017の6日目の記事です。 人員の増加に対応するために、今年の4月、LINEはJR新宿ミライナタワーに移転しました。移転に伴い、IT支援室ではいくつかの新しい社内システムを導入しましたが、今日はその1つである「座席表」についてお話させていただきます。 開発のきっかけ 移転前、座席の管理は以下のようにExcelで行われていました（名前は消しています）。 -
LINE BLOGアプリ開発で contenteditable と戦った話 こんにちは、LINE Fukuoka の tarunon です。LINE BLOG iOSのリリースまで、クライアントとエディタの開発を担当していました。昨年11月に、LINE BLOG は一般開放と、iOS/Androidクライアントの公開を行いました。ほぼ1年がかりの開発だったのですが、クライアント側で最も大変だったのがエディタの開発でした。この記事では LINE BLOG のエディタの根幹を支えている Workaround について解説します。普段は Swift を書いていて、ほぼその話しかしていないのですが、今回は HTML と JavaScript の話になります。
