20201111_Noodl_ver2.1_hands-on

Slide 1

Slide 1 text

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͠ɺࣗ͝਎ͷϫʔΫεϖʔεΛ࡞੒͓͍͍ͯͯͩ͘͠͞ɻ

Slide 2

Slide 2 text

X Noodl 2.1 ϋϯζΦϯ

Slide 3

Slide 3 text

X Kato TakehiroʛՃ౻ ݈େ TDS CO, LTD.ʛגࣜձࣾςΠɾσΠɾΤε - NoodlΞυϘέΠτ - UXσβΠφʔ ΞυϘέΠτɿ ɹࣗࣾ੡඼΍αʔϏεΛࣾ֎ͷ։ൃऀʹܒ໤͢Δ৬छɻΈͳ͞Μͱಉ͡໨ઢͰΈͳ͞Μͷ՝୊ΛҰॹʹղܾ͍ͯ͘͠ɻ ɹ※ΤόϯδΣϦετ͸ɺਓʑͷલʹཱͬͯઌಋɺओಋΛ͍ͯ͘͠"఻ಓࢣ"ͷΠϝʔδɻ ʢࢀߟɿhttps://codezine.jp/article/detail/11486ɺத௡઒ಞ࢘ࢯʣ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

X Noodlʁ ψ ʔ υ ϧ

Slide 10

Slide 10 text

X ࣸਅɿPixabayɺVăn Đặng

Slide 11

Slide 11 text

X ͜Ε͸ Noodle ψ ʔ υ ϧ e ͕෇͍͍ͯΔͷ͸໙

Slide 12

Slide 12 text

X Noodl ͱ͸ʁ ψ ʔ υ ϧ

Slide 13

Slide 13 text

X Noodlͱ͸ʁ WebΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊͷ LowCodeϓϥοτϑΥʔϜ ։ൃͯ͠ग़དྷ্͕Δ΋ͷ͸ʁ ɹwebαΠτɿاۀαΠτɺϒϥϯυαΠτ... ɹwebαʔϏεɿTwitterɺWikipediaɺAmazon… ɹIoTσόΠεͷUI ɹϒϥ΢βήʔϜ ɾϒϥ΢βͰಈ͘ ɾHTML / CSS / JavaScript ɾReactϕʔε ɾ֎෦API͔Βσʔλऔಘ ɾσʔλϕʔεͱ࿈ܞ

Slide 14

Slide 14 text

X ࢥߟ͠ɺ࣮ߦ͢Δɻ

Slide 15

Slide 15 text

ૣ࣮͘ಇ͢Δ΋ͷΛ࡞Γ ࢼ࡞඼ͷମݧΛݕূ͢Δʂ

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

X खΛಈ͔͢લʹɻ 1. Noodlͷجຊ֓೦ 2. Noodl 2.1 ͷಛ௃

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

X 21 Node ϊʔυ

Slide 22

Slide 22 text

X Node ϊʔυ

Slide 23

Slide 23 text

X Component ίϯϙʔωϯτ

Slide 24

Slide 24 text

X Component

Slide 25

Slide 25 text

X Component Component Component

Slide 26

Slide 26 text

X Component Component Component Component

Slide 27

Slide 27 text

X Component Componentʢશମʣ Component Component Component

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

X खΛಈ͔͢લʹɻ 1. Noodlͷجຊ֓೦ 2. Noodl 2.1 ͷಛ௃

Slide 30

Slide 30 text

X ֎෦σʔλϕʔεͱͷ࿈ܞ͕Մೳʹʂ

Slide 31

Slide 31 text

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ʣ

Slide 32

Slide 32 text

X ࠓ೔ͭ͘Δ΋ͷ 1. ΧʔυܕͷUIΛͭͬͯ͘ΈΑ͏ʂ 2. ఱؾʢOpenWeatherMapʣͷAPIΛར༻ ͯ͠ؾԹΛදࣔͯ͠ΈΑ͏ʂ

Slide 33

