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

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

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