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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
240
Drawing for Animation
lynteo
2
190
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
1
670
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
570
【サイバーエージェント】Creative Switch 会社説明資料
cyberagent_creators
0
5.1k
はじめての演奏会フライヤーデザイン
chorkaichan
1
220
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
510
Figmaレクチャー会Part1 基本のき編@千株式会社 社内勉強会
designer_no_pon
2
250
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.8k
hicard_credential_202601
hicard
0
150
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
1
370
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
140
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.2k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
37k
Tell your own story through comics
letsgokoyo
1
810
Design in an AI World
tapps
0
140
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
69
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
430
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
76
Amusing Abliteration
ianozsvald
0
100
Become a Pro
speakerdeck
PRO
31
5.8k
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