JSON for flexible layout control of the recommendation area

Toru Omura
LINE App Dev Team6 Software Engineer
https://linedevday.linecorp.com/2020/ja/sessions/3594
https://linedevday.linecorp.com/2020/en/sessions/3594

Transcript

5. Agenda › Function Introduction › How It woks › Advantage
6. Client Server Layout_B_view Layout_A_view Layout_C_view { "type": "layout_A", "thumbnail": "https://...", "title": "xxxxx", "badge": true ... }
7. Client Server Layout_B.json Layout_A.json Layout_C.json { "type": "grid", "columns": 1, "items": [{...},{...},{...}], ... }
8. Carousel Grid Multi Placements
9. Carousel Grid Multi Placements
10. Yoga Layout Engine https://yogalayout.com/
11. Flex Box Item Item Item Item Item Item Item Item Item flex-start flex-center flex-end Container Container Container
12. Flex Layout
13. Thumbnail { "type":"image", "url":"https://xxx", "aspectMode":"fit", "align":"center", "size":"full" } Title { "type":"text", "size":"13px", "wrap":true, "maxLines":2, “color":"#000000", "text":"Hello World" } Contents { "type":"item", "body":{...} "action":{ "type":"uri", “uri":"https://xxx" } }
14. Thumbnail { "type":"image", "url":"https://xxx", "aspectMode":"fit", "align":"center", "size":"full" } Title { "type":"text", "size":"13px", "wrap":true, "maxLines":2, “color":"#000000", "text":"Hello World" } Contents { “type":"item", "body":{...} "action":{ "type":"uri", “uri":"https://xxx" } }
15. Thumbnail { "type":"image", "url":"https://xxx", "aspectMode":"fit", "align":"center", "size":"full" } Title { "type":"text", "size":"13px", "wrap":true, "maxLines":2, “color":"#000000", "text":"Hello World" } Contents { "type":"item", "body":{...} "action":{ "type":"uri", “uri":"https://xxx" } }
16. Flex Layout
17. Thumbnail { "type":"image", "url":"https://xxx", "aspectMode":"fit", "align":"center", "size":"full" } Title { "type":"text", "size":"13px", "wrap":true, "maxLines":2, “color":"#000000", "text":"Hello World" } Contents { "type":"item", "body":{...} "action":{ "type":"uri", “uri":"https://xxx" } }
18. Flex Layout
19. Thumbnail { "type":"image", "url":"https://xxx", "aspectMode":"fit", "align":"center", "size":"full" } Title { "type":"text", "size":"13px", "wrap":true, "maxLines":2, “color":"#000000", "text":"Hello World" } Contents { "type":"item", "body":{...} "action":{ "type":"uri", “uri":"https://xxx" } }
20. Flex Layout
21. Advantage
22. Flex Message
23. Flex Message https://developers.line.biz/ja/docs/messaging-api/flex-message-layout/
24. Thank you