【省略版】AutoLayoutエラー診断所 ~発狂しないためのデバッグ手法~

Slide 1

Slide 1 text

Auto LayoutΤϥʔ਍அॴ ~ൃڰ͠ͳ͍ͨΊͷσόοάख๏~ @akatsuki174 iOSDC Japan 2018 2018/09/02(೔)

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

• ਢ౻ຘʢ@akatsuki174ʣ • גࣜձࣾZaim / iOSΤϯδχΞ • iOSDC Japan 2018 ίΞελοϑ ࠙਌ձͷ೔ຊञ ͷҰ෦͸ ϫγ͕બΜͩ

Slide 4

Slide 4 text

ࠓ೔ͷ಺༰

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

͜Μͳ͓೰Έղܾ͠·͢ • Τϥʔग़ͯΔ͚ͲԿ͔ΒखΛ෇͚͍͍͔ͯΘ͔Βͳ͍ • ଞਓ͕࡞ͬͨϨΠΞ΢τͷվम͕ා͍ • ༏ઌ౓ͱ͔දࣔ/ඇදࣔͱ͔ෳࡶͰΘ͚͕Θ͔Βͳ͍ • σόοάख๏͕ϚϯωϦԽ͖ͯͯ͠ɺܹ͕ࢗ΄͍͠

Slide 9

Slide 9 text

໨࣍

Slide 10

Slide 10 text

• ࣄྫͱͱ΋ʹσόοάख๏ΛֶͿ • ίϯιʔϧϩάಡΉܥ • ϏδϡΞϧ͔Β൑அ͢Δܥ • LLDB࢖͏ܥ • ղܾͷࢳޱΛݟ͚ͭΔίπ

Slide 11

Slide 11 text

ࠓ೔ͷܗࣜ

Slide 12

Slide 12 text

• ϥΠϒσόοΪϯάͰਐΊ·͢ • ͨ·ʹྫ͕ద੾͡Όͳ͍΍ͭ΋ɻڐͯ͠ɻ • εϥΠυࣗମ͸εΫγϣ෇͖Ͱ͍͋͛ͯ·͢ • αϯϓϧίʔυ • ໰୊ฤͱղ౴ฤ͕͋Γ·͢ • ղઆ͸iOSDCޙ΋௥Ճ͍͖ͯ͠·͢ • https://github.com/akatsuki174/AutoLayoutDebugSample ੒ޭͨ͠Β ഥखʂ ׬શ൛͸ εϥΠυ໿ຕ

Slide 13

Slide 13 text

Let’s Debugging ٩( •̀ω•́)و

Slide 14

Slide 14 text

ίϯιʔϧϩάಡΉܥ

Slide 15

Slide 15 text

CASE 1. WarningΛؤுͬͯಡΉ αϯϓϧίʔυ 8BSOJOH7JFXΑΓɻ

Slide 16

Slide 16 text

Warningൃੜ ͷϚʔδϯ

Slide 17

Slide 17 text

Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

Slide 18

Slide 18 text

্͔ΒॱʹϩάͷҙຯΛ௫΋͏ ʮಉ࣌ʹຬͨͤͳ੍͍໿͕͋ͬͨΑɻ ͨͿΜ͜ͷதͷগͳ͘ͱ΋1ͭͷ੍໿͕͍Βͳ͍΍͔ͭͩΒɺ ૝ఆ֎ͷ੍໿Λݟ͚ͭͯɺ੍໿ͷ෇͚֎͠Λͯ͠Ͷɻʯ

Slide 19

Slide 19 text

ո͍͠ՕॴपลͷAuto Layout৘ใ͕දࣔ͞Ε͍ͯΔɻ ͜ΕΛͺͬͱݟͯΘ͔ΔͳΒͦΕʹӽͨ͜͠ͱ͸ͳ͍ɻ ্͔ΒॱʹϩάͷҙຯΛ௫΋͏

Slide 20

Slide 20 text

