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

20201111_Noodl_ver2.1_hands-on

24e791120237a2df0d4fcdd98161c56b?s=47 pentake
November 11, 2020

 20201111_Noodl_ver2.1_hands-on

24e791120237a2df0d4fcdd98161c56b?s=128

pentake

November 11, 2020
Tweet

More Decks by pentake

Other Decks in Programming

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