今更「dp」を考える / Let's think about "dp" now

2020年も12月になってAndroidのデザイン要素である「dp」について考えたお話です。社内用のものから修正が加わっています。

Transcript

1. ࠓߋʮEQʯΛߟ͑Δ
   FEPLVQ
   

   View Slide

2. :PTIJIJSP8BEBͲ͘ͽʔ
   !FEPLVQ
   $ZCFS"HFOU*OD"NFCB
   $BNFSB.PUPSTQPSU1IPUPHSBQIZ
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   3
   EQ
   "OESPJEΞϓϦͷσβΠϯͰ͸͔ܽͤͳ͍୯Ґ
   

   View Slide

4. w J04ΞϓϦʢJ1BE04͸ͪΐͬͱແࢹʣͷը໘σβΠϯΛߟ͑Δ
   w ը໘ͷԣ෯͸ʁ
   w ֤σόΠεʹ༩͑ΒΕΔʮ$44ϐΫηϧʯ͕ج४ʹͳΔ
   w ී௨ͷ୺຤QYJ1IPOF1SPɺJ1IPOF4&ʢOEHFOʣͱ͔
   w େ͖͍୺຤QYJ1IPOF1SP.BYɺJ1IPOFͱ͔
   w খ͍͞୺຤QYJ1IPOF4&ʢTUHFOʣ
   w ը໘ͷॎ෯͸ʁ
   w ͪ͜Β΋$44ϐΫηϧ͕ج४ɻ୺຤ʹΑͬͯͩͬͨΓͩͬͨΓ
   Ұ୴ࢀߟఔ౓ʹJ04J1IPOFͷ࿩Λ͠Α͏
   4
   

   View Slide

5. w J04ΞϓϦʢJ1BE04͸ͪΐͬͱແࢹʣͷը໘σβΠϯΛߟ͑Δ
   w ը໘ͷԣ෯͸ʁ
   w ֤σόΠεʹ༩͑ΒΕΔʮ$44ϐΫηϧʯ͕ج४ʹͳΔ
   w ී௨ͷ୺຤QYJ1IPOF1SPɺJ1IPOF4&ʢOEHFOʣͱ͔
   w େ͖͍୺຤QYJ1IPOF1SP.BYɺJ1IPOFͱ͔
   w খ͍͞୺຤QYJ1IPOF4&ʢTUHFOʣ
   w ը໘ͷॎ෯͸ʁ
   w ͪ͜Β΋$44ϐΫηϧ͕ج४ɻ୺຤ʹΑͬͯͩͬͨΓͩͬͨΓ
   Ұ୴ࢀߟఔ౓ʹJ04J1IPOFͷ࿩Λ͠Α͏
   5
   ʢ৔߹ʹΑͬͯ͸ʣ
   ԣ෯ʹ߹Θͤͨ௨Γͷ
   σβΠϯΛ͍ͯ͠Δɻ
   Χϧʔηϧͱ͔ɻ
   

   View Slide

6. "OESPJEΞϓϦσβΠϯʹ͓͚Δ
   ʮը໘ͷখ͍͞୺຤ʯͱ͸ʜʁ
   

   View Slide

