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

20200325_Noodl_v2_hands-on_スライド資料

pentake
March 25, 2020

 20200325_Noodl_v2_hands-on_スライド資料

pentake

March 25, 2020
Tweet

More Decks by pentake

Other Decks in Technology

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