LINE株式会社は2018年6月12日、双方向コミュニケーション実現のための 「Messaging API」に「Flex Message」が追加しました。
これまでのLINE Messaging APIでも、シンプルなテキストの他、スタンプや画像、複数のボタンやURLの表示は可能でした。
しかし、配置できるボタンの数が限定されており、また、レイアウトの自由度がひくいといった制限がありました。
そこで、今回追加された「Flex Message」では、一定の枠組みをベースに、これまでよりHTMLに近い感覚で自由なレイアウトが可能になりました。
例えば、文字のサイズや色を変更したり、メッセージの冒頭や途中に任意の画像を表示させることができます。
引用記事では「Flex Message」を活用して、Qiitaの最新投稿をLINEのメッセージとして表示させる方法が紹介されています。
「Flex Message」は、大きく分けて3つの構成要素から成り立っています。
1つ目の「コンテナ」は、Flex Messageの最上位の構造です。
これには、バブルとカルーセルの2つの種類があります。バブルは1つのメッセージバブルを構成します。そして、バブルを横にずらっと並べてスクロールできるようにしたのがカルーセルになります。
2つ目の「ブロック」は、「コンテナ」の下位構造です。
１個のバブル内のヘッダー、メイン画像、本文、フッターの4つの要素で構成されます。4つとも必須なわけではなく、省略することも可能です。また、stylesプロパティを用いて、背景色の変更なども可能です。
3つ目の「コンテナ」は、各「ブロック」の表示内容を指定する要素です。
この要素を用いて、アイコン画像を呼び出したり、ボタンの動作やサイズなどを指定します。
「Flex Message」を活用する開発者向けに、LINE Developersでは、JSONデータを簡単にシミュレートできるページも用意されているようです。
「あまり開発に詳しくない方でも流れさえ理解できればそんなに学習コストは高くなさそう」ということですので、LINE BOTの作成に関心のある非エンジニアの方でも、アイディア次第で面白いBOTを作成できるのではないでしょうか。
