エニグモ の @takurokamiyoshi です。 この記事は Enigmo Advent Calendar 2018 の21日目の記事です。 私は主にフロントエンド周りの実装や ディレクション 業務を行っています。 弊社ではファッション ECサイト である BUYMA を運営しており、 利用者とのコミュニケーションツールとしてメールやアプリ、そしてLINEも重要なツールだと考えています。 BUYMA LINEアカウントについて https://www.buyma.com/contents/line/ これからLINEアカウントの友だち数も増やして、LINEアカウント内でいろんな施策を実施したいと思っています。 LINE Messaging API とは? LINE社が提供するLINEカウントを通じて、ユーザとの双方向コミュニケーションを実現する API です。 メール施策で実施しているシナリオ配信のような配信に利用にしたり、ボットとして活用しているLINEアカウントも多いようです。 ※とりあえずLINE Messaging API 試してみたい人は無料で試せるLINE Developer Trialプランがあります。LINEアカウントを作成いただいて curl でLINE Messaging API をコールしてもらえればと思います。 Flex Messageとは? LINE Messaging API ではテキスト、画像、動画、カ ルーセル といった様々なメッセージタイプでメッセージを配信することができます。 Flex Messageは複数の要素を組み合わせてレイアウトを自由にカスタマイズできるメッセージです。 html、 css に近い感覚でメッセージレイアウトを考えることができます。 Simulator Flex Message Simulator LINE社が提供しているものになります。 Simulatorなしでゼロから作成するのはかなり困難で Flex Message Simulatorではサンプルがいくつか準備されているものでこれをベースに考えると良いと思います。 Flex Messageはレイアウトの自由度が高いのでいろいろ検討が必要だと思い今回の記事を作成しようと思いました。 レイアウト案 いくつかの案を記載していきます。 ※ curl の{XXX} の部分は各環境で置き換えてください。 ※ 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": "{userId}", "messages":[ { "type": "flex", "altText": "this is a flex message", "contents": {"type":"bubble","body":{"type":"box","layout":"vertical","spacing":"none","margin":"none","contents":[{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"5:2","size":"5xl","action":{"type":"uri","uri":"{uri}"}},{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"5:2","margin":"sm","size":"5xl","action":{"type":"uri","uri":"{uri}"}},{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"5:2","margin":"sm","size":"5xl","action":{"type":"uri","uri":"{uri}"}},{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"5:2","margin":"sm","size":"5xl","action":{"type":"uri","uri":"{uri}"}},{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"5:2","margin":"sm","size":"5xl","action":{"type":"uri","uri":"{uri}"}}]}} } ] } ' 商品一覧パターン スマホ サイトの商品一覧のような形のレイアウトです。 もっと長くしてもよいかなとも思いました。 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": "{userId}", "messages":[ { "type": "flex", "altText": "this is a flex message", "contents": {"type":"bubble","hero":{"type":"image","url":"{url}","size":"full","aspectRatio":"10:3","aspectMode":"cover","action":{"type":"uri","uri":"{uri}"}},"body":{"type":"box","layout":"horizontal","spacing":"md","contents":[{"type":"box","layout":"vertical","flex":1,"contents":[{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"1:1","size":"xxl","action":{"type":"uri","uri":"{uri}"}},{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"1:1","margin":"md","size":"xxl","action":{"type":"uri","uri":"{uri}"}},{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"1:1","margin":"md","size":"xxl","action":{"type":"uri","uri":"{uri}"}}]},{"type":"box","layout":"vertical","flex":1,"contents":[{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"1:1","size":"xxl","gravity":"bottom","action":{"type":"uri","uri":"{uri}"}},{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"1:1","margin":"md","size":"xxl","action":{"type":"uri","uri":"{uri}"}},{"type":"image","url":"{url}","aspectMode":"cover","aspectRatio":"1:1","margin":"md","size":"xxl","action":{"type":"uri","uri":"{uri}"}}]}]},"footer":{"type":"box","layout":"horizontal","contents":[{"type":"button","action":{"type":"uri","label":"More","uri":"{uri}"}}]}} } ] } ' 細いメッセージパターン 意外と需要がありそうです。 リッチメニューを出しているとメッセージが見える範囲が狭くなりますし、画像作成は必要ありません。 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": "{userId}", "messages":[ { "type": "flex", "altText": "this is a flex message", "contents": {"type":"bubble","body":{"type":"box","layout":"horizontal","contents":[{"type":"button","style":"primary","action":{"type":"uri","label":"リンク1","uri":"{uri}"}},{"type":"button","style":"secondary","action":{"type":"uri","label":"リンク2","uri":"{uri}"}}]}} } ] } ' まとめ・感想 自由度が高いので細かいこだわりを反映できるメッセージですがやはり複雑なものを考えるのは難しいです。 Flex Messageをゼロから作成するのは結構大変なので、他の人が作成したものを共有していけるようにしていければ良いなと思いました。 ざっと触ってみてちょっとだけ慣れてきました。慣れてくれば、Simulatorなしでも作成できるようになるのだろうか。。 また以前は マルチキャスト /v2/bot/message/multicast で Flex Messageを配信できなかったですが使用できるようになったので大量配信にも使えそうです。 今回調べたことを実際の施策の中で活かしていきたいと思います。 参考 LINE Developers ドキュメント