20200325_Noodl_v2_hands-on_スライド資料

Transcript

1. ։࢝·ͰʹɺԼهΛ͓ࡁ·͍ͤͩ͘͞ʢಈըͷ֓ཁཝʹ΋ॻ͍ͯ͋Γ·͢ʣ
   1
   2. OpenWeatherMap ͷ API Key Λ߇͓͑ͯ͘
   OpenWeatherMapʹSign In͠ɺAPI KeyΛ͙͢ʹίϐϖͰ͖Δঢ়ଶʹ͓͍͍ͯͯͩ͘͠͞ɻ
   https://openweathermap.org/
   1. Noodl 2.0 ͷόʔδϣϯ֬ೝ
   ⚠ ҟͳΔόʔδϣϯΛμ΢ϯϩʔυ͍ͯ͠ͳ͍͔֬͝ೝΛ͓ئ͍͍ͨ͠·͢ʂ
   ɹɹ֬ೝํ๏ɿNoodlΛىಈ͠ɺϝχϡʔόʔͷ Noodl ʼ About Application ΁
   3. ࢿྉʹΞΫηε
   connpassͷΠϕϯτϖʔδʹ͋Δʮࢿྉʯ͔ΒɺϓϩδΣΫτϑΝΠϧΛμ΢ϯϩʔυ͍ͯͩ͘͠͞ɻ
   https://noodl-tokyo.connpass.com/event/167103/
   

   View Slide

2. Noodl version 2.0
   ϋϯζΦϯ
   2
   

   View Slide

3. X
   ΃Μ͚ͨ
   Noodl SlackίϛϡχςΟӡӦ୲౰
   3
   ̍ਓલͷNoodlerʹͳΔͨΊमߦதɻ
   Twitter
   @penpenchapen
   

   View Slide

4. X
   πΠʔτେ׻ܴͰ͢ʂ
   4
   #Noodl
   

   View Slide

5. X
   5
   ͓ࢼ͠πΠʔτλΠϜʂ
   

   View Slide

6. X
   6
   ࣭໰͸νϟοτཝͰʂ
   ʁ
   ʁ
   ʁ
   

   View Slide

7. X
   7
   ޷͖ͳ໙ྨ͸ʁ
   YouTubeͷνϟοτʹॻ͖ࠐΜͰΈΑ͏ʂ
   

   View Slide

8. X
   

   View Slide

9. X
   _tensorX
   גࣜձࣾςϯιΞΤοΫε
   9
   

   View Slide

10. X
    10
    ϦΞϧλΠϜͰΞοϓσʔτ
    Ξχϝʔγϣϯͱ
    ΠϯλϥΫγϣϯ
    ϚϧνσόΠε্ͷ
    ΤΫεϖϦΤϯεݕূ
    ʮϊʔυʯϕʔεͰߏங IoT΍ηϯαʔ઀ଓ
    APIɾσʔλΛ࢖ͬͯ
    σβΠϯՄೳ
    

    View Slide

11. ര଎Ͱ࣮ಇ͢Δ΋ͷΛ࡞Γ
    ࢼ࡞඼ͷମݧΛݕূͰ͖Δ
    

    View Slide

12. ߟ͑Δ
    ࡞Δ
    ݕূ͢Δ
    x100
    

    View Slide

13. ✔ ސ٬ͱνʔϜͷΑΓྑ͍ཧղΛಘΔ
    ✔ ࠷దͳҙࢥܾఆΛ͢Δҝͷڧ͍൑அࡐྉʹͳΔ
    ✔ ૉૣ͍ϑΟʔυόοΫ = ޮ཰తͳ։ൃ
    

    View Slide

14. X
    ࠓ೔΍Δ͜ͱ
    1. جຊૢ࡞ & Noodl 1.x ͱͷҧ͍
    2-1. API࿈ܞ & Material UI ϊʔυ
    2-2. MQTTΛར༻ͨ͠ϚϧνσόΠεͳUIͷߏங
    14
    

    View Slide

15. X
    NoodlͰ࢖͏ݴ༿
    15
    Node
    ϊʔυ
    Component
    ίϯϙʔωϯτ
    Project
    ϓϩδΣΫτ
    

    View Slide

16. X
    16
    Node
    ϊʔυ
    

    View Slide

17. X
    Node
    ϊʔυ
    

    View Slide

18. X
    Component
    ίϯϙʔωϯτ
    

    View Slide

19. X
    Component
    

    View Slide

20. X
    Component
    Component
    Component
    

    View Slide

21. X
    Component
    Component
    Component
    Component
    

    View Slide

22. X
    Component
    Componentʢશମʣ
    Component
    Component
    Component
    

    View Slide

23. X
    Componentʢશମʣ
    Project
    ϓϩδΣΫτ
    

    View Slide

24. X
    Noodl 1.3
    Noodl 1.4 beta
    24
    Group
    Muiܥ
    Noodl 2.0 beta
    Rectangle
    Stack layout
    Scroll view
    ࠨͷ̏ͭͷϊʔυͷػೳ͕Groupͷ
    ϓϩύςΟʢઃఆʣʹ౷߹͞Εͨʂ
    

    View Slide

