Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LINE Bot 開発 LIFF編

LINE Bot 開発 LIFF編

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

sumihiro3

July 11, 2019
Tweet

More Decks by sumihiro3

Other Decks in Programming

Transcript

  1. Ճ઒ ੅ኍʢ͔͕Θ ͢ΈͻΖʣ n ॴଐ l ג $PNQBTT $50 l

    ϐʔεϛʔϧɾςΫϊϩδʔ ג γχΞۀ຿ΞφϦετ n ड৆ྺͳͲ l -*/&"1*&YQFSU l -*/&$MPWB 4LJMM"XBSETʮࢠͲ΋͕࢖͍ͨ͘ͳΔεΩϧʯ࠷༏ल৆ l -*/&%FWFMPQFSPGUIF.POUI l -*/&#005"8"3%4ϑΝϛϦʔ෦໳৆ l -*/&5IJOHTϋοΧιϯ -*/&৆ ଞ 
  2. A B O U T M E Takuya Kanatani @torisankanasan

    KDL Inc. ৽ٕज़׆༻ਪਐ൝ Ϧʔμʔ Honde Next ڞಉ୅ද LINE API Expert (‘19~)
  3. MEHL ࠓޙͷษڧձ༧ఆ  ೔ఔ ಺༰ ৔ॴ ʢ໦ʣ ʙ -*''ʢ-*/&'SPOUFOE'SBNFXPSLʣͰ #PU

    ͷ6* ΛϦονʹ͢Δ ʙ7VFKT Ͱ-*'' Λ։ൃ͠Α͏ʂʙ ͘͞ΒΠϯλʔωοτ ʢ౔ʣ ʢ೔ʣ $MPWB ։ൃ େࡕ"5$ ϝΠΧʔζόβʔϧಛઃձ৔ ݄༧ఆ -*/&1BZ"1* ௐ੔த ݄༧ఆ -5େձ ˞߽՚ήετ͕དྷΔ͔΋ ௐ੔த ݄̔༧ఆ .4UJDL$ -*/&5IJOHT "NB[PO $POOFDU࿈ܞϋϯζΦϯ ௐ੔த
  4. 2 / % 1 ), + % ), + (

    ˞ʰ೥݄ߋ৽ʂ ͷιʔγϟϧϝσΟΞ࠷৽ಈ޲σʔλ·ͱΊʱΑΓҾ༻ IUUQTHBJBYTPDJBMNFEJBMBCKQQPTU GCDMJE*X"3-BHE0*O%X$V487F991PXM75;:0L1N8SI2-3@&P9$@F$H
  5. ஫ҙࣄ߲ n 2 l LINE Bot 1 Ø LINE Bot

       l Web 1 Ø HTML, JavaScript, HTTP   , REST-API 
  6. αϯϓϧϓϩάϥϜͷμ΢ϯϩʔυ 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$ ΫϩʔϯઌͷσΟϨΫτϦ͸೚ҙ 
  7. -*'' ͱ͸ 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
  8. OHSPL ͷىಈ n ngrok l 4 0 Ø Ngrok 

      3 - /0$ 00-
  9. 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-ΛϝϞ͓ͯ͘͠ 
  10. -*'' ΞϓϦΛઃఆ͢Δ 1. LIFF Ø LIFF SDKJavaScript -. ,*(0+ Ø

     4 Web# &1 HTML, JavaScript  2. LIFF 2 Ø LINE Developers %$ LIFF# URL532LIFF URL)/ 3. LINE Bot LIFF Ø # "  %QR  !%'
  11. -*'' ॳظԽॲཧʢMJGGGJSTU@MJGGIUNM ߦ໨෇ۙʣ C =C = = ' = !

    )= = ! ! = ! = = = ! = = F , ! '( = = = ! , F = , ' = D , PI I NLI V U / = ! !> = '( = > . ; ' > = > . ; = = =! ; > . ; !! '( = = = ! , / = '( = = = ! , F = 
  12. -*''ΞϓϦΛ௥Ճ͢Δ n LINE Developers  Messaging API Bot  

    ࡞੒͍ͯ͠ͳ͍ਓ͸7PM ͷࢿྉΛجʹνϟωϧΛ࡞੒
  13. -*''ΛදࣔͰ͖ΔΑ͏ʹ͢Δ n LINE Bot LIFF l 49 l 9 l

    QR ࠓճ͸ϦονϝχϡʔΛ࢖͍·͢
  14. #PU֤छઃఆͷهड़ n .env 2 5 l .env.sample .env 5 LNE

    HKC O // LNE / A / . BBBBBBBBBBBB =: E . / . AA #""BBBBBBB =: =
  15. ϓϩάϥϜΛىಈ n      $ . 0

     ্هͷΑ͏ʹදࣔ͞Εͯ ͍Ε͹0,
  16. ϓϩάϥϜͷಈ࡞֬ೝʢPO#SPXTFSʣ n PC  LIFF html   l https://{ngrok

      }.ngrok.io/liff/first_liff.html  1SJOUMPHϘλϯΛ λοϓͯ͠ɺ W$POTPMF ϘλϯΛ λοϓ͢Δ
  17. ϓϩάϥϜͷಈ࡞֬ೝʢPO#SPXTFSʣ n vConsole ”Print log” 5 OK l “LIFF initialization

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

    1SJOUMPHϘλϯΛλοϓ ͯ͠ɺW$POTPMF Ͱ֬ೝ ͯ͠ΈΑ͏
  19. -*/& ΞϓϦͰ-*'' Λىಈ͢Δ n LIFF     

    ϒϥ΢βͷࡍͱҧ͍ɺ -*/& ΞϓϦ্Ͱ͸-*'' ॳظԽ͕੒ޭ͍ͯ͠Δ
  20. 7VFKT ͱ͸ n Web UI JavaScript  Ø jQuery DOMQ<

     "-!& A UI 9=RSEO Ø C?4B.(%.#6  4B@;8>P $I7<2LF1 Ø ' .(%.#3GHI7 :D+&+,MK Ø /0J$*).#N5  
  21. ΫΠζ#PU ͷ֓ཁ n Bot l 3 75 l 6 l

    7 6 ˞ຊ#PU Ͱग़୊͢ΔΫΠζ໰୊͸ʮࡶֶ͔͔͠͡ʢIUUQTQFEBOUDPNʣʯΑΓҾ༻͍ͯ͠·͢
  22. ϓϩάϥϜΛىಈ n 3 7 7 l app.js 7 Ctrl+C .

    3$ 0 ্هͷΑ͏ʹදࣔ͞Εͯ ͍Ε͹0,
  23. -*'' ։ൃ5JQT n    l HTML  

     Ø PC  l  Ø vConsole   -  HTML   
  24. -*'' ։ൃ5JQT n 7 l HTML LIFF 9 l Ø

    LINE    -  →→ → 
  25. -*'' ։ൃ5JQT n GET 8 l LIFF URL 0 GET

    8 8 LIFF l Ø - &&&&&&& //
  26. MEHL ࠓޙͷษڧձ༧ఆ  ೔ఔ ಺༰ ৔ॴ ʢ໦ʣ ʙ -*''ʢ-*/&'SPOUFOE'SBNFXPSLʣͰ #PU

    ͷ6* ΛϦονʹ͢Δ ʙ7VFKT Ͱ-*'' Λ։ൃ͠Α͏ʂʙ ͘͞ΒΠϯλʔωοτ ʢ౔ʣ ʢ೔ʣ $MPWB ։ൃ େࡕ"5$ ϝΠΧʔζόβʔϧಛઃձ৔ ݄༧ఆ -*/&1BZ"1* ௐ੔த ݄༧ఆ -5େձ ˞߽՚ήετ͕དྷΔ͔΋ ௐ੔த ݄̔༧ఆ .4UJDL$ -*/&5IJOHT "NB[PO $POOFDU࿈ܞϋϯζΦϯ ௐ੔த