オブジェクト指向UIとは何か / What is Object-Oriented UI

Slide 1

Slide 1 text

@uenitty ΦϒδΣΫτࢦ޲UIͱ͸Կ͔ ABEMA weber ษڧձ 2020/09/16

Slide 2

Slide 2 text

ࢀߟॻ 2 • ಺༰͸͔ͳΓল͍͍ͯ·͢ • ࣗ෼ͷղऍͰ࠶ߏ੒͍ͯ͠·͢ • ؒҧ͍͕͋ͬͨΒ͝ΊΜͳ͍͞ • ͥͻຊΛಡΜͰ͍ͩ͘͞ʂ https://www.sociomedia.co.jp/10046

Slide 3

Slide 3 text

ͦͷଞͷࢀߟࢿྉ 3 https://youtu.be/2jqXiAhqCm0?t=4097 ! ! https://developer.apple.com/videos/play/wwdc2018/803/

Slide 4

Slide 4 text

ࠓճͷ಺༰ 4 • Ϣʔβʔͷओମੑ • UIͱ͸Կ͔ • ΦϒδΣΫτࢦ޲UIͱ͸Կ͔ • λεΫࢦ޲UI͸ͳͥආ͚Δ΂͖͔

Slide 5

Slide 5 text

Ϣʔβʔͷओମੑ 5

Slide 6

Slide 6 text

Ϗδωεͷ໨౰ͯ 6 • Ϗδωεతʹ͸ʮϢʔβʔ͔ΒۚΛר্͖͛ΒΕΕ͹Α͍ʯ͸ͣ... Ϣʔβʔ UI • ʮ࢖͍΍͍͢UIʯΛٻΊΔͷ͸ɺͳͥʁ • ࡞Γखͷࣗݾຬ଍ʁ

Slide 7

Slide 7 text

ແཧ΍Γߦಈͤͯ͞΋ɺܧଓͯ͘͠Εͳ͍ 7 • ࣗ༝͕ͳ͍ͷ͸ɺϢʔβʔʹͱͬͯετϨεͰ͔͠ͳ͍ • ैଐత • ໡໨త • ҉໧త • ར༻΍ࢧ࣋ͷܧଓʹ͸ʮϢʔβʔͷओମੑʯ͕ඞཁෆՄܽ

Slide 8

Slide 8 text

ࣗ༝͔ͩΒɺओମతʹͳΕΔ 8 • ࢖͍΍͍͢UI͸ɺ • ࣗ༝౓͕ߴ͍ • ૑଄తʹͳΕΔ • ࢖ָ͍͍ͬͯͯ͠ • ࢲ͕ͨͪٻΊ͍ͯΔ΋ͷ͸ɺ ʮ࢖͍΍͍͢UIʯ=ʮϢʔβʔʹओಋݖΛ༩͑ɺओମੑΛଅ͢UIʯ

Slide 9

Slide 9 text

Կ΋ͳ͠ʹओମతʹ͸ͳΕͳ͍ 9 • Ϣʔβʔ͸ʮ໨౰ͯʯΛ໨ͷ౰ͨΓʹͯ͠ɺओମతʹͳΔ • ओମੑΛଅ͢ʹ͸ɺ·ͣʮ໨౰ͯʯΛϢʔβʔʹݟͤΔ͜ͱ͔Β࢝ΊΔ • ʮओମʯੑΛଅͨ͢Ίʹʮ٬ମʯʹண໨͢΂͖ͳͷ͕ϙΠϯτ Photo by Rowan Heuvel on Unsplash ओମ = Ϣʔβʔ ٬ମ = αʔϏεͷ಺༰ɺϢʔβʔͷ໨౰ͯ ❤

Slide 10

Slide 10 text

ओମੑΛଅ͢ʮ΋ͷʯ 10 • ʮ٬ମʯʮ໨౰ͯʯʮ΋ͷʯ͸ӳޠͰʮObjectʯ • ٬ମʹண໨ͤΑ = ΦϒδΣΫτΛࢦ޲ͤΑ • ΦϒδΣΫτࢦ޲ͱ͸ɺ ʮ໨౰ͯʯΛ࣠ʹɺϢʔβʔʹʮओମੑʯΛଅ͢͜ͱ

