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 Bot開発者合宿 in 温泉郷」を開催しました Developer Relations Teamの三木です。 3月10日～11日にかけて、LINE Bot開発者コミュニティ有志による一泊二日の合宿を行いました。この記事では写真を中心に、その模様をお伝えします。 今回の合宿は、いわゆる開発合宿ではなく、LINE Messaging APIを普段から開発いただいているコミュニティの方とのネットワーキングをメインに行いました。 Bot開発者の方たちが非日常の空間で交流し、開発予定のBotのアイデア、Bot開発者同士がコラボするきっかけの提供を目的として開催しました。 -
React Starter KitにみるWebフロントエンドに求められる機能と実装 初めまして、IT戦略3チームでUIUXデザインと社内プロジェクトのTech Leadを担当している高村といいます。この記事では、React Starter Kitという汎用的なWebプロジェクトテンプレートの実装を参考にしながら、改めて、なぜWebフロントエンドは複雑なのか、その解決方法は何かを振り返ってみたいと思います。この記事をきっかけとして、実際に現場でツール選定を行うフロントエンド開発者の方だけでなく、普段「フロントエンドには時間をかけたくない」と思っているサーバサイド開発者やWebディレクターの方たちに、「だからフロントエンドの課題は収束しにくいんだな」「フロントエンドといっても範囲は広いから、目的やユースケースを絞ってツールを選定しよう」と感じていただければ幸いです。 この記事はLINE Advent Calendar 2017の10日目の記事です。 -
SwiftでElmを作る この記事は、LINE Advent Calendar 2016の 7日目の記事です こんにちは、開発1センター・開発2室の 稲見 (@inamiy) です。 普段はiOSエンジニアとしてSwiftを書いていますが、最近はもっぱら関数型プログラミング全般に興味があります。 今日は、「SwiftでElmを作る」というテーマで、お話しさせていただきます。 Elmって何？ Web向けの静的型付け・関数型プログラミング言語です。詳しくは http://elm-lang.org をご参照ください。 簡単に言うと、「Haskell + React.js + Redux」です。コンパイル時に、JavaScriptに変換されます。 さっそく、簡単なボタンカウンターの例を見てみましょう。 import Html exposing (beginnerProgram, […]
