20201111_Noodl_ver2.1_hands-on

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