7. ʮ෺ཧతʹʯখ͍͞σόΠε
   7
   3BLVUFO.JOJ
   ʢ໿Πϯνʣ
   1BMN1IPOF
   ʢΠϯνʣ
   6OJIFSU["UPN
   ʢΠϯνʣ
   

   View Slide

8. ʮ෺ཧతʹʯখ͍͞σόΠε
   8
   3BLVUFO.JOJ
   ʢ໿Πϯνʣ
   1BMN1IPOF
   ʢΠϯνʣ
   6OJIFSU["UPN
   ʢΠϯνʣ
   YQY
   YQY YQY
   

   View Slide

9. ʮ෺ཧతʹʯখ͍͞σόΠε
   9
   3BLVUFO.JOJ
   ʢ໿Πϯνʣ
   1BMN1IPOF
   ʢΠϯνʣ
   6OJIFSU["UPN
   ʢΠϯνʣ
   ը໘αΠζ͕ҰॹͰ΋ղ૾౓͕ҧͬͨΓɺ
   ղ૾౓͕ಉ͡Ͱ΋ը໘αΠζ͕ҧͬͨΓ͢Δ
   YQY
   YQY YQY
   

   View Slide

10. ʮ෺ཧతʹʯখ͍͞σόΠε
    10
    3BLVUFO.JOJ
    ʢ໿Πϯνʣ
    1BMN1IPOF
    ʢΠϯνʣ
    6OJIFSU["UPN
    ʢΠϯνʣ
    ଟछଟ༷͗ͯ͢
    Կ΋Θ͔ΒΜ
    YQY
    YQY YQY
    

    View Slide

11. ͜ΕΛͳΜͱ͔͠Α͏ͱͨ͠ͷ͕
    EQ
    

    View Slide

12. w EQɿEFOTJUZJOEFQFOEFOUQJYFMT
    w ີ౓ඇґଘϐΫηϧɻEJQͬͯݺ͹ΕΔ͜ͱ΋ɻ
    w "OESPJEΞϓϦ͸ʮEQʯͷ͓͔͛Ͱ֤୺຤ؒͰ͋Δఔ౓͸͍ΖΜͳը໘
    αΠζɾղ૾౓ͷ୺຤ΛαϙʔτͰ͖Δ
    EQͱ͸ͳΜͧ΍
    12
    

    View Slide

13. EQͰϨΠΞ΢τΛࢦఆͨ͠ͱ͖
    13
    YQY
    YQY
    ʢ΄΅ʣಉ͡େ͖͞
    

    View Slide

14. EQͰϨΠΞ΢τΛࢦఆ͠ͳ͔ͬͨͱ͖
    14
    YQY
    YQY
    େ͖͕͞มΘΔ
    

    View Slide

15. w QYʢQJYFMɿϐΫηϧʣ
    w ը໘ͷղ૾౓ͦͷ΋ͷɻ୺຤ͷεϖοΫදͰΑ͘ݟΔ஋ɻ
    w ΋ͪΖΜ୺຤ʹΑ༷ͬͯʑͳ஋͕͋Δ
    w )%ʢYQYʣɺ'VMM)%ʢYQYʣɺ
    ,ʢYQYʣʜ
    w "OESPJEͷը໘σβΠϯͰ͜ͷQYΛ࢖͏έʔε͸΄΅ग़ͯ͜ͳ͍
    w ΞΠίϯͷղ૾౓ͱ͔Ͱ͸࢖͏
    EQʹ·ͭΘΔ୯Ґʢʣ
    15
    

    View Slide

16. w EQJʢEPUTQFSJODIɿը໘ີ౓ʣ
    w ը໘ͷΠϯνʹҰମԿυοτؚ·Ε͍ͯΔ͔Λࣔ͢
    w ը໘ղ૾౓ͷQYͱը໘αΠζ͔Βࢉग़͞ΕΔ
    w 2ɿΠϯνͷεϚʔτϑΥϯͱΠϯνͷλϒϨοτͰಉ͡ϑϧ)%ɻ
    Ͱ͸ͲͪΒ͕EQJ͕େ͖͍ʁ
    EQʹ·ͭΘΔ୯Ґʢʣ
    16
    

    View Slide

17. w EQJʢEPUTQFSJODIɿը໘ີ౓ʣ
    w ը໘ͷΠϯνʹҰମԿυοτؚ·Ε͍ͯΔ͔Λࣔ͢
    w ը໘ղ૾౓ͷQYͱը໘αΠζ͔Βࢉग़͞ΕΔ
    w 2ɿΠϯνͷεϚʔτϑΥϯͱΠϯνͷλϒϨοτͰಉ͡ϑϧ)%ɻ
    Ͱ͸ͲͪΒ͕EQJ͕େ͖͍ʁ
    w "ɿεϚʔτϑΥϯͷ΄͏͕େ͖͍
    EQʹ·ͭΘΔ୯Ґʢʣ
    17
    

    View Slide

18. w EQJʢEPUTQFSJODIɿը໘ີ౓ʣ
    w ը໘ͷΠϯνʹҰମԿυοτؚ·Ε͍ͯΔ͔Λࣔ͢
    w ը໘ղ૾౓ͷQYͱը໘αΠζ͔Βࢉग़͞ΕΔ
    w 2ɿΠϯνͷεϚʔτϑΥϯͱΠϯνͷλϒϨοτͰಉ͡ϑϧ)%ɻ
    Ͱ͸ͲͪΒ͕EQJ͕େ͖͍ʁ
    w "ɿεϚʔτϑΥϯͷ΄͏͕େ͖͍
    EQʹ·ͭΘΔ୯Ґʢʣ
    18
    ը໘ղ૾౓͕୺຤ͰҟͳΕ͹ɺ౰વEQJ΋୺຤ͰҟͳΔ
    

    View Slide

