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
20190828 Beginner Course (2/2)
Search
Take
August 28, 2019
Design
3
150
20190828 Beginner Course (2/2)
Take
August 28, 2019
Tweet
Share
More Decks by Take
See All by Take
20190821 Beginner Course (1/2)
pentake
0
220
NoodlとXDを一緒に使うときのコツ
pentake
0
200
Other Decks in Design
See All in Design
PRDがデザインプロセスを高速化した話
tooomo
1
320
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
2
170
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
MiKS inc. Company PR en_202404
zakkerooni
0
160
Web 組版の課題とその解法
yamatoiizuka
0
110
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
Wishing Star Comic
torije
2
1.2k
1人歩きする営業資料作成
yutoshukuya
0
150
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
プロダクトデザインは子育て/Product design is parenting
medley
0
300
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
310
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
43
6.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Happy Clients
brianwarren
92
6.4k
Building Your Own Lightsaber
phodgson
99
5.7k
Designing Experiences People Love
moore
136
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Testing 201, or: Great Expectations
jmmastey
28
6.3k
Visualization
eitanlees
136
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Gamification - CAS2011
davidbonilla
76
4.6k
Transcript
X 1
രϓϩτλΠϐϯάπʔϧNoodlͰ UIσβΠϯΛ͠Α͏ʂʢ2/2ʣ NOODL BEGINNER COURSE 2
X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛআ͢Δ:
ϊʔυΛબɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 3
X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ༰ΛΓସ͑ΔϘλϯ ߏங͢Δॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε=
ϊʔυ 4
X L002 ίοΫϐοτΞϓϦ ΠϯϑΥάϥϑΟοΫˍλονΠϕϯτ 5
X ࠓճQXGA(2048 x 1536: iPadͳͲͰ࠾༻͞Ε͍ͯΔʣʹ͢Δ 6 Project settingsͷ֬ೝ
X طଘͷComponentΛదͳॴʹDrag & Drop͔ͯ͠ΒRootʹՃ͢Δ 7 Componentͷஔ
X Data and TimesΛComponentҰཡ͔ΒD&D͢Δ String Formatʹ{h}:{m}:{s}ͱೖྗ͠ɺ00:00:00ͱදࣔͰ͖ΔΑ͏ʹ͢Δ 8 Time Component ͷதͷ࡞
X Data and Time͔ΒString Formatʹଓ͢ΔɻHour → h, Minute → m,
Second → s String Format͔ΒTextʹଓ͢Δɻ Formatted → Text 9 Componentͷଓ
X Direction ComponentͷதͷGroupʹImageͰConpass.pngΛૠೖ͢Δ Image͔ΒGroupʹHeight → Height, Width → Widthͱଓ͢Δ͜ͱͰɺImageͷαΠζͱGroupͷαΠζΛҰகͤ͞Δ 10
DirectionͷConpass࡞
X ্ਤͷΑ͏ʹGroupͱImageΛՃ͢ΔɻPosition YΛௐͯ͠Ϩʔμʔͷઌ͕தԝʹҐஔ͢ΔΑ͏ʹ͢Δ Component InputsͷdirectionΛԼͷGroupͷRotation ZɺdistinationΛImage(Conpass.png)ͷRotation Zʹଓ͢Δ 11 ՃͰճస͢Δઃఆ
X Device OrientationͱNumber RemapperΛ༻ҙ͠ɺRotation Y → Input ValueɺRemapped Value →
directionͱଓ͢Δ Number RemapperʹΑΓσόΠεͷRotation Y -80ʙ80Λdirectionͷ0ʙ360ʹରԠͤ͞Δ͜ͱ͕Ͱ͖Δ 12 σόΠεͷՃΛೖྗ͠ɺͷൣғΛ͑Δ
X Image͔ΒGroupʹରͯ͠Height → Height, Width → WidthΛଓͯ͠αΠζΛ߹ΘͤΔ CircleΛૠೖ্ͯ͠ਤͷΑ͏ʹύϥϝʔλઃఆΛ͢ΔɻSolidͷνΣοΫΛ֎͢͜ͱͰϑν͚ͩͷԁʹͳΔɻҐஔΛඍௐ͢Δ 13 αΠζௐͱϝʔλʔͷՃ
X ଆͷϝʔλʔ༻ʹCircleΛ͏Ұͭ࡞ΔɻͦΕͧΕͷCircleͷArc Angleʹରͯ͠ Component Inputsͷengine, speedfΛଓ͢Δ ͜͜ʹ֎෦͔ΒσʔλΛଓ͢Δ͜ͱͰɺϝʔλʔͷArc Angle͕ϦΞϧλΠϜʹมԽ͢ΔΑ͏ʹͳΔ 14 ଆͷϝʔλʔͷ࡞ͱ
σʔλͷө
X Vehicle DataΛը໘ʹD&Dͯ͠ɺ্ਤͷΑ͏ʹϊʔυΛଓ͢Δ Vehicle DataࠓճͷͨΊʹϥϯμϜͳΛు͖ग़͢ComponentΛ༻ҙͨ͠ͷͰ ࣮ࡍʹMQTTͳͲΛհ࣮ͯ͠σʔλΛऔಘ͢Δ͜ͱͰ͖Δ 15 ࣮σʔλʢࠓճμϛʔʣΛө͢Δ
X Bar GraphͷதͷGroupͷԼʹStack LayoutͰgraph itemΛՃ͢Δ graph itemάϥϑͱԼͷຌྫΛࣔ͢ͷͰ͋Γɺॱ൪ʹؾମΛ໊͚͓ͯ͘ 16 Bar GraphͷதΛ࡞͢Δ
X Air condition Data͔Β֤graph itemʹରͯ͠ଓ͢Δ ˎco2Co2ͷnumʹଓ͢Δ 17 ࣮σʔλʢμϛʔσʔλʣͷଓ
X GroupͱRectangleΛ࡞͢ΔɻRectangleͷHeightΛখ͘͢͞Δ͜ͱͰϥΠϯΛදݱ͢Δ Groupͷશ෯ʹରͯ͠LineΛগ͠খ͞Ίʹ࡞Δͱޙ΄ͲͷΧʔιϧΛى͖͘͢ͳΔ 18 Control Panelͷ࡞ εϥΠυόʔ༻ͷϥΠϯ࡞
X GroupͱRectangleΛ࡞͢ΔɻRectangleΛ࠷దͳαΠζʹͯ͠Χʔιϧͱ͢Δ GroupΧʔιϧΑΓগ͠େ͖Ίʹ࡞Δͱλονݕग़ൣғ͕େ͖͘ͳΓ͍͘͢ͳΔ 19 Control Panelͷ࡞ εϥΠυόʔ༻ͷΧʔιϧ࡞
X ΧʔιϧͷGroup͔ΒDragʹରͯ͠This → Targetͱଓ͢Δ͜ͱͰɺGroup͕υϥοάՄೳʹͳΔ υϥοάൣғΛࢦఆ͢ΔͨΊʹLineͷWidthΛDragͷEndʹଓ͢Δ 20 εϥΠυόʔΛυϥοάͰ͖ΔΑ͏ʹ͢Δ
X Number RemapperΛ͏͜ͱͰ0ʙ700ͷεϥΠμʔҐஔΛ0ʙ1ʹஔ͖͑Δ Position X → Input Value, Remapped Value
→ Barͱଓ͢Δ 21 εϥΠμʔҐஔΛଞͰ׆༻Ͱ͖ΔΑ͏ʹ֎ʹग़͢
X EmergencyϘλϯΛImageͰ࡞͠ɺComponent OutputsͷEmergencyʹଓ͢Δ ˎ͜ͷϘλϯΛԡ͢ͱԿ͕ى͜Δ͔ࣗ༝ʹ࡞͢Δ 22 EmergencyϘλϯΛ࡞͢Δ
X എܠΠϝʔδͷʹEffect groupΛૠೖ͠ɺStandard Effectͱͯ͠Gaussian BlurΛબ͢Δ ControlPanelͷBarΛEffect groupͷEffect Amountʹଓ͢Δ͜ͱͰΧʔιϧͷ࠲ඪ͕ΤϑΣΫτͷڧʹө͞ΕΔΑ͏ʹͳΔ 23
X TimeͷԼʹGroupͱImageΛૠೖ͢Δ 24 UFOͷ࡞
X Touch PositionΛ͏ͱλονͨ͠࠲ඪΛऔಘͰ͖Δ Position Yʹؔͯ͠1100ΑΓԼʹߦͬͨ߹ʹ1100ʹ͢ΔͨΊNumber RimapperͷClamp OutputΛ͏ 25 λονϙδγϣϯͷө
X Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 26