Flex Messageを使う

はじめに

Flex Messageは、複数の要素を組み合わせてレイアウトを自由にカスタマイズできるメッセージです。

Flex Messageのサンプル

動作環境

Flex MessageをサポートするLINEアプリのバージョンは以下のとおりです。

  • iOS版LINE:6.7.0以降
  • Android版LINE:6.7.0以降
  • macOS版LINE:5.9.0以降
  • Windows版LINE:5.9.0以降

iOS版およびAndroid版LINEアプリについては、以下のプロパティがサポートされるLINEアプリのバージョンは8.11.0以降です。

詳しくは、『Messaging APIリファレンス』の「Flex Message」を参照してください。

特長

  • ボックスレイアウトシステムを使って水平・垂直のレイアウトを組み合わせ、複雑なレイアウトを構築できます。
  • カルーセル形式でメッセージを表示できます。ユーザーは複数のメッセージバブルをスクロールして閲覧できます。
  • 書字方向を左横書きまたは右横書きに指定できます。
  • 実際に開発を始める前に、Simulatorを使って表示をテストできます。

JSONスキーマ

他のメッセージタイプと同様に、Flex MessageはJSON形式で記述します。Flex Messageを使ったボットを開発するには、このガイドと合わせて『APIリファレンス』の「Flex Message」を参照してください。

構成要素

Flex Messageは、コンテナ、ブロック、コンポーネントの3層のデータ構造から構成されます。

Flex Messageの構造

ここでは、データ構造とその要素について概要を述べます。各要素について詳しくは、「Flex Messageの要素」を参照してください。

コンテナ

コンテナはFlex Messageの最上位の構造です。以下のタイプのコンテナを利用できます。

タイプ 説明
バブル 単体のメッセージバブル
カルーセル 複数のメッセージバブル

ブロック

ブロックはコンテナを構成する構造です。以下のタイプのブロックを利用できます。

タイプ 説明
ヘッダー メッセージの件名や見出しを表示するブロック
ヒーロー 主要な画像コンテンツを表示するブロック
ボディ 主要なメッセージコンテンツを表示するブロック
フッター ボタンや補足情報を表示するブロック

コンポーネント

コンポーネントはブロックを構成する構造です。コンポーネントのタイプは8つあります。

メッセージの内容を構成するコンポーネント
タイプ 説明
ボタン ボタンを表すコンポーネント。ユーザーがタップすると、指定したアクションが実行されます。
アイコン アイコンを描画するコンポーネント
画像 画像を描画するコンポーネント
テキスト 文字列を描画するコンポーネント。テキストに書式を設定できます。
メッセージのレイアウトを調整するコンポーネント
タイプ 説明
ボックス 子要素のレイアウトを定義するコンポーネント
フィラー 幅または高さのみを持つ不可視のコンポーネント
セパレータ 境界線を描画するコンポーネント
スペーサー ボックス内の先頭または末尾に固定サイズのスペースを配置する不可視のコンポーネント

制限事項

  • 受信端末の環境によって、同じFlex Messageの描画結果が異なる可能性があります。描画に影響を与える要素には、OS、LINEアプリのバージョン、端末の解像度、言語設定、フォントなどがあります。
  • Flex Messageは、/v2/bot/message/multicastエンドポイントを使って送信できません。

「Hello, World!」メッセージを送る

最初のステップとして、「Hello, World!」メッセージを作成してみましょう。以下のJSONデータを例にして説明します。

{
  "type": "bubble", // ①
  "body": { // ②
    "type": "box", // ③
    "layout": "horizontal", // ④
    "contents": [ // ⑤
      {
        "type": "text", // ⑥
        "text": "Hello,"
      },
      {
        "type": "text", // ⑥
        "text": "World!"
      }
    ]
  }
}
  1. 単体のメッセージバブルを表すバブルコンテナを作成します。
  2. バブルの内容を設定するブロックを指定します。このコンテナには「Hello, World!」というテキストを描画するボディブロックのみが含まれます。
  3. ボディブロックにはボックスコンポーネントのみを指定できます。
  4. ボックスのlayoutプロパティにhorizontalを指定します。これにより、ボックス内のコンポーネントは水平に配置されます。
  5. ボックスのcontentsプロパティに、ボックスに含めるコンポーネントを配列で指定します。
  6. 「Hello,」および「World!」の2つのテキストコンポーネントを挿入します。

Simulatorで動作を確認する

Simulatorを使うと、メッセージを実際に送信しなくても描画結果を確認できます。

先に挙げたJSONデータをSimulatorで実行すると、以下のように描画されます。

Hello, World!

Messaging APIで送信する

Flex Messsageは、Messaging APIのプッシュメッセージまたは応答メッセージとして送信できます。

Flex Messageオブジェクトのcontentsプロパティに、送信したい内容を含むコンテナを指定します。

以下は、先に挙げたJSONデータをプッシュメッセージとして送信するcURLコマンドです。

curl -v -X POST https://api.line.me/v2/bot/message/push \
-H 'Content-Type:application/json' \
-H 'Authorization: Bearer {channel access token}' \
-d '{
  "to": "U4af4980629...",
  "messages": [
    {
      "type": "flex",
      "altText": "This is a Flex Message",
      "contents": {
        "type": "bubble",
        "body": {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "text",
              "text": "Hello,"
            },
            {
              "type": "text",
              "text": "World!"
            }
          ]
        }
      }
    }
  ]
}'

関連ページ