Slide 11

Slide 11 text

UIͱ͸Կ͔ 11

Slide 12

Slide 12 text

UI = ϢʔβʔΠϯλʔϑΣʔε 12 • ಓ۩Λ࢖༻͢Δࡍʹ৮ΕΔ෦෼ͷ͜ͱ Photo by Kate Hliznitsova on Unsplash

Slide 13

Slide 13 text

ҜࢠͷUI 13 • ࠲Δͱ͖ʹ৮ΕΔɺ࠲໘ • ࣋ͬͯӡͿͱ͖ʹ৮ΕΔɺ٭΍എ΋ͨΕ Photo by Sam Moqadam on Unsplash

Slide 14

Slide 14 text

৘ใγεςϜͷUI 14 • ΩʔϘʔυ΍Ϛ΢εͳͲͷϋʔυ΢ΣΞ • ιϑτ΢ΣΞʹΑͬͯ σΟεϓϨΠʹݱ͞ΕΔʮܗʯ Photo by John Schnobrich on Unsplash ৘ใγεςϜͰ͸ɺUI͕ͦ͜ɺ ͦͷಓ۩͕ԿͰ͋Δ͔ͱ͍͏Ϣʔβʔͷೝ஌Λ࡞Δɺ࠷େͷઃܭςʔϚ

Slide 15

Slide 15 text

ಓ۩ੑΛݟ͍ͩ͢ɺਓͷओମੑ 15 • ਓྨ͸ͨͩͷੴΛɺੴثʹͨ͠ • ੴثͱ͍͏ಓ۩Λɺ ·ΔͰࣗ෼ͷ਎ମͷҰ෦ͷΑ͏ʹૢͬͨ • ૉखͰ͸ઓ͑ͳ͍֫෺ʹཱͪ޲͔͑ͨ • ৺ͷԆ௕ͷΑ͏ʹײ͡ΒΕΔಓ۩͕ ਓΛओମతʹ͖ͯͨ͠ ࠷ݹͷੴثʢPHOTOGRAPH BY SONIA HARMAND, NATIONAL GEOGRAPHIC CREATIVEʣ

Slide 16

Slide 16 text

ಓ۩Λ৺ͷԆ௕ͷΑ͏ʹײ͡ΒΕΔ͔ 16 • iPhone͕ఏڙ͢Δͷ͸ʮ໨౰ͯʯ=ʮΦϒδΣΫτʯʹ௚઀৮ΕΔମݧ • ओମੑ͕ۃ·ͬͨͱ͖ɺಓ۩ͷଘࡏ͸ҙ͔ࣝΒফ͑Δ https://developer.apple.com/videos/play/wwdc2018/803/

Slide 17

Slide 17 text

ΦϒδΣΫτࢦ޲UIͱ͸Կ͔ 17

Slide 18

Slide 18 text

ΦϒδΣΫτࢦ޲UIͷݪଇ 18 • ΦϒδΣΫτΛ஌֮Ͱ͖௚઀తʹಇ͖͔͚ΒΕΔ • ΦϒδΣΫτ͸ࣗ਎ͷੑ࣭ͱঢ়ଶΛମݱ͢Δ • ΦϒδΣΫτબ୒→ΞΫγϣϯબ୒ ͷૢ࡞ॱং • ͢΂ͯͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ੒͢Δ

Slide 19

Slide 19 text

ΦϒδΣΫτΛ஌֮Ͱ͖௚઀తʹಇ͖͔͚ΒΕΔ 19 • ର৅෺͕ݟ͓͑ͯΓɺʮԿΛͰ͖Δ͔ʯͷώϯτ͕ಘΒΕΔ • ৮Δ͜ͱ͕Ͱ͖ɺର৅෺ͷมԽͱͯ͠࡞ۀ݁Ռ͕ೝࣝͰ͖Δ ! "

Slide 20

Slide 20 text

