20191218 Beginnerコース＠オンライン (1/2)

YouTubeでライブ配信されたNoodl Beginnerコースの資料です。

Transcript

1. ։࢝·ͰʹɺԼهΛ͓ࡁ·͍ͤͩ͘͞ʢಈըͷ֓ཁཝʹ΋ॻ͍ͯ͋Γ·͢ʣ
   2. ΞΧ΢ϯτΛ࡞੒/ϩάΠϯ
   ݸਓͷΞΧ΢ϯτΛ࡞੒͠ɺϩάΠϯ͍ͯͩ͘͠͞ɻ
   1
   3. ࢿྉʹΞΫηε
   connpassͷΠϕϯτϖʔδʹ͋Δʮࢿྉʯ͔ΒɺϓϩδΣΫ
   τϑΝΠϧΛμ΢ϯϩʔυ͍ͯͩ͘͠͞ɻ
   https://noodl-tokyo.connpass.com/event/156814/
   1. Noodl 1.3ΛΠϯετʔϧ
   https://classic.getnoodl.com/download
   ⚠ ҟͳΔόʔδϣϯΛμ΢ϯϩʔυ͍ͯ͠ͳ͍͔֬ೝΛ͓ئ͍͍ͨ͠·͢ʂ
   ɹɹ֬ೝํ๏ɿNoodlΛىಈ͠ɺϝχϡʔόʔͷ Noodl ʼ About Application ΁
   

   View Slide

2. NoodlͰUIσβΠϯΛ͠Α͏ʂ
   XD࿈ܞ / ϨΠΞ΢τฤ
   NOODL BEGINNER COURSE
   2
   

   View Slide

3. X
   ΃Μ͚ͨ
   Noodl SlackίϛϡχςΟӡӦ୲౰
   3
   ̍ਓલͷNoodlerʹͳΔͨΊमߦதɻ
   ࠷ۙ͸ɺIoTʹ΋௅ઓதɻ
   Twitter
   @penpenchapen
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. X
   8
   ࠓճͷηϛφʔ
   Beginnerίʔε͸ͲͪΒ͔Β࢝Ίͯ΋େৎ෉ʂ
   

   View Slide

9. X
   9
   ॳΊͯͷਓ͸͜ͷಈըͷ֓ཁཝ͔ΒΞΫηεʂ
   

   View Slide

10. X
    XDͷσβΠϯσʔλ͔Β
    NoodlͰ࢖͏ը૾Λॻ͖ग़࣌͢ͷίπ
    10
    

    View Slide

11. X
    ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ
    ̎ɽΞΠίϯ͸നʹ͠Α͏ʂ
    ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ
    ̐ɽࣸਅ͸Ұ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ
    NoodlͰ࢖͏ը૾ΛXDͰॻ͖ग़࣌͢ͷ̐ϲ৚ʂ
    

    View Slide

12. X
    ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ
    

    View Slide

13. X
    നͰॻ͖ग़͢ͱNOODL্Ͱ৭ΛઃఆͰ͖Δʂ
    ̎ɽΞΠίϯ͸നʹ͠Α͏ʂ
    

    View Slide

14. X
    ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ
    ϑΝΠϧ → ॻ͖ग़͠ → બ୒ࡁΈ
    

    View Slide

15. X
    ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ
    Androidͷ৔߹͸6छྨॻ͖ग़͞ΕΔɻ
    1080x1920ͷ৔߹͸xxhdpiͰαΠζͽͬͨΓʂ
    

    View Slide

16. X
    Ұ൪େ͖͍αΠζͷը૾Ͱॻ͖ग़ͤ͹ɺ
    ̍ຕͷը૾ΛNoodlͰ࢖͍ճ͢͜ͱ͕Ͱ͖Δʂ
    ̐ɽࣸਅ͸Ұ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ
    

    View Slide

17. X
    NoodlͰϨΠΞ΢τ͢Δ࣌ʹ
    ॏཁͳ஌ࣝ
    17
    

    View Slide

18. X
    18
    UIσβΠϯ͸ɺϨΠΞ΢τ͕ॏཁʂ
    ϨΠΞ΢τ
    ৘ใͷ഑ஔ
    

    View Slide

19. X
    ϨΠΞ΢τ͸ɺ
    19
    ϊʔυͷ
    ਌ࢠؔ܎
    ͺͨͦ͘ʢpakutaso.comʣ
    Ͱܾ·Δʂʂ
    

    View Slide

20. X
    20
    ࢠʹґଘ
    ਌ʹґଘ
    ͜Ε͕ɺ਌ࢠؔ܎ͷΩϗϯɻ
    ґଘ͢Δ৘ใ
    ԣ෯ʢWidthʣ
    ߴ͞ʢHeightʣ
    X ࣠ͷҐஔʢAlign Xʣ
    Y ࣠ͷҐஔʢAlign Yʣ
    etc…
    

    View Slide

