L002_20190828_BeginnerCourse.pdf

爆速プロトタイピングツールNoodlでUIデザインをしよう！（2/2）

Transcript

1. X 1
2. ര଎ϓϩτλΠϐϯάπʔϧNoodlͰ UIσβΠϯΛ͠Α͏ʂʢ2/2ʣ NOODL BEGINNER COURSE 2
3. X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛ࡟আ͢Δ: ϊʔυΛબ୒ɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબ୒ɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 3
4. X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ಺༰Λ੾Γସ͑ΔϘλϯ ߏங͢Δ৔ॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε= ϊʔυ 4
5. X L002 ίοΫϐοτΞϓϦ ΠϯϑΥάϥϑΟοΫˍλονΠϕϯτ 5
6. X ࠓճ͸QXGA(2048 x 1536: iPadͳͲͰ࠾༻͞Ε͍ͯΔʣʹ͢Δ 6 Project settingsͷ֬ೝ
7. X طଘͷComponentΛద౰ͳ৔ॴʹDrag & Drop͔ͯ͠ΒRootʹ௥Ճ͢Δ 7 Componentͷ഑ஔ
8. X Data and TimesΛComponentҰཡ͔ΒD&D͢Δ String Formatʹ{h}:{m}:{s}ͱೖྗ͠ɺ00:00:00ͱදࣔͰ͖ΔΑ͏ʹ͢Δ 8 Time Component ͷத਎ͷ࡞੒
9. X Data and Time͔ΒString Formatʹ઀ଓ͢ΔɻHour → h, Minute → m, Second → s String Format͔ΒTextʹ઀ଓ͢Δɻ Formatted → Text 9 Componentͷ઀ଓ
10. X Direction ComponentͷதͷGroupʹImageͰConpass.pngΛૠೖ͢Δ Image͔ΒGroupʹHeight → Height, Width → Widthͱ઀ଓ͢Δ͜ͱͰɺImageͷαΠζͱGroupͷαΠζΛҰகͤ͞Δ 10 DirectionͷConpass࡞੒
11. X ্ਤͷΑ͏ʹGroupͱImageΛ௥Ճ͢ΔɻPosition YΛௐ੔ͯ͠Ϩʔμʔͷઌ୺͕தԝʹҐஔ͢ΔΑ͏ʹ͢Δ Component InputsͷdirectionΛԼͷGroupͷRotation ZɺdistinationΛImage(Conpass.png)ͷRotation Zʹ઀ଓ͢Δ 11 Ճ଎౓Ͱճస͢Δઃఆ
12. X Device OrientationͱNumber RemapperΛ༻ҙ͠ɺRotation Y → Input ValueɺRemapped Value → directionͱ઀ଓ͢Δ Number RemapperʹΑΓσόΠεͷRotation Y -80ʙ80Λdirectionͷ0ʙ360ʹରԠͤ͞Δ͜ͱ͕Ͱ͖Δ 12 σόΠεͷՃ଎౓Λೖྗ͠ɺ஋ͷൣғΛ੔͑Δ
13. X Image͔ΒGroupʹରͯ͠Height → Height, Width → WidthΛ઀ଓͯ͠αΠζΛ߹ΘͤΔ CircleΛૠೖ্ͯ͠ਤͷΑ͏ʹύϥϝʔλઃఆΛ͢ΔɻSolidͷνΣοΫΛ֎͢͜ͱͰϑν͚ͩͷԁʹͳΔɻҐஔΛඍௐ੔͢Δ 13 αΠζௐ੔ͱϝʔλʔͷ௥Ճ
14. X ಺ଆͷϝʔλʔ༻ʹCircleΛ΋͏Ұͭ࡞ΔɻͦΕͧΕͷCircleͷArc Angleʹରͯ͠ Component Inputsͷengine, speedfΛ઀ଓ͢Δ ͜͜ʹ֎෦͔ΒσʔλΛ઀ଓ͢Δ͜ͱͰɺϝʔλʔͷArc Angle͕ϦΞϧλΠϜʹมԽ͢ΔΑ͏ʹͳΔ 14 ಺ଆͷϝʔλʔͷ࡞੒ͱ σʔλͷ൓ө
15. X Vehicle DataΛը໘ʹD&Dͯ͠ɺ্ਤͷΑ͏ʹϊʔυΛ઀ଓ͢Δ Vehicle Data͸ࠓճͷͨΊʹϥϯμϜͳ஋Λు͖ग़͢ComponentΛ༻ҙͨ͠΋ͷͰ ࣮ࡍʹ͸MQTTͳͲΛհ࣮ͯ͠σʔλΛऔಘ͢Δ͜ͱ΋Ͱ͖Δ 15 ࣮σʔλʢࠓճ͸μϛʔʣΛ൓ө͢Δ
16. X Bar GraphͷதͷGroupͷԼʹStack LayoutͰgraph itemΛ௥Ճ͢Δ graph item͸๮άϥϑͱԼͷຌྫΛࣔ͢΋ͷͰ͋Γɺॱ൪ʹؾମ੒෼Λ໊෇͚͓ͯ͘ 16 Bar Graphͷத਎Λ࡞੒͢Δ
17. X Air condition Data͔Β֤graph itemʹରͯ͠઀ଓ͢Δ ˎco2͸Co2ͷnumʹ઀ଓ͢Δ 17 ࣮σʔλʢμϛʔσʔλʣͷ઀ଓ
18. X GroupͱRectangleΛ࡞੒͢ΔɻRectangleͷHeightΛখ͘͢͞Δ͜ͱͰϥΠϯΛදݱ͢Δ Groupͷશ෯ʹରͯ͠LineΛগ͠খ͞Ίʹ࡞Δͱޙ΄ͲͷΧʔιϧΛى͖΍͘͢ͳΔ 18 Control Panel಺ͷ࡞੒ εϥΠυόʔ༻ͷϥΠϯ࡞੒
19. X GroupͱRectangleΛ࡞੒͢ΔɻRectangleΛ࠷దͳαΠζʹͯ͠Χʔιϧͱ͢Δ Group͸ΧʔιϧΑΓগ͠େ͖Ίʹ࡞Δͱλονݕग़ൣғ͕େ͖͘ͳΓ࢖͍΍͘͢ͳΔ 19 Control Panel಺ͷ࡞੒ εϥΠυόʔ༻ͷΧʔιϧ࡞੒
20. X ΧʔιϧͷGroup͔ΒDragʹରͯ͠This → Targetͱ઀ଓ͢Δ͜ͱͰɺGroup͕υϥοάՄೳʹͳΔ υϥοάൣғΛࢦఆ͢ΔͨΊʹLineͷWidthΛDragͷEndʹ઀ଓ͢Δ 20 εϥΠυόʔΛυϥοάͰ͖ΔΑ͏ʹ͢Δ
21. X Number RemapperΛ࢖͏͜ͱͰ0ʙ700ͷεϥΠμʔҐஔΛ0ʙ1ʹஔ͖׵͑Δ Position X → Input Value, Remapped Value → Barͱ઀ଓ͢Δ 21 εϥΠμʔҐஔΛଞͰ΋׆༻Ͱ͖ΔΑ͏ʹ֎ʹग़͢
22. X EmergencyϘλϯΛImageͰ࡞੒͠ɺComponent OutputsͷEmergencyʹ઀ଓ͢Δ ˎ͜ͷϘλϯΛԡ͢ͱԿ͕ى͜Δ͔͸ࣗ༝ʹ࡞੒͢Δ 22 EmergencyϘλϯΛ࡞੒͢Δ
23. X എܠΠϝʔδͷ਌ʹEffect groupΛૠೖ͠ɺStandard Effectͱͯ͠Gaussian BlurΛબ୒͢Δ ControlPanelͷBarΛEffect groupͷEffect Amountʹ઀ଓ͢Δ͜ͱͰΧʔιϧͷ࠲ඪ͕ΤϑΣΫτͷڧ౓ʹ൓ө͞ΕΔΑ͏ʹͳΔ 23
24. X TimeͷԼʹGroupͱImageΛૠೖ͢Δ 24 UFOͷ࡞੒
25. X Touch PositionΛ࢖͏ͱλονͨ͠࠲ඪΛऔಘͰ͖Δ Position Yʹؔͯ͠͸1100ΑΓԼʹߦͬͨ৔߹ʹ1100ʹ͢ΔͨΊNumber RimapperͷClamp OutputΛ࢖͏ 25 λονϙδγϣϯͷ൓ө
26. X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 26