@uenitty͡Ίͯͷ OOUIwellday OOUIϫʔΫγϣοϓ 2022/03/09
View Slide
ࢀߟॻ2• ༰͔ͳΓল͍͍ͯ·͢• ࣗͷղऍͰ࠶ߏ͍ͯ͠·͢• ؒҧ͍͕͋ͬͨΒ͝ΊΜͳ͍͞• ͥͻຊΛಡΜͰ͍ͩ͘͞ʂhttps://www.sociomedia.co.jp/10046
OOUIͱ3• ΦϒδΣΫτࢦUIʢObject-Oriented User Interfaceʣ• OOUIʮ͍͢͞ʯͱʮ։ൃ͢͠͞ʯཱ͕྆Ͱ͖Δ
ΦϒδΣΫτࢦͱ4• ΦϒδΣΫτ• ͯɺతɺରɺͷ• ࢦ• ͋Δํతʹ͔͏͜ͱɺ͔ΘͤΔ͜ͱ• ΦϒδΣΫτࢦ• ͯͷରʹண͢Δ͜ͱ
ΦϒδΣΫτࢦͱ5• ΦϒδΣΫτ• ͯɺతɺରɺͷ• ࢦ• ͋Δํతʹ͔͏͜ͱɺ͔ΘͤΔ͜ͱ• ΦϒδΣΫτࢦ• ͯʹண͢Δ͜ͱ
۩ମྫ6• πΠʔτ Λ ߘ͢Δ• πΠʔτ Λ Ӿཡ͢Δ• πΠʔτ ʹ ͍͍Ͷ͢Δ• πΠʔτ Λ আ͢Δ
۩ମྫ7• πΠʔτ Λ ߘ͢Δ• πΠʔτ Λ Ӿཡ͢Δ• πΠʔτ ʹ ͍͍Ͷ͢Δ• πΠʔτ Λ আ͢Δ໊ࢺ ಈࢺͯ ػೳΦϒδΣΫτ λεΫ
ΦϒδΣΫτΛࢦͨ͠UIͷྫ8πΠʔτ• ࠷ॳ͔Βͯͷର͕ݟ͍͑ͯΔ• ૢ࡞ରΛબͯ͠ɺΞΫγϣϯΛબ͢Δ• ໊ࢺ → ಈࢺ• ܾ·ͬͨૢ࡞ॱংͳ͍• ϞʔυϨε
λεΫΛࢦͨ͠UIͷྫ9ߘ͢ΔӾཡ͢Δ͍͍Ͷ͢Δআ͢Δ
λεΫΛࢦͨ͠UIͷྫ10ߘ͢ΔӾཡ͢Δ͍͍Ͷ͢Δআ͢Δ
λεΫΛࢦͨ͠UIͷྫ11ߘ͢ΔӾཡ͢Δ͍͍Ͷ͢Δআ͢Δ
λεΫΛࢦͨ͠UIͷྫ12ߘ͢ΔӾཡ͢Δ͍͍Ͷ͢Δআ͢Δ͍͍Ͷ͢ΔπΠʔτΛબ͍ͯͩ͘͠͞
λεΫΛࢦͨ͠UIͷྫ13ߘ͢ΔӾཡ͢Δ͍͍Ͷ͢Δআ͢Δ͍͍Ͷ͢ΔπΠʔτΛબ͍ͯͩ͘͠͞
λεΫΛࢦͨ͠UIͷྫ14ߘ͢ΔӾཡ͢Δ͍͍Ͷ͢Δআ͢Δ• ର͕ݟ͍͑ͯͳ͍• ΞΫγϣϯΛબͯ͠ɺૢ࡞ରΛબ͢Δ• ಈࢺ → ໊ࢺ• ૢ࡞Λ࢝ΊΔͱଞͷ͜ͱ͕Ͱ͖ͳ͍• Ϟʔμϧ
λεΫࢦUI15• Ͱ͖Δ͜ͱͷ͚ͩબࢶ͕ඞཁͳͨΊɺը໘ߏը໘ભҠෳࡶʹͳΔ• খ͞ͳ༷มߋػೳՃͰେنͳ։ൃ͕ඞཁʹͳΓɺ݅ذ͕૿͑ΔͨΊόάଟ͍ΦϒδΣΫτࢦUIσβΠϯ p.39
ΦϒδΣΫτࢦUI16• Ͱ͖Δ͜ͱ͕ଟ͔ͬͨΓ૿͑ͨΓͯ͠ɺը໘ߏૢ࡞ํ๏γϯϓϧͳ··• ༷มߋػೳՃͷখنͰࡁΈɺ݅ذ͕গͳ͘όάগͳ͍ΦϒδΣΫτࢦUIσβΠϯ p.40
ΦϒδΣΫτࢦUIͷݪଇ17• ΦϒδΣΫτΛ֮Ͱ͖తʹಇ͖͔͚ΒΕΔ• ΦϒδΣΫτࣗͷੑ࣭ͱঢ়ଶΛମݱ͢Δ• ΦϒδΣΫτબ→ΞΫγϣϯબ ͷૢ࡞ॱং• ͯ͢ͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ͢Δ
ΦϒδΣΫτΛ֮Ͱ͖తʹಇ͖͔͚ΒΕΔ18• ର͕ݟ͓͑ͯΓɺʮԿΛͰ͖Δ͔ʯͷώϯτ͕ಘΒΕΔ• ৮Δ͜ͱ͕Ͱ͖ɺରͷมԽͱͯ͠࡞ۀ݁Ռ͕ೝࣝͰ͖Δ
ΦϒδΣΫτࣗͷੑ࣭ͱঢ়ଶΛମݱ͢Δ19• Ϣʔβʔ͕ঢ়گΛѲ͠ɺ࣍ʹߦ͏͖ૢ࡞Λߟ͑ΒΕΔΑ͏ʹ͢Δ• ϢʔβʔͷΞΫγϣϯʹରͯ͠ϦΞϧλΠϜʹԠΛฦ͢• ϦΞϧੈքͷཧੑΛ࣋ͬͨʮͷʯͱಉ͡ײ֮Ͱѻ͑ΔΑ͏ʹ͢Δhttps://www.sociomedia.co.jp/9267
ΦϒδΣΫτબ→ΞΫγϣϯબ ͷૢ࡞ॱং20• ʮ໊ࢺ→ಈࢺʯͷૢ࡞ॱংʹ͢Δ͜ͱ• ʮಈࢺ→໊ࢺʯݱ࣮Ͱ͋Γ͑ͳ͍ʢ͔͛ͯΒੴΛ࣋ͭਓ͍ͳ͍ʣhttps://www.sociomedia.co.jp/87401. ΦϒδΣΫτબ2. ΞΫγϣϯબ
ͯ͢ͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ͢Δ21• ϦΞϧੈքͷ๏ଇΛϝλϑΝʔʹɺόʔνϟϧੈքͷؔΘΓํΛࣗવʹମಘͰ͖ΔΑ͏ʹԋग़͢Δ• ΞϥϯɾέΠ͜ΕΛʮϢʔβʔΠϦϡʔδϣϯʯͱݺΜͰॏཁੑΛઆ͍ͨhttps://www.apple.com/jp/macos/big-sur-preview/
͜ΕOOUI22https://www.apple.com/jp/newsroom/
͜ΕOOUI͡Όͳ͍23https://www.aichibank.co.jp/atm/using/guide/
͜ΕOOUI24https://abema.tv/
͜ΕOOUI͡Όͳ͍25https://abema.tv/channels/payperview-1/slots/AakjKLgTGb6msuΞΧϯτ͋Γ &ίΠϯ͋Γͷ߹ߪೖྃΞΧϯτ͋Γ &ίΠϯͳ͠ͷ߹్தͰΩϟϯηϧͷ߹ৼΓग़͠ʹΔΞΧϯτͳ͠ &ίΠϯͳ͠ͷ߹
OOUI͕࣮ݱ͢Δʮ͍͢͞ʯ26• ୭Ͱ͑Δಓ۩• iPhoneʹઆ໌ॻ͕ͳ͍• ΦϒδΣΫτͷԠΛݟͳ͕Βࢼߦࡨޡ͢ΔதͰɺΓ͍ͨ͜ͱΛ࣮ݱͰ͖Δ• ࣗ༝ͳૢ࡞ॱং• ϞʔυϨε
OOUI͕࣮ݱ͢Δʮ࡞Γ͢͞ʯ27• গͳ͍ը໘ɺγϯϓϧͳը໘ભҠ• λεΫࢦUIͩͱ5ʙ20ഒͷը໘͕ඞཁʹͳΔ※• গͳ͍݅ذ = গͳ͍όά• ෳࡶͳ݅ذɺϢʔβʔͷࢥߟஅͷதʹҠಈ͢Δ• ਖ਼֬ͳݟੵɺαʔϏεͷૉૣ͍ै• มΘΓʹ͍͘ͷΛ࣠ʹ࣮͢Δ͜ͱʹͳΔͨΊɺมߋՕॴ͕໌֬ʹͳΓɺ͕গͳ͘ͳΔ※ ΦϒδΣΫτࢦUIσβΠϯ p.ix
OOUIઃܭͷجຊεςοϓ28
OOUIઃܭͷجຊεςοϓ291. ΦϒδΣΫτͷநग़ʢϞσϧʣ2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ3. ϨΠΞτύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ͜ΕΒΛॱෆಉͰ܁Γฦ͠ௐ͠ɺશମͱͯ͠ͷ·ͱ·ΓΛ࡞Γ্͛Δ
1. ΦϒδΣΫτͷநग़ʢϞσϧʣ30• ϢʔβʔͷϝϯλϧϞσϧۀͷதʹͲͷΑ͏ͳ֓೦͕ଘࡏ͍ͯ͠Δ͔ௐΔ• ͋Δ֓೦͕ΦϒδΣΫτͱ͍͑Δ͔அ͢Δख͕͔Γ• ͑ΒΕΔ໊ࢺͱͯ͠දͤΔ• ಉछͷू߹ͱͯ͠ཧ͞ΕಘΔ• ڞ௨ͷΞΫγϣϯΛ͍࣋ͬͯΔΦϒδΣΫτࢦUIσβΠϯ p.54
2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ31• ͻͱ·ͱ·ΓͷใදࣔྖҬʢϏϡʔʣͱͦΕΒͷݺͼग़ؔ͠ʢφϏήʔγϣϯʣΛߟ͑Δ• 1ͭͷΦϒδΣΫτɺ໘ʹԠͯ࢟͡Λม͑ɺҟͳΔ໘ੵใͷৄࡉͰϢʔβʔʹ͚ͯද͞ΕΔͨΊɺ͜ͷதؒతͳநͷϨΠϠʔ͕ॊೈͳOOUIΛߏங͢Δ্ͰॏཁʹͳΔΦϒδΣΫτࢦUIσβΠϯ p.100
2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ32• Ϗϡʔʢͻͱ·ͱ·ΓͷใදࣔྖҬʣͷछྨେ͖͘2ͭ• ίϨΫγϣϯɿಉछͷΦϒδΣΫτΛෳฒͯදࣔ͢Δͷ• γϯάϧɿ1ͭͷϏϡʔͰ1ͭͷΦϒδΣΫτΛදࣔ͢ΔͷΦϒδΣΫτࢦUIσβΠϯ p.56
2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ33• ΦϒδΣΫτؒͷܨ͕Γͱଟॏੑ͔ΒࢀরՄೳੑΛಋ͖ɺφϏήʔγϣϯΛఆٛ͢Δ• φϏήʔγϣϯϏϡʔಉ࢜ͷݺͼग़ؔ͠Ͱ͋Γɺը໘ભҠͰͳ͍͜ͱʹҙ• ΠϯλϥΫγϣϯը໘ͱ͍͏୯Ґʹґଘ͠ͳ͍நͷϨΠϠʔΦϒδΣΫτࢦUIσβΠϯ p.56
3. ϨΠΞτύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ34ΦϒδΣΫτࢦUIσβΠϯ p.58ΦϒδΣΫτࢦUIσβΠϯ p.57
3. ϨΠΞτύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ35ΦϒδΣΫτࢦUIσβΠϯ p.59ΦϒδΣΫτࢦUIσβΠϯ p.58
3. ϨΠΞτύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ36• ΠϯλϥΫγϣϯΛө͢ΔΑ͏ʹϏϡʔΛஔͯ͠ɺϢʔザʔが࣮ࡍʹʹ͢Δը໘Λߏ͢Δ• ը໘ͷ୯ҐΛม͑Δ͜ͱでɺ·ͬͨ͘ಉじUIϞデϧͰҟͳΔը໘ڥʹରԠで͖Δ• ͢ͰʹҰൠԽ͍ͯ͠ΔϨΠΞτύλʔϯΛ౿ऻ͢Δ͜ͱͰɺϢʔβʔͷֶशޮૢ࡞ੑΛ্Ͱ͖Δ
جຊͷ࣮ફྫ37
λεΫͷஅยΛચ͍ग़͢38• ΞϓϦέʔγϣϯ͕ൃ͞Εͨͱ͖ͷখ͞ͳҙࣝͷू·Γ• ࣄલͷϦαʔνཁٻੳͳͲʹΑͬͯἧ͑ΔΦϒδΣΫτࢦUIσβΠϯ p.64
໊ࢺΛநग़͢Δ39• ػցతʹൈ͖ग़͢ͷͰͳ͘ɺϢʔβʔͷؔ৺ͷରͱͳΔ֓೦Կ͔Λߟ͑ͯൈ͖ग़͢ΦϒδΣΫτࢦUIσβΠϯ p.65
໊ࢺಉ࢜ͷؔΛཧ͢Δ40• λεΫʹෳͷ໊ࢺؚ͕·ΕΔ߹ઢͰͭͳ͍Ͱؔ࿈Λࣔ͢ΦϒδΣΫτࢦUIσβΠϯ p.67
໊ࢺΛ൚Խ͠ɺཻΛἧ͑Δ41• λεΫͷதʹग़ͯ͜ͳ໊͍ࢺΛ৽ͨʹཱͯͯྑ͍• ·ͱΊํʹܾ·Γͳ͍ʢؔ৺ྖҬʹΑΔͨΊʣΦϒδΣΫτࢦUIσβΠϯ p.68
໊ࢺͷؔੑΛͭͳ͛Δ42• ಉ໊͡ࢺΛ౷߹ͯ͠ɺωοτϫʔΫঢ়ʹͭͳ͛Δ• ΞϓϦέʔγϣϯશମΛ௨ͯ͡ѻΘΕΔΦϒδΣΫτͷߏ͕ݟ͑ͯ͘ΔΦϒδΣΫτࢦUIσβΠϯ p.69
ϝΠϯΦϒδΣΫτͱͦͷଟॏੑΛಛఆ͢Δ43• ΦϒδΣΫτͷ༏ઌΛߟ͑ͯɺओཁͳͷͱͦ͏Ͱͳ͍ͷʹ͚Δ• ͚ํʹܾ·Γͳ͍ʢؔ৺ྖҬʹΑΔͨΊʣ• ϝΠϯΦϒδΣΫτؒͰଟॏʹͳΔՄೳੑ͕͋Δͷͷଆʹʮ*ʯΛ͚ΔΦϒδΣΫτࢦUIσβΠϯ p.70
ਵ͢ΔΦϒδΣΫτΛϓϩύςΟʹ͢Δ44• λεΫʹ໌ࣔ͞Ε͍ͯͳͯ͘ɺඞཁʹͳΓͦ͏ͳϓϩύςΟ͕͋ΕՃ͢Δ• ؔ࿈͢ΔϝΠϯΦϒδΣΫτಉ࢜ͦΕͧΕͷϓϩύςΟͰ͋Δͱߟ͑ΔΦϒδΣΫτࢦUIσβΠϯ p.71
λεΫͷಈࢺ͔ΒΞΫγϣϯΛݟ͚ͭΔ45• ϓϩύςΟͱಉ༷ʹɺඞཁʹͳΓͦ͏ͳΞΫγϣϯ͕͋Εิ͢Δ• ʮ֬ೝ͢ΔʯͳͲΞΫγϣϯʹؚΊͳ͍ʢදࣔ͢ΕࡁΉͨΊʣ• ϓϩύςΟʹඥͮ͘ΞΫγϣϯɺϝΠϯΦϒδΣΫτʹඥ͚ͮΔ͔ϓϩύςΟ໊ΛೖΕͨΞΫγϣϯΛͭ͘ΔͱΘ͔Γ͍͢ΦϒδΣΫτࢦUIσβΠϯ p.75
ϝΠϯΦϒδΣΫτʹϏϡʔΛ༩͑Δ46• ্ਤ2छྨͷϏϡʔΛػցతʹ༻ҙ͍ͯ͠Δ͕࠷ऴతʹলུ͢Δ߹͋ΔʢOOUIຊ p.79ࢀরʣɻলུͷஅޙͷஈ֊Ͱྑ͍• ίϨΫγϣϯϏϡʔ͔ΒγϯάϧϏϡʔΛݺͼग़͢ྲྀΕΛҹͰࣔ͢ΦϒδΣΫτࢦUIσβΠϯ p.79
Ϗϡʔؒͷݺͼग़ؔ͠Λݕ౼͢Δ47• ϝΠϯΦϒδΣΫτಉ࢜ͷͭͳ͕Γͱଟॏੑ͔ΒࢀরՄೳੑΛಋ͖ग़͠ɺφϏήʔγϣϯͱͯ͠ͷݺͼग़ؔ͠Λఆٛ͢Δ• ௨ৗɺγϯάϧϏϡʔΛࢀরݩͱͯ͠ɺଟॏੑ͕͋Δ߹ίϨΫγϣϯϏϡʔ͕ࢀরઌʹɺଟॏੑ͕ͳ͍߹γϯάϧϏϡʔ͕ࢀরઌʹͳΔΦϒδΣΫτࢦUIσβΠϯ p.82
ϧʔτφϏήʔγϣϯ߲Λબఆ͢Δ48• ϝΠϯΦϒδΣΫτͷத͔ΒಛʹॏཁͳͷΛฒΔ• Ϣʔβʔ͕ΞϓϦέʔγϣϯΛ͏ࡍʹɺ࠷ॳʹࢥ͍ු͔ΔΦϒδΣΫτΛબఆ͢Δ• ΞϓϦέʔγϣϯΛʮػೳʯͰͳ͘ʮͷʯ͕ฒΜͰ͍ΔΠϝʔδͰଊ͑ΔΦϒδΣΫτࢦUIσβΠϯ p.82
ϨΠΞτΛݕ౼͢Δ49• ϝΠϯΦϒδΣΫτಉ࢜ͷࢀরؔΛ౿·͑ͯϨΠΞτύλʔϯΛద༻͢Δ• OOUIʹదͨ͠ϨΠΞτύλʔϯͷղઆOOUIຊΛࢀরͷ͜ͱʢεϥΠυʹॻ͖Εͳ͍΄Ͳ͔ͬ͠Γղઆ͞Ε͍ͯ·͢ʣΦϒδΣΫτࢦUIσβΠϯ p.92
ϏδϡΞϧσβΠϯΛߦ͏50• ʑมԽ͢ΔϏδϡΞϧදݱͷτϨϯυϓϥοτϑΥʔϜ͝ͱͷඪ४ͳͲΛߟྀͭͭ͠ɺݟ͘͢Θ͔Γ͍͢දݱʹ͢ΔΦϒδΣΫτࢦUIσβΠϯ p.121
OOUIΛֶΔࢿྉ51
OOUIຊ52• ΦϒδΣΫτࢦUIσβΠϯ͍͍͢ιϑτΣΞͷݪཧ• OOUIʹ͍ͭͯͷຊޠͷॻ੶ͨͿΜ͜Ε͚ͩhttps://www.sociomedia.co.jp/10046
• ຊΛಡΉલʹશମ૾Λ௫Ήͷʹ͓͢͢Ί• 1࣌ؒ͋Γ·͢OOUIຊͷஶऀͷొஃಈը53https://youtu.be/2jqXiAhqCm0?t=4097
OOUIຊͷஶऀͷϒϩάͱTwitter54• ຊͱҧ͏ΓޱͰઆ໌͞Ε͍ͯΔ͜ͱ͕͋Γɺཧղ͕ਂ·Δhttps://www.sociomedia.co.jp/category/blog https://twitter.com/manabuueno
·ͱΊ55
OOUI ͍͖ͬͯ·͠ΐ͏ʂ56• ΦϒδΣΫτࢦUI• ʮ͍͢͞ʯͱʮ։ൃ͢͠͞ʯΛཱ྆͢ΔιϑτΣΞͷʮݪཧʯ• ໊ࢺ → ಈࢺ• ○ϞʔυϨεɺ✗Ϟʔμϧ• എܠͷֶ۩ମతͳઃܭํ๏ɺ͢ͰʹλεΫࢦͳUIΛΦϒδΣΫτࢦʹ͢Δํ๏ͳͲৄࡉใɺॻ੶ಈը͕͓͢͢Ί
uenitty
lmi
chumajin
cybozuinsideout
k1low
coconala_engineer
leveragestech
oldbigbuddha
yutoy
nagix
toshi0383
line_developers_tw
frogandcode
philhawksworth
iamctodd
caitiem20
phodgson
jmmastey
trishagee
andyhume
orderedlist
addyosmani
brad_frost
bkeepers