19. w "OESPJEͰ͸൚༻ີ౓ͱݴ͍ɺEQJΛൣғͰ۠੾ͬͯΫϥε෼͚͍ͯ͠Δ
    EQʹ·ͭΘΔ୯Ґʢʣ
    19
    ൚༻ີ౓ %1*ͷൣғ ղ૾౓ͷഒ཰
    NEQJ dEQJ Y
    IEQJ dEQJ Y
    YIEQJ dEQJ Y
    YYIEQJ dEQJ Y
    YYYIEQJ dEQJ Y
    

    View Slide

20. w ֤EQJͦΕͧΕͰEQഒ཰͕ҧ͏ͷͰɺͦΕͧΕʹ߹Θͤͨը૾Λ༻ҙ͠
    ͳ͍ͱδϟΪʔͳը૾ʹͳͬͨΓ͢Δ
    w ͳͷͰ൚༻ີ౓͝ͱʹద੾ͳղ૾౓ͷը૾Λ༻ҙ͠ɺΧόʔ͢Δ͜ͱ
    ͕ਪ঑͞Ε͍ͯΔ
    w EQͰग़͍ͨ͠ͳΒQYΈ͍ͨͳ
    w J04Ͱݴ͏ͱ͜Ζͷ!Y!YͷྲྀΕ
    w ࠷ۙ͸7FDUPS%SBXBCMFͰTWH͔Βੜ੒ͨ͠ը૾͕࢖͑ΔΑ͏ʹͳͬͨͷ
    ͰൺֱతEQJຖʹϦιʔεΛ࡞Δػձ͸ݮͬͨ
    ༨ஊɿը૾ϦιʔεͷαΠζ
    20
    

    View Slide

21. w EQɿEFOTJUZJOEFQFOEFOUQJYFMT
    w ີ౓ඇґଘϐΫηϧɻEJQͬͯݺ͹ΕΔ͜ͱ΋ɻ
    w Ͳͷը໘ີ౓Ͱ΋ಉ͡Α͏ʹදࣔͰ͖ΔϐΫηϧ୯Ґͱ͍͏͜ͱɻ
    w EQ஋ΛEQJʹԠͯ͡ܭࢉ͢Δ͜ͱͰɺ࣮ࡍʹදࣔ͞ΕΔQYʹม׵͢Δ͜
    ͱ͕Ͱ͖Δɻ
    w QYEQY EQJ
    
    w ݫີʹ͸ઌड़ͷ൚༻ີ౓ͷഒ཰ʹ͸ͳΒͳ͍ͷͰɺʮYYYIEQJͷ୺຤ͩ
    ͔ΒEQ͸ඞͣQYʂʯͱ͍͏࿩Ͱ͸ͳ͍
    EQʹ·ͭΘΔ୯Ґʢʣ
    21
    

    View Slide

22. w ҰԠಉ͡ʮEQʯΛ֤EQJͷը໘ͰQYʹม׵ͯ͠ΈΔͱʜ
    EQʹ·ͭΘΔ୯Ґʢʣ
    22
    ൚༻ີ౓ ࢦఆͨ͠EQ ղ૾౓ͷഒ཰ ࣮ࡍͷQY
    NEQJ EQ Y QY
    IEQJ EQ Y QY
    YIEQJ EQ Y QY
    YYIEQJ EQ Y QY
    YYYIEQJ EQ Y QY
    

    View Slide

