LINE Bot 開発 LIFF編

LIFF でBot のUI をリッチにする
LINE Developer Group Kansai 勉強会 vol.2 のハンズオン資料
https://ldgk.connpass.com/event/136592/

1. -*/&
   #PU
   ։ൃ -*''ฤ -*''
   Ͱ#PU ͷ6* ΛϦονʹ͢Δ -*/&
   %FWFMPQFS
   (SPVQ
   ,BOTBJ ษڧձ WPM BU
   ͘͞ΒΠϯλʔωοτ  4VNJIJSP ,BHBXB
2. ຊ೔ͷΞδΣϯμ n 2 n l LINE l l 1 LIFF l 2 Bot LIFF n
3. ࣗݾ঺հ
4. Ճ઒ ੅ኍʢ͔͕Θ ͢ΈͻΖʣ n ॴଐ l ג $PNQBTT $50 l ϐʔεϛʔϧɾςΫϊϩδʔ ג γχΞۀ຿ΞφϦετ n ड৆ྺͳͲ l -*/&
   "1*
   &YQFSU l -*/&
   $MPWB 4LJMM
   "XBSETʮࢠͲ΋͕࢖͍ͨ͘ͳΔεΩϧʯ࠷༏ल৆ l -*/&
   %FWFMPQFS
   PG
   UIF
   .POUI
    l -*/&
   #005
   "8"3%4
   
   ϑΝϛϦʔ෦໳৆ l -*/&
   5IJOHT
   ϋοΧιϯ -*/&৆ ଞ
   
5. ͜Μͳਓ n ʮϓϦϯλʔͷਓʯ l 5
6. ࢓ࣄͰ-*/&
   #PU
   ͷ։ൃ΋͍ͯ͠·͢
   
7. ʲ߽՚ʳ αϙʔτϝϯόʔ
8. A B O U T M E Takuya Kanatani @torisankanasan KDL Inc. ৽ٕज़׆༻ਪਐ൝ Ϧʔμʔ Honde Next ڞಉ୅ද LINE API Expert (‘19~)
9. -*/&
   %FWFMPQFS
   (SPVQ
   ,BOTBJ
   MEHL
   
10. MEHL ࠓޙͷษڧձ༧ఆ 
    ೔ఔ ಺༰ ৔ॴ ʢ໦ʣ ʙ -*''ʢ-*/&
    'SPOUFOE
    'SBNFXPSLʣͰ #PU ͷ6* ΛϦονʹ͢Δ ʙ7VFKT Ͱ-*'' Λ։ൃ͠Α͏ʂʙ ͘͞ΒΠϯλʔωοτ ʢ౔ʣ ʢ೔ʣ $MPWB ։ൃ େࡕ"5$ ϝΠΧʔζόβʔϧಛઃձ৔ ݄༧ఆ -*/&
    1BZ
    "1* ௐ੔த ݄༧ఆ -5େձ ˞߽՚ήετ͕དྷΔ͔΋ ௐ੔த ݄̔༧ఆ .4UJDL$
    
    -*/&
    5IJOHT
    
    "NB[PO
    $POOFDU࿈ܞϋϯζΦϯ ௐ੔த
11. -*/&
    Λ࢖͏ ϝϦοτ
12. 2 / % 1 ), + % ), + ( ˞ʰ೥݄ߋ৽ʂ ͷιʔγϟϧϝσΟΞ࠷৽ಈ޲σʔλ·ͱΊʱΑΓҾ༻ IUUQTHBJBYTPDJBMNFEJBMBCKQQPTU GCDMJE*X"3-BHE0*O%X$V487F991PXM75;:0L1N8SI2-3@&P9$@F$H
13. Πϯετʔϧ͞Εͳ͍໰୊؇࿨
14. ϓογϡ௨஌
15. σβΠϯ޻਺ݮ
16. Φεεϝɾ֦ࢄ
17. ຒ΋Εͳ͍
18. ແྉͰଟ͘ͷػೳར༻Մೳ ௿ྉۚͰͷεϞʔϧελʔτ΋Մೳ
19. • Πϯετʔϧোน͕௿͍ • ϝοηʔδ͕ಧ͖΍͍͢ • ಉ͡ػೳͰ΋։ൃ޻਺͕ஈҧ͍ • Φεεϝ֦ࢄͯ͠΋Β͍΍͍͢ • ͨ͘͞ΜೖΕͯ΋ຒ΋Εͳ͍ • ແྉͰ΋ଟػೳˍ௿ྉ͔ۚΒ
20. ୈ෦ ϋϯζΦϯ४උ 
    
21. ஫ҙࣄ߲ n 2 l LINE Bot 1 Ø LINE Bot   
     l Web 1 Ø HTML, JavaScript, HTTP   , REST-API 
22. ϋϯζΦϯ४උͷྲྀΕ n LINE Bot 2 n n n
23. ! ཧղ౓νΣοΫ
      Bot   Ͱ͖ͯͳ͍ํ͸ڍखʂ
    
24. ! ཧղ౓νΣοΫ
      Bot      ෼͔ͬͨํ͸ڍखʂ
    
25. ! ཧղ౓νΣοΫ
       Bot  LINE API  ෼͔ͬͨํ͸ڍखʂ
    
26. ! ཧղ౓νΣοΫ
     LINE Bot       ෼͔ͬͨํ͸ڍखʂ
    
27. ϋϯζΦϯࢿྉஔ͖৔ n   URL   IUUQCJUMZMEHLCPUIBOETPOWPM 
28. جຊฤͷࢿྉ n LINE Bot 2URL IUUQCJUMZMEHLCPUIBOETPOWPM
29. αϯϓϧϓϩάϥϜͷμ΢ϯϩʔυ n Github URL   IUUQTHJUIVCDPNTVNJIJSPMJOFCPUIBOETPOWPM
    
30. αϯϓϧϓϩάϥϜͷμ΢ϯϩʔυ n Github     l Mac/Linux l Windows 3 2 . / 2 . / . 2 - / & . /: 3 :3 / 2 - / 2$ . 2 - / 2$ 3 & 3 2 . / 2 . / . 2 - / & . /: 3 :3 / 2 - / 2$ . 2 - / 2$ ΫϩʔϯઌͷσΟϨΫτϦ͸೚ҙ 
    
31. 7JTVBM4UVEJP$PEF ͰΫϩʔϯઌΛ։͘ n VisualStudioCode VSCode n → l 1 3
32. ϓϩάϥϜʹඞཁͳϞδϡʔϧΛΠϯετʔϧ n      
    $ $
33. ίϚϯυೖྗʹࠔͬͨΒ n Readme.md 3 l
34. ୈ෦ ͸͡Ίͯͷ-*''
    
35. ୈ෦ͷྲྀΕ n LIFF(LINE Front-end Framework)  n LIFF   n 
    
36. -*'' ͱ͸ n LINE Front-end Framework l LINE 3 Web l LIFF Ø Web  LINE 
    
    ID &/+ (,41  - 
    
    -*2#'1.6 Ø 
    
    $ 
    5)41  - Web  
    30 
    ! "% • 
    30→LIFF→
    30 ˞ࢀߟɿIUUQTEFWFMPQFSTMJOFCJ[KBEPDTMJGGPWFSWJFX
37. -*'' ͱ͸ n 3 l Web 7
38. σϞ
39. ຊϋϯζΦϯͰͷγεςϜߏ੒ਤ -*/&
    .FTTBHJOH
    "1* Ø αʔόʔαΠυϩδοΫ Ø 8FCΞϓϦ
40. OHSPL ͷىಈ n ngrok l 4 0 Ø Ngrok  
     3 - /0$ 00-
41. OHSPL ͷىಈ n  RS1C E 2 E 2 S C 7 C S7 SSSSSSSSSSSSSSSS EC SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS 7 C S3 IC SSSSSSSSSSSSSSS,S S+.SFC SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS 8I> SSSSSSSSSSSSSSSSSSSSSSSS I> S CE E S C S( ) (. S2 E 8S S I> 9 C SSSSSSSSSSSSSSSSSSSSSSS( ) -SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS C SSSSSSSSSSSSSSSSSSSSSSSS8 C >S7 S SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS : S5 @ SSSSSSSSSSSSSSSSS I/ (, / SSSSSSSSSSSSSSSSSSSSSSSSSSSSS 4 >C SSSSSSSSSSSSSSSSSSSS I/ C 0S I/ E E /) S 4 >C SSSSSSSSSSSSSSSSSSSS I / C 0S I/ E E /) 2 C SSSSSSSSSSSSSSSSSSS E I SSSSS +SSSSSI+ SSSSSI. SSSSSSS SSSSSSS SSSSSSS SSSS SSSS SSSS S 63-
    ΛϝϞ͓ͯ͘͠ 
    
42. -*'' ΞϓϦΛઃఆ͢Δ 1. LIFF Ø LIFF SDKJavaScript -. ,*(0+ Ø  4 Web# &1 HTML, JavaScript  2. LIFF 2 Ø LINE Developers %$ LIFF# URL532
    LIFF URL)/ 3. LINE Bot LIFF Ø # "
     %
    QR  !%'
43. -*''ΞϓϦΛ։ൃ͢Δ l LIFF SDK JavaScript 34 l Web HTML, JavaScript MJGGGJSTU@MJGGIUNM Λࢀর
44. -*'' ॳظԽॲཧʢMJGGGJSTU@MJGGIUNM ߦ໨෇ۙʣ C =C = = ' = ! )= = ! ! = ! = = = ! = = F , ! '( = = = ! , F = , ' = D , PI I NLI V U / = ! !> = '( = > . ; ' > = > . ; = = =! ; > . ; !! '( = = = ! , / = '( = = = ! , F =
    
    
45. -*''ΞϓϦΛ௥Ճ͢Δ n LINE Developers  Messaging API Bot 
     ࡞੒͍ͯ͠ͳ͍ਓ͸7PM ͷࢿྉΛجʹνϟωϧΛ࡞੒
46. -*''ΞϓϦΛ௥Ճ͢Δ
    
47. -*''ΞϓϦΛ௥Ճ͢Δ n LIFF URL  
     ΤϯυϙΠϯτ63- ʹ͸ԼهΛೖྗ͢Δ IUUQT\OHSPL ͷαϒυϝΠϯ^OHSPLJPMJGGGJSTU@MJGGIUNM
48. -*''ΞϓϦΛ௥Ճ͢Δ n LIFF URL 
     -*'' 63- Λ-*/& ΞϓϦ্Ͱ ։͘ͱ-*''ͱ࣮ͯ͠ߦͰ͖Δ
49. -*''
    ΛදࣔͰ͖ΔΑ͏ʹ͢Δ n LINE Bot LIFF l 49 l 9 l QR ࠓճ͸ϦονϝχϡʔΛ࢖͍·͢
50. Ϧονϝχϡʔ͔Β-*''
    ΛදࣔͰ͖ΔΑ͏ʹ͢Δ n   
    
51. Ϧονϝχϡʔ͔Β-*''
    ΛදࣔͰ͖ΔΑ͏ʹ͢Δ n l LIFF URL 1
52. #PU֤छઃఆͷهड़ n .env 2 5 l .env.sample .env 5 LNE HKC O // LNE / A / . BBBBBBBBBBBB =: E . / . AA #""BBBBBBB =: =
53. ϓϩάϥϜΛىಈ n      $ . 0 
    ্هͷΑ͏ʹදࣔ͞Εͯ ͍Ε͹0,
54. ϓϩάϥϜͷಈ࡞֬ೝʢPO
    #SPXTFSʣ n PC  LIFF html   l https://{ngrok   }.ngrok.io/liff/first_liff.html 
    1SJOU
    MPH
    ϘλϯΛ λοϓͯ͠ɺ W$POTPMF ϘλϯΛ λοϓ͢Δ
55. ϓϩάϥϜͷಈ࡞֬ೝʢPO
    #SPXTFSʣ n vConsole ”Print log” 5 OK l “LIFF initialization failed” LIFF OK LIFF ϓϩάϥϜͰ͸ DPOTPMFMPH b1SJOU
    MPH`  ͍ͯ͠Δ͚ͩɻ
56. -*/& ΞϓϦͰ-*'' Λىಈ͢Δ n Bot   LIFF 
    
57. -*/& ΞϓϦͰ-*'' Λىಈ͢Δ n Bot   LIFF 
     1SJOU
    MPH
    ϘλϯΛλοϓ ͯ͠ɺW$POTPMF Ͱ֬ೝ ͯ͠ΈΑ͏
58. -*/& ΞϓϦͰ-*'' Λىಈ͢Δ n LIFF    
     ϒϥ΢βͷࡍͱҧ͍ɺ -*/& ΞϓϦ্Ͱ͸-*'' ॳظԽ͕੒ޭ͍ͯ͠Δ
59. -*'' ͔Β5FYU.FTTBHF Λૹ৴͢Δ n Send message  
    
60. -*'' ͔Β5FYU.FTTBHF Λૹ৴͢Δ n 6 l 0 6 ϝοηʔδʹ͸ɺ-*/&
    QG
    ͔Βऔಘͨ͠Ϣʔβʔ ͷද໊͕ࣔදࣔ͞ΕΔ
61. ! νΣοΫϙΠϯτ LIFF LINE Bot 
      Ͱ͖ͯͳ͍ํ͸ڍखʂ 
    
62. ٳܜ ʢ
    ෼ʣ
63. ୈ෦ ΫΠζ#PU ͷ-*''Խ 
    
64. ୈ෦ͷྲྀΕ n Vue.js n Bot n Bot n LIFF 46 n
65. ࣭໰ 7VFKT Λ ஌͍ͬͯΔ࢖͍ͬͯΔਓʁ 
    
66. 7VFKT ͱ͸ n Web UI JavaScript  Ø jQuery DOMQ< 
    "-!& A UI 9=RSEO Ø C?4B.(%.#6  
    4B@;8>P 
    $I7<2LF1 Ø ' .(%.#3GHI7 :D+&+,MK Ø /0J$*).#N5 
    
    
67. ΫΠζ#PU ͷ֓ཁ n Bot l 3 75 l 6 l 7 6 ˞ຊ#PU Ͱग़୊͢ΔΫΠζ໰୊͸ʮࡶֶ͔͔͠͡ʢIUUQTQFEBOUDPNʣʯΑΓҾ༻͍ͯ͠·͢
68. ॲཧͷྲྀΕʢલ൒ʣ
    
69. ॲཧͷྲྀΕʢޙ൒ʣ
    
70. -*''ΞϓϦΛ௥Ճ͢Δˏ-*/&
    %FWFMPQFST ΤϯυϙΠϯτ63- ʹ͸ԼهΛೖྗ͢Δ IUUQT\OHSPL ͷαϒυϝΠϯ^OHSPLJPMJGGRVJ[@MJGGIUNM
71. Ϧονϝχϡʔˏ-*/& ެࣜΞΧ΢ϯτϚωʔδϟ n   
    
72. 2VJ[༻-*''
    ΛදࣔͰ͖ΔΑ͏ʹ͢Δ n l LIFF URL 2
73. ϓϩάϥϜΛىಈ n 3 7 7 l app.js 7 Ctrl+C . 3$ 0 ্هͷΑ͏ʹදࣔ͞Εͯ ͍Ε͹0,
74. -*/& ΞϓϦͰ-*'' Λىಈ͢Δ n Bot   LIFF  
    
75. -*/& ΞϓϦͰ-*'' Λىಈ͢Δ n Quiz     OK 
    
76. ! νΣοΫϙΠϯτ  LIFF 
      Ͱ͖ͯͳ͍ํ͸ڍखʂ 
    
77. ։ൃ5JQT
78. -*'' ։ൃ5JQT n    l HTML    Ø PC  l  Ø vConsole   - 
    
    HTML  
    
79. -*'' ։ൃ5JQT n 7 l HTML LIFF 9 l Ø LINE  
     -
    →→
    →
    
80. -*'' ։ൃ5JQT n GET 8 l LIFF URL 0 GET 8 8 LIFF l Ø - &&&&&&& //
81. એ఻ͳͲ
82. એ఻ W$POTPMF Λ#PUʹ ૊ࠐΉهࣄΛ2JJUB Ͱެ։தʂ 
    
83. એ఻ ܾࡁΛݸਓ։ൃͷ#PUʹ ૊ࠐΉهࣄΛ2JJUB Ͱެ։தʂ ͓͔͛͞·Ͱ ໿
    ͍͍Ͷʂ 
    
84. 4/4 ΞΧ΢ϯτͳͲ !TVNJIJSP 4VNJIJSP,BHBXB -*/&
    "1*
    &YQFSU 
    
85. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
86. MEHL ࠓޙͷษڧձ༧ఆ 
    ೔ఔ ಺༰ ৔ॴ ʢ໦ʣ ʙ -*''ʢ-*/&
    'SPOUFOE
    'SBNFXPSLʣͰ #PU ͷ6* ΛϦονʹ͢Δ ʙ7VFKT Ͱ-*'' Λ։ൃ͠Α͏ʂʙ ͘͞ΒΠϯλʔωοτ ʢ౔ʣ ʢ೔ʣ $MPWB ։ൃ େࡕ"5$ ϝΠΧʔζόβʔϧಛઃձ৔ ݄༧ఆ -*/&
    1BZ
    "1* ௐ੔த ݄༧ఆ -5େձ ˞߽՚ήετ͕དྷΔ͔΋ ௐ੔த ݄̔༧ఆ .4UJDL$
    
    -*/&
    5IJOHT
    
    "NB[PO
    $POOFDU࿈ܞϋϯζΦϯ ௐ੔த