21. X
    21
    ̍൪্ͷϊʔυ ( Root ) ʹ஫໨͢Δͱ…
    ਌͕͍ͳ͍…ʁ
    ࢠΛࢀর
    ̍൪্ͷϊʔυ ( Root ) ͷ਌͸ɺ
    Project settingsͰઃఆ͞Ε͍ͯΔը໘ͷେ͖͞ɻ
    

    View Slide

22. X
    NOODLͷجຊૢ࡞
    - ϊʔυΛҠಈ͢Δ: υϥοά
    - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ
    - ϊʔυΛ࡟আ͢Δ: ϊʔυΛબ୒ɾDeleteΩʔΛԡ͢
    - ϊʔυΛίϐʔ: ϊʔυΛબ୒ɾ㵰+CʢWindows: Ctrl+Cʣ
    - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ
    - ϊʔυΛܨ͙: ϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ
    22
    

    View Slide

23. X
    ίϯϙʔωϯτҰཡ
    ϓϩύςΟ
    ϓϩδΣΫτઃఆ
    ϊʔυҰཡ
    දࣔ಺༰Λ੾Γସ͑ΔϘλϯ
    ߏங͢Δ৔ॴ ϓϨϏϡʔը໘
    ϝχϡʔ
    ϘοΫε= ϊʔυ
    23
    

    View Slide

24. X
    L001-01
    ϨετϥϯΞϓϦ
    24
    

    View Slide

25. X
    + Component͔Β৽نComponentͱͯ͠IndexɺMenuΛ࡞੒
    25
    Componentͷ࡞੒
    

    View Slide

26. X
    GroupͷઃఆͰMenuόʔͷҐஔͱαΠζΛઃఆ͠ɺGroupͱಉ͡αΠζ(100%)ͷRectangleͰྖҬͷ৭Λࢦఆ͢Δ
    26
    Menu Componentͷத਎ͷ࡞੒
    

    View Slide

27. X
    ઌ΄ͲͷRectangleͷഎ໘ʢϊʔυͰ͸্ʣʹOpacityΛബͨ͘͠ࠇ͍RectangleΛૠೖ͢Δ
    ͞ΒʹBlur LengthͷઃఆͰྠֲΛ΅͔͢͜ͱͰɺന͍Rectangleͷ্෦ʹബ͍ӨΛ࡞੒Ͱ͖Δ
    27
    MenuόʔͷӨΛ࡞੒
    

    View Slide

28. X
    Stack LayoutΛ࢖ͬͯΞΠίϯΛฒ΂ΔɻΞΠίϯ͕എܠͱಉ͡നͩͱݟ͑ͳ͍͜ͱ͕͋ΔͷͰɺഎܠʹ৭Λ͚ͭΔͱ࡞ۀ͠΍͍͢
    ΞΠίϯ͸ImageΛ࢖͍ɺ৭΍഑ஔΛௐ੔͢ΔɻΞΠίϯؒ͸Stack LayoutͷItem SpacingͰௐ੔͢Δͱྑ͍
    28
    ΞΠίϯͷ഑ஔ
    

    View Slide

29. X
    ComponentsͷPagesϑΥϧμ಺ʹTopͱ͍͏ComponentΛ࡞੒͢ΔɻϑΥϧμ಺ʹ࡞Δࡍ͸ϑΥϧμӈͷ̏఺ΞΠίϯ͔Β࡞੒͢Δ
    29
    Top Componentͷ࡞੒
    

    View Slide

30. X
    ࠷ॳͷ਌ϊʔυΛPageͰ࡞੒͢ΔʢGroupͰ͸ͳ͍ʣɻͦ͜ʹBackgroundͱͯ͠Rectangleʢബ͍άϨʔʣɺHeaderͱͯ͠Groupɺ
    ຊจͱͯ͠Scroll ViewΛ࡞੒͢ΔɻHeader͸·ͣHeaderΛ࡞Γ͍ͨྖҬΛߟྀͯ͠GroupͷαΠζΛܾΊΔɻ
    30
    Top Componentͷத਎ͷ࡞੒
    

    View Slide

31. X
    RectangleͰഎܠ৭Λࢦఆ͢ΔɻImageͰMenuΞΠίϯʢຢͷ໊ΛϋϯόʔΨʔϝχϡʔʣΛ഑ஔ͢Δɻ
    31
    Headerͷഎܠͷ࡞੒
    MenuΞΠίϯͷઃஔ
    

    View Slide

32. X
    Groupͷԣ෯Λ900pxʹઃఆ͠ɺݕࡧ૭ͷྖҬΛ֬อɻ
    32
    Headerͷݕࡧ૭ͷྖҬΛ࡞੒
    

    View Slide