23. w TQɿTDBMFJOEFQFOEFOUQJYFMT
    w εέʔϧඇґଘϐΫηϧɻTJQͱ͸ॻ͔ͳ͍ؾ͕͢Δɻ
    w ୯७ͳڍಈ͸EQͱ΄΅ಉҰͰɺ൚༻ີ౓ຖʹQYม׵࣌ʹഒ཰͕͔͔Δ
    w TQͷಛ௃͸ʮϢʔβͷϑΥϯταΠζઃఆʹ४ͯ͡ഒ཰͕͔͔Δʯ͜ͱ
    w ΞΫηγϏϦςΟ؍఺Ͱେࣄͳ஋
    w Ϣʔβ࣍ୈͰେ͖͘ͳΔͷͰɺ͜Ε͕ݪҼͰϨΠΞ΢τ่յ͢Δ͜ͱ
    ΋͋Δɻ֬ೝ͢Δͷ͕େࣄ
    EQʹ·ͭΘΔ୯Ґʢʣ
    23
    

    View Slide

24. EQͱ͍͏୯Ґʹ͍ͭͯ
    ཧղͰ͖͔ͨͳʁ
    

    View Slide

25. ͔͜͜Β͸"OESPJEΞϓϦͷ
    ը໘σβΠϯʹؔ͢Δ͓࿩
    

    View Slide

26. w "OESPJEͷը໘୯Ґ͸ʮEQʯͰѻ͏ͷͰɺʮখ͍͞ը໘ʯ͸ʮEQͷαΠ
    ζ͕খ͍͞ը໘ʯͱ͍͏͜ͱʹͳΔ
    w ඪ४తͳʢͱݴΘΕ͍ͯΔʣEQͷαΠζ͸YEQ
    ݁ہɺʮখ͍͞ը໘ʯͬͯͳΜͳͷ͔
    26
    

    View Slide

27. w "OESPJEͷը໘୯Ґ͸ʮEQʯͰѻ͏ͷͰɺʮখ͍͞ը໘ʯ͸ʮEQͷαΠ
    ζ͕খ͍͞ը໘ʯͱ͍͏͜ͱʹͳΔ
    w ඪ४తͳʢͱݴΘΕ͍ͯΔʣEQͷαΠζ͸YEQ
    w 2ɿը໘αΠζ͕খ͚͞Ε͹EQαΠζ͕খ͍͞ͷͰ͸ʁ
    ˠEQJͷ֓೦͕͋ΔҎ্ɺҰ֓ʹͦ͏ͱ͸ݴ͑ͳ͍
    ݁ہɺʮখ͍͞ը໘ʯͬͯͳΜͳͷ͔
    27
    

    View Slide

28. w ղ૾౓YQYɺը໘αΠζΠϯν
    w EQJ͸ͳͷͰYYIEQJEQഒ཰͸ഒ
    w ͭ·Γը໘αΠζ͸
    w
    Y
    YEQ
    w Ұੲͷ"OESPJEσόΠε͸ඪ४తͳYEQʹ
    ଗ͍ͬͯΔ͜ͱ͕ଟ͍
    91&3*"9;ͷ৔߹
    28
    91&3*"9;
    ʢΠϯνʣ
    YQY
    

    View Slide

29. w ղ૾౓YQYɺը໘αΠζ໿Πϯν
    w EQJ͸ͳͷͰYIEQJEQഒ཰͸ഒ
    w ͭ·Γը໘αΠζ͸
    w
    Y
    YEQ
    w 3BLVUFO.JOJ͸ը໘αΠζ͕খ͍͞ͱ͸͍͑ɺ
    "OESPJEͷը໘σβΠϯʹԙ͍ͯ͸ඪ४తͳେ͖͞Ͱ͋Δ
    3BLVUFO.JOJͷ৔߹
    29
    3BLVUFO.JOJ
    ʢ໿Πϯνʣ
    YQY
    

    View Slide

30. ݟͨ໨খ͍͞୺຤Ͱ΋
    Ҋ֎දࣔྖҬ͸ඪ४త
    

    View Slide

