Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
6*σβΠϯߨशձ 6*σβΠϯͷߨशձͰ͢ @spa
Slide 2
Slide 2 text
@spa Ͱ͢ WebϑϩϯτΤϯυΛ͍ͯ͠Δ͜ͱ͕ଟ͍ ͢ਓ
Slide 3
Slide 3 text
͜ͷߨशձͰ͢Δ͜ͱ • UIσβΠϯલʹߟ͑Δ͖͜ͱ • UIΛσβΠϯ͢Δ࣌ͷϓϩηε • ۩ମతͳݟͨΛ࡞Δ࣌ͷίπ
Slide 4
Slide 4 text
͜ͷߨशձͰ͠ͳ͍͜ͱ • σβΠϯιϑτͷѻ͍ํ • ϑϩϯτΤϯυ࣮ͷํ๏ • όοΫΤϯυͷϞσϧͱͷରԠͷऔΓํ • ͳͲ
Slide 5
Slide 5 text
͓͠ͳ͕͖ • UIͱʁ • UIσβΠϯͷϓϩηε • OOUIͷ࣮ફ • ϏδϡΞϧσβΠϯͷϙΠϯτ
Slide 6
Slide 6 text
6*ͱʁ ᶃ 6*JTOBOJ
Slide 7
Slide 7 text
6*ͱʁ ͍͔ͭ͘ʮUIʯΛࢥ͍ු͔ͯΈ͍ͯͩ͘͞
Slide 8
Slide 8 text
6*ͱʁ 6*ͱʁ • Ϣʔβʔͱػց͕ใΛΓऔΓ͢Δࡍͷڥք • ใͷΓͱΓʁ • ใͷදࣔ • ใʹର͢Δ / ใΛ༻͍ͨԿ͔͠Βͷૢ࡞
Slide 9
Slide 9 text
6*ͱʁ ঢ়ଶΛదʹӅṭ/ूͯ͠ใΛදࣔ
Slide 10
Slide 10 text
6*ͱʁ ෦ॲཧΛӅṭͯ͠ใͷૢ࡞Λఏڙ
Slide 11
Slide 11 text
6*ͱʁ 6*σβΠϯͰߟ͑Δ͜ͱ • ͲͷΑ͏ʹͯ͠ใΛΘ͔Γ͘͢ఏڙ͢Δ͔ʁ • ϏδϡΞϧͷදݱͦͷ1ͭͷखஈʹա͗ͳ͍ • ෦ͷใΛ͏·͘நԽͯ͋͛͠Δඞཁ͕͋Δ • ใͷૢ࡞༰қ͔ʁ • ୭SQLΛʹॻ͍ͯૢ࡞ͨ͘͠ͳ͍ʢઐ༻πʔϧผʣ
Slide 12
Slide 12 text
6*ͱʁ Θ͔Γ͍͢6*ͷͨΊʹ • ఏڙ͞ΕΔใͷཧղ͕༰қͰ͋Δ • దͳߏԽ: ਓؒͷ৺ཧΛߟྀ • ϢʔβʔͷϝϯλϧϞσϧʹԊͬͨͷʹ͢Δ • ʮ͜͜Λ͜͏ͨ͠Β͜͏ͳΔͩΖ͏ʯΛཪΒͳ͍
Slide 13
Slide 13 text
6*ͱʁ ϝϯλϧϞσϧͷྫ: ϘλϯͱϦϯΫ Button https://example.com
Slide 14
Slide 14 text
6*ͱʁ ࢀߟώϡʔϦεςΟοΫ • 10 Usability Heuristics for User Interface Design • UIΛධՁ͢Δ࣌ͷج४ͷͻͱͭ • దͳϑΟʔυόοΫΛͤΑɺϢʔβʔͷΘ͔Δݴ༿Λ༻͍Αɺ… • ৄ͘͠ิࢿྉ
Slide 15
Slide 15 text
6*σβΠϯͷϓϩηε ᶄ 1SPDFTTGPSEFTJHOJOH6*
Slide 16
Slide 16 text
6*σβΠϯͷϓϩηε ͜ͷষͰ • UIσβΠϯͷεςοϓΛղͯͬ͟͠ͱோΊͯΈΔ • ⚠ Ұ͔Β࡞Δ߹Λఆ͍ͯ͠·͢ • ⚠ WebΞϓϦέʔγϣϯΛ೦಄ʹஔ͍͍ͯ·͢ • ήʔϜͳͲͷ߹ʹԠ༻͕ޮ͘ͱࢥ͏
Slide 17
Slide 17 text
6*σβΠϯͷϓϩηε 6*σβΠϯͷϓϩηε ཁٻੳ Ϟσϧநग़ Ϗϡʔఆٛ ϏδϡΞϧ
Slide 18
Slide 18 text
6*σβΠϯͷϓϩηε ཁٻੳ • UXʹؔΘΔ෦ʢUI͚ͩͷͰͳ͍ʣ • ࠓ͔Β࡞Δରʹ͍ͭͯ • ͦΕΛϢʔβʔ͕ͬͯͲ͏خ͍͠ͷ͔ • ͦΕͷଘࡏͰͲΜͳΛղܾ͠Α͏ͱͯ͠Δͷ͔ • ʢ࡞Δଆͷઢͱͯ͠ʣͦΕ͕Ͳ͏͋ͬͯཉ͍͠ͷ͔ • ࠓճͷߨशձͷείʔϓ͔Βগ͠֎ΕΔ……
Slide 19
Slide 19 text
6*σβΠϯͷϓϩηε ཁٻੳ • ϢʔεέʔεΛఆ͠ɺԿ͕ඞཁͱ͞ΕͯΔ͔ݕ౼ • Ϣʔβʔͷௐࠪɺϧιφʢରਓ૾ʣΛઃఆ͠ࢥߟ࣮ݧɺ… • ࠷ऴతͳඪ • Ϣʔβʔͷඞཁͱ͢Δใɾૢ࡞͕ཧͰ͖Δ͜ͱ • ͦΕΒͷϏδϡΞϧදݱͷํੑ͕ཧͰ͖Δ͜ͱ
Slide 20
Slide 20 text
6*σβΠϯͷϓϩηε 6*ͱ69ͷҧ͍ • UIϢʔβʔ͕ʹ͢Δใͷදݱ • UXͦͷͷͷ༻Λ௨ͯ͡ಘͨମݧશମ • ͓ؾ࣋ͪͷੈքʢ͍͠ʣ • UIΛ௨ͯ͡ൃੜ͢Δ • αϙʔτରԠͳͲUXʹؔΘΔཁҼ
Slide 21
Slide 21 text
6*σβΠϯͷϓϩηε Ϟσϧநग़ • ཁٻʹ͓͍ͯඞཁʹͳͬͯ͘ΔΦϒδΣΫτΛநग़͢Δ࡞ۀ • ྫ͑traQͳΒϢʔβʔɺϝοηʔδɺνϟϯωϧͳͲ • DDDͰݴ͏ͱ͜Ζͷentityͱ͔value object • ใͷநԽΛ͢Δ • OOUIͷॴͰৄ͘͠આ໌͠·͢
Slide 22
Slide 22 text
6*σβΠϯͷϓϩηε Ϗϡʔఆٛ • ΦϒδΣΫτΛͲͷΑ͏ʹදࣔ͢Δ͔ܾΊΔ • ϦετදࣔɺάϦουදࣔɺ୯ମͰͷදࣔ……ͳͲͳͲ • ͦΕΒͷදࣔͷ͞ΕํͷભҠؔΛܾΊΔ • ʮϫΠϠʔϑϨʔϜΛඳ͘ʯ࡞ۀʹ૬ • OOUIͷॴͰৄ͘͠આ໌͠·͢
Slide 23
Slide 23 text
6*σβΠϯͷϓϩηε ϏδϡΞϧఆٛ • ·ͣϏδϡΞϧͷํੑΛܾΊΔ • Կ͔ͷҰ෦ͷ߹શମʹϚον͢ΔΑ͏ʹ • ϓϩμΫτͷՁΛදݱ͢Δ৭ܗɾεϖʔγϯάͳͲΛߟ͑Δ • ʮϓϩμΫτ͕Ͳ͏͋ͬͯཉ͍͔͠ʯΛදݱͰ͖Δ
Slide 24
Slide 24 text
6*σβΠϯͷϓϩηε ϏδϡΞϧఆٛ • ํੑʹԊ͏Α͏ʹύʔπͷϏδϡΞϧΛܾఆ͍ͯ͘͠ • ݸʑͷΦϒδΣΫτͷදݱ • Ϗϡʔͷදݱ • ͦͷଞඞཁͱͳΔίϯϙʔωϯτͷදݱ • ϢʔβʔͷϝϯλϧϞσϧ͔Βҳ͠ͳ͍͕ඞཁ
Slide 25
Slide 25 text
6*σβΠϯͷϓϩηε ͦͷઌσβΠϯγεςϜ • ࡞͍ͬͯ͘ͱ͋ΔఔϏδϡΞϧදݱͷύλʔϯ͕Ͱ͖ͯ͘Δ • ͲͷΑ͏ͳΦϒδΣΫτɾϏϡʔʹͲͷΑ͏ͳػೳΛׂΓͯΔ͔ • ϏδϡΞϧʢ৭ͱ͔typographyͱ͔ͷʣͷϧʔϧ • ͜ΕΛνʔϜͰڞ༗ͨ͠ͷ͕σβΠϯγεςϜ • σβΠϯγεςϜʹԊͬͨͷΛ࡞Δ • ίϯελϯτʹߋ৽͍ͯ͘͠
Slide 26
Slide 26 text
6*σβΠϯͷϓϩηε ϓϩηεͷ·ͱΊ • ཁٻੳ • Ϟσϧநग़ • Ϗϡʔఆٛ • ϏδϡΞϧఆٛ: શମͷίϯηϓτ / ݸʑͷΦϒδΣΫτϏϡʔ • σβΠϯγεςϜͷཱ֬
Slide 27
Slide 27 text
6*σβΠϯͷϓϩηε 6* σβΠϯ ϏδϡΞϧ ใͷઃܭ ใͷઃܭͱϏδϡΞϧσβΠϯ͕૬ޓʹӨڹΛ༩͑ͭͭਐΉ
Slide 28
Slide 28 text
006*ͷ࣮ફ ᶅ 006*JOQSBDUJDF
Slide 29
Slide 29 text
006*ͷ࣮ફ ͜ͷষͰ • UIͷઃܭࢦͷҰͭͰ͋Δ OOUI ͱ͍͏ख๏Λݟ͍ͯ͘ • ใͷཧͷ؍Ͱ༗༻ • σβΠϯϓϩηεͷϞσϧநग़ʙϏϡʔఆٛʹ૬͢Δ෦ • ⚠ ྫʹ͏traQ͋Δఔ؆ུԽ͞ΕͨͷʹͳΓ·͢ • ಛʹDMɾΞΫςΟϏςΟͷଘࡏΛল͍͍ͯΔͱ͍͏ʹҙ͍ͯͩ͘͠͞
Slide 30
Slide 30 text
006*ͷ࣮ફ ͜ͷষͷྲྀΕ • OOUIͱʁ • OOUIͷϓϩηε • ΦϒδΣΫτநग़ • Ϗϡʔఆٛ • ϨΠΞτఆٛ • ϨΠΞτύλʔϯʹ͍ͭͯ
Slide 31
Slide 31 text
006*ͷ࣮ફ 006*ͱ • ʮΦϒδΣΫτࢦUIʯͷ͜ͱ • ͋ΔͷʢΦϒδΣΫτʣʹରͯ͠ૢ࡞Λߦ͏ελΠϧͷUI • ରٛޠ: λεΫࢦUI • ΦϒδΣΫτࢦϓϩάϥϛϯά……ʁ • ͍ۙ
Slide 32
Slide 32 text
006*ͷ࣮ફ 006*WTλεΫࢦ • OOUI : ໊ࢺ → ಈࢺ • λεΫʢΓ͍ͨ͜ͱʣΛΦϒδΣΫτͷૢ࡞ʢΞΫγϣϯʣͰ ୡ͢Δ • λεΫࢦ: ಈࢺ → ໊ࢺ • λεΫͷશମ૾͕نఆ͞Ε͍ͯͯɺͦΕʹରΛͯΊΔ
Slide 33
Slide 33 text
006*ͷ࣮ફ έʔΩʹݟΔOOUI
Slide 34
Slide 34 text
006*ͷ࣮ફ 006*ৄࡉ • ಉ͡छྨͷΦϒδΣΫτ͕৭ʑͳํ๏Ͱදࣔ͞ΕΔ • γϯάϧϏϡʔ • ίϨΫγϣϯϏϡʔ • ΦϒδΣΫτͷΞΫγϣϯ͕ը໘ભҠΛੜΉ߹͕͋Δ • ྫ: ϙέϞϯͷಓ۩
Slide 35
Slide 35 text
006*ͷ࣮ફ 006*ͷϓϩηε • ΦϒδΣΫτநग़ • ϏϡʔɾφϏήʔγϣϯఆٛ • ϨΠΞτઃܭ Ϟσϧநग़ Ϗϡʔઃܭ ^ USB24ΛݟͯΈΔ
Slide 36
Slide 36 text
006*ͷ࣮ફ ΦϒδΣΫτநग़ • ચ͍ग़ͨ͠λεΫ͔ΒΦϒδΣΫτͱଐੑɾΞΫγϣϯΛநग़ • ΦϒδΣΫτ໊ࢺʹͳ͍ͬͯΔ • Կ͔ͷ֓೦ͷΠϯελϯεͳΒɺదͳநԽΛ͢Δ • म০ଐੑͰ͋ΔՄೳੑ͕ߴ͍ • ྫ: ʮ3Aͷߴւ͞Μʯ →ΦϒδΣΫτʮֶੜʯͱͦͷଐੑʮֶʯʮʯ
Slide 37
Slide 37 text
006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ఆ͞ΕΔλεΫͷҰ෦ɹ໊ࢺͱϢʔβʔओମͷಈࢺΛڧௐͨ͠ #a ͷ ϝοηʔδҰཡ ΛݟΔ #a/b ͷԼʹ #a/b/c Λ ࡞͢Δ ϝοηʔδ Λ ϐϯ͢Δ @spa ʹ Ͷ͜ Λ͚ͭΔ ϐϯཹΊϝοηʔδ ʹ ελϯϓ Λ ͚ͭΔ ϝϯγϣϯ ͞ΕΔͱ ௨͕͘Δ
Slide 38
Slide 38 text
006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • λεΫ͔ΒΦϒδΣΫτʹ૬͢ΔͷΛநԽ • ௨ɾϝϯγϣϯͦΕʹରͯ͠ૢ࡞ΛՃ͑ΔͷͰͳ͍ͷͰআ֎ ϝοηʔδ νϟϯωϧ Ϣʔβʔ λά ελϯϓ
Slide 39
Slide 39 text
006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ΦϒδΣΫτ͕ܾ·ͬͨΒͦΕΒͷଐੑΛߟ͑Δ • DBεΩʔϚͷΑ͏ʹͤͣɺϢʔβʔͷؔ৺ϕʔεͰϞσϦϯά͢Δ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾߘ͞Εͨϝοηʔδ ϝοηʔδ ɾ༰ ɾߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ
Slide 40
Slide 40 text
006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ΦϒδΣΫτͷؔੑΛϞσϦϯά͢Δ • ͜͜ͰϢʔβʔͷؔ৺ϨϕϧͰͷநԽͰे ϝοηʔδ ɾ༰ ɾߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾߘ͞Εͨϝοηʔδ
Slide 41
Slide 41 text
006*ͷ࣮ફ λεΫΛөͨ͠traQͷؔ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾߘ͞Εͨϝοηʔδ ϝοηʔδ ɾ༰ ɾϐϯཹΊ͞Ε͍ͯΔ͔ ɾߘઌνϟϯωϧ ɾߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ Ϣʔβʔ ɾεΫϦʔϯ *% ɾද໊ࣔ ɾ͚ΒΕ͍ͯΔλά ελϯϓ λά
Slide 42
Slide 42 text
006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ΦϒδΣΫτʹରͯ͠ՄೳͳΞΫγϣϯΛఆٛ͢Δ • جຊCreate, ( Read, ) Update, Delete νϟϯωϧ ɾ ɾࢠνϟϯωϧΛՃ͢Δ ɾߘ͢Δ ɾআ͢Δ ɾϐϯཹΊ͢Δ ղআ͢Δ ɾελϯϓΛ͚ͭΔ ֎͢ ϝοηʔδ ɾ
Slide 43
Slide 43 text
006*ͷ࣮ફ ΞΫγϣϯΛఆٛͨ͠ਤ ʢλάͱελϯϓඪ४ͷCRUDΛαϙʔτʣ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾνϟϯωϧ ɾߘ͞Εͨϝοηʔδ ɾࢠνϟϯωϧΛՃ͢Δ ɾ< ཧऀ > Ճ͢Δ ɾ< ཧऀ > আ͢Δ ϝοηʔδ ɾ༰ ɾϐϯཹΊ͞Ε͍ͯΔ͔ ɾߘઌνϟϯωϧ ɾߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ ɾߘ͢Δ ɾ< ߘऀ > আ͢Δ ɾ< ߘऀ > ฤू͢Δ ɾϐϯཹΊ͢Δ ղআ͢Δ ɾελϯϓΛ͚ͭΔ ֎͢ Ϣʔβʔ ɾεΫϦʔϯ *% ɾද໊ࣔ ɾ͚ΒΕ͍ͯΔλά ɾ< ཧऀ > ࡞͢Δ ɾ< ཧऀ > আ͢Δ ɾ< ࣗ > ϓϩϑΟʔϧมߋ ɾλάΛ͚ͭΔ ελϯϓ λά
Slide 44
Slide 44 text
006*ͷ࣮ફ ΦϒδΣΫτநग़·ͱΊ • λεΫ͔ΒΦϒδΣΫτީิΛൈ͖ग़͢ • ީิΛ·ཻ͍͠ͰநԽ͢Δ • ͱͱͷλεΫͱݟൺͭͭ • ΦϒδΣΫτͷଐੑɾؔ࿈Λݕ౼ • ΦϒδΣΫτʹର͢ΔΞΫγϣϯΛݕ౼
Slide 45
Slide 45 text
006*ͷ࣮ફ ΦϒδΣΫτநग़OPUF • ͜ΕΒͷεςοϓͰ༷͕ݻ·͍ͬͯ͘ • ΞϓϦέʔγϣϯͰ Կ͕ݟ͑ͯ Կ͕Ͱ͖Δʁ ΛܾΊͨ • ٯʹλεΫɾϢʔεέʔεͷݕ౼ʹΔ͜ͱ • QͷྫͰΞΫγϣϯͷείʔϓʹݴٴͨ͠ • ͜Εͱͷཁٻੳஈ֊Ͱ͍ͬͯͳ͍͜ͱͩͬͨ
Slide 46
Slide 46 text
006*ͷ࣮ફ ΦϒδΣΫτநग़OPUF • Γग़ͨ͠ͷΛϝΠϯΦϒδΣΫτͱ͍͏ • ࠓճॏཁͰͳ͍ΦϒδΣΫτΛଐੑͱͯ͠ѻͬͨ • ݁ՌͷϞσϧඞͣ͠αʔόʔαΠυͳͲɺ্࣮ͷϞσϧͱҰ க͠ͳ͍ • දࣔલʹదʹใΛมͯ͋͛͠Δඞཁ͕͋Δ͔ • ࣮αʔόʔ/ΫϥΠΞϯτϞσϧͷAPIͬͯΠϯλʔϑΣΠεͰ͢ΑͶ
Slide 47
Slide 47 text
006*ͷ࣮ફ Ϗϡʔఆٛ • ΦϒδΣΫτΛͲ͏ݟͤΔ͔ʢϏϡʔʣͷఆٛΛߦ͏εςοϓ • ·࣮ͩࡍͷϨΠΞτ͠ͳ͍ • ϞσϦϯάͨؔ͠ΛϏϡʔͷભҠؔʹམͱ͠ࠐΉ
Slide 48
Slide 48 text
006*ͷ࣮ફ Ϗϡʔͷछྨ • ίϨΫγϣϯϏϡʔ • ෳͷΦϒδΣΫτΛҰཡදࣔ • શମ૾ΛѲ͍ͨ͠ͷɺλΠϜϥΠϯͳͲ • γϯάϧϏϡʔ • ͦͷΦϒδΣΫτͻͱͭʹ͍ͭͯɺৄࡉใΛදࣔ • ίϨΫγϣϯϏϡʔ͔ΒؾʹͳΔͷͷγϯάϧϏϡʔʹભҠ
Slide 49
Slide 49 text
006*ͷ࣮ફ ίϨΫγϣϯϏϡʔ / γϯάϧϏϡʔ
Slide 50
Slide 50 text
006*ͷ࣮ફ Ϗϡʔͷఆٛ • γϯάϧɾίϨΫγϣϯ྆ํͷϏϡʔΛͱΓ͋͑ͣ࡞Δ • ίϨΫγϣϯ͔ΒγϯάϧʹભҠͰ͖Δ • ϞσϦϯά݁ՌͷؔʹԠͯ͡ભҠؔΛ͚͢
Slide 51
Slide 51 text
006*ͷ࣮ફ Ϗϡʔͷఆٛ • ࠷ऴతʹϚʔδɾলུ͞ΕΔ߹͕͋Δ • ඞཁʹԠͯ͡ߟ͑ΕOKͳͷͰɺͱΓ͋͑ͣશͯॻ͖ग़͢ • ໌Β͔ʹ།Ұ͔͠ଘࡏ͠ͳ͍ΦϒδΣΫτવίϨΫγϣϯ ϏϡʔΛ࣋ͨͳ͍
Slide 52
Slide 52 text
006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • νϟϯωϧ - ϝοηʔδ 1:* ͷؔʹͳ͍ͬͯΔ • νϟϯωϧͷγϯάϧϏϡʔ͔ΒϝοηʔδͷίϨΫγϣϯϏϡʔ ʹભҠͯ͠ཉ͍͠ • ϝοηʔδ - Ϣʔβʔ *:1 ͷؔʹͳ͍ͬͯΔ • Ϣʔβʔ͔ΒͦͷϢʔβʔ͕ߘͨ͠ϝοηʔδʹભҠ͢Δ……ʁ
Slide 53
Slide 53 text
006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • ؆ུԽͨؔ͠ͷਤ ελϯϓ νϟϯωϧ ϝοηʔδ Ϣʔβʔ λά
Slide 54
Slide 54 text
006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • ϏϡʔͷભҠؔΛߟ͑ͯΈΔ • Ϣʔβʔ͔ΒͦͷϢʔβʔ͕ߘͨ͠ϝοηʔδҾ͚ͳ͍ͷͰআ֎ νϟϯωϧ ίϨΫγϣϯ ϝοηʔδ ίϨΫγϣϯ Ϣʔβʔ ίϨΫγϣϯ νϟϯωϧ γϯάϧ ϝοηʔδ γϯάϧ Ϣʔβʔ γϯάϧ
Slide 55
Slide 55 text
006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • ϝοηʔδͷγϯάϧϏϡʔΛίϨΫγϣϯϏϡʔʹ౷߹ νϟϯωϧ ίϨΫγϣϯ ϝοηʔδ ίϨΫγϣϯ Ϣʔβʔ ίϨΫγϣϯ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ
Slide 56
Slide 56 text
006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • ϝοηʔδͷίϨΫγϣϯϏϡʔΛνϟϯωϧͷγϯάϧϏϡʔͱ͠ ͯ͏ʢ࣮ࡍͷtraQʹ͍ۙʣ νϟϯωϧ ίϨΫγϣϯ ϝοηʔδ ίϨΫγϣϯ Ϣʔβʔ ίϨΫγϣϯ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ
Slide 57
Slide 57 text
006*ͷ࣮ફ ϧʔτφϏήʔγϣϯݕ౼ • ಛʹॏཁͦ͏ͳΦϒδΣΫτΛϧʔτφϏήʔγϣϯʹஔ • ϞόΠϧΞϓϦͳΒBottomBarͱ͔TabBarͱ͔ • ࢥߟͷىͱͳΔʢ㲈ભҠઌ͕ଟ͍ʣΦϒδΣΫτ͕ྑ͍ • ΞϓϦέʔγϣϯશମͰ༏ઌ͞ΕΔ͕͋ΕͦΕͰ
Slide 58
Slide 58 text
006*ͷ࣮ફ ϧʔτφϏήʔγϣϯͷϙΠϯτ • ΞϓϦέʔγϣϯΛʮͷʯ͕ฒΜͰ͍Δͷͱͯ͠ߟ͑Δ • → ػೳΛφϏήʔγϣϯʹฒΔͷѱख • ྫ֎: ʢରΦϒδΣΫτ͕ࣗ໌ͳ߹ͷʣݕࡧɾઃఆ • φϏήʔγϣϯ߲Λબͨ͠ΒΦϒδΣΫτͷίϨΫγϣϯϏϡʔ ʹભҠ͢ΔʢίϨΫγϣϯϏϡʔ͕͋Δ߹ʣ
Slide 59
Slide 59 text
006*ͷ࣮ફ traQͷϧʔτφϏήʔγϣϯ + νϟϯωϧͷίϨΫγϣϯϏϡʔ
Slide 60
Slide 60 text
006*ͷ࣮ફ ϨΠΞτઃܭ • ࣮ࡍʹݟ͑Δը໘ͷઃܭ • ͍ΘΏΔϫΠϠʔϑϨʔϜ • ϏϡʔΛը໘ʹͲͷΑ͏ʹஔ͢Δ͔ͷݕ౼ • 1ը໘ʹෳϏϡʔ͕͋ͬͯOK • ϞόΠϧͱPCͰग़͚ͯ͠͠OK
Slide 61
Slide 61 text
006*ͷ࣮ફ ϨΠΞτύλʔϯ • ࢹ֮දݱύλʔϯཱ͕͍֬ͯ͠ΔͷͰै͓ͬͯ͘ͱྑ͍ • φϏήʔγϣϯͷදࣔ • શମతͳը໘ϨΠΞτ • ίϨΫγϣϯදࣔ • ΦϒδΣΫτͷCRUD • Ϣʔβʔͷೝෛՙ͕Լ͕Δ
Slide 62
Slide 62 text
006*ͷ࣮ફ Ϗϡʔஔͷύλʔϯ • جຊతʹ্/ࠨ͕֓ཁɺԼ/ӈ͕ৄࡉͱ͍͏ྲྀΕ͕͋Δ • υϦϧμϯͷํੑ • ฒͯஔ͚ͳ͍߹ը໘ભҠ • ࠨ͔ΒӈʹϓογϡͰ͖Δͱ͏Ε͍͠ • దʹग़͚͠͠Α͏
Slide 63
Slide 63 text
006*ͷ࣮ફ ఆ൪ը໘ύλʔϯ • μϒϧϖΠϯ: ࠨʹίϨΫγϣϯϏϡʔ + ӈʹγϯάϧϏϡʔ
Slide 64
Slide 64 text
006*ͷ࣮ફ ఆ൪ը໘ύλʔϯ • γϯάϧϖΠϯ: ίϨΫγϣϯˠγϯάϧΛը໘ભҠͰରԠ
Slide 65
Slide 65 text
006*ͷ࣮ફ φϏήʔγϣϯͷύλʔϯ • ϞόΠϧԼ͔υϩϫʔʢφϏήʔγϣϯͷ߹ࠨ͕ଟ͍ʣ
Slide 66
Slide 66 text
006*ͷ࣮ફ φϏήʔγϣϯͷύλʔϯ • PC্͔ࠨ
Slide 67
Slide 67 text
006*ͷ࣮ફ ίϨΫγϣϯϏϡʔͷύλʔϯ • Ϧετදࣔ • άϦουදࣔ • ͦͷଞ • ϚοϐϯάͳͲ • Material Design Guideline ͳͲ͕ͱͯࢀߟʹͳΔ
Slide 68
Slide 68 text
006*ͷ࣮ફ ίϨΫγϣϯϏϡʔͷ৭ʑ Ϧετ άϦου Ϛοϐϯά
Slide 69
Slide 69 text
006*ͷ࣮ફ ίϨΫγϣϯϏϡʔΞΠςϜͷ৭ʑ Ϧετ Χʔυ
Slide 70
Slide 70 text
006*ͷ࣮ફ γϯάϧϏϡʔͷύλʔϯ • ͦͷͷͷใͷΈΛදࣔ͢Δύλʔϯ • ଞΦϒδΣΫτͷίϨΫγϣϯΛϓϨϏϡʔతʹදࣔ͢Δύλʔϯ • جຊԡͨ͠ΒભҠ͕ൃੜ • ෦ʹଞΦϒδΣΫτͷίϨΫγϣϯΛؚΉύλʔϯ • ଐੑͷදݱͱͯ͠༻͍Δ • ଞͷΦϒδΣΫτͷίϨΫγϣϯͷΈΛؚΉύλʔϯ
Slide 71
Slide 71 text
006*ͷ࣮ફ γϯάϧϏϡʔͷύλʔϯUSB2ͷྫ • ϢʔβʔϞʔμϧ࣍ͷΑ͏ͳදࣔͷ͞Εํ͕͋Δ • ϢʔβʔΦϒδΣΫτͷৄࡉදࣔ • Ϣʔβʔʹ͚ͭΒΕͨλάͷίϨΫγϣϯΛแͨ͠දࣔ • Ϣʔβʔʹ͚ͭΒΕͨάϧʔϓͷίϨΫγϣϯΛแͨ͠දࣔ • ͜ΕΒΛλϒόʔͰΓସ͍͑ͯΔʢকདྷతͳ֦ுݟਾ͑ͯʣ
Slide 72
Slide 72 text
006*ͷ࣮ફ ϢʔβʔͷγϯάϧϏϡʔʢຒΊࠐΈϏϡʔͳ͠ / ͋Γʣ
Slide 73
Slide 73 text
006*ͷ࣮ફ ϨΠΞτͷఆٛUSB2ͷྫ • ϢʔβʔϞʔμϧ࣍ͷΑ͏ͳදࣔͷ͞Εํ͕͋Δ • ϢʔβʔΦϒδΣΫτͷৄࡉදࣔ • Ϣʔβʔʹ͚ͭΒΕͨλάͷίϨΫγϣϯΛแͨ͠දࣔ • Ϣʔβʔʹ͚ͭΒΕͨάϧʔϓͷίϨΫγϣϯΛแͨ͠දࣔ • ͜ΕΒΛλϒόʔͰΓସ͍͑ͯΔʢকདྷతͳ֦ுݟਾ͑ͯʣ
Slide 74
Slide 74 text
006*ͷ࣮ફ ఴϑΝΠϧҰཡΛ͚ͭͨtraQͷϏϡʔߏ νϟϯωϧ ίϨΫγϣϯ Ϧετ ϝοηʔδ ίϨΫγϣϯ Ϧετ ఴϑΝΠϧ ίϨΫγϣϯ άϦου λά ίϨΫγϣϯ Ϧετ Ϣʔβʔ ίϨΫγϣϯ Ϧετ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ ϝΠϯφϏήʔγϣϯ ϞόΠϧ࣌υϩϫʔ NPEBM NPEBM
Slide 75
Slide 75 text
006*ͷ࣮ફ ΞΫγϣϯͷஔ • جຊతʹରͱͳΔΦϒδΣΫτͷۙ͘ʹஔ͘ • ৽ن࡞ͷ߹ίϨΫγϣϯϏϡʔΛରͱΈͳ͢ • ྫ: • Χʔυදࣔ͞ΕͯΔͷʹର͢Δૢ࡞ˠΧʔυͷத • Ϧετදࣔͷ৽نՃˠϦετશମͷӈ্ͳͲ
Slide 76
Slide 76 text
006*ͷ࣮ફ ΞΫγϣϯͷஔ$SFBUF • ৽ن࡞ίϨΫγϣϯϏϡʔʹ͔͠ஔ͚ͳ͍ • ৽ن࡞ϘλϯΛԡ͢ͱϞʔμϧͰ༰ΛٻΊΒΕΔύλʔϯ • ύϥϝʔλʔύλʔϯ • ೖྗཝ͕ৗʹԼʹଘࡏ͍ͯͯ͠ɺೖྗˠܾఆͰ৽ن࡞ • ϓϨʔεϗϧμʔύλʔϯ
Slide 77
Slide 77 text
006*ͷ࣮ફ ύϥϝʔλʔ / ϓϨʔεϗϧμʔ ύλʔϯ
Slide 78
Slide 78 text
006*ͷ࣮ફ ΞΫγϣϯͷஔ6QEBUF • ߋ৽γϯάϧϏϡʔͰߦ͏ͷ͕جຊ • ༰͕શͯมߋՄೳͰɺࣗಈอଘ͞ΕΔύλʔϯ • ઃఆͳͲͰΘΕΔ • ϘλϯΛԡ͢ͳͲͰฤूϞʔυʹҠߦ͠ɺ໌ࣔతʹอଘ͢Δύλʔϯ • ϓϩϑΟʔϧฤूͷΠϝʔδ
Slide 79
Slide 79 text
006*ͷ࣮ફ ΞΫγϣϯͷஔ%FMFUF • আγϯάϧͰίϨΫγϣϯͰՄೳ • আͯ͠ྑ͍͔ͷ֬ೝΛग़͢ύλʔϯ • আͷऔΓফ͕͠Ͱ͖Δύλʔϯ • ίϨΫγϣϯϏϡʔʹฤूϞʔυΛ࣋ͨͤΔύλʔϯ • iOSͷTableView
Slide 80
Slide 80 text
006*ͷ࣮ફ ίϨΫγϣϯͷϑΟϧλϦϯά • จࣈྻݕࡧ • ଐੑϑΟϧλ • ଐੑΛΦϒδΣΫτͱ͖ͯ͠Βͳ͍ͱ͍͚ͳ͍͔͠Εͳ͍ • શͯදࣔ ΛݸผͷΞΠςϜͱ͓͍ͯͨ͠ํ͕ྑ͍ • ιʔτ
Slide 81
Slide 81 text
006*ͷ࣮ફ 006*ͷ·ͱΊ w ΦϒδΣΫτநग़ w λεΫ͔ΒͷΦϒδΣΫτͷదͳநԽଐੑΞΫγϣϯ w Ϗϡʔఆٛ w γϯάϧϏϡʔίϨΫγϣϯϏϡʔભҠؔ w ϨΠΞτఆٛ w σβΠϯύλʔϯʹجຊతʹै͓͖ͬͯ͘
Slide 82
Slide 82 text
ϏδϡΞϧσβΠϯ ᶆ 7JTVBMEFTJHO
Slide 83
Slide 83 text
ϏδϡΞϧσβΠϯͷίπ ͜ͷষͷྲྀΕ • ʹݟ͑Δ࠷ऴܗΛσβΠϯ͢Δͱ͖ͷίπʹ͍ͭͯͰ͢ • σβΠϯͷ4ݪଇ • εϖʔγϯά • λΠϙάϥϑΟ • ৭ • ϝϯλϧϞσϧ
Slide 84
Slide 84 text
ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ • σβΠϯɾϨΠΞτͰԡ͑͞Δ͖ݪଇ • ۙ: ؔ͢Δใ͚ۙͮΔ • ྻ: Ұ࿈ͷใΛྻͤͯ͞දࣔ͢Δ • ରൺ: ॏཁͳใͱͦ͏Ͱͳ͍ใͷίϯτϥετΛ͚ͭΔ • ෮: ಉҰͷϞνʔϑΛ܁Γฦ͠༻͍Δ
Slide 85
Slide 85 text
ϏδϡΞϧσβΠϯͷίπ ۙ1SPYJNJUZ ؔ͠ͳ͍ใԕ͚͟Δɺؔ͢Δใ͚ۙͮΔ ྻ "MJHONFOU ݟ͑ͳ͍ઢʹἧ͑ͯஔ͢Δ͜ͱͰใͷؔ࿈ੑΛڧௐ ରൺ $POUSBTU ڧௐ͍ͨ͠ใେ͖͞ɾ৭Λڧ͘දࣔ͢Δ ෮ 3FQFUJUJPO ಛత ౷ҰతͳݟͨͷͷΛ܁Γฦ͠༻͍Δ
Slide 86
Slide 86 text
ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇۙ શผΞΠςϜˠ͍Ϛʔδϯ ݟग़͠ͱຊจͷ۠Γˠڱ͍Ϛʔδϯ
Slide 87
Slide 87 text
ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇྻ ্ἧ͑ ྆ἧ͑ ࠨἧ͑
Slide 88
Slide 88 text
ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇྻ • ྻ͕όϥόϥͩͱݟͮΒ͍ • Լͷྫ˔͕શମॎதԝɺλΠτϧͱจষ͕ࠨɺจষ͕྆தԝ ݟͮΒ͍
Slide 89
Slide 89 text
ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇରൺ • ॏཁͳใڧௐɺͦ͏Ͱͳ͍ใཱͨͳ͘ • େ͖͞ɺ৭ɺଠ͞ɺεϖʔγϯάͰௐ
Slide 90
Slide 90 text
ϏδϡΞϧσβΠϯͷίπ ৭ɾϑΥϯταΠζɾϑΥϯτΣΠτͷมߋΛͳͯ͘͠ΈΔ
Slide 91
Slide 91 text
ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ෮ • ಉҰͷϞνʔϑΛ܁Γฦ͢ • ಛʹΞϓϦέʔγϣϯͷ߹ɺಉҰͷڍಈΛ͢Δίϯϙʔωϯτͷ ݟͨΛ౷Ұ͖͢ Send Follow Send Follow OK! NG
Slide 92
Slide 92 text
ϏδϡΞϧσβΠϯͷίπ ήγϡλϧτ৺ཧֶ • ਓؒ·ͣશମͷߏʢήγϡλϧτʣΛೝࣝ͢Δ • ήγϡλϧτͱใͷཧతߏ͕Ұக͍ͯ͠Δͱخ͍͠ • ۙͷཁҼ: ͍ۙͷΛ·ͱ·Γͱͯ͠ଊ͑Δ → ۙݪଇ • ྨಉͷཁҼ: ࣅͯΔͷΛ·ͱ·Γͱͯ͠ଊ͑Δ → ෮ݪଇ • ด߹ͷཁҼɺྑ͍࿈ଓͷཁҼͱ͍͏ͷ͋Δ
Slide 93
Slide 93 text
ϏδϡΞϧσβΠϯͷίπ ۙͷཁҼ ྨಉͷཁҼ ด߹ͷཁҼ Α͍࿈ଓͷཁҼ
Slide 94
Slide 94 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά • Կ͔ͱԿ͔ͷؒͷۭനͷऔΓํʹ͍ͭͯ • ۙݪଇʹରԠ͢Δߏཁૉ • CSSϕʔεͩͱɺେࡶʹೋͭʹ͔ΕΔ • ίϯϙʔωϯτؒͷۭനʢmarginʣ • ίϯϙʔωϯτͱͦͷࢠཁૉͷؒͷۭനʢpaddingʣ
Slide 95
Slide 95 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά • Կ͔ͱԿ͔ͷؒͷۭനͷऔΓํʹ͍ͭͯ • ۙݪଇʹରԠ͢Δߏཁૉ • CSSϕʔεͩͱɺେࡶʹೋͭʹ͔ΕΔ • ίϯϙʔωϯτؒͷۭനʢmarginʣ • ίϯϙʔωϯτͱͦͷࢠཁૉͷؒͷۭനʢpaddingʣ
Slide 96
Slide 96 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάNBSHJOͱQBEEJOH margin padding
Slide 97
Slide 97 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ • ༨നेʹɺ͋ΒΏΔͷʹઃఆ͢Δ • ځ۶/༨༟͕ͳ͍ͳͱײͨ͡ΒύσΟϯάΛ͚ͭΔ͜ͱΛݕ౼ • Ұ؏ੑͷ͋ΔεϖʔγϯάΛ͢Δ • ྻݪଇͱؔ࿈͕ਂ͍ • ༨നͷऔΓํͰҹΛίϯτϩʔϧͰ͖Δ • ҰʹೖΔใྔΛௐ͢Δ
Slide 98
Slide 98 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ༨നेʹऔΔ • marginɾpaddingຊจจࣈαΠζͷ͙Β͍ཉ͍͠ • ࠨͷྫߦؒͷҰ؏ੑ่Ε͍ͯͯਏ͍ λΠτϧλΠτϧ ʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇ͚ ཱ͕֯ͭɻͲ͜ӽͯ͠ॅΈʹ͘ ͍ͱޛͬͨ࣌ɺࢻ͕ੜΕͯɺը͕ग़ དྷΔɻͱ͔͘ʹਓ λΠτϧλΠτϧ ʹᑫͤ͞ྲྀ͞ΕΔɻஐʹಇ ཱ͚͕֯ͭɻͲ͜ӽͯ͠ ॅΈʹ͍͘ͱޛͬͨ࣌ɺࢻ͕ੜ
Slide 99
Slide 99 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά • ۭനͷେ͖͞ɾͲ͜ʹۭനΛஔ͔͘ʹ͍ͭͯҰ؏ͨ͠ϧʔϧ͕͋Δͱ ྑ͍ • ΟϯυશମͷύσΟϯά • λΠτϧͱຊจͷؒͷϚʔδϯɹͳͲ • Կ͔୯ҐΛܾΊͯͦΕͷഒʹ͢ΔͱΉඞཁ͕ݮΔ • جຊ8pxͷഒɺඍௐ͍ͨ͠ͱ͖4pxͷഒɹͳͲ
Slide 100
Slide 100 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά • ϧʔϧΛܾΊΔࡍɺରͱͳΔίϯϙʔωϯτͷཻΛߟྀ͢Δ • େ͖͍ॱʹ • ηΫγϣϯؒͷεϖʔε • ΦϒδΣΫτؒͷεϖʔε • ίϯϙʔωϯτͷεϖʔε • ্ԼࠨӈͰ౷Ұͨ͠༨നΛऔΔ
Slide 101
Slide 101 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά • Material Design Guidelineͷྫʢ⚠marginͳͲͷ༻๏͕͜ͷࢿྉͱҟͳΔʣ (VUUFS EQEQ 7FSUJWBM.BSHJO EQEQ )PSJ[POUBM.BSHJO
Slide 102
Slide 102 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτεϖʔεͷ༩͑Δҹ • εϖʔεΛେ͖͘։͚Δ • ΏͬͨΓͱͨ͠ҹ • ίϯςϯπʹूத͍ͤͨ࣌͞ • εϖʔεΛͦ͜·Ͱ։͚ͳ͍ • ଟ͘ͷใ͔ΒબͤΔ࣌
Slide 103
Slide 103 text
ϏδϡΞϧσβΠϯͷίπ ྫ: ϝσΟΞϓϥοτϑΥʔϜʢτοϓʣ https://note.com/
Slide 104
Slide 104 text
ϏδϡΞϧσβΠϯͷίπ ྫ: ϝσΟΞϓϥοτϑΥʔϜʢίϯςϯπʣ https://note.com/
Slide 105
Slide 105 text
ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά·ͱΊ • marginͱpaddingͷ2ͭͷύλʔϯͷ༨നͷऔΓํ͕͋Δ • ͋ΒΏΔཁૉʹదͳ༨നΛͱΔʂ • Ұ؏ੑͷ͋ΔεϖʔγϯάϧʔϧΛ࣋ͭ • ίϯϙʔωϯτͷཻ͝ͱʹదͳ༨നΛ
Slide 106
Slide 106 text
ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ • จࣈͷදࣔͷํͷ͜ͱ • େ͖͞ɺ৭ɺଠ͞ɺϑΥϯτɺจࣈؒɺߦؒɺஈམؒεϖʔε…… • ରൺݪଇɾۙݪଇʹରԠ͢Δ
Slide 107
Slide 107 text
ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟจࣈαΠζ • ࠷؆୯ʹใʹڧऑΛ͚ͭΔ͜ͱ͕Ͱ͖Δ • جຊ λΠτϧ >> ຊจ > ٭ • จࣈαΠζʹݟ߹ͬͨ༨ന͕ඞཁ • ͑ΔจࣈαΠζͷϧʔϧΛ࡞͓ͬͯ͘ͱྑ͍ • λΠϓγεςϜͱ͍͏
Slide 108
Slide 108 text
ϏδϡΞϧσβΠϯͷίπ traQͷλΠϓγεςϜ
Slide 109
Slide 109 text
ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟϑΥϯτ • ͍Ζ͍Ζ͋Δ • ΰγοΫ → ͋Δఔͷจɺ໌ே → ຊͳͲͷจ • ෳࡶͳσβΠϯͷϑΥϯτ͋ΔఔͷจࣈαΠζΛ֬อ͢Δ
Slide 110
Slide 110 text
ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟϑΥϯτΣΠτ • ϑΥϯτ͍͔ͭ͘ͷଠ͞ʢ = ΣΠτʣΛ͍࣋ͬͯΔ߹͕͋Δ • વଠ͍ͱཱͭ • ଟ༻ʹҙ • ࡉ͘͢Δͱཱͨͳ͘ͳΔ • ༨നΛޮՌతʹ͏ͱݟग़͠ʹ͑Δ • খ͍͞จࣈͷΣΠτʹҙ
Slide 111
Slide 111 text
ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟจࣈؒ • ͍͜ͳ͢ͷ͕͍͠ • ͔ͳΓҙਂ͍ௐ͕ඞཁ খ ͞ ͍ จ ࣈ Ͱ จ ࣈ ؒ Λ ͱ Δ ଠ͍ จࣈͷจࣈؒΛ٧ΊΔɻ
Slide 112
Slide 112 text
ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟߦؒɾஈམؒ • جຊతͳൃεϖʔγϯάͷ࣌ͱಉ͡ʢߦؒ < ஈམؒʣ • ߦؒ௨ৗϑΥϯταΠζͷ1.2ഒఔ • 1.2ഒҎԼಡΈͮΒ͘ͳΔ • 1.5ഒ → ΏͬͨΓΊͷUI • 2ഒ → ͔ͳΓΏͬͨΓɺίϯςϯπϝΠϯͷUI
Slide 113
Slide 113 text
ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟߦؒɾஈམؒ ߦؒ αϯϓϧ ʹᑫͤ͞ྲྀ͞Ε Δɻஐʹಇཱ͚͕֯ ͭɻͲ͜ӽͯ͠ॅ Έʹ͍͘ͱޛͬͨ࣌ɺ ࢻ͕ੜΕͯɺը͕ग़དྷ Δɻͱ͔͘ ʹᑫͤ͞ྲྀ͞Ε Δɻஐʹಇ͚͕֯ ཱͭɻͲ͜ӽͯ͠ ॅΈʹ͍͘ͱޛͬ ͨ࣌ɺࢻ͕ੜΕͯɺ ը͕ग़དྷΔɻͱ͔͘ ʹᑫͤ͞ྲྀ͞Ε Δɻஐʹಇ͚͕֯ ཱͭɻͲ͜ӽͯ͠ ॅΈʹ͍͘ͱޛͬ ͨ࣌ɺࢻ͕ੜΕͯɺ ʹᑫͤ͞ྲྀ͞Ε Δɻஐʹಇ͚͕֯ ཱͭɻͲ͜ӽͯ͠ ॅΈʹ͍͘ͱޛͬ
Slide 114
Slide 114 text
ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ·ͱΊ • ·ͣຊจͷαΠζɾϑΥϯτΛܾΊΔ • ͔ͦ͜Βੜͯ͠ݟग़͠٭ͳͲͷαΠζΛߟ͑Δ • → λΠϓγεςϜΛ࡞Δ • Ұ؏ੑΛ࣋ͬͨλΠϓγεςϜͷద༻Λ͍ͯ͘͠
Slide 115
Slide 115 text
ϏδϡΞϧσβΠϯͷίπ ৭ • ͍Ζ͍Ζͳཁૉ͕͋Δ • τʔϯ • ৭ͷ࣋ͭΠϝʔδ • ආ͚ͨํ͕ྑ͍৭ • ࠓճΧϥʔύϨοτΛ࡞Γɺద༻͢Δ͜ͱΛߟ͑Δ
Slide 116
Slide 116 text
ϏδϡΞϧσβΠϯͷίπ ৭جૅࣝ)4- • ৭Λ3ͭͷύϥϝʔλʔΛͬͯද͢ํ๏ • ৭૬(Hue) : ͲΜͳ৭͔ • ࠼(Saturation) : ͲΕ͚ͩ৭͔͔ • ໌(Luminance) : ͲΕ͚ͩ໌Δ͍͔
Slide 117
Slide 117 text
ϏδϡΞϧσβΠϯͷίπ 24ׂͷ৭૬ʢ৭૬͜Εʹ͓͚ΔҐஔʣ
Slide 118
Slide 118 text
ϏδϡΞϧσβΠϯͷίπ ্͕࠼0→1ɺԼ͕໌0→1ʢ৭૬205°ʣ
Slide 119
Slide 119 text
ϏδϡΞϧσβΠϯͷίπ ৭جૅࣝτʔϯ • ࠼ͱ໌͕৭ͷงғؾΛܾΊΔ • 2ͭΛ߹ମͤͨ͞τʔϯͱ͍͏৭ͷྨ͕͋Δ • ϏϏουτʔϯɺϒϥΠττʔϯɺετϩϯάτʔϯɺ…… • ӳࣈͰུ͢͜ͱ͕͋Δʢv, b, s, lt, sf, …ʣ
Slide 120
Slide 120 text
ϏδϡΞϧσβΠϯͷίπ ৭جૅࣝτʔϯͱ৭ͷΈ߹Θͤ • τʔϯΛج४ʹ͢Δͱɺ࣍ͷΑ͏ʹ৭Λબ͍͍ͯײ͡ʹͳΔ • ಉ͡τʔϯ͔Β2৭ • ಉ͡৭૬ͰҟͳΔτʔϯ͔Β2৭ • ͦͷଞ৭૬ϕʔεͷิ৭ɺτϥΠΞυɺςτϥʔυͳͲ • άά͍ͬͯͩ͘͞
Slide 121
Slide 121 text
ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ • ࣍ͷఔͷ৭͕୯७͚ͩͲ͍͍͢ΧϥʔύϨοτ • Primary color: αʔϏεશମͷΩʔΧϥʔ • Secondary color: Primaryͱͷ۠ผΛ͍ͨ͠ͱ͖ͷ৭ • Text Color: จࣈ৭ • Background Color: എܠ৭
Slide 122
Slide 122 text
ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ1SJNBSZDPMPS • αʔϏεͷΠϝʔδͱͳΔ৭ • ཁॴཁॴͰ͍ͬͯ͘ͷ͕ྑ͍ • ॏཁͳϘλϯɺಛʹཱ͍ͨͤͨཁૉɺ…… • ͍͗͢Δͱҙຯ߹͍͕΅͚ͯ͠·͏ͷͰΞΫηϯτఔʹ • UI༻ʹओཁʹ༻͍Δผͷ৭Λઃఆͯ͠ྑ͍ʢtraQͦ͏ʣ
Slide 123
Slide 123 text
ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ4FDPOEBSZDPMPS • PrimaryҎ֎Ͱ͋Δ͜ͱΛࣔͨ͢Ίͷ৭ • ΩϟϯηϧͳͲɺऑ͍ΞΫγϣϯʹରͯ͠͏ • ࠼Ίͷ৭ʹ͢ΔͱΘ͔Γ͍͢ • ϘʔμʔΛڧ੍͢Δ͜ͱߟ͑ΒΕΔ
Slide 124
Slide 124 text
ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ#BDLHSPVOEUFYUDPMPS • എܠจࣈ৭ • Primary colorͱಉ͡৭૬ͷࠇനΛ͏ͱ͍͍ײ͡ʹ·ͱ·Δ
Slide 125
Slide 125 text
ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ࡞Δʹʁ • ͍Ζ͍Ζͳ৭Λ͏ͷͱ͍ͯ͠ͷͰ৭ΛߜΔ • PrimaryΛҰ৭ܾΊΔ • ͜ΕαʔϏεͷओ࣠ͷ৭ͳͷͰؤுܾͬͯΊΔ • v͔Βগ͠֎ͯ͠b, l, lt, sfͳͲΛ͏ͷ͕ྲྀߦΓͬΆ͍ • secondary, text, backgroundಉ৭૬ผτʔϯ͔ΒબͿ
Slide 126
Slide 126 text
ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ͍ํ • ΧϥʔύϨοτΛ࡞ͬͯͦͷ͍ํΛܾΊͳ͍ͱҙຯ͕ͳ͍ • Primary colorΛΞΫηϯτఔʹ͏+શମΛനܥͰ·ͱΊΔ • ͖ͬ͢ΓϞμϯɺμʔΫϞʔυରԠָ͕ • Primary colorΛଟ͘͏ • ͘ͳΓ͕ͪͰඇৗʹ͍͠
Slide 127
Slide 127 text
ϏδϡΞϧσβΠϯͷίπ ΧϥʔύϨοτͷΠϝʔδ
Slide 128
Slide 128 text
ϏδϡΞϧσβΠϯͷίπ ΧϥʔύϨοτͷΠϝʔδ
Slide 129
Slide 129 text
ϏδϡΞϧσβΠϯͷίπ ৭ආ͚͍ͨ৭ • ਅͬࠇʢ#000000ʣ • Ͳͷ৭ʹରͯͬͯ͠ίϯτϥετ͕ݫ͍͠ • จࣈ৭ʹഎܠ৭ʹίϯτϥετ͕ݫ͍͠ • ໌Λগ্͛ͯ͠ɺprimary colorͷ৭૬ʹدͤΔͱ
Slide 130
Slide 130 text
ϏδϡΞϧσβΠϯͷίπ ৭ආ͚͍ͨ৭ • ݪ৭ʢ#ff0000, #00ff00, #0000ffʣ • Θͳ͍ํ͕ྑ͍ • ઈରʹจࣈ৭Λ͜ͷ৭ʹ͍͚ͯ͠ͳ͍ • ϏϏουτʔϯʢ͜ͷ3ͭ΄ͲͰͳ͍͕ʣආ͚͍ͨ • গ͠࠼ΛԼ͛Δɾ໌Λ͍͡ΔͳͲͨ͠৭Λprimaryʹ͏ͱྑ͍͔
Slide 131
Slide 131 text
ϏδϡΞϧσβΠϯͷίπ ৭৭ͷ࣋ͭΠϝʔδ • ৭ʹ͔ͦ͜Β࿈͞ΕΔΠϝʔδ͕͋Δ • άά͍ͬͯͩ͘͞ • ͕ΤωϧΪογϡɺ੨͕৴པɹͳͲ
Slide 132
Slide 132 text
ϏδϡΞϧσβΠϯͷίπ ϝϯλϧϞσϧ • Ϣʔβʔͷ͍࣋ͬͯΔɺදʹର͢ΔߦಈͷΠϝʔδ • ʮ͜ͷݟͨͷύʔπϘλϯͳͷͰɺԡ͢ͱԿ͔ى͜Δʯ • ίϯϙʔωϯτͷݟͨ͜ΕΛө͍ͯͯ͠ཉ͍͠ • ίϯϙʔωϯτ͕ঢ়ଶΛ࣋ͭ߹ө͍ͯͯ͠ཉ͍͠ • ʮಁ໌ͳϘλϯdisabledͩʯ
Slide 133
Slide 133 text
ϏδϡΞϧσβΠϯͷίπ ϝϯλϧϞσϧೝෛՙ • ϝϯλϧϞσϧʹԊ͍ͬͯͳ͍UIύʔπɺͦͷҙຯΛೝͮ͠Β͍ • ϢʔβʔʹೝෛՙΛڧ͍͍ͯΔঢ়ଶ • Կ͔ελϯμʔυͳදݱ͕͋Δ߹ͦΕʹै͏ • OSඪ४ͳͲ • ಉҰαʔϏεͰಉ͡ͷΛද͢ͷʹಉ͡දݱΛ͏ʢ෮ݪଇʣ
Slide 134
Slide 134 text
ϏδϡΞϧσβΠϯͷίπ ϏδϡΞϧσβΠϯ·ͱΊ • σβΠϯͷ4ݪଇ • εϖʔγϯά • ͱʹ͔͘దͳ༨നΛ͚ͭͯ͋͛Δ • λΠϙάϥϑΟ • ৭ • ϝϯλϧϞσϧ
Slide 135
Slide 135 text
͓ΘΓͰ͢