Slide 33 text

X Χʔυ࡞੒ʹ࢖͏ϊʔυ άϧʔϓɿ ɹɾදࣔ͢ΔྖҬΛܾΊΔ ɹɾࢠཁૉͱͷؔ܎ΛܾΊΔ ɹɹଞʹ΋ଟ͘ͷॏཁͳػೳΛ࣋ͭ… Πϝʔδʢը૾ʣɿ ɹը૾ͷදࣔΛ୲͏ ςΩετʢจࣈʣɿ ɹจࣈͷදࣔΛ୲͏

Slide 34

Slide 34 text

X Χʔυ࡞੒ʹ࢖͏ϊʔυ ίϯϙʔωϯτೖྗɿ ɹίϯϙʔωϯτͷ৘ใͷೖޱ ίϯϙʔωϯτग़ྗɿ ɹίϯϙʔωϯτͷ৘ใͷग़ޱ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

X Noodlͷجຊૢ࡞ ϊʔυΛҠಈ͢Δɿυϥοά ϊʔυΛ࡞ΔɹɹɿӈΫϦοΫ → ϊʔυ໊Λݕࡧ → બ୒ͯ͠ϊʔυ࡞੒ ϊʔυΛ࡟আ͢ΔɿϊʔυΛબ୒ → DeleteΩʔΛԡ͢ ϊʔυΛίϐʔɹɿϊʔυΛબ୒ → ⌘+CʢWindows: Ctrl+Cʣ ϊʔυΛϖʔετɿ㵰+VʢWindows: Ctrl+Vʣ ϊʔυΛܨ͙ɹɹɿϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 37

Slide 38

Slide 38 text

X ϦΞϧλΠϜ εϚϗϓϨϏϡʔ

Slide 39

Slide 39 text

X ࠓ೔ͭ͘Δ΋ͷ 1. ΧʔυܕͷUIΛͭͬͯ͘ΈΑ͏ʂ 2. ఱؾʢOpenWeatherMapʣͷAPIΛར༻ ͯ͠ؾԹΛදࣔͯ͠ΈΑ͏ʂ

Slide 40

Slide 40 text

X ఱؾσʔλͷऔಘ ఱؾσʔλͷՃ޻ ʹ࢖͏ϊʔυ RESTɿ ɹɾHTTP௨৴Λ͢Δ ɹɾ֎෦ͷAPIʹΞΫηεͰ͖Δ ɹɾ֎෦ͷAPI͔Β৘ใΛड͚औΔ ΤΫεϓϨογϣϯɿ ɹJavaScriptͷॻ͖ํͰܭࢉࣜ΍ؔ਺Λॻ͚Δ StringϑΥʔϚοτɿ ɹจࣈྻͷॻࣜΛ౷Ұ͢Δ

Slide 41

Slide 41 text

X API ͱ͸ʁ ɹApplication ɹProgramming ɹInterface 41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

X Apple͕ఱؾΛ ଌఆ͍ͯ͠ΔΘ͚Ͱ͸ͳ͍ʂ iOSඪ४ͷ͓ఱؾΞϓϦ 43

Slide 44

Slide 44 text

X ఱؾ API Noodl ཉ͍͠ػೳΛθϩ͔Β։ൃ͢Δඞཁ͕ͳ͍ʂ Ի੠ೝࣝ API

Slide 45

Slide 45 text

X ࢖͏ͱ͖͸APIͷن໿Λ Α͘ಡ΋͏ʂ

Slide 46

Slide 46 text

X 46 ͜͜ʹ"1*LFZʢจࣈྻʣ͕දࣔ͞ΕΔ

Slide 47

Slide 47 text

X σϓϩΠ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

X ͓஌Βͤ 49

Slide 50

Slide 50 text

X υΩϡϝϯτ຋༁த… ۙ೔ɺSlackίϛϡχςΟͰ৘ใΛྲྀ͢༧ఆ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

X 52 Twitter

Slide 53

Slide 53 text

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