Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20191218 Beginnerコース@オンライン (1/2)
Search
pentake
December 18, 2019
Design
3
210
20191218 Beginnerコース@オンライン (1/2)
YouTubeでライブ配信されたNoodl Beginnerコースの資料です。
pentake
December 18, 2019
Tweet
Share
More Decks by pentake
See All by pentake
20201111_Noodl_ver2.1_hands-on
pentake_de
0
190
20201104_OpenWeatherMap_API
pentake_de
0
100
20201028_VIoTLT_vol.5_今、リモート会議中かどうかを家族に伝えてみた
pentake_de
0
270
20201027_FGDC_LowCodeプラットフォームNoodlでブラウザゲーム開発!
pentake_de
0
130
20200708_おやこテックLT_MakeCodeで神隠し
pentake_de
1
130
20200325_Noodl_v2_hands-on_スライド資料
pentake_de
1
260
20200323_OpenWeatherMap_API
pentake_de
1
320
Noodlもくもく会#4
pentake_de
0
150
Other Decks in Design
See All in Design
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
300
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
910
Crafting Blog covers: AI tools vs Human Illustrators. Who is the winner?
strongeron
0
130
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
270
Jeremy's First Day
myates3
1
130
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
580
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
30
2.5k
The Fight
euralisw
0
110
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.6k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
730
root Design Partnership Policy
root_recruit
0
3.9k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
600
Featured
See All Featured
Clear Off the Table
cherdarchuk
83
310k
The Mythical Team-Month
searls
215
42k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Navigating Team Friction
lara
177
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Unsuck your backbone
ammeep
662
57k
Bash Introduction
62gerente
604
210k
In The Pink: A Labor of Love
frogandcode
138
21k
Teambox: Starting and Learning
jrom
128
8.4k
Web Components: a chance to create the future
zenorocha
305
41k
Side Projects
sachag
451
41k
Transcript
։࢝·ͰʹɺԼهΛ͓ࡁ·͍ͤͩ͘͞ʢಈըͷ֓ཁཝʹॻ͍ͯ͋Γ·͢ʣ 2. ΞΧϯτΛ࡞/ϩάΠϯ ݸਓͷΞΧϯτΛ࡞͠ɺϩάΠϯ͍ͯͩ͘͠͞ɻ 1 3. ࢿྉʹΞΫηε connpassͷΠϕϯτϖʔδʹ͋Δʮࢿྉʯ͔ΒɺϓϩδΣΫ τϑΝΠϧΛμϯϩʔυ͍ͯͩ͘͠͞ɻ https://noodl-tokyo.connpass.com/event/156814/
1. Noodl 1.3ΛΠϯετʔϧ https://classic.getnoodl.com/download ⚠ ҟͳΔόʔδϣϯΛμϯϩʔυ͍ͯ͠ͳ͍͔֬ೝΛ͓ئ͍͍ͨ͠·͢ʂ ɹɹ֬ೝํ๏ɿNoodlΛىಈ͠ɺϝχϡʔόʔͷ Noodl ʼ About Application
NoodlͰUIσβΠϯΛ͠Α͏ʂ XD࿈ܞ / ϨΠΞτฤ NOODL BEGINNER COURSE 2
X Μ͚ͨ Noodl SlackίϛϡχςΟӡӦ୲ 3 ̍ਓલͷNoodlerʹͳΔͨΊमߦதɻ ࠷ۙɺIoTʹઓதɻ Twitter @penpenchapen
X πΠʔτେܴͰ͢ʂ 4 #Noodl
X 5 ͓ࢼ͠πΠʔτλΠϜʂ
X 6 ࣭νϟοτཝͰʂ ʁ ʁ ʁ
X 7 ͖ͳ໙ྨʁ YouTubeͷνϟοτʹॻ͖ࠐΜͰΈΑ͏ʂ
X 8 ࠓճͷηϛφʔ BeginnerίʔεͲͪΒ͔Β࢝Ίͯେৎʂ
X 9 ॳΊͯͷਓ͜ͷಈըͷ֓ཁཝ͔ΒΞΫηεʂ
X XDͷσβΠϯσʔλ͔Β NoodlͰ͏ը૾Λॻ͖ग़࣌͢ͷίπ 10
X ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ ̎ɽΞΠίϯനʹ͠Α͏ʂ ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ ̐ɽࣸਅҰ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ NoodlͰ͏ը૾ΛXDͰॻ͖ग़࣌͢ͷ̐ϲʂ
X ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ
X നͰॻ͖ग़͢ͱNOODL্Ͱ৭ΛઃఆͰ͖Δʂ ̎ɽΞΠίϯനʹ͠Α͏ʂ
X ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ ϑΝΠϧ → ॻ͖ग़͠ → બࡁΈ
X ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ Androidͷ߹6छྨॻ͖ग़͞ΕΔɻ 1080x1920ͷ߹xxhdpiͰαΠζͽͬͨΓʂ
X Ұ൪େ͖͍αΠζͷը૾Ͱॻ͖ग़ͤɺ ̍ຕͷը૾ΛNoodlͰ͍ճ͢͜ͱ͕Ͱ͖Δʂ ̐ɽࣸਅҰ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ
X NoodlͰϨΠΞτ͢Δ࣌ʹ ॏཁͳࣝ 17
X 18 UIσβΠϯɺϨΠΞτ͕ॏཁʂ ϨΠΞτ ใͷஔ
X ϨΠΞτɺ 19 ϊʔυͷ ࢠؔ ͺͨͦ͘ʢpakutaso.comʣ Ͱܾ·Δʂʂ
X 20 ࢠʹґଘ ʹґଘ ͜Ε͕ɺࢠؔͷΩϗϯɻ ґଘ͢Δใ ԣ෯ʢWidthʣ ߴ͞ʢHeightʣ X ࣠ͷҐஔʢAlign
Xʣ Y ࣠ͷҐஔʢAlign Yʣ etc…
X 21 ̍൪্ͷϊʔυ ( Root ) ʹ͢Δͱ… ͕͍ͳ͍…ʁ ࢠΛࢀর ̍൪্ͷϊʔυ
( Root ) ͷɺ Project settingsͰઃఆ͞Ε͍ͯΔը໘ͷେ͖͞ɻ
X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛআ͢Δ:
ϊʔυΛબɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 22
X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ༰ΛΓସ͑ΔϘλϯ ߏங͢Δॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε=
ϊʔυ 23
X L001-01 ϨετϥϯΞϓϦ 24
X + Component͔Β৽نComponentͱͯ͠IndexɺMenuΛ࡞ 25 Componentͷ࡞
X GroupͷઃఆͰMenuόʔͷҐஔͱαΠζΛઃఆ͠ɺGroupͱಉ͡αΠζ(100%)ͷRectangleͰྖҬͷ৭Λࢦఆ͢Δ 26 Menu Componentͷதͷ࡞
X ઌ΄ͲͷRectangleͷഎ໘ʢϊʔυͰ্ʣʹOpacityΛബͨ͘͠ࠇ͍RectangleΛૠೖ͢Δ ͞ΒʹBlur LengthͷઃఆͰྠֲΛ΅͔͢͜ͱͰɺന͍Rectangleͷ্෦ʹബ͍ӨΛ࡞Ͱ͖Δ 27 MenuόʔͷӨΛ࡞
X Stack LayoutΛͬͯΞΠίϯΛฒΔɻΞΠίϯ͕എܠͱಉ͡നͩͱݟ͑ͳ͍͜ͱ͕͋ΔͷͰɺഎܠʹ৭Λ͚ͭΔͱ࡞ۀ͍͢͠ ΞΠίϯImageΛ͍ɺ৭ஔΛௐ͢ΔɻΞΠίϯؒStack LayoutͷItem SpacingͰௐ͢Δͱྑ͍ 28 ΞΠίϯͷஔ
X ComponentsͷPagesϑΥϧμʹTopͱ͍͏ComponentΛ࡞͢ΔɻϑΥϧμʹ࡞ΔࡍϑΥϧμӈͷ̏ΞΠίϯ͔Β࡞͢Δ 29 Top Componentͷ࡞
X ࠷ॳͷϊʔυΛPageͰ࡞͢ΔʢGroupͰͳ͍ʣɻͦ͜ʹBackgroundͱͯ͠Rectangleʢബ͍άϨʔʣɺHeaderͱͯ͠Groupɺ ຊจͱͯ͠Scroll ViewΛ࡞͢ΔɻHeader·ͣHeaderΛ࡞Γ͍ͨྖҬΛߟྀͯ͠GroupͷαΠζΛܾΊΔɻ 30 Top Componentͷதͷ࡞
X RectangleͰഎܠ৭Λࢦఆ͢ΔɻImageͰMenuΞΠίϯʢຢͷ໊ΛϋϯόʔΨʔϝχϡʔʣΛஔ͢Δɻ 31 Headerͷഎܠͷ࡞ MenuΞΠίϯͷઃஔ
X Groupͷԣ෯Λ900pxʹઃఆ͠ɺݕࡧ૭ͷྖҬΛ֬อɻ 32 Headerͷݕࡧ૭ͷྖҬΛ࡞
X Search GroupʹRectangleͰݕࡧ૭Λ࡞͢ΔɻSearch GroupͷPaddingΛࢦఆ͢Δ͜ͱͰɺRectangleͷपΓʹ༨നΛ࡞Δ͜ͱ͕Ͱ͖Δ จࣈೖྗՄೳͳςΩετϘοΫεʹText InputΛ͏ɻΞΠίϯςΩετͷҐஔదٓௐ͢Δ 33 ݕࡧ૭(ന෦)ɺςΩετೖྗɺݕࡧΞΠίϯͷઃஔ
X Scroll ViewͷItem SpacingΛ40ʹઃఆ͢ΔɻScroll Direction͕Verticalʹͳ͍ͬͯΔ͜ͱΛ֬ೝ͢ΔɻScroll Viewʹରͯ͠Ϋʔϙϯը૾(Image)ɺ ͱSection1(Group, Height = 1290)ͱSection2(Group,
Content Height)Λ࡞͠ɺ͞ΒʹRectangleΛͬͯനʹ͢Δ 34 Topͷதͷ࡞
X Section1ͷPad TopΛ-40ʹࢦఆ͢Δ͜ͱͰɺͷScroll ViewͰࢦఆͨ͠Item SpacingΛ૬ࡴ͢Δ͜ͱ͕Ͱ͖Δ 35 Paddingͷখٕ
X ͋Β͔͡Ί༻ҙͯ͋͠ΔH6Λૠೖ͠ɺҙͷλΠτϧΛೖྗ͢Δʢϗοτͳ͓ళͷ෦ʣ Scroll Viewͷߴ͞ɾҐஔɾItem SpacingΛࢦఆͯ͠Scroll DirectionΛHorizontalʹ͢Δ ͋Β͔͡Ί༻ҙͯ͋͠ΔCard ItemΛෳૠೖ͠ɺScroll ViewͷPad Left,
Pad RightΛௐ͢Δ 36 Section1ͷதͷ࡞ ԣεΫϩʔϧίϯςϯπ
X Component InputsΛ࡞͠ɺ+PortͰ3ͭPortΛ࡞͢Δɻ(Title, Img, text) ˎPortΛ࡞͢ΔͱComponent Inputs͔ΒNoodlΛҾͬுΕΔΑ͏ʹͳΔ ্ਤͷΑ͏ʹNoodlΛଓ͢Δ͜ͱͰɺComponentͷ֎෦͔Β֤ϊʔυͷύϥϝʔλΛมߋͰ͖ΔΑ͏ʹͳΔ 37 Card
Itemͷதͷ࡞ ֎෦͔ΒதΛૢ࡞Ͱ͖ΔޱΛ։͚Δ
X Component OutputsΛ࡞͠ɺ+PortͰ1ͭPortΛ࡞͢Δ(tap)ɻComponent ChildrenΛStack LayoutʹͿΒ͛͞Δɻ ͜ΕʹΑΓɺCard Item Componentͷ֎ʹͿΒ͛ͨ͞ϊʔυ͕͜͜ʹͿΒ͕ͬͨ࣌͞ͱಉ͡ڍಈʹͳΔ 38 Card
Itemͷதͷ࡞ ֎෦͔ΒதΛૢ࡞Ͱ͖ΔޱΛ։͚Δ
X TopʹΓɺCard ItemʹඞཁͳTagΛૠೖ͢ΔɻCard ItemͱTagͷ༰Λฤूͯ͠ҰͭҰͭͷ͓ళʹ߹Θͤͨใʹॻ͖͑Δ ˎ͜͜ͰલϖʔδͷComponent Children͕ͳ͍ͱTagΛૠೖ͢Δ͜ͱ͕Ͱ͖ͳ͍ 39 Card Itemͷը૾આ໌ͷมߋɺTag͚
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ͷॳظҐஔͷઃఆ
X Section2ʹStack LayoutΛͬͯH6, Card Item2Λૠೖ͢Δɻ͜ͷ࣌Item SpacingΛۭ͚Δͱݟӫ͕͑ྑ͍ Card Item2͕ܨ͕͍ͬͯͬͨߴ͕͞ಡΊͳ͍ͷͰɺStack LayoutͷSize ModeΛContent
Heightʹͯ͠ॊೈʹ͓ͯ͘͠ 41 Section2ͷ࡞
X HeaderͷHeightΛScroll ViewͷPad Topʹܨ͙ͱ HeaderͰઃఆ͕ͨ͠Scroll Viewͷʹө͞ΕΔΑ͏ʹͳΔ 42 Headerͷߴ͞Λࢀরͯ͠Scroll ViewͷҐஔΛௐ͢Δ
X Scroll ViewͱHeaderͷॱ൪ΛೖΕସ͑Δ ˎԼʹ͋Δϊʔυͷํ͕ϓϨϏϡʔͰखલʹ͘ΔɻHeaderΛखલʹ͢Δ 43 HeaderͱScroll ViewͷલޙؔΛमਖ਼͢Δ
X IndexͷதʹRoot(Group), Pages, MenuΛ্ਤͷΑ͏ʹ࡞͢Δ PagesͷStart Pageͱͯ͠TopΛબͿ 44 IndexΛ࡞͢Δ
X ComponentͷPagesϑΥϧμͷதʹTopͱಉ͡Α͏ʹRestaurant ComponentΛ࡞͢Δ(P.10) ্ਤͷΑ͏ʹϊʔυΛஔͯ͠ɺഎܠͷRectangleɺScroll ViewɺImageɺTextΛ࡞͢Δ TextΛGroupʹೖΕͯPaddingΛ͢ΔͱTextʹ༨നΛ࡞ΕΔ 45 Restaurantϖʔδͷ࡞
X ΔϘλϯ120 x 120ͷྖҬΛGroupͰ࡞͔ͬͯΒImageΛૠೖͯ͠࡞͢Δ 46 ΔϘλϯͷ࡞
X Card Item3ΛScroll Viewʹૠೖ͠ɺTagΛ͚ͭΔ ˎCard Item3͕ࣸਅʹඃ͍ͬͯΔͷCard Item3ͷҰ൪্ͷGroup͕Pad Top -300ͱࢦఆ͍ͯ͠ΔͨΊͰ͢ 47
Card ItemͱTagͷ࡞
X Flow LayoutΛ༻͍ͯImageΛฒΔɻHeight 800 px 48 ը૾ΛྻͰฒΔ
X ը૾SizeΛ360 x 360 pxɺFill ModeΛAspect Fillʹ͢Δ ˎFill Mode৭ʑࢼͯ͠Έ͍ͯͩ͘͞ɻFill ModeΛมߋͨ͠ࡍߋ৽͕ඞཁͰ͢
49 ը૾Λมߋͯ͑͠Δ
X TopʹΓPage NavigationΛ࡞͠ɺDestinationʹRestaurantΛઃఆ͢Δ Index 2ͷCard Itemͷtap͔ΒPage NavigationͷNavigate To Pageʹଓ͢Δ 50
Top͔ΒRestaurantʹϖʔδભҠΛઃఆ͢Δ
X RestaurantʹΓPage Navigation BackΛ࡞͢Δ ΔϘλϯͷGroupͷTap͔ΒPage Navigation BackͷBackʹଓ͢Δ ˎˎϓϨϏϡʔΛIndexͷRoot Groupʹ͢ΕͰ͢ˎˎ 51
RestaurantϖʔδͷΔϘλϯΛઃఆ͢Δ
X Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 52
X ͓Βͤ 53
X 54 1/17 ʢۚʣ19:00 - 21:00 2020ͷӡΛNoodlͰ͓͏ɻ
X ʲίϛϡχςΟࢀՃͷྲྀΕʳ ɹ̍ɽQRίʔυεΩϟϯ ɹɹɹɹɹɹor ɹɹɹhttps://bit.ly/2kSq3xw ΞΫηε ɹ̎ɽϝʔϧΞυϨεͷೖྗ ɹ̏ɽೝূ༻ϝʔϧʹهࡌͷURLΞΫηε ɹ̐ɽύεϫʔυͱϢʔβʔωʔϜΛઃఆ ʲSlackʳNoodlίϛϡχςΟͷ͝ট
SlackʹNoodlͷίϛϡχςΟ͕͍͟͝·͢ɻ ຊ͝ग़੮ͷօ༷ͱڞʹίϛϡχςΟΛΓ্͛ͯ ͍͚Εͱߟ͓͑ͯΓ·͢ɻੋඇɺ͝ࢀՃ͍ͩ͘͞ʂ 55 # ͭͬͯ͘Έͨ # Πϕϯτใ # noodlܙା
X 56 Twitter
X 57 Qiita Noodl Advent Calendar 2019 https://qiita.com/advent-calendar/2019/noodl ཁνΣοΫʂʂʂ
X ͜ͷಈը ޙͰΞʔΧΠϒͱ ͯ͠ݟΒΕ·͢ʂ 58
X THANK YOU! 59