20201111_Noodl_ver2.1_hands-on

Transcript

1. X 3. OpenWeatherMap ͷ API Key Λ߇͓͑ͯ͘ ɹɹOpenWeatherMapʹSign In͠ɺAPI KeyΛ͙͢ʹίϐϖͰ͖Δঢ়ଶʹ͓͍͍ͯͯͩ͘͠͞ɻ ɹɹhttps://openweathermap.org/ 1. Noodl όʔδϣϯ2.1.0 Ϗϧυ30 Ҏ߱ΛΠϯετʔϧ ɹ⚠ࠓճ͸όʔδϣϯ2.1.0 Ϗϧυ30 ͷNoodlΛ࢖༻͠·͢ɻϏϧυ30ΑΓલͷNoodlΛ࢖͍ͬͯΔํ͸࠷৽൛ͷμ΢ϯϩʔυΛ͓ئ͍͍ͨ͠·͢ɻ ɹɹࣄલϝʔϧʹμ΢ϯϩʔυϦϯΫ͕ॻ͔Ε͍ͯ·͢ͷͰɺͦͪΒ͔Βμ΢ϯϩʔυΛ͓ئ͍͠·͢ɻ ɹɹόʔδϣϯ֬ೝํ๏ɿNoodlΛىಈ͠ɺϝχϡʔόʔͷ Noodl ʼ About Application ΁ ։࢝·ͰʹɺԼهΛ͓ࡁ·͍ͤͩ͘͞ʢಈըͷ֓ཁཝʹ΋ॻ͍ͯ͋Γ·͢ʣ 4. ࢿྉʹΞΫηε ɹɹconnpassϖʔδʹ͋Δʮࢿྉʯ͔ΒɺϓϩδΣΫτϑΝΠϧΛμ΢ϯϩʔυ͍ͯͩ͘͠͞ɻ 2. ϫʔΫεϖʔεΛ࡞੒ ɹɹWebϒϥ΢βͰNoodlίϯιʔϧʹSign In͠ɺࣗ͝਎ͷϫʔΫεϖʔεΛ࡞੒͓͍͍ͯͯͩ͘͠͞ɻ
2. X Noodl 2.1 ϋϯζΦϯ
3. X Kato TakehiroʛՃ౻ ݈େ TDS CO, LTD.ʛגࣜձࣾςΠɾσΠɾΤε - NoodlΞυϘέΠτ - UXσβΠφʔ ΞυϘέΠτɿ ɹࣗࣾ੡඼΍αʔϏεΛࣾ֎ͷ։ൃऀʹܒ໤͢Δ৬छɻΈͳ͞Μͱಉ͡໨ઢͰΈͳ͞Μͷ՝୊ΛҰॹʹղܾ͍ͯ͘͠ɻ ɹ※ΤόϯδΣϦετ͸ɺਓʑͷલʹཱͬͯઌಋɺओಋΛ͍ͯ͘͠"఻ಓࢣ"ͷΠϝʔδɻ ʢࢀߟɿhttps://codezine.jp/article/detail/11486ɺத௡઒ಞ࢘ࢯʣ
4. X ͓ࢼ͠πΠʔτλΠϜʂ
5. X ࣭໰͸YouTube νϟοτཝͰʂ ʁ ʁ ʁ
6. X ޷͖ͳ໙ྨ͸ʁ YouTubeͷνϟοτʹॻ͖ࠐΜͰΈΑ͏ʂ
7. X πΠʔτେ׻ܴͰ͢ʂ 7 #Noodl
8. X
9. X Noodlʁ ψ ʔ υ ϧ
10. X ࣸਅɿPixabayɺVăn Đặng
11. X ͜Ε͸ Noodle ψ ʔ υ ϧ e ͕෇͍͍ͯΔͷ͸໙
12. X Noodl ͱ͸ʁ ψ ʔ υ ϧ
13. X Noodlͱ͸ʁ WebΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊͷ LowCodeϓϥοτϑΥʔϜ ։ൃͯ͠ग़དྷ্͕Δ΋ͷ͸ʁ ɹwebαΠτɿاۀαΠτɺϒϥϯυαΠτ... ɹwebαʔϏεɿTwitterɺWikipediaɺAmazon… ɹIoTσόΠεͷUI ɹϒϥ΢βήʔϜ ɾϒϥ΢βͰಈ͘ ɾHTML / CSS / JavaScript ɾReactϕʔε ɾ֎෦API͔Βσʔλऔಘ ɾσʔλϕʔεͱ࿈ܞ
14. X ࢥߟ͠ɺ࣮ߦ͢Δɻ
15. ૣ࣮͘ಇ͢Δ΋ͷΛ࡞Γ ࢼ࡞඼ͷମݧΛݕূ͢Δʂ
16. X
17. X
18. ✔ ސ٬ͱνʔϜͷΑΓྑ͍ཧղΛಘΔ ✔ ࠷దͳҙࢥܾఆΛ͢Δҝͷڧ͍൑அࡐྉʹͳΔ ✔ ૉૣ͍ϑΟʔυόοΫ = ޮ཰తͳ։ൃ
19. X खΛಈ͔͢લʹɻ 1. Noodlͷجຊ֓೦ 2. Noodl 2.1 ͷಛ௃
20. X NoodlͰ࢖͏ݴ༿ Node ϊʔυ Component ίϯϙʔωϯτ Project ϓϩδΣΫτ
21. X 21 Node ϊʔυ
22. X Node ϊʔυ
23. X Component ίϯϙʔωϯτ
24. X Component
25. X Component Component Component
26. X Component Component Component Component
27. X Component Componentʢશମʣ Component Component Component
28. X Componentʢશମʣ Project ϓϩδΣΫτ
29. X खΛಈ͔͢લʹɻ 1. Noodlͷجຊ֓೦ 2. Noodl 2.1 ͷಛ௃
30. X ֎෦σʔλϕʔεͱͷ࿈ܞ͕Մೳʹʂ
31. X Noodl 2.0 beta Noodl 2.1 beta ޓ׵ੑ͋Γʂجຊతʹ 2.0 Ͱ࡞ͬͨ΋ͷ͸ 2.1 Ͱಈ͘ɻ Ұ෦ͷϊʔυ͕ϞδϡʔϧԽ͞Εͨʢ࢖͏ͱ͖͸ಡΈࠐΉඞཁ͋Γʣ Mui ͕ແ͘ͳΓ SDSʢSimple Design Systemʣ͕Ϟδϡʔϧͱͯ͠௥Ճ͞Εͨ SDS MQTT ʢSend Message / Receive Messageʣ Mui MQTT ʢSend Message / Receive Messageʣ
32. X ࠓ೔ͭ͘Δ΋ͷ 1. ΧʔυܕͷUIΛͭͬͯ͘ΈΑ͏ʂ 2. ఱؾʢOpenWeatherMapʣͷAPIΛར༻ ͯ͠ؾԹΛදࣔͯ͠ΈΑ͏ʂ
33. X Χʔυ࡞੒ʹ࢖͏ϊʔυ άϧʔϓɿ ɹɾදࣔ͢ΔྖҬΛܾΊΔ ɹɾࢠཁૉͱͷؔ܎ΛܾΊΔ ɹɹଞʹ΋ଟ͘ͷॏཁͳػೳΛ࣋ͭ… Πϝʔδʢը૾ʣɿ ɹը૾ͷදࣔΛ୲͏ ςΩετʢจࣈʣɿ ɹจࣈͷදࣔΛ୲͏
34. X Χʔυ࡞੒ʹ࢖͏ϊʔυ ίϯϙʔωϯτೖྗɿ ɹίϯϙʔωϯτͷ৘ใͷೖޱ ίϯϙʔωϯτग़ྗɿ ɹίϯϙʔωϯτͷ৘ใͷग़ޱ
35. X Cloud syncedɿΫϥ΢υͱϩʔΧϧʹอଘ Save locallyɿϩʔΧϧʹอଘ جຊతʹ͸ϩʔΧϧΛબ୒͍ͯͩ͘͠͞ɻ Ϋϥ΢υ͸ڞಉ࡞ۀΛ͢Δࡍʹ࢖͍·͢ɻ ᶃ อଘํ๏Λબ୒ʂ ᶄ ໊લΛ෇͚ͯςϯϓϨʔτΛબ୒ʂ
36. X ίϯϙʔωϯτҰཡ ϓϩδΣΫτઃఆ ϥΠϒϥϦ ϓϩύςΟ ߏங͢Δ৔ॴ ϝχϡʔ ϓϨϏϡʔ
37. X Noodlͷجຊૢ࡞ ϊʔυΛҠಈ͢Δɿυϥοά ϊʔυΛ࡞ΔɹɹɿӈΫϦοΫ → ϊʔυ໊Λݕࡧ → બ୒ͯ͠ϊʔυ࡞੒ ϊʔυΛ࡟আ͢ΔɿϊʔυΛબ୒ → DeleteΩʔΛԡ͢ ϊʔυΛίϐʔɹɿϊʔυΛબ୒ → ⌘+CʢWindows: Ctrl+Cʣ ϊʔυΛϖʔετɿ㵰+VʢWindows: Ctrl+Vʣ ϊʔυΛܨ͙ɹɹɿϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 37
38. X ϦΞϧλΠϜ εϚϗϓϨϏϡʔ
39. X ࠓ೔ͭ͘Δ΋ͷ 1. ΧʔυܕͷUIΛͭͬͯ͘ΈΑ͏ʂ 2. ఱؾʢOpenWeatherMapʣͷAPIΛར༻ ͯ͠ؾԹΛදࣔͯ͠ΈΑ͏ʂ
40. X ఱؾσʔλͷऔಘ ఱؾσʔλͷՃ޻ ʹ࢖͏ϊʔυ RESTɿ ɹɾHTTP௨৴Λ͢Δ ɹɾ֎෦ͷAPIʹΞΫηεͰ͖Δ ɹɾ֎෦ͷAPI͔Β৘ใΛड͚औΔ ΤΫεϓϨογϣϯɿ ɹJavaScriptͷॻ͖ํͰܭࢉࣜ΍ؔ਺Λॻ͚Δ StringϑΥʔϚοτɿ ɹจࣈྻͷॻࣜΛ౷Ұ͢Δ
41. X API ͱ͸ʁ ɹApplication ɹProgramming ɹInterface 41
42. X ଞͷاۀ΍ ਓ͕࡞ͬͨϓϩάϥϜΛ ར༻Ͱ͖Δʂ 42
43. X Apple͕ఱؾΛ ଌఆ͍ͯ͠ΔΘ͚Ͱ͸ͳ͍ʂ iOSඪ४ͷ͓ఱؾΞϓϦ 43
44. X ఱؾ API Noodl ཉ͍͠ػೳΛθϩ͔Β։ൃ͢Δඞཁ͕ͳ͍ʂ Ի੠ೝࣝ API
45. X ࢖͏ͱ͖͸APIͷن໿Λ Α͘ಡ΋͏ʂ
46. X 46 ͜͜ʹ
    "1*
    LFZʢจࣈྻʣ͕දࣔ͞ΕΔ
