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 ΁
2. NoodlͰUIσβΠϯΛ͠Α͏ʂ XD࿈ܞ / ϨΠΞ΢τฤ NOODL BEGINNER COURSE 2
3. X ΃Μ͚ͨ Noodl SlackίϛϡχςΟӡӦ୲౰ 3 ̍ਓલͷNoodlerʹͳΔͨΊमߦதɻ ࠷ۙ͸ɺIoTʹ΋௅ઓதɻ Twitter @penpenchapen
4. X πΠʔτେ׻ܴͰ͢ʂ 4 #Noodl
5. X 5 ͓ࢼ͠πΠʔτλΠϜʂ
6. X 6 ࣭໰͸νϟοτཝͰʂ ʁ ʁ ʁ
7. X 7 ޷͖ͳ໙ྨ͸ʁ YouTubeͷνϟοτʹॻ͖ࠐΜͰΈΑ͏ʂ
8. X 8 ࠓճͷηϛφʔ Beginnerίʔε͸ͲͪΒ͔Β࢝Ίͯ΋େৎ෉ʂ
9. X 9 ॳΊͯͷਓ͸͜ͷಈըͷ֓ཁཝ͔ΒΞΫηεʂ
10. X XDͷσβΠϯσʔλ͔Β NoodlͰ࢖͏ը૾Λॻ͖ग़࣌͢ͷίπ 10
11. X ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ ̎ɽΞΠίϯ͸നʹ͠Α͏ʂ ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ ̐ɽࣸਅ͸Ұ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ NoodlͰ࢖͏ը૾ΛXDͰॻ͖ग़࣌͢ͷ̐ϲ৚ʂ
12. X ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ
13. X നͰॻ͖ग़͢ͱNOODL্Ͱ৭ΛઃఆͰ͖Δʂ ̎ɽΞΠίϯ͸നʹ͠Α͏ʂ
14. X ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ ϑΝΠϧ → ॻ͖ग़͠ → બ୒ࡁΈ
15. X ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ Androidͷ৔߹͸6छྨॻ͖ग़͞ΕΔɻ 1080x1920ͷ৔߹͸xxhdpiͰαΠζͽͬͨΓʂ
16. X Ұ൪େ͖͍αΠζͷը૾Ͱॻ͖ग़ͤ͹ɺ ̍ຕͷը૾ΛNoodlͰ࢖͍ճ͢͜ͱ͕Ͱ͖Δʂ ̐ɽࣸਅ͸Ұ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ
17. X NoodlͰϨΠΞ΢τ͢Δ࣌ʹ ॏཁͳ஌ࣝ 17
18. X 18 UIσβΠϯ͸ɺϨΠΞ΢τ͕ॏཁʂ ϨΠΞ΢τ ৘ใͷ഑ஔ
19. X ϨΠΞ΢τ͸ɺ 19 ϊʔυͷ ਌ࢠؔ܎ ͺͨͦ͘ʢpakutaso.comʣ Ͱܾ·Δʂʂ
20. X 20 ࢠʹґଘ ਌ʹґଘ ͜Ε͕ɺ਌ࢠؔ܎ͷΩϗϯɻ ґଘ͢Δ৘ใ ԣ෯ʢWidthʣ ߴ͞ʢHeightʣ X ࣠ͷҐஔʢAlign Xʣ Y ࣠ͷҐஔʢAlign Yʣ etc…
21. X 21 ̍൪্ͷϊʔυ ( Root ) ʹ஫໨͢Δͱ… ਌͕͍ͳ͍…ʁ ࢠΛࢀর ̍൪্ͷϊʔυ ( Root ) ͷ਌͸ɺ Project settingsͰઃఆ͞Ε͍ͯΔը໘ͷେ͖͞ɻ
22. X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛ࡟আ͢Δ: ϊʔυΛબ୒ɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબ୒ɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 22
23. X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ಺༰Λ੾Γସ͑ΔϘλϯ ߏங͢Δ৔ॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε= ϊʔυ 23
24. X L001-01 ϨετϥϯΞϓϦ 24
25. X + Component͔Β৽نComponentͱͯ͠IndexɺMenuΛ࡞੒ 25 Componentͷ࡞੒
26. X GroupͷઃఆͰMenuόʔͷҐஔͱαΠζΛઃఆ͠ɺGroupͱಉ͡αΠζ(100%)ͷRectangleͰྖҬͷ৭Λࢦఆ͢Δ 26 Menu Componentͷத਎ͷ࡞੒
27. X ઌ΄ͲͷRectangleͷഎ໘ʢϊʔυͰ͸্ʣʹOpacityΛബͨ͘͠ࠇ͍RectangleΛૠೖ͢Δ ͞ΒʹBlur LengthͷઃఆͰྠֲΛ΅͔͢͜ͱͰɺന͍Rectangleͷ্෦ʹബ͍ӨΛ࡞੒Ͱ͖Δ 27 MenuόʔͷӨΛ࡞੒
28. X Stack LayoutΛ࢖ͬͯΞΠίϯΛฒ΂ΔɻΞΠίϯ͕എܠͱಉ͡നͩͱݟ͑ͳ͍͜ͱ͕͋ΔͷͰɺഎܠʹ৭Λ͚ͭΔͱ࡞ۀ͠΍͍͢ ΞΠίϯ͸ImageΛ࢖͍ɺ৭΍഑ஔΛௐ੔͢ΔɻΞΠίϯؒ͸Stack LayoutͷItem SpacingͰௐ੔͢Δͱྑ͍ 28 ΞΠίϯͷ഑ஔ
29. X ComponentsͷPagesϑΥϧμ಺ʹTopͱ͍͏ComponentΛ࡞੒͢ΔɻϑΥϧμ಺ʹ࡞Δࡍ͸ϑΥϧμӈͷ̏఺ΞΠίϯ͔Β࡞੒͢Δ 29 Top Componentͷ࡞੒
30. X ࠷ॳͷ਌ϊʔυΛPageͰ࡞੒͢ΔʢGroupͰ͸ͳ͍ʣɻͦ͜ʹBackgroundͱͯ͠Rectangleʢബ͍άϨʔʣɺHeaderͱͯ͠Groupɺ ຊจͱͯ͠Scroll ViewΛ࡞੒͢ΔɻHeader͸·ͣHeaderΛ࡞Γ͍ͨྖҬΛߟྀͯ͠GroupͷαΠζΛܾΊΔɻ 30 Top Componentͷத਎ͷ࡞੒
31. X RectangleͰഎܠ৭Λࢦఆ͢ΔɻImageͰMenuΞΠίϯʢຢͷ໊ΛϋϯόʔΨʔϝχϡʔʣΛ഑ஔ͢Δɻ 31 Headerͷഎܠͷ࡞੒ MenuΞΠίϯͷઃஔ
32. X Groupͷԣ෯Λ900pxʹઃఆ͠ɺݕࡧ૭ͷྖҬΛ֬อɻ 32 Headerͷݕࡧ૭ͷྖҬΛ࡞੒
33. X Search Group಺ʹRectangleͰݕࡧ૭Λ࡞੒͢ΔɻSearch GroupͷPaddingΛࢦఆ͢Δ͜ͱͰɺRectangleͷपΓʹ༨നΛ࡞Δ͜ͱ͕Ͱ͖Δ จࣈೖྗՄೳͳςΩετϘοΫεʹ͸Text InputΛ࢖͏ɻΞΠίϯ΍ςΩετͷҐஔ͸దٓௐ੔͢Δ 33 ݕࡧ૭(ന෦෼)ɺςΩετೖྗɺݕࡧΞΠίϯͷઃஔ
34. X Scroll ViewͷItem SpacingΛ40ʹઃఆ͢ΔɻScroll Direction͕Verticalʹͳ͍ͬͯΔ͜ͱΛ֬ೝ͢ΔɻScroll Viewʹରͯ͠Ϋʔϙϯը૾(Image)ɺ ͱSection1(Group, Height = 1290)ͱSection2(Group, Content Height)Λ࡞੒͠ɺ͞ΒʹRectangleΛ࢖ͬͯനʹ͢Δ 34 Topͷத਎ͷ࡞੒
35. X Section1ͷPad TopΛ-40ʹࢦఆ͢Δ͜ͱͰɺ਌ͷScroll ViewͰࢦఆͨ͠Item SpacingΛ૬ࡴ͢Δ͜ͱ͕Ͱ͖Δ 35 Paddingͷখٕ
36. X ͋Β͔͡Ί༻ҙͯ͋͠ΔH6Λૠೖ͠ɺ೚ҙͷλΠτϧΛೖྗ͢Δʢϗοτͳ͓ళͷ෦෼ʣ Scroll Viewͷߴ͞ɾҐஔɾItem SpacingΛࢦఆͯ͠Scroll DirectionΛHorizontalʹ͢Δ ͋Β͔͡Ί༻ҙͯ͋͠ΔCard ItemΛෳ਺ૠೖ͠ɺScroll ViewͷPad Left, Pad RightΛௐ੔͢Δ 36 Section1ͷத਎ͷ࡞੒ ԣεΫϩʔϧίϯςϯπ
37. X Component InputsΛ࡞੒͠ɺ+PortͰ3ͭPortΛ࡞੒͢Δɻ(Title, Img, text) ˎPortΛ࡞੒͢ΔͱComponent Inputs͔ΒNoodlΛҾͬுΕΔΑ͏ʹͳΔ ্ਤͷΑ͏ʹNoodlΛ઀ଓ͢Δ͜ͱͰɺComponentͷ֎෦͔Β֤ϊʔυͷύϥϝʔλΛมߋͰ͖ΔΑ͏ʹͳΔ 37 Card Itemͷத਎ͷ࡞੒ ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ
38. X Component OutputsΛ࡞੒͠ɺ+PortͰ1ͭPortΛ࡞੒͢Δ(tap)ɻComponent ChildrenΛStack LayoutʹͿΒ͛͞Δɻ ͜ΕʹΑΓɺCard Item Componentͷ֎ʹͿΒ͛ͨ͞ϊʔυ͕͜͜ʹͿΒ͕ͬͨ࣌͞ͱಉ͡ڍಈʹͳΔ 38 Card Itemͷத਎ͷ࡞੒ ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ
39. X Topʹ໭ΓɺCard ItemʹඞཁͳTagΛૠೖ͢ΔɻCard ItemͱTagͷ಺༰Λฤूͯ͠ҰͭҰͭͷ͓ళʹ߹Θͤͨ৘ใʹॻ͖׵͑Δ ˎ͜͜ͰલϖʔδͷComponent Children͕ͳ͍ͱTagΛૠೖ͢Δ͜ͱ͕Ͱ͖ͳ͍ 39 Card Itemͷը૾΍આ໌ͷมߋɺTag෇͚
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ͷॳظҐஔͷઃఆ
41. X Section2ʹStack LayoutΛ࢖ͬͯH6, Card Item2Λૠೖ͢Δɻ͜ͷ࣌Item SpacingΛۭ͚Δͱݟӫ͕͑ྑ͍ Card Item2͕ܨ͕͍ͬͯͬͨߴ͕͞ಡΊͳ͍ͷͰɺStack LayoutͷSize ModeΛContent Heightʹͯ͠ॊೈʹ͓ͯ͘͠ 41 Section2ͷ࡞੒
42. X HeaderͷHeightΛScroll ViewͷPad Topʹܨ͙ͱ HeaderͰઃఆͨ͠஋͕Scroll Viewͷ஋ʹ൓ө͞ΕΔΑ͏ʹͳΔ 42 Headerͷߴ͞Λࢀরͯ͠Scroll ViewͷҐஔΛௐ੔͢Δ
43. X Scroll ViewͱHeaderͷॱ൪ΛೖΕସ͑Δ ˎԼʹ͋Δϊʔυͷํ͕ϓϨϏϡʔͰखલʹ͘ΔɻHeaderΛखલʹ͢Δ 43 HeaderͱScroll Viewͷલޙؔ܎Λमਖ਼͢Δ
44. X IndexͷதʹRoot(Group), Pages, MenuΛ্ਤͷΑ͏ʹ࡞੒͢Δ PagesͷStart Pageͱͯ͠TopΛબͿ 44 IndexΛ࡞੒͢Δ
45. X ComponentͷPagesϑΥϧμͷதʹTopͱಉ͡Α͏ʹRestaurant ComponentΛ࡞੒͢Δ(P.10) ্ਤͷΑ͏ʹϊʔυΛ഑ஔͯ͠ɺഎܠͷRectangleɺScroll ViewɺImageɺTextΛ࡞੒͢Δ TextΛGroupʹೖΕͯPaddingΛ͢ΔͱTextʹ༨നΛ࡞ΕΔ 45 Restaurantϖʔδͷ࡞੒
46. X ໭ΔϘλϯ͸120 x 120ͷྖҬΛGroupͰ࡞͔ͬͯΒImageΛૠೖͯ͠࡞੒͢Δ 46 ໭ΔϘλϯͷ࡞੒
47. X Card Item3ΛScroll Viewʹૠೖ͠ɺTagΛ͚ͭΔ ˎCard Item3͕ࣸਅʹ൒෼ඃ͍ͬͯΔͷ͸Card Item3಺ͷҰ൪্ͷGroup͕Pad Top -300ͱࢦఆ͍ͯ͠ΔͨΊͰ͢ 47 Card ItemͱTagͷ࡞੒
48. X Flow LayoutΛ༻͍ͯImageΛฒ΂ΔɻHeight 800 px 48 ը૾ΛྻͰฒ΂Δ
49. X ը૾SizeΛ360 x 360 pxɺFill ModeΛAspect Fillʹ͢Δ ˎFill Mode͸৭ʑࢼͯ͠Έ͍ͯͩ͘͞ɻFill ModeΛมߋͨ͠ࡍ͸ߋ৽͕ඞཁͰ͢ 49 ը૾Λมߋͯ͠੔͑Δ
50. X Topʹ໭ΓPage NavigationΛ࡞੒͠ɺDestinationʹRestaurantΛઃఆ͢Δ Index 2ͷCard Itemͷtap͔ΒPage NavigationͷNavigate To Pageʹ઀ଓ͢Δ 50 Top͔ΒRestaurantʹϖʔδભҠΛઃఆ͢Δ
51. X Restaurantʹ໭ΓPage Navigation BackΛ࡞੒͢Δ ໭ΔϘλϯͷGroupͷTap͔ΒPage Navigation BackͷBackʹ઀ଓ͢Δ ˎˎϓϨϏϡʔΛIndexͷRoot Groupʹ͢Ε͹׬੒Ͱ͢ˎˎ 51 Restaurantϖʔδͷ໭ΔϘλϯΛઃఆ͢Δ
52. X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 52
53. X ͓஌Βͤ 53
54. X 54 1/17 ʢۚʣ19:00 - 21:00 2020೥ͷӡ੎ΛNoodlͰ઎͓͏ɻ
55. X ʲίϛϡχςΟࢀՃͷྲྀΕʳ ɹ̍ɽQRίʔυεΩϟϯ ɹɹɹɹɹɹor ɹɹɹhttps://bit.ly/2kSq3xw ΁ΞΫηε ɹ̎ɽϝʔϧΞυϨεͷೖྗ ɹ̏ɽೝূ༻ϝʔϧʹهࡌͷURL΁ΞΫηε ɹ̐ɽύεϫʔυͱϢʔβʔωʔϜΛઃఆ ʲSlackʳNoodlίϛϡχςΟ΁ͷ͝ট଴ SlackʹNoodlͷίϛϡχςΟ͕͍͟͝·͢ɻ ຊ೔͝ग़੮ͷօ༷ͱڞʹίϛϡχςΟΛ੝Γ্͛ͯ ͍͚Ε͹ͱߟ͓͑ͯΓ·͢ɻੋඇɺ͝ࢀՃ͍ͩ͘͞ʂ 55 # ͭͬͯ͘Έͨ # Πϕϯτ৘ใ # noodl஌ܙା
56. X 56 Twitter
57. X 57 Qiita Noodl Advent Calendar 2019 https://qiita.com/advent-calendar/2019/noodl ཁνΣοΫʂʂʂ
58. X ͜ͷಈը͸ ޙͰΞʔΧΠϒͱ ͯ͠ݟΒΕ·͢ʂ 58
59. X THANK YOU! 59