33. X
    Search Group಺ʹRectangleͰݕࡧ૭Λ࡞੒͢ΔɻSearch GroupͷPaddingΛࢦఆ͢Δ͜ͱͰɺRectangleͷपΓʹ༨നΛ࡞Δ͜ͱ͕Ͱ͖Δ
    จࣈೖྗՄೳͳςΩετϘοΫεʹ͸Text InputΛ࢖͏ɻΞΠίϯ΍ςΩετͷҐஔ͸దٓௐ੔͢Δ
    33
    ݕࡧ૭(ന෦෼)ɺςΩετೖྗɺݕࡧΞΠίϯͷઃஔ
    

    View Slide

34. X
    Scroll ViewͷItem SpacingΛ40ʹઃఆ͢ΔɻScroll Direction͕Verticalʹͳ͍ͬͯΔ͜ͱΛ֬ೝ͢ΔɻScroll Viewʹରͯ͠Ϋʔϙϯը૾(Image)ɺ
    ͱSection1(Group, Height = 1290)ͱSection2(Group, Content Height)Λ࡞੒͠ɺ͞ΒʹRectangleΛ࢖ͬͯനʹ͢Δ
    34
    Topͷத਎ͷ࡞੒
    

    View Slide

35. X
    Section1ͷPad TopΛ-40ʹࢦఆ͢Δ͜ͱͰɺ਌ͷScroll ViewͰࢦఆͨ͠Item SpacingΛ૬ࡴ͢Δ͜ͱ͕Ͱ͖Δ
    35
    Paddingͷখٕ
    

    View Slide

36. X
    ͋Β͔͡Ί༻ҙͯ͋͠ΔH6Λૠೖ͠ɺ೚ҙͷλΠτϧΛೖྗ͢Δʢϗοτͳ͓ళͷ෦෼ʣ
    Scroll Viewͷߴ͞ɾҐஔɾItem SpacingΛࢦఆͯ͠Scroll DirectionΛHorizontalʹ͢Δ
    ͋Β͔͡Ί༻ҙͯ͋͠ΔCard ItemΛෳ਺ૠೖ͠ɺScroll ViewͷPad Left, Pad RightΛௐ੔͢Δ
    36
    Section1ͷத਎ͷ࡞੒
    ԣεΫϩʔϧίϯςϯπ
    

    View Slide

37. X
    Component InputsΛ࡞੒͠ɺ+PortͰ3ͭPortΛ࡞੒͢Δɻ(Title, Img, text)
    ˎPortΛ࡞੒͢ΔͱComponent Inputs͔ΒNoodlΛҾͬுΕΔΑ͏ʹͳΔ
    ্ਤͷΑ͏ʹNoodlΛ઀ଓ͢Δ͜ͱͰɺComponentͷ֎෦͔Β֤ϊʔυͷύϥϝʔλΛมߋͰ͖ΔΑ͏ʹͳΔ
    37
    Card Itemͷத਎ͷ࡞੒
    ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ
    

    View Slide

38. X
    Component OutputsΛ࡞੒͠ɺ+PortͰ1ͭPortΛ࡞੒͢Δ(tap)ɻComponent ChildrenΛStack LayoutʹͿΒ͛͞Δɻ
    ͜ΕʹΑΓɺCard Item Componentͷ֎ʹͿΒ͛ͨ͞ϊʔυ͕͜͜ʹͿΒ͕ͬͨ࣌͞ͱಉ͡ڍಈʹͳΔ
    38
    Card Itemͷத਎ͷ࡞੒
    ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ
    

    View Slide

39. X
    Topʹ໭ΓɺCard ItemʹඞཁͳTagΛૠೖ͢ΔɻCard ItemͱTagͷ಺༰Λฤूͯ͠ҰͭҰͭͷ͓ళʹ߹Θͤͨ৘ใʹॻ͖׵͑Δ
    ˎ͜͜ͰલϖʔδͷComponent Children͕ͳ͍ͱTagΛૠೖ͢Δ͜ͱ͕Ͱ͖ͳ͍
    39
    Card Itemͷը૾΍આ໌ͷมߋɺTag෇͚
    

    View Slide

40. X
    Scroll ViewͷScroll To IndexͷIndexΛ2ʹ͢Δ

    BooleanͷValueʹνΣοΫΛೖΕͯSaved Value→Scroll To IndexͷDoʹܨ͙
    ˎIndex͸୺͔Β0, 1, 2ɾɾͳͷͰ2ʹͨ͠৔߹͸3ຕ໨ʹͳΔ
    40
    Scroll ViewͷॳظҐஔͷઃఆ
    

    View Slide

