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
Design Leadership in Challenging Times
morganepeng
3
300
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
120
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
180
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
170
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
500
文化に寄りそうデザイン
recruitengineers
PRO
4
920
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
Ride or Die Animatics
warwatkar
0
140
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
190
他人事じゃないWebアクセシビリティ入門
arihiro17
0
230
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.9k
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
4.8k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Clear Off the Table
cherdarchuk
85
310k
Faster Mobile Websites
deanohume
300
30k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Facilitating Awesome Meetings
lara
43
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Documentation Writing (for coders)
carmenintech
61
4k
BBQ
matthewcrist
80
8.8k
Web development in the modern age
philhawksworth
203
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
5
3.4k
Music & Morning Musume
bryan
41
5.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