31. w ղ૾౓YQYɺը໘αΠζΠϯν
    w EQJ͸ͳͷͰYYIEQJʜͱͳΔ͸͕ͣͩ%&/4*5:@ͱ͍͏ಾఆٛ
    w EQഒ཰͸ͳ͔ͥഒ
    w ͭ·Γը໘αΠζ͸
    w
    Y
    ˺YEQ
    /FYVT9ͷ৔߹
    31
    /FYVT9
    ʢΠϯνʣ
    YQY
    

    View Slide

32. w ղ૾౓YQYɺը໘αΠζΠϯν
    w EQJ͸ͳͷͰYYIEQJ
    w EQഒ཰͸ͳ͔ͥഒ
    w ͭ·Γը໘αΠζ͸
    w
    Y
    ˺YEQ
    1JYFMͷ৔߹
    32
    1JYFM
    ʢΠϯνʣ
    YQY
    

    View Slide

33. w ղ૾౓YQYɺը໘αΠζΠϯν
    w EQJ͸ͳͷͰYYYIEQJ
    w EQഒ཰͸ͳ͔ͥഒ
    w ͭ·Γը໘αΠζ͸
    w
    Y
    ˺YEQ
    1JYFMͷ৔߹
    33
    1JYFM9-
    ʢΠϯνʣ
    YQY
    

    View Slide

34. ͳΜ͔ฉ͍͍ͯͨ࿩
    ͱҧ͏͡Όͳ͍͔
    

    View Slide

35. w ը໘ྖҬ͕YEQΑΓ෯޿ͳ୺຤͕ଟ͘ͳ͖ͬͯͨ
    w YYYIEQJͳΒɺYYIEQJͳΒͷ༷ͳܾ·ͬͨ஋Ͱ͸ͳ͍
    w ܾΊଧͪͰͳ͘QYEQY EQJ
    Ͱܭࢉ͢ΔΑ͏ʹͳ͍ͬͯΔ
    w getResources().getDisplayMetrics().densityͰ֬ೝՄೳ
    w খ͍͞୺຤͸Ҋ֎YEQͰΩʔϓͯ͘͠Ε͍ͯΔ
    w Ҏલͷ୺຤ϨϕϧͩͱYEQʹͳ͍ͬͯΔ୺຤͸ଘࡏͨ͠
    ͜͜·Ͱͷ·ͱΊ
    35
    

    View Slide

36. w "OESPJEҎ߱ɺϢʔβิॿͷઃఆ͔Β
    ը໘αΠζΛ؆୯ʹมߋͰ͖ΔΑ͏ʹͳͬͨ
    w ಛେͩͱԣ෯EQ·Ͱ֦େͰ͖Δ
    w ͜ΕΛؑΈͯɺը໘ઃܭ͸࠷খEQ͕͋Γ͑Δ
    ͜ͱ͸ߟྀͨ͠΄͏͕ྑ͍
    w ΞΫηγϏϦςΟͷ؍఺΋ؚΉ
    Ͳ͜·Ͱͷԣ෯ΛϚωʔδ͢΂͖͔ʁ
    36
    ͓ͦΒ͘͜Ε͕"OESPJEʹ͓͚Δ
    ʮখ͍͞ը໘ʯͷճ౴ͱͳΔ
    

    View Slide

37. w ٯʹදࣔΛখ͘͢͞Δ͜ͱ΋Ͱ͖Δ
    w 1JYFMͩͱԣ෯EQ·ͰॖখͰ͖Δ
    w ը໘Λॖখͨ͠ࡍͷίϯςϯπදࣔ͸֬ೝ͢΂͖
    w ίϯςϯπ͕͔͔͢͢ʹͳΔ
    w Χϧʔηϧ౳ͷݟ͑ํʹҧ࿨ײ͕ग़Δ
    w FUD
    Ͳ͜·Ͱͷԣ෯ΛϚωʔδ͢΂͖͔ʁ
    37
    

    View Slide

38. ΤϯδχΞ޲͚ͷ࿩
    

    View Slide

39. w -BZPVU7BMJEBUPSΛ͔ͭ͏ʢ"OESPJE4UVEJPʙʣ
    w બ୒ͨ͠σόΠε܈ΛҰཡͰฒ΂ͯൺֱͰ͖Δ
    "OESPJE4UVEJP্Ͱෳ਺ͷσόΠεͰͷදࣔΛ֬ೝ͢Δ
    39
    

    View Slide

