LINE Bot 開発 LIFF編

Transcript

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࿈ܞϋϯζΦϯ ௐ੔த