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

Slide 1

Slide 1 text

LINE for Wedding ৽͘͠ͳͬͨFlex MessageΛ࢖ͬͯΈͨ TAKUYA KANATANI LINE Platform - UI/UXษڧձ #02 2019.09.04

Slide 2

Slide 2 text

A B O U T M E Takuya Kanatani @torisankanasan KDL Inc. ৽ٕज़׆༻ਪਐ൝ Ϧʔμʔ Honde Next ڞಉ୅ද LINE API Expert (‘19~)

Slide 3

Slide 3 text

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 ৆ Λ ड ৆ ͠ · ͠ ͨ ɻ

Slide 4

Slide 4 text

ࢲ ͝ ͱ Ͱ ͢ ͕ ɾ ɾ ɾ

Slide 5

Slide 5 text

࠶ དྷ ि ɺ ݁ ࠗ ࣜ Λ ͠ · ͢

Slide 6

Slide 6 text

݁ ࠗ ࣜ ͷ ४ උ ͬͯ େ ม Ͱ ͢Α Ͷ ɻ ɻ   ε τ Ϩε ଟ ͍Ͱ ͢Α Ͷ ɻ ɻ   ͓ ۚ ΋ ͔ ͔ Γ · ͢Α Ͷ ɻ ɻ

Slide 7

Slide 7 text

ࢥ ͬͯ ͍ ͨ Α Γ ੮ ࣍ ද ΋ ߴ ͔ ͬ ͨ Ͱ ͢ɻ ɻ ɾࣜ৔Ͱґཔͨ͠৔߹ͷ૬৔͸ 800ʙ1500ԁ/1෦ ɾWebͰࣗ෼Ͱൃ஫ͯ͠΋૬৔͸ 400ʙ600ԁ/1෦ ࢀߟɿhttp://pure-print.com/price/

Slide 8

Slide 8 text

ࢴ Ͱ ͋ Δ ඞ ཁ ͋ Γ · ͢ ʁ

Slide 9

Slide 9 text

L I N E Ͱ ੮ ࣍ ද ͕ ݟ Ε ͨ Β ʁ

Slide 10

Slide 10 text

ͭ ͬ͘ ͨ ΋ ͷ ʰLINEͰ੮࣍දʱ  ͍ͭ΋ͷLINEͰ݁ࠗ൸࿐ԅͷ  ɾ੮࣍  ɾྉཧϝχϡʔ  ɾ2ਓͷϓϩϑΟʔϧ  ɾ2ਓ͔Βͷϝοηʔδetc.  ͕֬ೝͰ͖·͢ʂ

Slide 11

Slide 11 text

ͭ ͔ ͍ ͔ ͨ ❶ LINE͔Β੮ࡳͷQRΛಡΈऔΔ ❷ ੮࣍දBotΛ༑ͩͪ௥Ճ͢Δ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Flex Message ͱ͸ʁ Flex Message͸ɺCSS Flexible BoxʢCSS Flexboxʣͷجૅ஌ࣝ Λ࢖ͬͯɺϨΠΞ΢τΛࣗ༝ʹ ΧελϚΠζͰ͖Δϝοηʔδ Ͱ͢ɻ https://developers.line.biz/ja/docs/messaging-api/using-ﬂex-messages/

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

৽͘͠ͳͬͨFlex MessageΛ࢖͏ͱ Before After ɾbubbleཁૉͷԣ෯͕Մมʹͳͬͨ  ɹAfter: ը໘͍ͬͺ͍ʹදࣔՄೳʂ ɾboxཁૉ͍ͬͺ͍ʹը૾දࣔՄೳ ɾboxཁૉͷpositionͱoffsetΛ࢖ͬͯɺ  ɹཁૉͷΦʔόʔϨΠ͕Մೳ  ɹAfter: ࢴͬΆ͍ը૾ͷ্ʹจࣈΛ  ɹɹɹɹ഑ஔͯ͠ΑΓ੮࣍දͬΆ͘ɻ

Slide 16

Slide 16 text

৽͘͠ͳͬͨFlex MessageΛ࢖ͬͯ  ΑΓϦονͳදݱʹ௅ઓͯ͠Έ·͠ΐ͏ʂ https://engineering.linecorp.com/ja/blog/ﬂexupdate-1/

Slide 17

Slide 17 text

࠺ ͷ ൓ Ԡ

Slide 18

Slide 18 text

ɹ ɹ ɹ ɹ ࠺ ɿ ʮ ࢲ ͸ ࢴ Ͱ ࢒ ͠ ͨ ͍ ΜͰ ͢ ͚ Ͳ ɻ ʯ ɹ ɹ ɹ ɹ ࢲ ɿ ʮ ɻ ɻ ɻ ʯ

Slide 19

Slide 19 text

ࢴ ͷ ੮ ࣍ ද ʹ L I N E Ϙ ο τ ͷ   Q R ί ʔ υ Λ ܝ ࡌ ͢ Δ ӡ ༻ ʹ ͳ Γ · ͠ ͨ ɾ ɾ ɾ

Slide 20

Slide 20 text

T H A N K Y O U ! @torisankanasan