47. X σϓϩΠ
48. X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 48
49. X ͓஌Βͤ 49
50. X υΩϡϝϯτ຋༁த… ۙ೔ɺSlackίϛϡχςΟͰ৘ใΛྲྀ͢༧ఆ
51. X ʲίϛϡχςΟࢀՃͷྲྀΕʳ ɹ̍ɽQRίʔυεΩϟϯ ɹɹɹɹɹɹor ɹɹɹhttps://bit.ly/2kSq3xw ΁ΞΫηε ɹ̎ɽϝʔϧΞυϨεͷೖྗ ɹ̏ɽೝূ༻ϝʔϧʹهࡌͷURL΁ΞΫηε ɹ̐ɽύεϫʔυͱϢʔβʔωʔϜΛઃఆ ʲSlackʳNoodlίϛϡχςΟ΁ͷ͝ট଴ SlackʹNoodlͷίϛϡχςΟ͕͍͟͝·͢ɻ ຊ೔͝ग़੮ͷօ༷ͱڞʹίϛϡχςΟΛ੝Γ্͛ͯ ͍͚Ε͹ͱߟ͓͑ͯΓ·͢ɻੋඇɺ͝ࢀՃ͍ͩ͘͞ʂ 51 # ͭͬͯ͘Έͨ # Πϕϯτ৘ใ # noodl஌ܙା
52. X 52 Twitter
53. X ͖͕͍ͭͨΒ ͍ͭͬͨʔ ʹ ͍ͨ ͕͠ͳ͍ Ή͠ Ͱ͢ɻ ͨ͘͞Μ ;͒Ζʔ ͞ΕΔͱ ͍ͤͪΐ͏ ͢Δ͔΋ɻ จࣈϒϩοΫͱεϚϗ͕࿈ܞͨ͠஌ҭ؝۩ͷ ΞϓϦͷࢼ࡞Λ Noodl Ͱ։ൃʂ ͍ͭͬͨʔ ͜ΖΉ͘͠Μ 12݄Ϋϥ΢υϑΝϯσΟϯά։࢝༧ఆʂ
54. Qiita Ξυϕϯτ ΧϨϯμʔ ࢀՃऀ ืूதʂ
55. X Q&A 55
56. X ͜ͷಈը͸ ޙͰΞʔΧΠϒͱ ͯ͠ݟΒΕ·͢ʂ 56
57. X Thank you! 57