41. X
    Section2ʹStack LayoutΛ࢖ͬͯH6, Card Item2Λૠೖ͢Δɻ͜ͷ࣌Item SpacingΛۭ͚Δͱݟӫ͕͑ྑ͍
    Card Item2͕ܨ͕͍ͬͯͬͨߴ͕͞ಡΊͳ͍ͷͰɺStack LayoutͷSize ModeΛContent Heightʹͯ͠ॊೈʹ͓ͯ͘͠
    41
    Section2ͷ࡞੒
    

    View Slide

42. X
    HeaderͷHeightΛScroll ViewͷPad Topʹܨ͙ͱ
    HeaderͰઃఆͨ͠஋͕Scroll Viewͷ஋ʹ൓ө͞ΕΔΑ͏ʹͳΔ
    42
    Headerͷߴ͞Λࢀরͯ͠Scroll ViewͷҐஔΛௐ੔͢Δ
    

    View Slide

43. X
    Scroll ViewͱHeaderͷॱ൪ΛೖΕସ͑Δ
    ˎԼʹ͋Δϊʔυͷํ͕ϓϨϏϡʔͰखલʹ͘ΔɻHeaderΛखલʹ͢Δ
    43
    HeaderͱScroll Viewͷલޙؔ܎Λमਖ਼͢Δ
    

    View Slide

44. X
    IndexͷதʹRoot(Group), Pages, MenuΛ্ਤͷΑ͏ʹ࡞੒͢Δ
    PagesͷStart Pageͱͯ͠TopΛબͿ
    44
    IndexΛ࡞੒͢Δ
    

    View Slide

45. X
    ComponentͷPagesϑΥϧμͷதʹTopͱಉ͡Α͏ʹRestaurant ComponentΛ࡞੒͢Δ(P.10)
    ্ਤͷΑ͏ʹϊʔυΛ഑ஔͯ͠ɺഎܠͷRectangleɺScroll ViewɺImageɺTextΛ࡞੒͢Δ
    TextΛGroupʹೖΕͯPaddingΛ͢ΔͱTextʹ༨നΛ࡞ΕΔ
    45
    Restaurantϖʔδͷ࡞੒
    

    View Slide

46. X
    ໭ΔϘλϯ͸120 x 120ͷྖҬΛGroupͰ࡞͔ͬͯΒImageΛૠೖͯ͠࡞੒͢Δ
    46
    ໭ΔϘλϯͷ࡞੒
    

    View Slide

47. X
    Card Item3ΛScroll Viewʹૠೖ͠ɺTagΛ͚ͭΔ
    ˎCard Item3͕ࣸਅʹ൒෼ඃ͍ͬͯΔͷ͸Card Item3಺ͷҰ൪্ͷGroup͕Pad Top -300ͱࢦఆ͍ͯ͠ΔͨΊͰ͢
    47
    Card ItemͱTagͷ࡞੒
    

    View Slide

48. X
    Flow LayoutΛ༻͍ͯImageΛฒ΂ΔɻHeight 800 px
    48
    ը૾ΛྻͰฒ΂Δ
    

    View Slide

49. X
    ը૾SizeΛ360 x 360 pxɺFill ModeΛAspect Fillʹ͢Δ
    ˎFill Mode͸৭ʑࢼͯ͠Έ͍ͯͩ͘͞ɻFill ModeΛมߋͨ͠ࡍ͸ߋ৽͕ඞཁͰ͢
    49
    ը૾Λมߋͯ͠੔͑Δ
    

    View Slide

50. X
    Topʹ໭ΓPage NavigationΛ࡞੒͠ɺDestinationʹRestaurantΛઃఆ͢Δ
    Index 2ͷCard Itemͷtap͔ΒPage NavigationͷNavigate To Pageʹ઀ଓ͢Δ
    50
    Top͔ΒRestaurantʹϖʔδભҠΛઃఆ͢Δ
    

    View Slide

51. X
    Restaurantʹ໭ΓPage Navigation BackΛ࡞੒͢Δ
    ໭ΔϘλϯͷGroupͷTap͔ΒPage Navigation BackͷBackʹ઀ଓ͢Δ
    ˎˎϓϨϏϡʔΛIndexͷRoot Groupʹ͢Ε͹׬੒Ͱ͢ˎˎ
    51
    Restaurantϖʔδͷ໭ΔϘλϯΛઃఆ͢Δ
    

    View Slide

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

    View Slide

53. X
    ͓஌Βͤ
    53
    

    View Slide

54. X
    54
    1/17 ʢۚʣ19:00 - 21:00
    2020೥ͷӡ੎ΛNoodlͰ઎͓͏ɻ
    

    View Slide

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

    View Slide

56. X
    56
    Twitter
    

    View Slide

57. X
    57
    Qiita
    Noodl Advent
    Calendar 2019
    https://qiita.com/advent-calendar/2019/noodl
    ཁνΣοΫʂʂʂ
    

    View Slide

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

    View Slide

59. X
    THANK YOU!
    59
    

    View Slide