X3. 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͠ɺࣗ͝ͷϫʔΫεϖʔεΛ࡞͓͍͍ͯͯͩ͘͠͞ɻ
View Slide
XNoodl 2.1ϋϯζΦϯ
XKato TakehiroʛՃ౻ ݈େTDS CO, LTD.ʛגࣜձࣾςΠɾσΠɾΤε- NoodlΞυϘέΠτ- UXσβΠφʔΞυϘέΠτɿɹࣗࣾαʔϏεΛࣾ֎ͷ։ൃऀʹܒ͢Δ৬छɻΈͳ͞Μͱಉ͡ઢͰΈͳ͞Μͷ՝ΛҰॹʹղܾ͍ͯ͘͠ɻɹ※ΤόϯδΣϦετɺਓʑͷલʹཱͬͯઌಋɺओಋΛ͍ͯ͘͠"ಓࢣ"ͷΠϝʔδɻʢࢀߟɿhttps://codezine.jp/article/detail/11486ɺதಞ࢘ࢯʣ
X͓ࢼ͠πΠʔτλΠϜʂ
X࣭YouTubeνϟοτཝͰʂʁʁʁ
X͖ͳ໙ྨʁYouTubeͷνϟοτʹॻ͖ࠐΜͰΈΑ͏ʂ
XπΠʔτେܴͰ͢ʂ7#Noodl
X
XNoodlʁψ ʔ υ ϧ
XࣸਅɿPixabayɺVăn Đặng
X͜ΕNoodle ψ ʔ υ ϧe ͕͍͍ͯΔͷ໙
XNoodl ͱʁψ ʔ υ ϧ
XNoodlͱʁWebΞϓϦέʔγϣϯΛ։ൃ͢ΔͨΊͷLowCodeϓϥοτϑΥʔϜ։ൃͯ͠ग़དྷ্͕ΔͷʁɹwebαΠτɿاۀαΠτɺϒϥϯυαΠτ...ɹwebαʔϏεɿTwitterɺWikipediaɺAmazon…ɹIoTσόΠεͷUIɹϒϥβήʔϜɾϒϥβͰಈ͘ɾHTML / CSS / JavaScriptɾReactϕʔεɾ֎෦API͔Βσʔλऔಘɾσʔλϕʔεͱ࿈ܞ
Xࢥߟ͠ɺ࣮ߦ͢Δɻ
ૣ࣮͘ಇ͢ΔͷΛ࡞Γࢼ࡞ͷମݧΛݕূ͢Δʂ
✔ ސ٬ͱνʔϜͷΑΓྑ͍ཧղΛಘΔ✔ ࠷దͳҙࢥܾఆΛ͢Δҝͷڧ͍அࡐྉʹͳΔ✔ ૉૣ͍ϑΟʔυόοΫ = ޮతͳ։ൃ
XखΛಈ͔͢લʹɻ1. Noodlͷجຊ֓೦2. Noodl 2.1 ͷಛ
XNoodlͰ͏ݴ༿NodeϊʔυComponentίϯϙʔωϯτProjectϓϩδΣΫτ
X21Nodeϊʔυ
XNodeϊʔυ
XComponentίϯϙʔωϯτ
XComponent
XComponentComponentComponent
XComponentComponentComponentComponent
XComponentComponentʢશମʣComponentComponentComponent
XComponentʢશମʣProjectϓϩδΣΫτ
X֎෦σʔλϕʔεͱͷ࿈ܞ͕Մೳʹʂ
XNoodl 2.0 beta Noodl 2.1 betaޓੑ͋Γʂجຊతʹ 2.0 Ͱ࡞ͬͨͷ 2.1 Ͱಈ͘ɻҰ෦ͷϊʔυ͕ϞδϡʔϧԽ͞Εͨʢ͏ͱ͖ಡΈࠐΉඞཁ͋ΓʣMui ͕ແ͘ͳΓ SDSʢSimple Design Systemʣ͕Ϟδϡʔϧͱͯ͠Ճ͞ΕͨSDSMQTTʢSend Message / Receive MessageʣMuiMQTTʢSend Message / Receive Messageʣ
Xࠓͭ͘Δͷ1. ΧʔυܕͷUIΛͭͬͯ͘ΈΑ͏ʂ2. ఱؾʢOpenWeatherMapʣͷAPIΛར༻ͯ͠ؾԹΛදࣔͯ͠ΈΑ͏ʂ
XΧʔυ࡞ʹ͏ϊʔυάϧʔϓɿɹɾදࣔ͢ΔྖҬΛܾΊΔɹɾࢠཁૉͱͷؔΛܾΊΔɹɹଞʹଟ͘ͷॏཁͳػೳΛ࣋ͭ…Πϝʔδʢը૾ʣɿɹը૾ͷදࣔΛ୲͏ςΩετʢจࣈʣɿɹจࣈͷදࣔΛ୲͏
XΧʔυ࡞ʹ͏ϊʔυίϯϙʔωϯτೖྗɿɹίϯϙʔωϯτͷใͷೖޱίϯϙʔωϯτग़ྗɿɹίϯϙʔωϯτͷใͷग़ޱ
XCloud syncedɿΫϥυͱϩʔΧϧʹอଘSave locallyɿϩʔΧϧʹอଘجຊతʹϩʔΧϧΛબ͍ͯͩ͘͠͞ɻΫϥυڞಉ࡞ۀΛ͢Δࡍʹ͍·͢ɻᶃ อଘํ๏Λબʂᶄ ໊લΛ͚ͯςϯϓϨʔτΛબʂ
XίϯϙʔωϯτҰཡϓϩδΣΫτઃఆϥΠϒϥϦϓϩύςΟߏங͢ΔॴϝχϡʔϓϨϏϡʔ
XNoodlͷجຊૢ࡞ϊʔυΛҠಈ͢ΔɿυϥοάϊʔυΛ࡞ΔɹɹɿӈΫϦοΫ → ϊʔυ໊Λݕࡧ → બͯ͠ϊʔυ࡞ϊʔυΛআ͢ΔɿϊʔυΛબ → DeleteΩʔΛԡ͢ϊʔυΛίϐʔɹɿϊʔυΛબ → ⌘+CʢWindows: Ctrl+CʣϊʔυΛϖʔετɿ㵰+VʢWindows: Ctrl+VʣϊʔυΛܨ͙ɹɹɿϊʔυͷͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ37
XϦΞϧλΠϜεϚϗϓϨϏϡʔ
XఱؾσʔλͷऔಘఱؾσʔλͷՃʹ͏ϊʔυRESTɿɹɾHTTP௨৴Λ͢Δɹɾ֎෦ͷAPIʹΞΫηεͰ͖Δɹɾ֎෦ͷAPI͔ΒใΛड͚औΔΤΫεϓϨογϣϯɿɹJavaScriptͷॻ͖ํͰܭࢉࣜؔΛॻ͚ΔStringϑΥʔϚοτɿɹจࣈྻͷॻࣜΛ౷Ұ͢Δ
XAPI ͱʁɹApplicationɹProgrammingɹInterface41
Xଞͷاۀਓ͕࡞ͬͨϓϩάϥϜΛར༻Ͱ͖Δʂ42
XApple͕ఱؾΛଌఆ͍ͯ͠ΔΘ͚Ͱͳ͍ʂiOSඪ४ͷ͓ఱؾΞϓϦ43
XఱؾAPINoodlཉ͍͠ػೳΛθϩ͔Β։ൃ͢Δඞཁ͕ͳ͍ʂԻೝࣝAPI
X͏ͱ͖APIͷنΛΑ͘ಡ͏ʂ
X46͜͜ʹ"1*LFZʢจࣈྻʣ͕දࣔ͞ΕΔ
XσϓϩΠ
XͰ͢ʂ͓ർΕ༷Ͱͨ͠ʂ48
X͓Βͤ49
XυΩϡϝϯτ༁த…ۙɺSlackίϛϡχςΟͰใΛྲྀ͢༧ఆ
XʲίϛϡχςΟࢀՃͷྲྀΕʳɹ̍ɽQRίʔυεΩϟϯɹɹɹɹɹɹorɹɹɹhttps://bit.ly/2kSq3xw ΞΫηεɹ̎ɽϝʔϧΞυϨεͷೖྗɹ̏ɽೝূ༻ϝʔϧʹهࡌͷURLΞΫηεɹ̐ɽύεϫʔυͱϢʔβʔωʔϜΛઃఆʲSlackʳNoodlίϛϡχςΟͷ͝টSlackʹNoodlͷίϛϡχςΟ͕͍͟͝·͢ɻຊ͝ग़੮ͷօ༷ͱڞʹίϛϡχςΟΛΓ্͍͚͛ͯΕͱߟ͓͑ͯΓ·͢ɻੋඇɺ͝ࢀՃ͍ͩ͘͞ʂ51# ͭͬͯ͘Έͨ# Πϕϯτใ# noodlܙା
X52Twitter
X͖͕͍ͭͨΒ ͍ͭͬͨʔ ʹ͍ͨ ͕͠ͳ͍ Ή͠ Ͱ͢ɻͨ͘͞Μ ;͒Ζʔ ͞ΕΔͱ͍ͤͪΐ͏ ͢Δ͔ɻจࣈϒϩοΫͱεϚϗ͕࿈ܞͨ͠ҭ؝۩ͷΞϓϦͷࢼ࡞Λ Noodl Ͱ։ൃʂ͍ͭͬͨʔ͜ΖΉ͘͠Μ12݄ΫϥυϑΝϯσΟϯά։࢝༧ఆʂ
QiitaΞυϕϯτΧϨϯμʔࢀՃऀืूதʂ
XQ&A55
X͜ͷಈըޙͰΞʔΧΠϒͱͯ͠ݟΒΕ·͢ʂ56
XThank you!57