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/flexupdate-1/
Slide 13
Slide 13 text
Flex Message ͱʁ
Flex MessageɺCSS Flexible
BoxʢCSS Flexboxʣͷجૅࣝ
ΛͬͯɺϨΠΞτΛࣗ༝ʹ
ΧελϚΠζͰ͖Δϝοηʔδ
Ͱ͢ɻ
https://developers.line.biz/ja/docs/messaging-api/using-flex-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/flexupdate-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