LINE Messaging APIのFlex Messageをまとめる – 構成要素編 #LINE_API
こんにちは、中村です。
東京に行ってたのですが、札幌が予想以上に寒くて困惑しています。夏はまだ先でしょうか...
さて本記事では、 LINE Messaging API の新機能 - Flex Message についてまとめていきます。
はじめに
今回まとめるのは、Flex Message の構成要素です。
チュートリアルでは、触れなかった JSON 内のオブジェクトについても取り上げていきます。
構成要素
Flex Message を送信する際には、下記の構造データを送信する必要があります。
| プロパティ | タイプ | 必須 | 説明 |
|---|---|---|---|
| type | String | ◯ | flex |
| altText | String | ◯ | 代替テキスト（最大400文字） |
| contents | Object | ◯ | Flex Messageのコンテナオブジェクト |
contents プロパティは、コンテナ・ブロック・コンポーネントに分かれています。
コンテナ
Flex Message における最上位構造で、バブルとカルーセルの2つがあります。
これは表示したいバブルメッセージの数に応じて選択します。1つの場合はバブルを、複数の場合はカルーセルをといった感じです。
またカルーセルの場合、contents プロパティが配列になります。
バブル
{
"type": "flex",
"altText": "bubble",
"contents": {
"type": "bubble",
:
:
}
}
カルーセル
{
"type": "flex",
"altText": "carousel",
"contents": [
{
"type": "bubble",
:
:
},
{
"type": "bubble",
:
:
}
]
}
書字方向
テキストの書字方向・水平ボックス内のコンポーネント並び順は、コンテナ内のdirectionプロパティで指定できます。
| プロパティ値 | コンポーネント配置方向 | 書字方向 |
|---|---|---|
ltr |
左から右 | 左横書き |
rtl |
右から左 | 右横書き |
ブロック
コンテナを構成する構造で4つのブロックがあります。
どのブロックもバブルメッセージ内に1つだけ指定できます。（省略は可能）
表示は下記の表の順番にされます。
| タイプ | 説明 |
|---|---|
| ヘッダー | メッセージの見出し等を表示・ボックスコンポーネントを配置 |
| ヒーロー | 主要画像を表示・画像コンポーネントを配置 |
| ボディ | 主要メッセージを表示・ボックスコンポーネントを配置 |
| フッター | ボタンや補足情報を表示・ボックスコンポーネントを配置 |
スタイルブロック
ブロックごとに下記のスタイルを定義できます。
| プロパティ | タイプ | 必須 | 説明 |
|---|---|---|---|
| backgroundColor | String | × | ブロックの背景色（16進数カラーコード） |
| separator | Boolean | × | ブロック上にセパレータを配置するかどうか |
| separatorColor | String | × | セパレータの色（16進数カラーコード） |
separator は、先頭のブロックの上には配置できないため設定されていても無視されます。
それでは、スタイルブロックについて検証用にJSONを作成してみます。 separator を使いたいので、ヘッダーとヒーローにしましょう。
{
"type": "bubble",
"styles": {
"header": {
"backgroundColor": "#f0f8ff"
},
"hero": {
"separator": true,
"separatorColor": "#191970"
}
},
"header": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "Classmethod,Inc."
}
]
},
"hero": {
"type": "image",
"url": "https://classmethod.jp/wp-content/themes/classmethod/img/common/ogp.png",
"size": "full"
}
}
作成したJSONを Flex Message Simulator で確認してみます。
サンプルメッセージから作成し、エディタにこちらのJSONを貼り付けてプレビューをクリックします。左のプレビュー画面で確認が出来ると思います。もし表示できてない場合は、プレビュー画面の下にメッセージが表示されます。JSON にミスがあるので確認しましょう。
エラー表示
このような形で表示できました。
プレビュー
まとめ
いかがでしたでしょうか。細かい理解の手助けになれば幸いです。
長くなってしまったので、次回コンポーネントについてまとめていこうと思います。