্͔ΒॱʹϩάͷҙຯΛ௫΋͏ ͳΜͱͳ͘ɺਫฏํ޲ʹؔ͢Δهड़͕ଟͦ͏Ͱ͢ɻ ʮUIView-Encapsulated-Layout-xxxʯ͸γεςϜ͕ੜ੒੍ͨ͠໿Ͱɺ ม͑Δ͜ͱ͸Ͱ͖·ͤΜɻ1ͭͷ஫໨ϙΠϯτʹͳΓ·͢ɻ

Slide 21

Slide 21 text

ʮ͍͍͔Μ͡ʹදࣔ͢ΔͨΊʹ͜ͷ੍໿͸յͤͯ͞΋Βͬͨʂʯ ͜ΕΛݟΔͱɺ͍͍ͩͨ ɾਫฏ / ਨ௚ͲͪΒͷ੍໿͕ؒҧ͍ͬͯΔͷ͔ ɾͲͷपล͕ؒҧ͍ͬͯΔͷ͔ ͕Θ͔Δɻ ্͔ΒॱʹϩάͷҙຯΛ௫΋͏

Slide 22

Slide 22 text

γεςϜ͸Ͳ͔ͬͷUIView.width = 320ͷ੍໿Λউखʹ࡞ͬͨ γεςϜ͸UIProgressView.width = 355ͷ੍໿Λউखʹյͨ͠ ͓΍ɺͦ͏͍͑͹… ৼΓฦͬͯΈΔ

Slide 23

Slide 23 text

ৼΓฦͬͯΈΔ • ࠓ࣮ߦ͍ͯ͠Δͷ͸iPhone SEαΠζ୺຤ • SEαΠζͷԣ෯͸320 • ͜Εʹରͯ͠UIProgressView.width = 355 + ࠨӈϚʔδϯ͕ ɹ֬อͰ͖ΔΘ͚͕ͳ͍…

Slide 24

Slide 24 text

ϨΠΞ΢τΛݟ௚͢ ແବʹԣ෯ͷ੍໿͕ ෇͍͍ͯͨͷͰ࡟আ ղܾ

Slide 25

Slide 25 text

Tips 2. WTF Auto Layout?Λ࢖͏ αϯϓϧίʔυ $PWFS7JFXΑΓɻ

Slide 26

Slide 26 text

WTF Auto Layout? https://www.wtfautolayout.com/

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

ղੳͰ͖ͳ͍͜ͱ΋͋Δ

Slide 29

Slide 29 text

࡞Γ͍ͨ ϨΠΞ΢τ ←View ←Label

Slide 30

Slide 30 text

Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

Slide 31

Slide 31 text

Warningൃੜ

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

໌Β͔ʹ͓͔͍͠ʂʂ

Slide 34

Slide 34 text

͜ͷ੍໿͕ҙਤ௨Γ͡Όͳ͔ͬͨΒ translatesAutoresizingMaskIntoConstraintsΛ falseʹͯ͠ΈͯͶʂ

Slide 35

Slide 35 text

ղܾ

Slide 36

Slide 36 text

Tips 3. ੍໿Λग़ྗ͢Δ αϯϓϧίʔυ 4UBDL7JFXΑΓɻ

Slide 37

Slide 37 text

constraintsAffectingLayout(for:)Λ࢖ͬͯΈΔ • ͋Δviewʹରͯ͠෇͍͍ͯΔ੍໿Λɺ࣠Λࢦఆͯ͠ ɹऔಘ͢Δ͜ͱ͕Ͱ͖Δ • ҉໧తͳ੍໿΋ؚ·ΕΔ • ӨڹΛ༩͑Δશͯͷ੍໿͕औಘͰ͖Δอূ͸ͳ͍

Slide 38

Slide 38 text

͜ͷෳࡶͳviewͰࢼͯ͠ΈΑ͏ stack view͍ͬͺ͍࢖ͬͯ·͢

Slide 39

Slide 39 text

Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

Slide 40

Slide 40 text

྘ͷviewͷਫฏํ޲ͷ੍໿͚ͩग़ྗ͍ͨ͠৔߹͸งғؾ͜Μͳ͔Μ͡

Slide 41

Slide 41 text

