LINE Bot 開発 LIFF編

LINE Bot 開発 LIFF編

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

55c9804c185f493816433678393cbe92?s=128

sumihiro3

July 11, 2019
Tweet

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 -*/&%FWFMPQFSPGUIF.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,BOTBJMEHL 

  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# URL532LIFF 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  1SJOUMPHϘλϯΛ λοϓͯ͠ɺ W$POTPMF ϘλϯΛ λοϓ͢Δ
  55. ϓϩάϥϜͷಈ࡞֬ೝʢPO#SPXTFSʣ n vConsole ”Print log” 5 OK l “LIFF initialization

    failed” LIFF OK LIFF ϓϩάϥϜͰ͸ DPOTPMFMPH b1SJOUMPH`  ͍ͯ͠Δ͚ͩɻ
  56. -*/& ΞϓϦͰ-*'' Λىಈ͢Δ n Bot   LIFF  

  57. -*/& ΞϓϦͰ-*'' Λىಈ͢Δ n Bot   LIFF  

    1SJOUMPHϘλϯΛλοϓ ͯ͠ɺ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࿈ܞϋϯζΦϯ ௐ੔த