Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20181003_flex

 20181003_flex

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

9f203fdf00986da712b471b2e6f95c5f?s=128

knowledge_sakura

October 03, 2018
Tweet

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

  19. None
  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