Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

pentake
December 18, 2019

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

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

pentake

December 18, 2019
Tweet

More Decks by pentake

Other Decks in Design

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