20181003_flex

【福岡】Bot開発技術を極めたいエンジニア大集合！ 福岡市粗大ごみ受付Botを大解剖 資料
https://line.connpass.com/event/100319/

Transcript

1. FLEX MESSAGE
2. confirm carousel image carousel buttons TEMPLATE MESSAGE
3. /day carousel /day buttons Amount of template messages sent per day TEMPLATE MESSAGE 1400ສ 450ສ
4. Cons • ϨΠΞ΢τ͕ݻఆ • σεΫτοϓ൛ʹະରԠ • γϯϓϧ • ࢓༷͕Θ͔Γ΍͍͢ TEMPLATE MESSAGE Pros
5. restaurant news receipt call to action FLEX MESSAGE ticket …and your own layout
6. • ςΩετɺը૾ɺϘλϯΛࣗ༝ʹϨΠΞ΢τͰ͖Δ • ϨΠΞ΢τ͸JSONͰهड़ • JSONͰهड़ͨ͠ϝοηʔδΛͦͷ··APIͰૹ৴Ͱ͖Δ • ૹ৴લʹγϛϡϨʔλʢϒϥ΢βʣͰදࣔ಺༰Λ֬ೝͰ͖Δ • σεΫτοϓ൛΋αϙʔτ ಛ௃
7. ᶃϝοηʔδͷશମ ᶄϝοηʔδͷຊจ ᶅຊจશମΛғΉϘοΫεΛ഑ஔ ᶆςΩετΛ഑ஔ { "type": "bubble", // ᶃ "body": { // ᶄ "type": "box", // ᶅ "layout": "horizontal", "contents": [ { "type": "text", // ᶆ "text": “Hello, World" } ] } } HELLO, WORLD
8. SIMULATOR https://developers.line.me/console/fx/
9. 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": "U4af4980629…", "messages": [{ "type": "flex", "altText": "this is a flex message", "contents": { "type": "bubble", "body": { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "Hello, World" } ] } } } ] }'
10. CONTAINER bubble carousel
11. BLOCKS
12. COMPONENTS
13. BOX LAYOUT SYSTEM layout: “horizontal” spacing spacing spacing gravity align gravity align gravity align gravity align layout: “vertical” spacing spacing spacing gravity align gravity align gravity align gravity align layout: “baseline” spacing spacing spacing align align align align
14. FLEX PROPERTY Closing The Distance flex=1 flex=2 flex=0 Closing The Distance Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
15. Ԡ༻ࣄྫ:ϖίολʔLINEϘοτ FlexͷػೳΛۦ࢖ ͯ͠ಠࣗͷΧϨϯ μʔܕϝοηʔδ Λ࣮ݱ
16. ·ͣ͸αϯϓϧ͔Β
17. flex message support Java ✅ nodejs ✅ python ✅ go ✅ php ✅ ruby Not yet perl Not yet OFFICIAL SDK
18. QUICK REPLY
20. • ϝοηʔδૹ৴ • ϙετόοΫ • ೔෇બ୒ • Χϝϥىಈ • ΧϝϥϩʔϧΛ։͘ • Ґஔ৘ใΛૹ৴ QUICK REPLY ͔ΒͰ͖Δ͜ͱ
21. 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": "U4af4980629…", "messages": [ { "type": "text", "text": "this is a flex message", "quickReply": { "items": [ { "type": "action", "action": { "type": "message", "label": "Sushi", "text": "Sushi" } }, { "type": "action", "action": { "type": "message", "label": "Tempura", "text": "Tempura" } }, { "type": "action", "action": { "type": "location", "label": "Send location" } } ] } } ] }'
22. ϘλϯΛఏࣔ͢ΔͱɺͦͷίϚ ϯυ͔࣮͠ߦͰ͖ͳ͍Α͏ʹΈ ͑ͯ͠·͏ ࢖͍ॴ1 Quick ReplyͳΒ߇͑Ίʹ
 ༻ྫΛఏࣔͰ͖Δ
23. ࢖͍ॴ2 Flexͩͱϝοηʔδ͕େ͖͘ͳ Γ͗͢Δ Quick ReplyͳΒίϯύΫτ ʹଟ਺ͷબ୒ࢶΛग़ͤΔ
24. ·ͱΊ • Template Message • RichMenu • Flex Message (New!) • Quick Reply (New!) • LIFF (New!) LINE Bot APIͷUI֦ுػೳΛۦ࢖ͨ͠ಠ૑తͳ BotΛ͓଴͍ͪͯ͠·͢!
25. THANK YOU