ΦϒδΣΫτ͸ࣗ਎ͷੑ࣭ͱঢ়ଶΛମݱ͢Δ 20 • Ϣʔβʔ͕ঢ়گΛ೺Ѳ͠ɺ࣍ʹߦ͏΂͖ૢ࡞Λߟ͑ΒΕΔΑ͏ʹ͢Δ • ϢʔβʔͷΞΫγϣϯʹରͯ͠ϦΞϧλΠϜʹ൓ԠΛฦ͢ • ϦΞϧੈքͷ෺ཧੑΛ࣋ͬͨʮ΋ͷʯͱಉ͡ײ֮Ͱѻ͑ΔΑ͏ʹ͢Δ https://www.sociomedia.co.jp/9267

Slide 21

Slide 21 text

ΦϒδΣΫτબ୒→ΞΫγϣϯબ୒ ͷૢ࡞ॱং 21 • ʮ໊ࢺ→ಈࢺʯͷॱংΛపఈ͢Δ͜ͱ • ʮಈࢺ→໊ࢺʯ͸ݱ࣮Ͱ͸͋Γ͑ͳ͍ ʢ౤͔͛ͯΒੴΛ࣋ͭਓ͸͍ͳ͍ʣ https://www.sociomedia.co.jp/8740 1. ΦϒδΣΫτબ୒ 2. ΞΫγϣϯબ୒

Slide 22

Slide 22 text

͢΂ͯͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ੒͢Δ 22 • ϦΞϧੈքͷ๏ଇΛϝλϑΝʔʹɺ όʔνϟϧੈք΁ͷؔΘΓํΛ ࣗવʹମಘͰ͖ΔΑ͏ʹԋग़͢Δ • ΞϥϯɾέΠ͸͜ΕΛ ʮϢʔβʔΠϦϡʔδϣϯʯ ͱݺΜͰॏཁੑΛઆ͍ͨ https://www.apple.com/jp/macos/big-sur-preview/

Slide 23

Slide 23 text

ΦϒδΣΫτࢦ޲UI͕࣮ݱ͢Δ͜ͱ 23 • ୭Ͱ΋࢖͑Δಓ۩ • iPhoneʹ͸આ໌ॻ͕ͳ͍ • ΦϒδΣΫτͷ൓ԠΛݟͳ͕Βࢼߦࡨޡ͢ΔதͰɺ΍Γ͍ͨ͜ͱΛ ࣮ݱͰ͖Δ • ࣗ༝ͳૢ࡞ॱং • ϞʔυϨε

Slide 24

Slide 24 text

Ϟʔυ 24 • ݶΒΕͨૢ࡞͔͠ߦ͑ͳ͍ঢ়ଶͷ͜ͱ https://www.sociomedia.co.jp/9094 ϞʔυϨε = Ϟʔυ͔Βग़ͨঢ়ଶ Ϟʔμϧ = Ϟʔυʹೖͬͨঢ়ଶ

Slide 25

Slide 25 text

ϢʔβʔΛϞʔυ͔Βղ์ͤΑ 25 • ਓͷ৺͸ৗʹྲྀಈతͰɺܹࢗ΍ࢥߟʹ൓Ԡͯ͠มԽ͢ΔՄೳੑ͕͋Δ • UI͕ϞʔυΛ࡞ΔͱɺϢʔβʔʹಛఆͷਐ࿏Λڧཁ͢Δ͜ͱʹͳΔ • Ϣʔβʔʹૢ࡞ݖΛ༩͑ɺओମతʹ͢ΔͨΊɺϞʔυϨεΛపఈ͢΂͖

Slide 26

Slide 26 text

λεΫࢦ޲UI͸ͳͥආ͚Δ΂͖͔ 26

Slide 27

Slide 27 text

λεΫࢦ޲UIͷྫʢϑΝΠϧૢ࡞ʣ 27 • ಈࢺ→໊ࢺ • ʮର৅෺ͷબ୒଴ͪϞʔυʯ ͕ൃੜ͢ΔʢϞʔμϧʣ https://www.sociomedia.co.jp/9275

