よくある自動メッセージ
カッコよくない。
オシャレなメッセージを送りたい
この記事トップの画像のようなメッセージを送るには、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"
}
}
]
}
}