Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
X
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
X
Slide 17
Slide 17 text
X
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݄ΫϥυϑΝϯσΟϯά։࢝༧ఆʂ
Slide 54
Slide 54 text
Qiita Ξυϕϯτ ΧϨϯμʔ ࢀՃऀ ืूதʂ
Slide 55
Slide 55 text
X Q&A 55
Slide 56
Slide 56 text
X ͜ͷಈը ޙͰΞʔΧΠϒͱ ͯ͠ݟΒΕ·͢ʂ 56
Slide 57
Slide 57 text
X Thank you! 57