LINE for Wedding ~ 新しくなったFlex Messageを使ってみた ~

LINE for Wedding ~ 新しくなったFlex Messageを使ってみた ~

LINE Platform - UI/UX勉強会 #02 - Chat Bot編 2019.09.04でのLTスライドです。
https://linedev.connpass.com/event/142962/

4778efaf773e22787dee8ca84f44ed37?s=128

金谷拓哉 / Takuya Kanatani

September 04, 2019
Tweet

Transcript

  1. LINE for Wedding ৽͘͠ͳͬͨFlex MessageΛ࢖ͬͯΈͨ TAKUYA KANATANI LINE Platform -

    UI/UXษڧձ #02 2019.09.04
  2. A B O U T M E Takuya Kanatani @torisankanasan

    KDL Inc. ৽ٕज़׆༻ਪਐ൝ Ϧʔμʔ Honde Next ڞಉ୅ද LINE API Expert (‘19~)
  3. L I N E D E V E L O

    P E R O F T H E M O N T H 2 0 1 8 . 0 9 L I N E B O O T AWA R D S 2 0 1 8 R I Z A P ৆ Λ ड ৆ ͠ · ͠ ͨ ɻ
  4. ࢲ ͝ ͱ Ͱ ͢ ͕ ɾ ɾ ɾ

  5. ࠶ དྷ ि ɺ ݁ ࠗ ࣜ Λ ͠ ·

    ͢
  6. ݁ ࠗ ࣜ ͷ ४ උ ͬͯ େ ม Ͱ

    ͢Α Ͷ ɻ ɻ 
 ε τ Ϩε ଟ ͍Ͱ ͢Α Ͷ ɻ ɻ 
 ͓ ۚ ΋ ͔ ͔ Γ · ͢Α Ͷ ɻ ɻ
  7. ࢥ ͬͯ ͍ ͨ Α Γ ੮ ࣍ ද ΋

    ߴ ͔ ͬ ͨ Ͱ ͢ɻ ɻ ɾࣜ৔Ͱґཔͨ͠৔߹ͷ૬৔͸ 800ʙ1500ԁ/1෦ ɾWebͰࣗ෼Ͱൃ஫ͯ͠΋૬৔͸ 400ʙ600ԁ/1෦ ࢀߟɿhttp://pure-print.com/price/
  8. ࢴ Ͱ ͋ Δ ඞ ཁ ͋ Γ · ͢

    ʁ
  9. L I N E Ͱ ੮ ࣍ ද ͕ ݟ

    Ε ͨ Β ʁ
  10. ͭ ͬ͘ ͨ ΋ ͷ ʰLINEͰ੮࣍දʱ
 ͍ͭ΋ͷLINEͰ݁ࠗ൸࿐ԅͷ
 ɾ੮࣍
 ɾྉཧϝχϡʔ
 ɾ2ਓͷϓϩϑΟʔϧ


    ɾ2ਓ͔Βͷϝοηʔδetc.
 ͕֬ೝͰ͖·͢ʂ
  11. ͭ ͔ ͍ ͔ ͨ ❶ LINE͔Β੮ࡳͷQRΛಡΈऔΔ ❷ ੮࣍දBotΛ༑ͩͪ௥Ճ͢Δ

  12. ઌ೔ɺFlex MessageͷUpdate 1͕
 ެ։͞ΕͨͷͰɺ࢖ͬͯΈ·ͨ͠ https://engineering.linecorp.com/ja/blog/flexupdate-1/

  13. Flex Message ͱ͸ʁ Flex Message͸ɺCSS Flexible BoxʢCSS Flexboxʣͷجૅ஌ࣝ Λ࢖ͬͯɺϨΠΞ΢τΛࣗ༝ʹ ΧελϚΠζͰ͖Δϝοηʔδ

    Ͱ͢ɻ https://developers.line.biz/ja/docs/messaging-api/using-flex-messages/
  14. ৽͘͠ͳͬͨFlex MessageΛ࢖͏ͱ Before After ɾbubbleཁૉͷԣ෯͕Մมʹͳͬͨ
 ɹAfter: Ұը໘Ͱ໨ʹೖΔྖҬ͕૿͑ͨʂ ɾboxཁૉ͍ͬͺ͍ʹը૾දࣔՄೳ ɾboxཁૉͷpositionͱoffsetΛ࢖ͬͯɺ
 ɹཁૉͷΦʔόʔϨΠ͕Մೳ


    ɹAfter: ը૾ͷ্ʹจࣈ΍ϘλϯΛ
 ɹɹɹɹ഑ஔͯ͠Ϧονͳදݱ͕Մೳʂ
  15. ৽͘͠ͳͬͨFlex MessageΛ࢖͏ͱ Before After ɾbubbleཁૉͷԣ෯͕Մมʹͳͬͨ
 ɹAfter: ը໘͍ͬͺ͍ʹදࣔՄೳʂ ɾboxཁૉ͍ͬͺ͍ʹը૾දࣔՄೳ ɾboxཁૉͷpositionͱoffsetΛ࢖ͬͯɺ
 ɹཁૉͷΦʔόʔϨΠ͕Մೳ


    ɹAfter: ࢴͬΆ͍ը૾ͷ্ʹจࣈΛ
 ɹɹɹɹ഑ஔͯ͠ΑΓ੮࣍දͬΆ͘ɻ
  16. ৽͘͠ͳͬͨFlex MessageΛ࢖ͬͯ
 ΑΓϦονͳදݱʹ௅ઓͯ͠Έ·͠ΐ͏ʂ https://engineering.linecorp.com/ja/blog/flexupdate-1/

  17. ࠺ ͷ ൓ Ԡ

  18. ɹ ɹ ɹ ɹ ࠺ ɿ ʮ ࢲ ͸ ࢴ

    Ͱ ࢒ ͠ ͨ ͍ ΜͰ ͢ ͚ Ͳ ɻ ʯ ɹ ɹ ɹ ɹ ࢲ ɿ ʮ ɻ ɻ ɻ ʯ
  19. ࢴ ͷ ੮ ࣍ ද ʹ L I N E

    Ϙ ο τ ͷ 
 Q R ί ʔ υ Λ ܝ ࡌ ͢ Δ ӡ ༻ ʹ ͳ Γ · ͠ ͨ ɾ ɾ ɾ
  20. T H A N K Y O U ! @torisankanasan