UIコンポーネント指向と「協働」

2016-09-07に行われた「Design For User #2 - コンポーネント指向から考えるUIと設計」でお話しました。
Mediumに記事としても上げています。そちらもあわせてどうぞ。
https://medium.com/@axross/2c3dbca01ab9

Transcript

1. 6*؝ٝه٦طٝز䭷ぢה
   չ⼿⫴պ
   !BYSPTT
   %FTJHO'PS6TFSPO
   

   View Slide

2. רֻ
   ˖ !BYSPTT
   ˖ "QQMJDBUJPO%FWFMPQFS
   ˖ ؿٔ٦ٓٝأ
   ˖ (SBQI2-דך؟٦غ٦Ꟛ涪
   ˖ 3FBDUדך8FCؙٓ؎،ٝزꟚ涪ծ鏣鎘؟ه٦زזו
   

   View Slide

3. 8FCؿٗٝزؒٝسך㢌⻉
   ˖ չK2VFSZכ׮ֲ〢ְպז׿ג鎉׻׸׷
   ˖ 3FBDUծ"OHVMBS
   ˖ 6*׾ػ٦خ׀הח⡲׏גְֻ
   ˖ 剑穄涸ח׉׸׵׾穈׫さ׻ׇג歗꬗׾圓䧭ׅ׷
   

   View Slide

4. 8FC⟃㢩ח׮˘
   ˖ 3FBDU/BUJWF
   ˖ 3FBDUך؝٦سك٦أ׾欽ְגJ04ծ"OESPJE،فٔ׾Ꟛ涪
   ˖ 'MVUUFS
   ˖ (PPHMFָꟚ涪ծ剑鵚'VDITJBח״׏ג鑧겗ח
   ˖ %BSU鎉铂׾欽ְגJ04ծ"OESPJE،فٔ׾Ꟛ涪
   ˖ ؽُ٦ך罋ִ倯כ3FBDUח؎ٝأػ؎،ׁ׸גְ׷
   

   View Slide

5. ➙װ葿׿ז׮ךָ
   չ6*؝ٝه٦طٝز䭷ぢպ
   

   View Slide

6. 6*؝ٝه٦طٝز䭷ぢד
   ֲתֻ⼿⫴דֹג׷׌׹ֲַ
   

   View Slide

7. ז׿ֲַתֻ
   דֹגְזְ孡ָׅ׷
   

   View Slide

8. رؠ؎ش٦הؒٝآص،כ罋ִ倯ָ麩ֲ
   w σβΠφʔ͸ͲͪΒ͔ͱݴ͏ͱશମ͔Βߟ͑Δ܏޲ʹ͋Γ·͢ɻେ·͔ͳ
   ߏ੒ɺͭ·ΓϨΠΞ΢τΛߟ͔͑ͯΒগͣͭ͠தʹ͋ΔύʔπΛ࡞ΓࠐΜ
   Ͱ͍͖·͢ɻ
   w ʮ෦඼Λ࡞Γ·͠ΐ͏ʯͱࢦࣔͯ͠΋खΛಈ͔ͤͳ͍σβΠφʔ͕͍ͨͱ
   ͯ͠΋ɺͦΕ͸࠽ೳ͕ͳ͍͔ΒͰ͸ͳ͘ɺٯཱͪͯ͠࡞ΕͱݴΘΕ͍ͯΔ
   Α͏ʹฉ͑͜Δ͔Βͩͱࢥ͍·͢ɻ
   via: http://www.yasuhisa.com/could/article/ddd-ooux-job/
   

   View Slide

9. ➙傈⠗ִ׋ְֿה
   ˖ ؒٝآص،ؚٔٝ涸ז錁挿׾濼׏ג׮׵ִ׸ל
   ˖ رؠ؎ش٦ך䩛꟦ָ幾׵זְ׌׹ֲַ
   ˖ ؝ىُص؛٦ءّٝ♳ך㉏겗׾䱖ꤐדֹזְ׌׹ֲַ
   ˖ ؒٝآص،ַؚٔٝ׵鋅׋չ6*؝ٝه٦طٝز䭷ぢպ
   ˖ ׅ׀ְꨇ׃ְֽוծ嚊䙀涸ח铡僇׃גְֽ׸ל˘
   

   View Slide

10. ؒٝآص،ַؚٔٝ׵鋅׋
    չ6*؝ٝه٦طٝز䭷ぢպ
    

    View Slide

11. 6*؝ٝه٦طٝزչ䭷ぢպ
    ˖ չ6*؝ٝه٦طٝزպ׾穈׫さ׻ׇג歗꬗׾圓䧭ׅ׷
    

    View Slide

12. 6*؝ٝه٦طٝز
    ˖ 歗꬗׾圓䧭ׅ׷6*ך鿇ㅷ
    ˖ չنةٝպչؿؓ٦يպչشؽ؜٦ءّٝպ
    

    View Slide

13. 6*؝ٝه٦طٝز
    ˖ 醱侧ך6*؝ٝه٦طٝزך穈׫さ׻ׇד䧭׶甧א׮ך׮
    

    View Slide

14. ػ٦خַ׵Ⰻ⡤׾罋ִגְֻ
    ˖ ׉׮׉׮➙דכչ歗꬗պהְֲ嚊䙀כ㹋ח切僳
    ˖ ٌ٦تٖأז׮ך׾Ⰻג歗꬗ה䪔׏גְ׷䠬ָׅׄ׷
    ˖ 歗꬗׀הرؠ؎ׅٝ׷ךדכזְծػ٦خ嫣חرؠ؎ׅٝ׷
    ˖ ػ٦خ׾穈׫さ׻ׇג歗꬗׾⡲׏גְֻ
    ˖ ػ٦خ6*؝ٝه٦طٝز
    

    View Slide

15. ػ٦خה׃גך䕵ⶴ
    ˖ 6*؝ٝه٦طٝزד歗꬗׾圓䧭ׅ׷׋׭חכծ
    ˖ أة؎ٕ׾䭯׋ׇ׷
    ˖ ِ٦ؠ٦Ⰵ⸂ָ֮׷ֿה׾濼׏גְ׷
    ˖ 圫ղז⢪׻׸倯ח㼎䘔ׅ׷
    ˖ הְֲ괏חז׏גזֽ׸לז׵זְ
    

    View Slide

16. أة؎ٕ׾䭯׋ׇ׷
    ˖ 歗꬗♳ך6*ךקה׿וכծ植㹋⚅歲ך׮ך׾⢽ִ׷䕎ָ㢳ְ
    ˖ أُؗ،ٌ٦ؿ؍حؙד׮ؿٓحزד׮呎劤כずׄ
    
    ˖ 葿ծ؟؎ؤծ⡭涯ծن٦ت٦ծ䕦
    ˖ 歗꬗׾圓䧭ׅ׷銲稆ה׃גכծ׉ך䕵ⶴ׾卓׋ׇ׷鋅׋湡׾
    䭯׏גְזֽ׸לז׵זְ
    

    View Slide

17. أة؎ٕ׾䭯׋ׇ׷
    ˖ չنةٝպהְֲ6*؝ٝه٦طٝزז׵ծنةٝה׃גך䕵
    ⶴ׾卓׋ׇ׷鋅׋湡׾⪒ִגְ׷ץֹ
    

    View Slide

18. ِ٦ؠ٦Ⰵ⸂ָ֮׷ֿה׾濼׏גְ׷
    ˖ ؙٔحؙծأٙ؎فծمغ٦ծؗ٦ن٦سⰅ⸂
    ˖ ،فٔ؛٦ءّٝךקה׿וװ8FC؟؎زכծչِ٦ؠ٦ח
    ⡦ַ׾׃ג׮׵ֲպ׋׭ח֮׷
    ˖ չ⡦ַպِ٦ؠ٦Ⰵ⸂
    

    View Slide

19. ِ٦ؠ٦Ⰵ⸂ָ֮׷ֿה׾濼׏גְ׷
    ˖ չنةٝպכؙٔحׁؙ׸ֲ׷׃ծمغ٦ׁ׸ֲ׷
    ˖ չׁ׸ֲ׷պֿה׾6*؝ٝه٦طٝزכ濼׏גְ׷
    ˖ չ׉ך儗⡦׾ׅ׷ַպכ濼׵זֻגְְ
    ˖ ⱄⵃ欽䚍ך錁挿ַ׵׉ך倯ָ⸬卓涸
    

    View Slide

20. 圫ղז⢪׻׸倯ח㼎䘔ׅ׷
    ˖ 堣腉װ俑腞ח䘔ׄגְֻא׮6*؝ٝه٦طٝز׾⡲׷״׶
    ׮ծאך6*؝ٝه٦طٝز׾ְ׹׿ז皘䨽ד⢪ְת׻ׇ׷״
    ֲח׃׋倯ְְָ
    ˖ את׶稢ְַ锃侭ָדֹ׷״ֲחז׏גְזְהז׵זְ
    

    View Slide

21. 圫ղז⢪׻׸倯ח㼎䘔ׅ׷
    ˖ نةٝךչ葿饔պז׵չ饔ְنةٝպ
    ˖ نةٝךչ،؎؝ٝلٝպז׵لٝך،؎؝ָٝאֻ
    

    View Slide

22. فٗتؙزך⚥ח㶷㖈ׅ׷չٌظպ
    ˖ 傀㶷ך6*׾秡鍑ְגְֻהծ圫ղזٌظָ֮׷ֿהָ׻ַ׷
    ˖ 5XJUUFS
    ˖ ِ٦ؠ٦
    ˖ خ؎٦زծة؎يٓ؎ٝ
    ˖ عحءُةؚծٔأز
    ˖ 鸐濼ծت؎ؙٖزًحإ٦آծFUD
    

    View Slide

23. 6*؝ٝه٦طٝزח׮ٌظכ秡בֻ
    ˖ 6*؝ٝه٦طٝز׀החו׿זٌظח秡בַֻ׮罋ִגֶֻ
    ˖ ؒٝآص،ؚٔٝחכׅ׀ֻ㣐ⴖזֿה
    ˖ 嚊䙀הꟼ⤘䚍׮侭椚ׁ׸׷
    

    View Slide

24. ⼿⫴חֶֽ׷
    6*؝ٝه٦طٝز䭷ぢ
    

    View Slide

25. 歗꬗׀הךرؠ؎ٝ项俱כ知僒⻉דֹ׷
    ˖ ؒٝآص،חכծ䗳銲ז䞔㜠כֿ׸ד׮⠗׻׷
    

    View Slide

26. 项俱׮չ6*؝ٝه٦طٝز׀הպח
    ˖ ➿׻׶חծ6*؝ٝه٦طٝز׀החرؠ؎ٝؖ؎سٓ؎ٝ׾
    剅ְ׋׵ְְ
    ˖ ؝ىُص؛٦ءّٝך麣Ⱗָ稢ⴓ⻉ׁ׸׷
    ˖ 醱꧟䚍׮稢ⴓ⻉ׁ׸׷
    

    View Slide

27. 歗꬗׀הךرؠ؎ٝכ醱꧟חז׶װְׅ
    ˖ ⬁׵ָ⡲׷فٗتؙزכ䎃ղ醱꧟חז׏גְ׷
    ˖ 歗꬗׀החծ歗꬗朐䡾׀החرؠ؎ٝ项俱׾⡲׷ה˘
    ˖ 罋䣁怩׸כ涪欰׃זְ׌׹ֲַ
    ˖ ⠗麦笨繎䚍׾䬐⥂דֹ׷׌׹ֲַ
    ˖ 钠陎ךؤٖכ䬸ַזְ׌׹ֲַ
    ˖ 鏣鎘♳ך濨湼כ涪欰׃זְ׌׹ֲַ
    

    View Slide

28. 鳞ְ
    

    View Slide

29. ؝ىُص؛٦ءّٝך麣Ⱗ׾稢ⴓ⻉ׅ׷
    ˖ رؠ؎ٝؖ؎سٓ؎ٝכ؝ىُص؛٦ءّٝך׋׭ך项俱
    ˖ ؝ىُص؛٦ءّٝך麣Ⱗ׾稢ⴓ⻉ׅ׷䠐㄂ד׮ծ6*؝ٝ
    ه٦طٝز䭷ぢכ⸬卓涸
    ˖ ؝ىُص؛٦ءّٝח㉏겗ָ֮׷הծㅷ颵כ♴ָ׷
    ˖ 鏣鎘ַ׵稢ַֻׅ׸לծ㉏겗כ稢ַֻז׶װְׅ
    

    View Slide

30. 稢ַֻז׏׋㉏겗כ鍑寸׃װְׅ
    ˖ אאך鍑寸荈⡤ָ傍ְ
    ˖ 筨ꆀך钠陎ָ㺁僒
    ˖ ⴓ䬐ָ〳腉
    ˖ ׉׮׉׮ծ涪欰⵸ח㉏겗ח孡➰ֹװְׅ
    

    View Slide

31. תה׭
    ˖ 6*؝ٝه٦طٝز䭷ぢכչ稢ⴓ⻉պהְֲ،فٗ٦ث
    ˖ ⡲׶倯׾稢ַֻ
    ˖ 葿׿ז㉏겗׮稢ַֻ
    ˖ ؒٝآص،ؚٔٝ׾㼰׃׻ַ׷הծ
    ˖ װ׵זְהְֽזְֿהָ幾׷ַ׮׃׸זְ
    ˖ ؝ىُص؛٦ءّٝח״׷㉏겗ָ幾׷ַ׮׃׸זְ
    

    View Slide

32. 葺ְفٗتؙز׾
    ⡲׸׷ث٦يח׃״ֲ
    

    View Slide

33. ➙傈ך鑧כ俑畍ד׮铣׭תׅ
    
    

    View Slide

34. 5IBOLZPV
    GPSZPVSBUUFOUJPO
    

    View Slide