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/
2. Noodl version 2.0 ϋϯζΦϯ 2
3. X ΃Μ͚ͨ Noodl SlackίϛϡχςΟӡӦ୲౰ 3 ̍ਓલͷNoodlerʹͳΔͨΊमߦதɻ Twitter @penpenchapen
4. X πΠʔτେ׻ܴͰ͢ʂ 4 #Noodl
5. X 5 ͓ࢼ͠πΠʔτλΠϜʂ
6. X 6 ࣭໰͸νϟοτཝͰʂ ʁ ʁ ʁ
7. X 7 ޷͖ͳ໙ྨ͸ʁ YouTubeͷνϟοτʹॻ͖ࠐΜͰΈΑ͏ʂ
8. X
9. X _tensorX גࣜձࣾςϯιΞΤοΫε 9
10. X 10 ϦΞϧλΠϜͰΞοϓσʔτ Ξχϝʔγϣϯͱ ΠϯλϥΫγϣϯ ϚϧνσόΠε্ͷ ΤΫεϖϦΤϯεݕূ ʮϊʔυʯϕʔεͰߏங IoT΍ηϯαʔ઀ଓ APIɾσʔλΛ࢖ͬͯ σβΠϯՄೳ
11. ര଎Ͱ࣮ಇ͢Δ΋ͷΛ࡞Γ ࢼ࡞඼ͷମݧΛݕূͰ͖Δ
12. ߟ͑Δ ࡞Δ ݕূ͢Δ x100
13. ✔ ސ٬ͱνʔϜͷΑΓྑ͍ཧղΛಘΔ ✔ ࠷దͳҙࢥܾఆΛ͢Δҝͷڧ͍൑அࡐྉʹͳΔ ✔ ૉૣ͍ϑΟʔυόοΫ = ޮ཰తͳ։ൃ
14. X ࠓ೔΍Δ͜ͱ 1. جຊૢ࡞ & Noodl 1.x ͱͷҧ͍ 2-1. API࿈ܞ & Material UI ϊʔυ 2-2. MQTTΛར༻ͨ͠ϚϧνσόΠεͳUIͷߏங 14
15. X NoodlͰ࢖͏ݴ༿ 15 Node ϊʔυ Component ίϯϙʔωϯτ Project ϓϩδΣΫτ
16. X 16 Node ϊʔυ
17. X Node ϊʔυ
18. X Component ίϯϙʔωϯτ
19. X Component
20. X Component Component Component
21. X Component Component Component Component
22. X Component Componentʢશମʣ Component Component Component
23. X Componentʢશମʣ Project ϓϩδΣΫτ
24. X Noodl 1.3 Noodl 1.4 beta 24 Group Muiܥ Noodl 2.0 beta Rectangle Stack layout Scroll view ࠨͷ̏ͭͷϊʔυͷػೳ͕Groupͷ ϓϩύςΟʢઃఆʣʹ౷߹͞Εͨʂ
25. X ग़యɿ
    IUUQTUSFFpMFDPNXFCEFTJHOVOEFSTUBOEJOHWJFXQPSUGPSSFTQPOTJWFXFCEFTJHO 7JFXQPSU
    
    ϒϥ΢βͷදࣔྖҬ 
    WX
    ͸ɺ
    
    
    PG
    WJFXQPSU
    XJEUI
    ʢWJFXQPSUͷԣ෯ʹର͢Δׂ߹ʣ 
    WI
    ͸ɺ
    
    
    PG
    WJFXQPSU
    IFJHIU
    ʢWJFXQPSUͷॎ෯ʹର͢Δׂ߹ʣ px % ͷଞʹ vw vh ͱ͍͏୯Ґ͕௥Ճʂ
26. X ࠓճͭ͘Δ΋ͷ 26 ͦͷ̍
27. X Labɿτοϓը໘ Projectɿ։ൃதͷϓϩδΣΫτஔ͖৔ LearnɿνϡʔτϦΞϧֶ͕΂Δ
28. X Cloud syncedɿΫϥ΢υͱϩʔΧϧʹอଘ Save locallyɿϩʔΧϧʹอଘ جຊతʹ͸ϩʔΧϧΛબ୒͍ͯͩ͘͠͞ɻ Ϋϥ΢υ͸ڞಉ࡞ۀΛ͢Δࡍʹ࢖͍·͢ɻ ᶃ อଘํ๏Λબ୒ʂ ᶄ ໊લΛ෇͚ͯςϯϓϨʔτΛબ୒ʂ
29. X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ΛΩʔϘʔυͰೖྗ - ϊʔυΛ࡟আ͢Δ: ϊʔυΛબ୒ɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબ୒ɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 29
30. X ίϯϙʔωϯτҰཡ ϓϩδΣΫτઃఆ ϥΠϒϥϦ ϓϩύςΟ ߏங͢Δ৔ॴ ϝχϡʔ ϓϨϏϡʔ
31. X ࠓ೔΍Δ͜ͱ 1. جຊૢ࡞ & Noodl 1.x ͱͷҧ͍ 2-1. API࿈ܞ & Material UI ϊʔυ 2-2. MQTTΛར༻ͨ͠ϚϧνσόΠεͳUIͷߏங 31
32. X APIͱ͸…? APPLICATION PROGRAMMING INTERFACE 32
33. X ଞͷاۀ΍ ਓ͕࡞ͬͨϓϩάϥϜ Λར༻Ͱ͖Δʂ 33
34. X "11-&͕ఱؾΛ
    ଌఆ͍ͯ͠ΔΘ͚Ͱ͸ͳ͍ʂ J04ඪ४ͷ͓ఱؾΞϓϦ 34