25. X
    ग़యɿ
    IUUQTUSFFpMFDPNXFCEFTJHOVOEFSTUBOEJOHWJFXQPSUGPSSFTQPOTJWFXFCEFTJHO
    7JFXQPSU
    ϒϥ΢βͷදࣔྖҬ
    WX͸ɺ
    PGWJFXQPSUXJEUI
    ʢWJFXQPSUͷԣ෯ʹର͢Δׂ߹ʣ
    WI͸ɺ
    PGWJFXQPSUIFJHIU
    ʢWJFXQPSUͷॎ෯ʹର͢Δׂ߹ʣ
    px % ͷଞʹ vw vh ͱ͍͏୯Ґ͕௥Ճʂ
    

    View Slide

26. X
    ࠓճͭ͘Δ΋ͷ
    26
    ͦͷ̍
    

    View Slide

27. X
    Labɿτοϓը໘
    Projectɿ։ൃதͷϓϩδΣΫτஔ͖৔
    LearnɿνϡʔτϦΞϧֶ͕΂Δ
    

    View Slide

28. X
    Cloud syncedɿΫϥ΢υͱϩʔΧϧʹอଘ
    Save locallyɿϩʔΧϧʹอଘ
    جຊతʹ͸ϩʔΧϧΛબ୒͍ͯͩ͘͠͞ɻ
    Ϋϥ΢υ͸ڞಉ࡞ۀΛ͢Δࡍʹ࢖͍·͢ɻ
    ᶃ อଘํ๏Λબ୒ʂ
    ᶄ ໊લΛ෇͚ͯςϯϓϨʔτΛબ୒ʂ
    

    View Slide

29. X
    NOODLͷجຊૢ࡞
    - ϊʔυΛҠಈ͢Δ: υϥοά
    - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ΛΩʔϘʔυͰೖྗ
    - ϊʔυΛ࡟আ͢Δ: ϊʔυΛબ୒ɾDeleteΩʔΛԡ͢
    - ϊʔυΛίϐʔ: ϊʔυΛબ୒ɾ㵰+CʢWindows: Ctrl+Cʣ
    - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ
    - ϊʔυΛܨ͙: ϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ
    29
    

    View Slide

30. X
    ίϯϙʔωϯτҰཡ
    ϓϩδΣΫτઃఆ
    ϥΠϒϥϦ
    ϓϩύςΟ
    ߏங͢Δ৔ॴ
    ϝχϡʔ
    ϓϨϏϡʔ
    

    View Slide

31. X
    ࠓ೔΍Δ͜ͱ
    1. جຊૢ࡞ & Noodl 1.x ͱͷҧ͍
    2-1. API࿈ܞ & Material UI ϊʔυ
    2-2. MQTTΛར༻ͨ͠ϚϧνσόΠεͳUIͷߏங
    31
    

    View Slide

32. X
    APIͱ͸…?
    APPLICATION
    PROGRAMMING
    INTERFACE
    32
    

    View Slide

33. X
    ଞͷاۀ΍
    ਓ͕࡞ͬͨϓϩάϥϜ
    Λར༻Ͱ͖Δʂ
    33
    

    View Slide

34. X
    "11-&͕ఱؾΛ
    ଌఆ͍ͯ͠ΔΘ͚Ͱ͸ͳ͍ʂ
    J04ඪ४ͷ͓ఱؾΞϓϦ
    34
    

    View Slide

35. 35
    ఱؾ
    "1*
    /00%- ཉ͍͠ػೳΛ
    Πν͔Β։ൃ͢Δ
    ඞཁ͕ͳ͍ʂ
    Ի੠ೝࣝ
    "1*
    35
    

    View Slide

36. X
    ࢖͏ͱ͖͸ن໿Λ
    Α͘ಡ΋͏ʂ
    36
    

    View Slide

37. X
    Muiͬͯͳʹʁ
    37
    

    View Slide

38. X
    38
    ɾReactͰ؆୯ʹϚςϦΞϧσβΠϯΛ࣮ݱͰ͖ΔϥΠϒϥϦ
    ɾNoodl 2.0 betaͰ͸Ұ෦ͷMaterial UI͕ϊʔυͱͯ͠࢖͑Δ
    

    View Slide

39. X
    Facebook͕ࣾ։ൃ͍ͯ͠ΔJavaScriptͷϑϨʔϜϫʔΫ
    

    View Slide

40. X
    40
    2014೥ʹGoogle͕ࣾఏএͨ͠σβΠϯγεςϜ
    ϚςϦΞϧσβΠϯ
    Material Design
    ɾ౷Ұײͷ͋ΔσβΠϯ
    ɾ౷Ұײͷ͋Δૢ࡞
    ɾσόΠεΛލ͍ͩUIͰ΋
    ɹετϨεΛײ͡ʹ͍͘
    

    View Slide

