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
20191218 Beginnerコース@オンライン (1/2)
Search
pentake
December 18, 2019
Design
3
220
20191218 Beginnerコース@オンライン (1/2)
YouTubeでライブ配信されたNoodl Beginnerコースの資料です。
pentake
December 18, 2019
Tweet
Share
More Decks by pentake
See All by pentake
20201111_Noodl_ver2.1_hands-on
pentake_de
0
200
20201104_OpenWeatherMap_API
pentake_de
0
100
20201028_VIoTLT_vol.5_今、リモート会議中かどうかを家族に伝えてみた
pentake_de
0
290
20201027_FGDC_LowCodeプラットフォームNoodlでブラウザゲーム開発!
pentake_de
0
140
20200708_おやこテックLT_MakeCodeで神隠し
pentake_de
1
140
20200325_Noodl_v2_hands-on_スライド資料
pentake_de
1
270
20200323_OpenWeatherMap_API
pentake_de
1
320
Noodlもくもく会#4
pentake_de
0
170
Other Decks in Design
See All in Design
富山デザイン勉強会-2024年デザイントレンド.pdf
keita_yoshikawa
2
130
Sensitive Texter Storyboard
ctagulao98
0
160
Sociotechnical design for software and human systems
xinyao
2
560
AIイラスト生成・編集テクニック紹介
piyo7
2
160
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
100
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
1
290
Minuto de Aventura
olgastoryboard
0
110
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
4.3k
他人事じゃないWebアクセシビリティ入門
arihiro17
0
370
インターフェースのユーザビリティ概論および調査手法について
readymadegogo
0
130
Information Architects: The Missing Link in Design Systems
soysaucechin
0
190
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
220
Featured
See All Featured
A better future with KSS
kneath
231
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Fireside Chat
paigeccino
25
2.8k
In The Pink: A Labor of Love
frogandcode
139
22k
Automating Front-end Workflow
addyosmani
1362
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
What the flash - Photography Introduction
edds
65
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
How to name files
jennybc
67
96k
Done Done
chrislema
179
15k
Agile that works and the tools we love
rasmusluckow
325
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Transcript
։࢝·ͰʹɺԼهΛ͓ࡁ·͍ͤͩ͘͞ʢಈըͷ֓ཁཝʹॻ͍ͯ͋Γ·͢ʣ 2. ΞΧϯτΛ࡞/ϩάΠϯ ݸਓͷΞΧϯτΛ࡞͠ɺϩάΠϯ͍ͯͩ͘͠͞ɻ 1 3. ࢿྉʹΞΫηε connpassͷΠϕϯτϖʔδʹ͋Δʮࢿྉʯ͔ΒɺϓϩδΣΫ τϑΝΠϧΛμϯϩʔυ͍ͯͩ͘͠͞ɻ https://noodl-tokyo.connpass.com/event/156814/
1. Noodl 1.3ΛΠϯετʔϧ https://classic.getnoodl.com/download ⚠ ҟͳΔόʔδϣϯΛμϯϩʔυ͍ͯ͠ͳ͍͔֬ೝΛ͓ئ͍͍ͨ͠·͢ʂ ɹɹ֬ೝํ๏ɿNoodlΛىಈ͠ɺϝχϡʔόʔͷ Noodl ʼ About Application
NoodlͰUIσβΠϯΛ͠Α͏ʂ XD࿈ܞ / ϨΠΞτฤ NOODL BEGINNER COURSE 2
X Μ͚ͨ Noodl SlackίϛϡχςΟӡӦ୲ 3 ̍ਓલͷNoodlerʹͳΔͨΊमߦதɻ ࠷ۙɺIoTʹઓதɻ Twitter @penpenchapen
X πΠʔτେܴͰ͢ʂ 4 #Noodl
X 5 ͓ࢼ͠πΠʔτλΠϜʂ
X 6 ࣭νϟοτཝͰʂ ʁ ʁ ʁ
X 7 ͖ͳ໙ྨʁ YouTubeͷνϟοτʹॻ͖ࠐΜͰΈΑ͏ʂ
X 8 ࠓճͷηϛφʔ BeginnerίʔεͲͪΒ͔Β࢝Ίͯେৎʂ
X 9 ॳΊͯͷਓ͜ͷಈըͷ֓ཁཝ͔ΒΞΫηεʂ
X XDͷσβΠϯσʔλ͔Β NoodlͰ͏ը૾Λॻ͖ग़࣌͢ͷίπ 10
X ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ ̎ɽΞΠίϯനʹ͠Α͏ʂ ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ ̐ɽࣸਅҰ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ NoodlͰ͏ը૾ΛXDͰॻ͖ग़࣌͢ͷ̐ϲʂ
X ̍ɽॻ͖ग़͢ը૾ΛܾΊΑ͏ʂ
X നͰॻ͖ग़͢ͱNOODL্Ͱ৭ΛઃఆͰ͖Δʂ ̎ɽΞΠίϯനʹ͠Α͏ʂ
X ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ ϑΝΠϧ → ॻ͖ग़͠ → બࡁΈ
X ̏ɽ·ͱΊͯॻ͖ग़ͦ͏ʂ Androidͷ߹6छྨॻ͖ग़͞ΕΔɻ 1080x1920ͷ߹xxhdpiͰαΠζͽͬͨΓʂ
X Ұ൪େ͖͍αΠζͷը૾Ͱॻ͖ग़ͤɺ ̍ຕͷը૾ΛNoodlͰ͍ճ͢͜ͱ͕Ͱ͖Δʂ ̐ɽࣸਅҰ൪େ͖͍αΠζͰॻ͖ग़ͦ͏ʂ
X NoodlͰϨΠΞτ͢Δ࣌ʹ ॏཁͳࣝ 17
X 18 UIσβΠϯɺϨΠΞτ͕ॏཁʂ ϨΠΞτ ใͷஔ
X ϨΠΞτɺ 19 ϊʔυͷ ࢠؔ ͺͨͦ͘ʢpakutaso.comʣ Ͱܾ·Δʂʂ
X 20 ࢠʹґଘ ʹґଘ ͜Ε͕ɺࢠؔͷΩϗϯɻ ґଘ͢Δใ ԣ෯ʢWidthʣ ߴ͞ʢHeightʣ X ࣠ͷҐஔʢAlign
Xʣ Y ࣠ͷҐஔʢAlign Yʣ etc…
X 21 ̍൪্ͷϊʔυ ( Root ) ʹ͢Δͱ… ͕͍ͳ͍…ʁ ࢠΛࢀর ̍൪্ͷϊʔυ
( Root ) ͷɺ Project settingsͰઃఆ͞Ε͍ͯΔը໘ͷେ͖͞ɻ
X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛআ͢Δ:
ϊʔυΛબɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 22
X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ༰ΛΓସ͑ΔϘλϯ ߏங͢Δॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε=
ϊʔυ 23
X L001-01 ϨετϥϯΞϓϦ 24
X + Component͔Β৽نComponentͱͯ͠IndexɺMenuΛ࡞ 25 Componentͷ࡞
X GroupͷઃఆͰMenuόʔͷҐஔͱαΠζΛઃఆ͠ɺGroupͱಉ͡αΠζ(100%)ͷRectangleͰྖҬͷ৭Λࢦఆ͢Δ 26 Menu Componentͷதͷ࡞
X ઌ΄ͲͷRectangleͷഎ໘ʢϊʔυͰ্ʣʹOpacityΛബͨ͘͠ࠇ͍RectangleΛૠೖ͢Δ ͞ΒʹBlur LengthͷઃఆͰྠֲΛ΅͔͢͜ͱͰɺന͍Rectangleͷ্෦ʹബ͍ӨΛ࡞Ͱ͖Δ 27 MenuόʔͷӨΛ࡞
X Stack LayoutΛͬͯΞΠίϯΛฒΔɻΞΠίϯ͕എܠͱಉ͡നͩͱݟ͑ͳ͍͜ͱ͕͋ΔͷͰɺഎܠʹ৭Λ͚ͭΔͱ࡞ۀ͍͢͠ ΞΠίϯImageΛ͍ɺ৭ஔΛௐ͢ΔɻΞΠίϯؒStack LayoutͷItem SpacingͰௐ͢Δͱྑ͍ 28 ΞΠίϯͷஔ
X ComponentsͷPagesϑΥϧμʹTopͱ͍͏ComponentΛ࡞͢ΔɻϑΥϧμʹ࡞ΔࡍϑΥϧμӈͷ̏ΞΠίϯ͔Β࡞͢Δ 29 Top Componentͷ࡞
X ࠷ॳͷϊʔυΛPageͰ࡞͢ΔʢGroupͰͳ͍ʣɻͦ͜ʹBackgroundͱͯ͠Rectangleʢബ͍άϨʔʣɺHeaderͱͯ͠Groupɺ ຊจͱͯ͠Scroll ViewΛ࡞͢ΔɻHeader·ͣHeaderΛ࡞Γ͍ͨྖҬΛߟྀͯ͠GroupͷαΠζΛܾΊΔɻ 30 Top Componentͷதͷ࡞
X RectangleͰഎܠ৭Λࢦఆ͢ΔɻImageͰMenuΞΠίϯʢຢͷ໊ΛϋϯόʔΨʔϝχϡʔʣΛஔ͢Δɻ 31 Headerͷഎܠͷ࡞ MenuΞΠίϯͷઃஔ
X Groupͷԣ෯Λ900pxʹઃఆ͠ɺݕࡧ૭ͷྖҬΛ֬อɻ 32 Headerͷݕࡧ૭ͷྖҬΛ࡞
X Search GroupʹRectangleͰݕࡧ૭Λ࡞͢ΔɻSearch GroupͷPaddingΛࢦఆ͢Δ͜ͱͰɺRectangleͷपΓʹ༨നΛ࡞Δ͜ͱ͕Ͱ͖Δ จࣈೖྗՄೳͳςΩετϘοΫεʹText InputΛ͏ɻΞΠίϯςΩετͷҐஔదٓௐ͢Δ 33 ݕࡧ૭(ന෦)ɺςΩετೖྗɺݕࡧΞΠίϯͷઃஔ
X Scroll ViewͷItem SpacingΛ40ʹઃఆ͢ΔɻScroll Direction͕Verticalʹͳ͍ͬͯΔ͜ͱΛ֬ೝ͢ΔɻScroll Viewʹରͯ͠Ϋʔϙϯը૾(Image)ɺ ͱSection1(Group, Height = 1290)ͱSection2(Group,
Content Height)Λ࡞͠ɺ͞ΒʹRectangleΛͬͯനʹ͢Δ 34 Topͷதͷ࡞
X Section1ͷPad TopΛ-40ʹࢦఆ͢Δ͜ͱͰɺͷScroll ViewͰࢦఆͨ͠Item SpacingΛ૬ࡴ͢Δ͜ͱ͕Ͱ͖Δ 35 Paddingͷখٕ
X ͋Β͔͡Ί༻ҙͯ͋͠ΔH6Λૠೖ͠ɺҙͷλΠτϧΛೖྗ͢Δʢϗοτͳ͓ళͷ෦ʣ Scroll Viewͷߴ͞ɾҐஔɾItem SpacingΛࢦఆͯ͠Scroll DirectionΛHorizontalʹ͢Δ ͋Β͔͡Ί༻ҙͯ͋͠ΔCard ItemΛෳૠೖ͠ɺScroll ViewͷPad Left,
Pad RightΛௐ͢Δ 36 Section1ͷதͷ࡞ ԣεΫϩʔϧίϯςϯπ
X Component InputsΛ࡞͠ɺ+PortͰ3ͭPortΛ࡞͢Δɻ(Title, Img, text) ˎPortΛ࡞͢ΔͱComponent Inputs͔ΒNoodlΛҾͬுΕΔΑ͏ʹͳΔ ্ਤͷΑ͏ʹNoodlΛଓ͢Δ͜ͱͰɺComponentͷ֎෦͔Β֤ϊʔυͷύϥϝʔλΛมߋͰ͖ΔΑ͏ʹͳΔ 37 Card
Itemͷதͷ࡞ ֎෦͔ΒதΛૢ࡞Ͱ͖ΔޱΛ։͚Δ
X Component OutputsΛ࡞͠ɺ+PortͰ1ͭPortΛ࡞͢Δ(tap)ɻComponent ChildrenΛStack LayoutʹͿΒ͛͞Δɻ ͜ΕʹΑΓɺCard Item Componentͷ֎ʹͿΒ͛ͨ͞ϊʔυ͕͜͜ʹͿΒ͕ͬͨ࣌͞ͱಉ͡ڍಈʹͳΔ 38 Card
Itemͷதͷ࡞ ֎෦͔ΒதΛૢ࡞Ͱ͖ΔޱΛ։͚Δ
X TopʹΓɺCard ItemʹඞཁͳTagΛૠೖ͢ΔɻCard ItemͱTagͷ༰Λฤूͯ͠ҰͭҰͭͷ͓ళʹ߹Θͤͨใʹॻ͖͑Δ ˎ͜͜ͰલϖʔδͷComponent Children͕ͳ͍ͱTagΛૠೖ͢Δ͜ͱ͕Ͱ͖ͳ͍ 39 Card Itemͷը૾આ໌ͷมߋɺTag͚
X Scroll ViewͷScroll To IndexͷIndexΛ2ʹ͢Δ BooleanͷValueʹνΣοΫΛೖΕͯSaved Value→Scroll To IndexͷDoʹܨ͙ ˎIndex͔Β0,
1, 2ɾɾͳͷͰ2ʹͨ͠߹3ຕʹͳΔ 40 Scroll ViewͷॳظҐஔͷઃఆ
X Section2ʹStack LayoutΛͬͯH6, Card Item2Λૠೖ͢Δɻ͜ͷ࣌Item SpacingΛۭ͚Δͱݟӫ͕͑ྑ͍ Card Item2͕ܨ͕͍ͬͯͬͨߴ͕͞ಡΊͳ͍ͷͰɺStack LayoutͷSize ModeΛContent
Heightʹͯ͠ॊೈʹ͓ͯ͘͠ 41 Section2ͷ࡞
X HeaderͷHeightΛScroll ViewͷPad Topʹܨ͙ͱ HeaderͰઃఆ͕ͨ͠Scroll Viewͷʹө͞ΕΔΑ͏ʹͳΔ 42 Headerͷߴ͞Λࢀরͯ͠Scroll ViewͷҐஔΛௐ͢Δ
X Scroll ViewͱHeaderͷॱ൪ΛೖΕସ͑Δ ˎԼʹ͋Δϊʔυͷํ͕ϓϨϏϡʔͰखલʹ͘ΔɻHeaderΛखલʹ͢Δ 43 HeaderͱScroll ViewͷલޙؔΛमਖ਼͢Δ
X IndexͷதʹRoot(Group), Pages, MenuΛ্ਤͷΑ͏ʹ࡞͢Δ PagesͷStart Pageͱͯ͠TopΛબͿ 44 IndexΛ࡞͢Δ
X ComponentͷPagesϑΥϧμͷதʹTopͱಉ͡Α͏ʹRestaurant ComponentΛ࡞͢Δ(P.10) ্ਤͷΑ͏ʹϊʔυΛஔͯ͠ɺഎܠͷRectangleɺScroll ViewɺImageɺTextΛ࡞͢Δ TextΛGroupʹೖΕͯPaddingΛ͢ΔͱTextʹ༨നΛ࡞ΕΔ 45 Restaurantϖʔδͷ࡞
X ΔϘλϯ120 x 120ͷྖҬΛGroupͰ࡞͔ͬͯΒImageΛૠೖͯ͠࡞͢Δ 46 ΔϘλϯͷ࡞
X Card Item3ΛScroll Viewʹૠೖ͠ɺTagΛ͚ͭΔ ˎCard Item3͕ࣸਅʹඃ͍ͬͯΔͷCard Item3ͷҰ൪্ͷGroup͕Pad Top -300ͱࢦఆ͍ͯ͠ΔͨΊͰ͢ 47
Card ItemͱTagͷ࡞
X Flow LayoutΛ༻͍ͯImageΛฒΔɻHeight 800 px 48 ը૾ΛྻͰฒΔ
X ը૾SizeΛ360 x 360 pxɺFill ModeΛAspect Fillʹ͢Δ ˎFill Mode৭ʑࢼͯ͠Έ͍ͯͩ͘͞ɻFill ModeΛมߋͨ͠ࡍߋ৽͕ඞཁͰ͢
49 ը૾Λมߋͯ͑͠Δ
X TopʹΓPage NavigationΛ࡞͠ɺDestinationʹRestaurantΛઃఆ͢Δ Index 2ͷCard Itemͷtap͔ΒPage NavigationͷNavigate To Pageʹଓ͢Δ 50
Top͔ΒRestaurantʹϖʔδભҠΛઃఆ͢Δ
X RestaurantʹΓPage Navigation BackΛ࡞͢Δ ΔϘλϯͷGroupͷTap͔ΒPage Navigation BackͷBackʹଓ͢Δ ˎˎϓϨϏϡʔΛIndexͷRoot Groupʹ͢ΕͰ͢ˎˎ 51
RestaurantϖʔδͷΔϘλϯΛઃఆ͢Δ
X Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 52
X ͓Βͤ 53
X 54 1/17 ʢۚʣ19:00 - 21:00 2020ͷӡΛNoodlͰ͓͏ɻ
X ʲίϛϡχςΟࢀՃͷྲྀΕʳ ɹ̍ɽQRίʔυεΩϟϯ ɹɹɹɹɹɹor ɹɹɹhttps://bit.ly/2kSq3xw ΞΫηε ɹ̎ɽϝʔϧΞυϨεͷೖྗ ɹ̏ɽೝূ༻ϝʔϧʹهࡌͷURLΞΫηε ɹ̐ɽύεϫʔυͱϢʔβʔωʔϜΛઃఆ ʲSlackʳNoodlίϛϡχςΟͷ͝ট
SlackʹNoodlͷίϛϡχςΟ͕͍͟͝·͢ɻ ຊ͝ग़੮ͷօ༷ͱڞʹίϛϡχςΟΛΓ্͛ͯ ͍͚Εͱߟ͓͑ͯΓ·͢ɻੋඇɺ͝ࢀՃ͍ͩ͘͞ʂ 55 # ͭͬͯ͘Έͨ # Πϕϯτใ # noodlܙା
X 56 Twitter
X 57 Qiita Noodl Advent Calendar 2019 https://qiita.com/advent-calendar/2019/noodl ཁνΣοΫʂʂʂ
X ͜ͷಈը ޙͰΞʔΧΠϒͱ ͯ͠ݟΒΕ·͢ʂ 58
X THANK YOU! 59