Slide 28

Slide 28 text

λεΫࢦ޲UIͷྫʢATMʣ 28 • ಈࢺ→໊ࢺ • ʮ࠷ॳ͔Β΍Γ௚͍ͯͩ͘͠͞ʯ͸ Ϟʔμϧͳূ • બ୒ࢶ͕ଟ͍ https://www.aichibank.co.jp/atm/using/guide/

Slide 29

Slide 29 text

λεΫࢦ޲UI͸ͳͥආ͚Δ΂͖͔ 29 • ಈࢺ→໊ࢺ • ʮ໨౰ͯʯʹରͯ͠ʮͲ͏͢Δ͔ʯΛߟ͑Δ͜ͱͦ͜ɺ ਓ͕૑଄ੑΛൃشͰ͖ΔྖҬ • UI͕ʮ΍Δ͜ͱʯΛࢦࣔ͢Δͷ͸ɺࣗ༝Λୣ͍ɺओମੑΛ࡟͙ • Ϟʔμϧ • ʮݶΒΕͨૢ࡞͔͠ߦ͑ͳ͍ঢ়ଶʯΛUI͕࡞Δͷ͸ɺϢʔβʔͷࣗ༝ͳ ߦಈΛ੍ݶ͢Δ͜ͱʹͳΔ

Slide 30

Slide 30 text

λεΫࢦ޲UI͸Ͳ͏ͯ͠ੜ·ΕΔͷ͔ 30 • Ϗδωεཁٻ΍Ϣʔβʔཁٻ͸ ΍Γ͍ͨ͜ͱϕʔε • ར༻खଓ͖ΛσβΠϯ͠Α͏ͱ͢Δ ʢձһొ࿥ϑϩʔɺߪೖϓϩηεʣ • ϢʔβʔମݧͷσβΠϯΛར༻खଓ ͖ͷσβΠϯͱצҧ͍͍ͯ͠Δ • Ϣʔβʔ໨ઢ͔Βൈ͚ग़͍ͤͯͳ͍ ʢϢʔβʔʹدΓఴͬͨͭ΋Γʣ

Slide 31

Slide 31 text

ΦϒδΣΫτࢦ޲UIΛσβΠϯ͢Δʹ͸ 31 • Ϗδωεཁٻ΍Ϣʔβʔཁٻ͸ ΍Γ͍ͨ͜ͱϕʔε • →ཁٻ͸ӏವΈʹͤͣɺטΈࡅ͍ͯ ΦϒδΣΫτʹ͢Δ • ར༻खଓ͖ΛσβΠϯ͠Α͏ͱ͢Δ ʢձһొ࿥ϑϩʔɺߪೖϓϩηεʣ • →खଓ͖͔ΒΦϒδΣΫτΛநग़͠ ϞʔυϨεΛపఈ͢Δ • ϢʔβʔମݧͷσβΠϯΛར༻खଓ ͖ͷσβΠϯͱצҧ͍͍ͯ͠Δ • →ྑ͍Ϣʔβʔମݧ͸Ϣʔβʔͷ ࣗओੑ͔Βੜ·ΕΔ͜ͱΛೝࣝ͢Δ • Ϣʔβʔ໨ઢ͔Βൈ͚ग़͍ͤͯͳ͍ ʢϢʔβʔʹدΓఴͬͨͭ΋Γʣ • →ϢʔβʔͱΦϒδΣΫτΛ ၆ᛌ͢Δʮୈࡾऀͷ໨ઢʯʹཱͭ

Slide 32

Slide 32 text

·ͱΊ 32

Slide 33

Slide 33 text

ΦϒδΣΫτࢦ޲UIͱ͸Կ͔ 33 • ΦϒδΣΫτΛࢦ޲ͯ͠ɺϢʔβʔʹओମੑΛଅ͢ • ʮ໊ࢺ→ಈࢺʯͷॱংͰʮϞʔυϨεʯΛపఈ͢Δ • ୭Ͱ΋࢖͑Δಓ۩ͷʮݪཧʯ