41. X
    41
    ɾJavaScriptͷϑϨʔϜϫʔΫΛ࢖ͬͯ؆୯ʹ
    ɹ౷Ұײͷ͋ΔσβΠϯΛ࣮ݱͰ͖ΔϥΠϒϥϦ
    ɾNoodl 2.0 betaͰ͸Ұ෦ͷMaterial UI͕ϊʔυͱͯ͠࢖͑Δ
    

    View Slide

42. X
    42
    MuiϊʔυΛ࢖͏ͱ
    ͍͍ײ͡ͷUI͕
    ؆୯ʹ࡞ΕΔʂ
    

    View Slide

43. X
    https://material-ui.com/components/material-icons/
    

    View Slide

44. X
    ࠓճͭ͘Δ΋ͷ
    44
    ͦͷ̎
    

    View Slide

45. X
    45
    

    View Slide

46. X
    ࠓ೔΍Δ͜ͱ
    1. جຊૢ࡞ & Noodl 1.x ͱͷҧ͍
    2-1. API࿈ܞ & Material UI ϊʔυ
    2-2. MQTTΛར༻ͨ͠ϚϧνσόΠεͳUIͷߏங
    46
    

    View Slide

47. X
    MQTTͬͯͳʹʁ
    47
    

    View Slide

48. MQTT &
    PUBSUB
    MESSAGE QUEUING TELEMETRY
    TRANSPORT
    ܰྔͳσʔλΛେྔʹૹड৴͢Δͷʹ
    ޲͍͍ͯΔ௨৴ͷϧʔϧ
    Publish : σʔλΛૹΔ
    Subscribe: σʔλΛಡΉ
    48
    IoTʹͽͬͨΓʂ
    

    View Slide

49. 49
    MQTT
    ϒϩʔΧʔ
    MQTT͕࢖͑Δ͔Β
    ଞͷαʔϏεͱͷ࿈ܞ͕؆୯ʹʂ
    ϓϩτλΠϐϯάͷϑΣʔζͰ͸͜ΕΒͷํ๏Λ࢖͏͜ͱͰ
    ϢʔβʔମݧΛૉૣ͘ࢼ͢ࣄ͕Ͱ͖Δɻ
    49
    enebular
    Noodl
    obniz
    IBM Cloud
    Node-RED
    

    View Slide

50. View Slide

51. X
    MQTTΛ࢖ͬͯΈΑ͏ʂ
    51
    

    View Slide

52. X
    ׬੒Ͱ͢ʂ
    ͓ർΕ༷Ͱͨ͠ʂ
    52
    

    View Slide

53. X
    ͓஌Βͤ
    53
    

    View Slide

54. X
    ʲίϛϡχςΟࢀՃͷྲྀΕʳ
    ɹ̍ɽQRίʔυεΩϟϯ
    ɹɹɹɹɹɹor
    ɹɹɹhttps://bit.ly/2kSq3xw ΁ΞΫηε
    ɹ̎ɽϝʔϧΞυϨεͷೖྗ
    ɹ̏ɽೝূ༻ϝʔϧʹهࡌͷURL΁ΞΫηε
    ɹ̐ɽύεϫʔυͱϢʔβʔωʔϜΛઃఆ
    ʲSlackʳNoodlίϛϡχςΟ΁ͷ͝ট଴
    SlackʹNoodlͷίϛϡχςΟ͕͍͟͝·͢ɻ
    ຊ೔͝ग़੮ͷօ༷ͱڞʹίϛϡχςΟΛ੝Γ্͛ͯ
    ͍͚Ε͹ͱߟ͓͑ͯΓ·͢ɻੋඇɺ͝ࢀՃ͍ͩ͘͞ʂ
    54
    # ͭͬͯ͘Έͨ
    # Πϕϯτ৘ใ
    # noodl஌ܙା
    

    View Slide

55. X
    55
    Qiita
    Noodl 2.0 ػೳσϞ
    https://qiita.com/macole/items/7764c0f2dfa5ac5b1d02
    ίϛϡχςΟϝϯόʔʹΑΔղઆʂʂ
    

    View Slide

56. X
    56
    Twitter
    

    View Slide

57. X
    ͖͕͍ͭͨΒ ͍ͭͬͨʔ ʹ
    ͍ͨ ͕͠ͳ͍ Ή͠ Ͱ͢ɻ
    ͨ͘͞Μ ;͒Ζʔ ͞ΕΔͱ
    ͍ͤͪΐ͏ ͢Δ͔΋ɻ
    จࣈϒϩοΫͱεϚϗ͕࿈ܞͨ͠஌ҭ؝۩ͷ
    ΞϓϦͷࢼ࡞Λ Noodl Ͱ։ൃʂ
    ͍ͭͬͨʔ
    ͜ΖΉ͘͠Μ
    4݄21೔Ϋϥ΢υϑΝϯσΟϯά։࢝͠·͢ʂ
    

    View Slide

58. X
    Q&A
    58
    

    View Slide

59. X
    ͜ͷಈը͸
    ޙͰΞʔΧΠϒͱ
    ͯ͠ݟΒΕ·͢ʂ
    59
    

    View Slide

60. X
    THANK YOU!
    60
    

    View Slide