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
160
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
240
NoodlとXDを一緒に使うときのコツ
pentake
0
230
Other Decks in Design
See All in Design
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
1
670
これからの「Webデザイン」の話をしよう~デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値~
ds35mm
0
550
Liquid GlassとApp Intents
touyou
0
810
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
0
1.2k
DMMデザイナーの “AI活用の現在と未来”
takumasaito
1
450
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
290
第18回サイゼミ
lw
1
3.3k
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
850
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
300
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
pixyzehn
0
130
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
140
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
280
Featured
See All Featured
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
Why Our Code Smells
bkeepers
PRO
340
58k
Utilizing Notion as your number one productivity tool
mfonobong
3
220
New Earth Scene 8
popppiees
1
1.5k
Balancing Empowerment & Direction
lara
5
890
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
50k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
86
Java REST API Framework Comparison - PWX 2021
mraible
34
9.1k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
650
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