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
複雑なアプリケーションにオブジェクト指向UIで立ち向かう
Search
cawpea
February 14, 2018
Design
120k
28
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
複雑なアプリケーションにオブジェクト指向UIで立ち向かう
Goodpatch Engineer Meetup Vol.4で発表した資料です。
https://goodpatch.connpass.com/event/77080/
cawpea
February 14, 2018
More Decks by cawpea
See All by cawpea
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
240
不確実なソフトウェア開発におけるUXエンジニアの意義と役割
masakiohsumi
9
14k
デザインとエンジニアリングをつなぐコンポーネントの運用設計
masakiohsumi
6
10k
デザイナーとエンジニアの垣根を取り払う"デザインエンジニア"という考え方
masakiohsumi
7
4.5k
Other Decks in Design
See All in Design
言幹と言葉(Stems & Leaves)
kakukoki
0
200
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
hiro93n
1
380
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
3
5k
富山デザイン勉強会_ブラッシュアップデザイン.pdf
keita_yoshikawa
0
110
Debiasing Your Software Design Decision-Making @ Flowcon '26
baasie
1
160
root COMPANY DECK / We are hiring!
root_recruit
4
30k
decksh object reference
ajstarks
2
1.8k
Basket_of_love.pdf
terencebasart
0
280
CULTURE DECK/Marketing Director
mhand01
0
1.7k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
karad
0
180
セブンデックス プロジェクト事例 / innovation Scenes
sevendex
1
1.7k
Design dependencies
teba_eleven
0
160
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
Docker and Python
trallard
47
4.2k
A Soul's Torment
seathinner
6
3.5k
WENDY [Excerpt]
tessaabrams
12
39k
Rails Girls Zürich Keynote
gr2m
96
14k
Utilizing Notion as your number one productivity tool
mfonobong
4
560
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.3k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
290
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
750
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2k
Chasing Engaging Ingredients in Design
codingconduct
0
290
Transcript
ෳࡶͳΞϓϦέʔγϣϯʹ ΦϒδΣΫτࢦ6*Ͱཱ͔ͪ͏
େ֯কً.BTBLJ0ITVNJ 'SPOUFOE%FWFMPQFS !N@PITVNJ NBTBLJPITVNJ
None
ͱ͋ΔΞϓϦέʔγϣϯͰ๊͍͑ͯͨΈ
αΠτͷಋઢɺػೳ͕ෳࡶͰ ϚχϡΞϧΛݟͳ͍ͱ͍͜ͳͤͳ͍
ϚχϡΞϧ͕ແͯ͑͘Δͷ
Ҿ༻ݩɿIUUQCMVFTQFBLFSKQEPXOMPBETXBMMQBQFSXPPETIFMGIUNM
Ҿ༻ݩɿIUUQCMVFTQFBLFSKQEPXOMPBETXBMMQBQFSXPPETIFMGIUNM J1IPOFͷֶशޮ͕ߴ͍ͷͦͷ6*͕ΦϒδΣΫτϕʔεͰ ઃܭ͞Ε͍ͯΔ͔ΒͰ͢ɻͭ·ΓϞʔυϨεͰ͋Δ͜ͱ͕େ͖ ͳϑΝΫλʔʹͳ͍ͬͯ·͢ɻ༏Εͨ (6* ΞϓϦέʔγϣϯ ʹରͯ͠Ϣʔβʔ͕ʮϚχϡΞϧΛಡ·ͳͯ͑͘Δʯͱײ ͡Δͷͩͱ͢ΕɺͦΕखॱ͕͍͔֮͑͢ΒͰͳ͘ɺ ܾͦͦ·ͬͨखॱ͕ແ͍͔ΒͳͷͰ͢ɻ OOUX
– ΦϒδΣΫτϕʔεͷUIϞσϦϯά
6*ͷجຊ λεΫϕʔεͱΦϒδΣΫτϕʔε
$6* ಈࢺ໊ࢺͷߏจ (6* ໊ࢺಈࢺͷߏจ λεΫϕʔε ΦϒδΣΫτϕʔε ྫSNd%FTLUPQTBNQMFUYU ྫTBNQMFUYUΛબͯ͠ΰϛശʹҠಈ
ϢʔβʔΞΫγϣϯ͝ͱʹ࣮ߦॱংΛ֮͑Δඞཁ͕͋Δ λεΫϕʔεͰ࡞ΒΕͨΞϓϦέʔγϣϯͷྫ ࠶ੜ ࣸਅҰཡ ࣸਅৄࡉ ฤू ࣸਅҰཡ ࣸਅฤू ফڈ ࣸਅҰཡ
ࣸਅআ ΞΫγϣϯʢಈࢺʣΛબͨ͠ޙʹࣸਅʢ໊ࢺʣΛબ͢Δ ΦϦϯύεϛϡʔͷϝχϡʔ
ࣸਅҰཡ ࣸਅৄࡉ μϯϩʔυ ฤू ΦϒδΣΫτϕʔεͰ࡞ΒΕͨΞϓϦέʔγϣϯͷྫ Ϣʔβʔ࠷ॳʹରΛબͼɺͦΕʹରԠ͢ΔΞΫγϣϯΛࣗ༝ʹબͰ͖Δ ࣸਅʢ໊ࢺʣΛબͨ͠ޙʹΞΫγϣϯʢಈࢺʣΛબ͢Δ %SPQCPYͷ8FC্ͷࣸਅҰཡ আ
ΦϒδΣΫτϕʔεͷ6*ϢʔβʔΛϞʔυ͔Βղ์͠ɺ զʑ͕ಓ۩ͷ͍ํʹ͍ؔͯ࣋ͬͯ͠Δجຊతͳϝϯλϧ ϞσϧΛө͠·͢ɻఝΛଧͭ࣌ɺզʑ·ͣϋϯϚʔΛ ࣋ͪɺͦΕ͔ΒৼΓԼΖ͠·͢ɻৼΓԼΖ͔ͯ͠ΒϋϯϚʔ Λ࣋ͭਓ͍ͳ͍ͷͰ͢ɻ l z OOUX – ΦϒδΣΫτϕʔεͷUIϞσϦϯά
ΦϒδΣΫτϕʔεͰ6*Λઃܭ͢Δ
Ϣʔβʔͷؔ৺ͷରͰ͋ΔΦϒδΣΫτΛΫϥεͱͯ͠ ఆٛ͠ɺͦΕΛͦͷ··εΫϦʔϯʹొͤ͞ΔͷͰ͢ɻ $PVOUFSQBSUc.PEFMFTTBOE.PEBM l z
ΦϒδΣΫτͱlϢʔβʔͷؔ৺ࣄz
ࣗͷϝοηʔδΛߘ͍ͨ͠ ΈΜͳͷϝοηʔδΛӾཡ͍ͨ͠ ୭͔ͷϝοηʔδΛڞ༗͍ͨ͠ ͨͱ͑ɺ5XJUUFSͷzϢʔβʔͷؔ৺ࣄzԿ͔ʁ
໊ࢺΦϒδΣΫτͱͯ͠நग़Ͱ͖Δ ࣗͷϝοηʔδΛߘ͍ͨ͠ ΈΜͳͷϝοηʔδΛӾཡ͍ͨ͠ ୭͔ͷϝοηʔδΛڞ༗͍ͨ͠ lϢʔβʔz ΦϒδΣΫτ lϝοηʔδz ΦϒδΣΫτ
ࣗͷϝοηʔδΛߘ͍ͨ͠ ΈΜͳͷϝοηʔδΛӾཡ͍ͨ͠ ୭͔ͷϝοηʔδΛڞ༗͍ͨ͠ ಈࢺΞΫγϣϯͱͯ͠நग़Ͱ͖Δ lߘzɺzӾཡzɺzڞ༗z ΞΫγϣϯ
நग़͞ΕͨΦϒδΣΫτͱΞΫγϣϯ ΦϒδΣΫτ ΞΫγϣϯ ຊ࣭త ݱత Ϣʔβʔ ϝοηʔδ ߘ Ӿཡ ڞ༗
ΦϒδΣΫτมΘΓʹ͘͘ɺΞΫγϣϯมΘΓ͍͢
㲔 ΦϒδΣΫτΛϕʔεʹ6*ϞσϧΛઃܭ͢Δ ΦϒδΣΫτ Ϗϡʔ ϝοηʔδ Ϣʔβʔ ϝοηʔδҰཡ ϝοηʔδͷ ίϨΫγϣϯ ϝοηʔδৄࡉ
ɾϝοηʔδͷ༰ ɾϦπΠʔτ ɾ͍͍Ͷ Ϣʔβʔৄࡉ ɾ໊લ ɾϓϩϑΟʔϧը૾ ɾߘͨ͠ϝοηʔδ ڞ༗ɺআ ฤू ৽نߘ
6*ϞσϧΛϕʔεʹϫΠϠʔϑϨʔϜΛߟ͑Δ 6TFSOBNF ϝοηʔδҰཡ ϝοηʔδͷ ίϨΫγϣϯ ϝοηʔδৄࡉ w ϝοηʔδͷ༰ w ϦπΠʔτ
ʜ Ϣʔβʔৄࡉ w ໊લ w ϓϩϑΟʔϧը૾ ʜ
6*ϞσϧΛϕʔεʹϫΠϠʔϑϨʔϜΛߟ͑Δ 6TFSOBNF ϝοηʔδҰཡ ϝοηʔδͷ ίϨΫγϣϯ ϝοηʔδৄࡉ w ϝοηʔδͷ༰ w ϦπΠʔτ
ʜ Ϣʔβʔৄࡉ w ໊લ w ϓϩϑΟʔϧը૾ ʜ ΦϒδΣΫτΛϕʔεʹใઃܭ͢ΔࣄʹΑͬͯ ޮతͰແବͷͳ͍6*Λߟ͑͘͢ͳΔ
ΦϒδΣΫτࢦ6*͕ ΤϯδχΞϦϯάʹͨΒ͢ͷ
λεΫϕʔεͷ6* ϝοηʔδฤू ϝοηʔδҰཡ" σʔλ ϢʔβʔΠϯλʔϑΣʔε ϝοηʔδআ ϝοηʔδҰཡ# औಘ
\ NFTTBHFT< \JE CPEZlGPPz^ \JE CPEZlCBSz^ \JE CPEZlCB[z^ > ^ औಘ
ΦϒδΣΫτϕʔεͷ6* ϝοηʔδҰཡ ϝοηʔδฤू σʔλ ϢʔβʔΠϯλʔϑΣʔε ϝοηʔδআ औಘ \ NFTTBHFT<
\JE CPEZlGPPz^ \JE CPEZlCBSz^ \JE CPEZlCB[z^ > ^ ػೳՃ
ΦϒδΣΫτϕʔεͷ6* ϝοηʔδҰཡ ϝοηʔδฤू σʔλ ϢʔβʔΠϯλʔϑΣʔε ϝοηʔδআ औಘ \ NFTTBHFT<
\JE CPEZlGPPz^ \JE CPEZlCBSz^ \JE CPEZlCB[z^ > ^ ػೳՃ ΦϒδΣΫτϕʔεͷ6*σʔλͷө͕ త͔ͭن͕େ͖͘ͳͬͯෳࡶԽ͠ʹ͘͘ͳΔ
˓˓ը໘ͷ࣌ͷ˚˚ϘλϯͷσβΠϯΛมߋ ͍͍ͯ͠Ͱ͔͢ʁ ˚˚Ϙλϯผͷը໘Ͱͬͯ·͕͢ɺ ͦ͜มߋ͍͍ͯ͠Ͱ͔͢ʜʁ σβΠφʔ ΤϯδχΞ σβΠϯΛมߋ͢Δ࣌ʹ࣌ં͋Δޫܠ ͳΔ΄Ͳʜɻͪΐͬͱ֬ೝ͠·͢ɻ σβΠφʔ
σβΠϯ͕෦తʹ͔͠ߟ͑ΒΕ͓ͯΒͣɺ֬ೝʹख͕͔͔ؒΔ σβΠφʔͱೝ͕ࣝ߹Θͣɺ͕ͦͦల։͞ΕΔ ࣮ޙʹߟྀ࿙Ε͕ൃ֮͠ɺۓٸରԠ͕ൃੜ͢Δ 6*͕ෳࡶͳ࣌ʹى͜Γ͕ͪͳͨͪ ʁ
σβΠϯ͕෦తʹ͔͠ߟ͑ΒΕ͓ͯΒͣɺ֬ೝʹख͕͔͔ؒΔ σβΠφʔͱೝ͕ࣝ߹Θͣɺ͕ͦͦల։͞ΕΔ ࣮ޙʹߟྀ࿙Ε͕ൃ֮͠ɺۓٸରԠ͕ൃੜ͢Δ 6*͕ෳࡶͳ࣌ʹى͜Γ͕ͪͳͨͪ ʁ 6*ͷෳࡶੑΛഉআ͢ΔࣄͰ ΤϯδχΞͱσβΠφʔͷ ίϛϡχέʔγϣϯΛԁʹ͢Δ
·ͱΊ
w ΦϒδΣΫτΛ·ͣબͤ͞ΔࣄͰɺϞʔυϨεͰࣗવͳ6*ʹͳΔ w ΦϒδΣΫτͰཧ͢ΔࣄʹΑͬͯແବͷͳ͍6*Λߟ͑͘͢ͳΔ σβΠϯతଆ໘ ٕज़తଆ໘ w 6*ͱσʔλͷॲཧ͕తʹͳΓɺίʔυ͕ෳࡶԽ͠ʹ͍͘ w 6*ͷෳࡶੑΛഉআ͢ΔࣄͰσβΠφʔͱڠಇ͘͢͠ͳΔ
ΦϒδΣΫτࢦతʹઃܭͰ͖Δ͔ߟ͑Α͏
ΤϯδχΞσβΠϯʹؔ৺Λ࣋ͬͯɺ ྑ͍Ϟϊ࡞͍͖ͬͯ·͠ΐ͏ɻ
5IBOLTGPSZPVSBUUFOUJPO