35. 35 ఱؾ
    "1* /00%- ཉ͍͠ػೳΛ
    Πν͔Β։ൃ͢Δ
    ඞཁ͕ͳ͍ʂ Ի੠ೝࣝ
    "1* 35
36. X ࢖͏ͱ͖͸ن໿Λ Α͘ಡ΋͏ʂ 36
37. X Muiͬͯͳʹʁ 37
38. X 38 ɾReactͰ؆୯ʹϚςϦΞϧσβΠϯΛ࣮ݱͰ͖ΔϥΠϒϥϦ ɾNoodl 2.0 betaͰ͸Ұ෦ͷMaterial UI͕ϊʔυͱͯ͠࢖͑Δ
39. X Facebook͕ࣾ։ൃ͍ͯ͠ΔJavaScriptͷϑϨʔϜϫʔΫ
40. X 40 2014೥ʹGoogle͕ࣾఏএͨ͠σβΠϯγεςϜ ϚςϦΞϧσβΠϯ Material Design ɾ౷Ұײͷ͋ΔσβΠϯ ɾ౷Ұײͷ͋Δૢ࡞ ɾσόΠεΛލ͍ͩUIͰ΋ ɹετϨεΛײ͡ʹ͍͘
41. X 41 ɾJavaScriptͷϑϨʔϜϫʔΫΛ࢖ͬͯ؆୯ʹ ɹ౷Ұײͷ͋ΔσβΠϯΛ࣮ݱͰ͖ΔϥΠϒϥϦ ɾNoodl 2.0 betaͰ͸Ұ෦ͷMaterial UI͕ϊʔυͱͯ͠࢖͑Δ
42. X 42 MuiϊʔυΛ࢖͏ͱ ͍͍ײ͡ͷUI͕ ؆୯ʹ࡞ΕΔʂ
43. X https://material-ui.com/components/material-icons/
44. X ࠓճͭ͘Δ΋ͷ 44 ͦͷ̎
45. X 45
46. X ࠓ೔΍Δ͜ͱ 1. جຊૢ࡞ & Noodl 1.x ͱͷҧ͍ 2-1. API࿈ܞ & Material UI ϊʔυ 2-2. MQTTΛར༻ͨ͠ϚϧνσόΠεͳUIͷߏங 46
47. X MQTTͬͯͳʹʁ 47
48. MQTT & PUBSUB MESSAGE QUEUING TELEMETRY TRANSPORT ܰྔͳσʔλΛେྔʹૹड৴͢Δͷʹ ޲͍͍ͯΔ௨৴ͷϧʔϧ Publish : σʔλΛૹΔ Subscribe: σʔλΛಡΉ 48 IoTʹͽͬͨΓʂ
49. 49 MQTT ϒϩʔΧʔ MQTT͕࢖͑Δ͔Β ଞͷαʔϏεͱͷ࿈ܞ͕؆୯ʹʂ ϓϩτλΠϐϯάͷϑΣʔζͰ͸͜ΕΒͷํ๏Λ࢖͏͜ͱͰ ϢʔβʔମݧΛૉૣ͘ࢼ͢ࣄ͕Ͱ͖Δɻ 49 enebular Noodl obniz IBM Cloud Node-RED
51. X MQTTΛ࢖ͬͯΈΑ͏ʂ 51
52. X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 52
53. X ͓஌Βͤ 53
54. X ʲίϛϡχςΟࢀՃͷྲྀΕʳ ɹ̍ɽQRίʔυεΩϟϯ ɹɹɹɹɹɹor ɹɹɹhttps://bit.ly/2kSq3xw ΁ΞΫηε ɹ̎ɽϝʔϧΞυϨεͷೖྗ ɹ̏ɽೝূ༻ϝʔϧʹهࡌͷURL΁ΞΫηε ɹ̐ɽύεϫʔυͱϢʔβʔωʔϜΛઃఆ ʲSlackʳNoodlίϛϡχςΟ΁ͷ͝ট଴ SlackʹNoodlͷίϛϡχςΟ͕͍͟͝·͢ɻ ຊ೔͝ग़੮ͷօ༷ͱڞʹίϛϡχςΟΛ੝Γ্͛ͯ ͍͚Ε͹ͱߟ͓͑ͯΓ·͢ɻੋඇɺ͝ࢀՃ͍ͩ͘͞ʂ 54 # ͭͬͯ͘Έͨ # Πϕϯτ৘ใ # noodl஌ܙା
55. X 55 Qiita Noodl 2.0 ػೳσϞ https://qiita.com/macole/items/7764c0f2dfa5ac5b1d02 ίϛϡχςΟϝϯόʔʹΑΔղઆʂʂ
56. X 56 Twitter
57. X ͖͕͍ͭͨΒ ͍ͭͬͨʔ ʹ ͍ͨ ͕͠ͳ͍ Ή͠ Ͱ͢ɻ ͨ͘͞Μ ;͒Ζʔ ͞ΕΔͱ ͍ͤͪΐ͏ ͢Δ͔΋ɻ จࣈϒϩοΫͱεϚϗ͕࿈ܞͨ͠஌ҭ؝۩ͷ ΞϓϦͷࢼ࡞Λ Noodl Ͱ։ൃʂ ͍ͭͬͨʔ ͜ΖΉ͘͠Μ 4݄21೔Ϋϥ΢υϑΝϯσΟϯά։࢝͠·͢ʂ
58. X Q&A 58
59. X ͜ͷಈը͸ ޙͰΞʔΧΠϒͱ ͯ͠ݟΒΕ·͢ʂ 59
60. X THANK YOU! 60