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
-
Messaging APIの新機能LIFFの使い方を解説します。 こんにちは。LINEでLINE Messaging APIやLINEログイン等のプラットフォームの啓蒙活動を担当している立花です。 本記事では、今回新たに実装されたLIFFの概要と、使い方を解説します。 LIFFとは LIFFとは、LINE Front-end Frameworkの略で、LINEアプリ内で動作するウェブアプリのプラットフォームです。 LIFFに登録したウェブアプリ（LIFFアプリ）をLINEアプリ内で起動すると、LINEのユーザーIDや、LIFF APIを利用するためのトークンをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにトークルームにメッセージを送信したりできます。 -
「LINE Bot開発者合宿 in 温泉郷」を開催しました Developer Relations Teamの三木です。 3月10日～11日にかけて、LINE Bot開発者コミュニティ有志による一泊二日の合宿を行いました。この記事では写真を中心に、その模様をお伝えします。 今回の合宿は、いわゆる開発合宿ではなく、LINE Messaging APIを普段から開発いただいているコミュニティの方とのネットワーキングをメインに行いました。 Bot開発者の方たちが非日常の空間で交流し、開発予定のBotのアイデア、Bot開発者同士がコラボするきっかけの提供を目的として開催しました。 -
今更話す、Messaging APIのNode.js版SDK開発 こんにちは！LINEでフロントエンド開発を担当しているJunと申します。この記事はLINE Advent Calendar 2017の4日目の記事です。今日はMessaging APIのNode.js版SDKの開発について書きたいと思います。Node.js版SDKのv1.0がリリースされてもう半年以上、今更感がすごくありますが、開発前から今にかけて面白かったことや工夫したことをいろいろ紹介します。 開発のはじまり Node.js版の開発が始まろうとしていた当時、Messaging API SDKが対応している言語プラットフォームは以下の6つでした。 Java Perl Ruby Go PHP Python
