LINEで自動メッセージ送るなら使うならFlex Messageがオシャレ

LINE, Tech

よくある自動メッセージ

カッコよくない。

オシャレなメッセージを送りたい

この記事トップの画像のようなメッセージを送るには、LINEの提供するFlex Messageを使います。

LINE Messaging APIが送信できる状態になっていることが前提です。

レイアウトの実装は、下記のようなJSONで行っています。詳しい文法も上記Flex MessageのDocumentに記載がありました。

使ってみた感想としては、送信されたメッセージは純粋なテキストでなくなるので、タップでコピーできなくなってしまうのは残念でした。

とはいえ実装の手間のわりに見栄えはかなり良くなりました。普通のテキストメッセージだと、ある程度の文章量になるとメッセージが分割されたりするので、Flexだとそのへん気にしなくていいのもGoodです。

 

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "text",
        "text": "東京都中央区の天気",
        "size": "lg",
        "weight": "bold"
      },
      {
        "type": "text",
        "text": "持田さんの5分前の位置情報を元に算出しています",
        "wrap": true,
        "color": "#aaaaaa",
        "size": "xxs"
      },
      {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "icon",
                "url": "https://user-images.githubusercontent.com/23183700/71070786-d3d9f180-21be-11ea-8319-4a8632adaf6d.png",
                "offsetTop": "2px"
              },
              {
                "type": "text",
                "text": "最高気温",
                "margin": "sm",
                "flex": 0
              },
              {
                "type": "text",
                "text": "7℃",
                "size": "sm",
                "align": "end",
                "color": "#ff0000"
              }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "icon",
                "url": "https://user-images.githubusercontent.com/23183700/71070786-d3d9f180-21be-11ea-8319-4a8632adaf6d.png",
                "offsetTop": "2px"
              },
              {
                "type": "text",
                "text": "最低気温",
                "margin": "sm",
                "flex": 0
              },
              {
                "type": "text",
                "text": "4℃",
                "size": "sm",
                "align": "end",
                "color": "#002aff"
              }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "icon",
                "url": "https://user-images.githubusercontent.com/23183700/71070988-22878b80-21bf-11ea-8505-e76db18aa499.png",
                "offsetTop": "2px"
              },
              {
                "type": "text",
                "text": "湿度",
                "margin": "sm",
                "flex": 0
              },
              {
                "type": "text",
                "text": "30%",
                "size": "sm",
                "align": "end",
                "color": "#002aff"
              }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "icon",
                "url": "https://user-images.githubusercontent.com/23183700/71071058-421eb400-21bf-11ea-825a-5970b51147f3.png",
                "offsetTop": "2px"
              },
              {
                "type": "text",
                "text": "降水確率",
                "margin": "sm",
                "flex": 0
              },
              {
                "type": "text",
                "text": "0%",
                "size": "sm",
                "align": "end",
                "color": "#000000"
              }
            ]
          }
        ]
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "button",
        "style": "link",
        "color": "#9b9b9b",
        "action": {
          "type": "uri",
          "label": "Unsubscribe",
          "uri": "https://linecorp.com"
        }
      }
    ]
  }
}

 

LINE, Tech

Posted by kyogom