40. w $ adb shell dumpsys display
    w ୺຤ͷը໘৘ใʢղ૾౓ɺը໘ີ౓ଞʣΛऔಘ͢Δ
    w $ adb shell wm size 1080x1920
    w ୺຤ͷը໘ղ૾౓Λڧ੍తʹઃఆ͢Δɻ͜͜Ͱ͸YQYʹͳΔ
    w $ adb shell wm density 360
    w ୺຤ͷը໘ີ౓Λڧ੍తʹઃఆ͢Δɻ͜͜Ͱ͸EQJʹͳΔ
    w $ adb shell wm {size|density} reset
    w ୺຤ͷը໘ઃఆΛॳظԽ͢Δɻ΋ͱʹ໭͍ͨ͠ͱ͖͸͜Εɻ
    BECίϚϯυΛ࢖͏
    40
    

    View Slide

41. w EQͩͱը໘෯͕ݫ͗ͯ͢͠ϨΠΞ΢τΛม͑ͳ͍ͱߦ͚ͳ͍ʜʂ
    ͱ͍͏έʔε
    w ઃఆम০ࢠTXEQ౳Λ࢖ͬͯϨΠΞ΢τϑΝΠϧΛผ్ʹ༻ҙ͢Δ
    w Ϛʔδϯ౳Λม͑Δͱ͖͸EJNFOTʹ֤Ϛʔδϯͷ஋Λ੾Γग़ͯ͠ɺ
    WBMVFTଆΛ੾Γସ͑Δ
    w ϨΠΞ΢τશମ͕มߋ͞ΕΔͱ͖͸MBZPVUଆΛ੾Γସ͑Δ
    EQͷը໘͕Ͱ͖ͯͨ࣌ʹϨΠΞ΢τΛ෼͚Δ
    41
    

    View Slide

42. w EQ͸ଟछଟ༷ͳ"OESPJEσόΠεͰಉ༷ͷݟͨ໨Λ࣮ݱ͢ΔͨΊͷ୯Ґ
    w "OESPJEͷը໘αΠζ͸ෳࡶ
    w ಉ͡୺຤Ͱ΋ઃఆ࣍ୈͰEQEQΦʔόʔʹมԽͰ͖Δ
    w ઃఆແ͠Ͱ΋EQEQͷൣғͷ୺຤͸ଟ͍ͷͰΧόʔ͢΂͖
    w ։ൃ؀ڥϨϕϧͰ΋֬ೝͰ͖ΔͷͰσβΠϯͰ΋ɺΤϯδχΞϦϯά
    Ͱ΋͔ͬ͠Γαϙʔτ͠·͠ΐ͏
    ·ͱΊ
    42
    

    View Slide

43. w IUUQTRJJUBDPNOFJOJUFNTBBDDC
    w ʲ"OESPJEʳ͍·͞Βฉ͚ͳ͍EQೖ໳c2JJUB
    w IUUQTEFWFMPQFSBOESPJEDPNUSBJOJOHNVMUJTDSFFOTDSFFOEFOTJUJFT IMKB
    w ֤छͷϐΫηϧີ౓Λαϙʔτ͢Δc"OESPJE%FWFMPQFST
    w IUUQTEFWFMPQFSBOESPJEDPNBCPVUWFSTJPOTOPVHBUBOESPJEDIBOHFTIUNM IMKBTDSFFO[PPN
    w "OESPJEͷಈ࡞ͷมߋ఺ը໘ͷζʔϜc"OESPJE%FWFMPQFST
    w IUUQTEFWFMPQFSBOESPJEDPNHVJEFUPQJDTSFTPVSDFTQSPWJEJOHSFTPVSDFTIUNM IMKB"MUFSOBUJWF3FTPVSDFT
    w ΞϓϦϦιʔεͷ֓ཁ୅ସϦιʔεΛఏڙ͢Δc"OESPJE%FWFMPQFST
    3FGFSFODFT
    43
    

    View Slide