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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

X ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ

Slide 13

Slide 13 text

X നͰॻ͖ग़͢ͱNOODL্Ͱ৭ΛઃఆͰ͖Δʂ ̎ɽΞΠίϯ͸നʹ͠Α͏ʂ

Slide 14

Slide 14 text

X ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ ϑΝΠϧ → ॻ͖ग़͠ → બ୒ࡁΈ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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ͷॳظҐஔͷઃఆ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

X ͓஌Βͤ 53

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

X 56 Twitter

Slide 57

Slide 57 text

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