$30 off During Our Annual Pro Sale. View Details »

20201111_Noodl_ver2.1_hands-on

pentake
November 11, 2020

 20201111_Noodl_ver2.1_hands-on

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

    View Slide

  2. X
    Noodl 2.1
    ϋϯζΦϯ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. X

    View Slide

  9. X
    Noodlʁ
    ψ ʔ υ ϧ

    View Slide

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

    View Slide

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

    View Slide

  12. X
    Noodl ͱ͸ʁ
    ψ ʔ υ ϧ

    View Slide

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

    View Slide

  14. X
    ࢥߟ͠ɺ࣮ߦ͢Δɻ

    View Slide

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

    View Slide

  16. X

    View Slide

  17. X

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. X
    21
    Node
    ϊʔυ

    View Slide

  22. X
    Node
    ϊʔυ

    View Slide

  23. X
    Component
    ίϯϙʔωϯτ

    View Slide

  24. X
    Component

    View Slide

  25. X
    Component
    Component
    Component

    View Slide

  26. X
    Component
    Component
    Component
    Component

    View Slide

  27. X
    Component
    Componentʢશମʣ
    Component
    Component
    Component

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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ʣ

    View Slide

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

    View Slide

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

    View Slide

  34. X
    Χʔυ࡞੒ʹ࢖͏ϊʔυ
    ίϯϙʔωϯτೖྗɿ
    ɹίϯϙʔωϯτͷ৘ใͷೖޱ
    ίϯϙʔωϯτग़ྗɿ
    ɹίϯϙʔωϯτͷ৘ใͷग़ޱ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. X
    σϓϩΠ

    View Slide

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

    View Slide

  49. X
    ͓஌Βͤ
    49

    View Slide

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

    View Slide

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

    View Slide

  52. X
    52
    Twitter

    View Slide

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

    View Slide

  54. Qiita
    Ξυϕϯτ
    ΧϨϯμʔ
    ࢀՃऀ
    ืूதʂ

    View Slide

  55. X
    Q&A
    55

    View Slide

  56. X
    ͜ͷಈը͸
    ޙͰΞʔΧΠϒͱ
    ͯ͠ݟΒΕ·͢ʂ
    56

    View Slide

  57. X
    Thank you!
    57

    View Slide