ϏδϡΞϧ͔Β൑அ͢Δܥ

Slide 42

Slide 42 text

Tips 4. cellͷߴ͞Λٙ͏ αϯϓϧίʔυ 7FSUJDBM-BCFMTΑΓɻ

Slide 43

Slide 43 text

࡞Γ͍ͨϨΠΞ΢τ ֤ཁૉؒʹͷ 伱ؒΛ΋ͨͤΔ

Slide 44

Slide 44 text

Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

Slide 45

Slide 45 text

Τϥʔൃੜ ϫʔχϯάϩά͸ग़͍ͯͳ͍ɻ੍໿͸ಛʹ͓͔͘͠ͳ͍ɻ

Slide 46

Slide 46 text

4UPSZCPBSE্ͷDFMMͷߴ͞Λมߋͨ࣌͠఺Ͱ 3PX)FJHIU͕$VTUPNʹͳͬͯ ߴ͕͞ઃఆ͞ΕΔ cellϨΠΞ΢τΛ࡞Δ࣌…

Slide 47

Slide 47 text

DFMMͷߴ͞Λमਖ਼ ੍໿ or ߴ͞Λमਖ਼͢Ε͹… Τϥʔղফ ղܾ

Slide 48

Slide 48 text

LLDB࢖͏ܥ

Slide 49

Slide 49 text

Tips 5. ͍Ζ͍Ζ࢖ͬͯΈΔ αϯϓϧίʔυ &RVBM8JEUI7JFXΑΓɻ

Slide 50

Slide 50 text

࡞Γ͍ͨϨΠΞ΢τ ֤7JFXͷ ԣ෯͸ ֤7JFXͷؒʹಁ໌ͳ 4QBDFS7JFXΛ഑ஔ iPhone 8 PlusͩͬͨΒ໰୊ͳ͔ͬͨ

Slide 51

Slide 51 text

Demo ͜ͷষͷ͔͜͜Βઌ͸ɺ σϞͷεΫγϣΛషΓ෇͚ͨ΋ͷͰ͢

Slide 52

Slide 52 text

Կ͔͕͓͔͍͠ Ұݟେৎ෉ͦ͏͚ͩͲ iPhone SEαΠζͩͱ μϝͩͬͨ ʘ8BSOJOHʗ

Slide 53

Slide 53 text

Ͳ͕͓͔͍͜͠ʁ ਫฏํ޲ͷ੍໿͕͓͔͍͜͠ͱ͕Θ͔Δ XJEUI MFBEJOH.BSHJO USBJMJOH.BSHJO

Slide 54

Slide 54 text

͔ͯͲΕ͕ͲͷViewʁ identiﬁer෇͚Δͷ໘౗ͩ͠ ผͷํ๏Ͱ۠ผ͠Α͏

Slide 55

Slide 55 text

ํ๏̎ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̎ ΦϒδΣΫτԽ͍ͨ͠ ΋ͷͷΞυϨεΛࢦఆ

Slide 56

Slide 56 text

ํ๏̎ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̎ WJFXͷഎܠ৭Λ੺ʹ

Slide 57

Slide 57 text

ํ๏̎ɿLLDB্ͰΦϒδΣΫτΛૢ࡞͢Δ̎ ͜ͷWJFXͷXJEUIͷ ੍໿͕յΕͨΒ͍͠ʂ σόοάऴྃ

Slide 58

Slide 58 text

ԫ৭viewͷwidthΛݟͯΈΔͱ… ͔֬ʹXJEUIͷ ੍໿͕յΕ͍ͯΔ

Slide 59

Slide 59 text

༧૝͍ͯͨ͠ϨΠΞ΢τ SEͷԣ෯͸320ɺ֤Viewͷ෯͕100Ͱ leadingMarginɺtrailingMargin͕0ʹͳͬͯΔ͔Βɺ ViewؒͷSpacerView͕ॖ·Ε͹ͪΌΜͱऩ·ΔͷͰ͸ʁʁ

Slide 60

Slide 60 text

