$30 off During Our Annual Pro Sale. View Details »

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

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

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

Yoshihiro WADA

December 14, 2020
Tweet

More Decks by Yoshihiro WADA

Other Decks in Programming

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