ͯΏ͏͔… ͳΜͰleadingʹ伱͕ؒ Ͱ͖ͯΔΜͩΖ͏ʁʁ →ϏϡʔσόοΨʔͰ΋ ɹ֬ೝͯ͠ΈΑ͏

Slide 61

Slide 61 text

superview͕͓͔͍͠ʁʁ ಛʹ໰୊ͳͦ͞͏

Slide 62

Slide 62 text

Կ͕͓͔͍͠Μͩʁʁ ͋ΕɺtrailingMarginͬͯ΋͔ͯ͠͠…ʁ

Slide 63

Slide 63 text

3FMBUJWF UPNBSHJO ʹνΣοΫ͕ೖ͍ͬͯΔ ͭ·Γ QU͕ܭࢉʹೖ͍ͬͯΔ Կ͕͓͔͍͠Μͩʁʁ

Slide 64

Slide 64 text

Relative to marginͷνΣοΫΛ֎ͯ͠… 3FMBUJWFUP NBSHJO ͷνΣοΫΛ֎ͯ͠ DPOTUBOUΛʹ

Slide 65

Slide 65 text

׬੒ʂ ղܾ

Slide 66

Slide 66 text

Tips 6. facebook / chiselΛ࢖͏

Slide 67

Slide 67 text

facebook / chiselͱ͸ • LLDBΛ࢖ͬͨσόοάΛศརʹͯ͘͠ΕΔίϚϯυ܈ • HomebrewͰΠϯετʔϧͰ͖Δ • ίϚϯυΛΧελϚΠζ͢Δ͜ͱ΋Մೳ

Slide 68

Slide 68 text

Πϯετʔϧํ๏ $ brew update $ brew install chisel $ echo "command script import /usr/local/Cellar/chisel/ 1.8.0/libexec/fblldb.py" >> ~/.lldbinit-Xcode ※ύε͸దٓมߋ͍ͯͩ͘͠͞ɻ Xcode࠶ىಈ

Slide 69

Slide 69 text

࢖͍ํ (lldb) help Λଧͯ͹ίϚϯυͷҰཡ͕ग़ͯ͘ΔͷͰͦΕʹैͬͯ࢖͍·͢ɻ ΋ͪΖΜࠓ·Ͱ࢖͍ͬͯͨίϚϯυ΋࢖͑·͢ɻ ͜͜Ͱ͸͍͔ͭ͘ϐοΫΞοϓͯ͠঺հ͠·͢ɻ

Slide 70

Slide 70 text

pviews • viewͷ֊૚ߏ଄Λදࣔͯ͘͠ΕΔ • Ҿ਺ʹviewͷΞυϨεΛࢦఆ͢ΔͱͦͷviewҎԼͷ֊૚ߏ଄Λ ɹදࣔͯ͘͠ΕΔ • recursiveDescriptionͷ݁ՌΛϑΟϧλϦϯάͨ͠΋ͷ

Slide 71

Slide 71 text

pviews ֘౰ͷWJFX্ʹ ͭͷWJFX͕ ͋Δ͜ͱ͕Θ͔Δ

Slide 72

Slide 72 text

border • Ϗϡʔɺ΋͘͠͸ϨΠϠʔʹରͯ͠࿮ઢΛදࣔͯ͘͠ΕΔ • ઌͷ৭΍෯͸ΦϓγϣϯͰࢦఆ͢Δ͜ͱ͕Ͱ͖Δ • Կ֊૚Լͷview·Ͱ࿮ઢΛ෇͚Δ͔Λ-d(depth)Ͱࢦఆ͢Δ ɹ͜ͱ͕Ͱ͖Δ • ৭͕෇͍͓ͯΒͣڥ໨͕Θ͔Γʹ͍͘viewΛ֬ೝ͢Δ࣌ͳͲʹ ɹ࢖͑ͦ͏

Slide 73

Slide 73 text

border EFQUIͱΞυϨεΛ ࢦఆ

Slide 74

Slide 74 text

border ϏϡʔσόοΨʔ ղআޙͷ༷ࢠ ࠶౓ ϏϡʔσόοΨʔ ىಈ

Slide 75

Slide 75 text

ղܾͷࢳޱΛݟ͚ͭΔίπ

Slide 76

Slide 76 text

ݻఆ௕Ͱͳ͍ͱ͜ΖΛνΣοΫ͢Δ • શ෦ݻఆ௕Ͱࢦఆ͍ͯ͠Ε͹ϨΠΞ΢τ͸่Εͳ͍͸ͣ • ਖ਼͘͠Մมʹͳ͍ͬͯΔ͔νΣοΫ͠Α͏

Slide 77

Slide 77 text

ෳ਺ͷ୺຤Ͱ֬ೝ͢Δ • Auto LayoutͰ࡞͍ͬͯΔ ≠ શͯͷαΠζͰਖ਼͍͠ • ϓϨϏϡʔ୺຤Λ੾Γସ͑Α͏

Slide 78

Slide 78 text

੍໿่͕Ε͍ͯΔ࣠Λ೺Ѳ͢Δ • ଟ͘ͷϫʔχϯάʹک͑ͣɺํ޲ΛݟۃΊΑ͏ • ͕࣠Θ͔Ε͹ॱʹݟͯղܾ͠΍͍͢ • ྆࣠ؒҧͬͯͨΒAspect Ratio΍Multiplierɺ ɹEqual Width / HeightΛٙ͏

Slide 79

Slide 79 text

ຊ౰ʹඞཁͳ੍໿Λߟ͑Δ • σβΠϯΛ౉͞Εͨ࣌ʹɺͲΕ͕୺຤αΠζʹґଘ͠ͳ͍ ɹ਺஋ͳͷ͔Λߟ͑Δ • ඞཁͰ͋Ε͹σβΠφʔʹ֬ೝ͢Δ

Slide 80

Slide 80 text

Ұ͔Β૊Έ௚͢ • ࠷ऴखஈ • طଘͷσβΠϯͷมߋ͸ࢥΘ͵͏͔ͬΓΛট͘ • ৔߹ʹΑͬͯ͸ࣗ෼Ͱશ෦૊Έ௚ͨ͠ํ͕ૣ͍͔΋͠Εͳ͍

Slide 81

Slide 81 text

·ͱΊ

Slide 82

Slide 82 text

• Auto Layout่ΕͷݪҼΛ୳Δํ๏͸͍ͭ͘΋͋Δ • ʮ঱ঢ়ʯʹ߹ͬͨਖ਼͍͠ʮ਍࡯ʯ͕Ͱ͖Ε͹΋͏ා͘ͳ͍ • ࠓ೔঺հͨ͠಺༰͸໌೔͔Β࢖͑ΔͷͰͥͻ࢖ͬͯͶ

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

ؔ࿈ࢿྉ

Slide 86

Slide 86 text

• σόοάͷͨΊʹView֊૚Λ೺Ѳ͢Δ • https://qiita.com/akatsuki174/items/ 45d4bd7cb150defbf116 • AutoLayoutͷσόοάΛ͢Δʢ1ʣ • https://qiita.com/akatsuki174/items/6935bb6ff64f4df51c5a • Debugging your layout ([WWDC2015] Mysteries of Auto Layout, Part 2ΑΓ) • https://qiita.com/akatsuki174/items/ 66c6a92ab52b458f5414

Slide 87

Slide 87 text

• Auto Layoutͷϫʔχϯάղಡʹ͸ʮWTF?ʯ͕ศར • https://qiita.com/akatsuki174/items/ ccf394c03677ac62191e • Auto Layoutͷσόοάʹ໾ཱͭϝιου/ϓϩύςΟू • https://qiita.com/akatsuki174/items/ 550f885c002fb881674c

Slide 88

Slide 88 text

ࢀরจݙ

Slide 89

Slide 89 text

• Mysteries of Auto Layout, Part 2 (WWDC 2015) • https://developer.apple.com/videos/play/wwdc2015/219/ • Α͘Θ͔ΔAuto Layout • גࣜձࣾϦοΫςϨίϜ. ઒ᬒ ༤հ ஶ. ॴ ༑ଠ ؂म.