文字列をコピーできるスクリーンショットを作る/iOSDC 2020 LT PDF

Transcript

1. จࣈྻΛίϐʔͰ͖Δ
   εΫϦʔϯγϣοτΛ࡞Δ
   גࣜձࣾZOZOςΫϊϩδʔζ
   ZOZOTOWN෦
   ͑ΜͲ͏
   Copyright © ZOZO Technologies, Inc.
   

   View Slide

2. © ZOZO Technologies, Inc.
   גࣜձࣾZOZOςΫϊϩδʔζ
   ZOZOTOWN෦
   ͑ΜͲ͏
   ▶ ZOZOTOWN / iOSΞϓϦ։ൃ
   ▶ Twitter: re___you
   2
   

   View Slide

3. © ZOZO Technologies, Inc.
   ͝ଘ஌Ͱ͠ΐ͏͔ʁ
   3
   

   View Slide

4. © ZOZO Technologies, Inc.
   4
   ͝ଘ஌Ͱ͠ΐ͏͔ʁ
   - iOS 13͔ΒϑϧϖʔδͷεΫϦʔϯγϣοτ͕Մೳʹʂ
   

   View Slide

5. © ZOZO Technologies, Inc.
   5
   - iOS 13͔ΒϑϧϖʔδͷεΫϦʔϯγϣοτ͕Մೳʹʂ
   - αʔυύʔςΟΞϓϦ΋ରԠͰ͖Δ
   ͝ଘ஌Ͱ͠ΐ͏͔ʁ
   

   View Slide

6. © ZOZO Technologies, Inc.
   6
   - iOS 13͔ΒϑϧϖʔδͷεΫϦʔϯγϣοτ͕Մೳʹʂ
   - αʔυύʔςΟΞϓϦ΋ରԠͰ͖Δ
   - อଘܗࣜ͸PDF
   ͝ଘ஌Ͱ͠ΐ͏͔ʁ
   

   View Slide

7. © ZOZO Technologies, Inc.
   7
   εΫϦʔϯγϣοτͰ΋จࣈΛ
   ίϐʔ΋ݕࡧ΋Ͱ͖Δɻ
   ͦ͏ɺPDFͳΒͶɻ
   

   View Slide

8. © ZOZO Technologies, Inc.
   8
   ͦ͏ɺPDFͳΒͶ
   SafariͷϑϧϖʔδεΫϦʔϯγϣοτͰ͸

   จࣈྻͷίϐʔ&ݕࡧ͕Ͱ͖Δ
   

   View Slide

9. © ZOZO Technologies, Inc.
   9
   

   View Slide

10. © ZOZO Technologies, Inc.
    10
    จࣈͷίϐʔ͕
    Ͱ͖ͳ͍
    

    View Slide

11. © ZOZO Technologies, Inc.
    11
    จࣈΛίϐʔͰ͖ͳ͍
    PDF͸ͨͩͷը૾ͩ
    

    View Slide

12. © ZOZO Technologies, Inc.
    12
    ࠓ೔࿩͢͜ͱ
    - ͳͥPDF͸จࣈྻΛίϐʔͰ͖Δͷ͔ʁ
    - ͳͥจࣈྻΛίϐʔͰ͖ͳ͔ͬͨͷ͔ʁ
    - จࣈྻΛίϐʔͰ͖ΔPDFΛ࡞Δʹ͸ʁ
    

    View Slide

13. © ZOZO Technologies, Inc.
    13
    ࠓ೔࿩͞ͳ͍͜ͱ
    - ϑϧϖʔδͷεΫϦʔϯγϣοτͷ࡞੒ʹ͍ͭͯ
    - TECH BLOGʹ౤ߘ͍ͯ͠·͢
    https://techblog.zozo.com/entry/ios_fullpage_screenshot
    

    View Slide

14. © ZOZO Technologies, Inc.
    ͳͥPDF͸จࣈྻΛ
    ίϐʔͰ͖Δͷ͔ʁ
    14
    Episode 1.
    

    View Slide

15. © ZOZO Technologies, Inc.
    15
    PDF͸
    จࣈ৘ใΛ͍࣋ͬͯΔ
    

    View Slide

16. © ZOZO Technologies, Inc.
    16
    PDFͷจࣈͷඳը
    จࣈ৘ใ
    

    View Slide

17. © ZOZO Technologies, Inc.
    17
    PDFͷத਎
    

    View Slide

18. © ZOZO Technologies, Inc.
    18
    PDFͷத਎
    

    View Slide

19. © ZOZO Technologies, Inc.
    19
    PDFͷத਎
    

    View Slide

20. © ZOZO Technologies, Inc.
    ͳͥจࣈྻΛ
    ίϐʔͰ͖ͳ͔ͬͨͷ͔ʁ
    20
    Episode 2.
    

    View Slide

21. © ZOZO Technologies, Inc.
    21
    จࣈ৘ใΛ
    ͍࣋ͬͯͳ͔ͬͨ
    

    View Slide

22. © ZOZO Technologies, Inc.
    22
    จࣈྻΛίϐʔͰ͖ͳ͍PDF
    ը૾
    ը૾
    ը૾
    ը૾
    

    View Slide

23. © ZOZO Technologies, Inc.
    23
    จࣈྻΛίϐʔͰ͖ͳ͍PDF
    ը૾
    ը૾
    ը૾
    ը૾
    จࣈ΋ը૾ʹͳ͍ͬͯͨ
    
    

    View Slide

24. © ZOZO Technologies, Inc.
    24
    จࣈྻΛίϐʔͰ͖ͳ͍PDF
    ը૾
    ը૾
    ը૾
    ը૾
    ͳͥͳͷ͔ʁ
    
    

    View Slide

25. © ZOZO Technologies, Inc.
    iOSͷඳըʹ͍ͭͯ
    25
    - iOS͸contextʹΑͬͯඳըܗ͕ࣜมΘΔ
    - PDFContext → PDF
    - ImageContext → ը૾
    https://developer.apple.com/library/archive/documentation/
    GraphicsImaging/Conceptual/drawingwithquartz2d/dq_overview/
    dq_overview.html
    

    View Slide

26. © ZOZO Technologies, Inc.
    26
    iOSͷඳըʹ͍ͭͯ
    PDFContextʹඳը͢Ε͹
    ͍͍ײ͡ʹͳΔͱࢥ͍ͬͯͨ
    
    

    View Slide

27. © ZOZO Technologies, Inc.
    27
    let renderer = UIGraphicsPDFRenderer(bounds: view.bounds)
    let data = renderer.pdfData { context in
    context.beginPage()
    view.layer.render(in: context.cgContext)
    }
    UIGraphicsEndPDFContext()
    ίʔυΛݟ௚ͯ͠ΈΔ
    

    View Slide

28. © ZOZO Technologies, Inc.
    28
    let renderer = UIGraphicsPDFRenderer(bounds: view.bounds)
    let data = renderer.pdfData { context in
    context.beginPage()
    view.layer.render(in: context.cgContext)
    }
    UIGraphicsEndPDFContext()
    ίʔυΛݟ௚ͯ͠ΈΔ
    ո͍͠
    

    View Slide

29. © ZOZO Technologies, Inc.
    29
    view.layer.render
    ͸ԿΛඳը͍ͯ͠Δͷ͔ʁ
    

    View Slide

30. © ZOZO Technologies, Inc.
    30
    view.layer.render͸
    UIViewͷίϯςϯπͷ
    ϏοτϚοϓΛඳը͍ͯ͠Δ
    

    View Slide

31. © ZOZO Technologies, Inc.
    31
    UIViewͱCALayerͷؔ܎
    CALayer PDFContext
    drawRect
    render
    ίϐʔͰ͖ͳ͍
    PDF
    BitmapContext
    ϏοτϚοϓ
    UIView
    

    View Slide

32. © ZOZO Technologies, Inc.
    จࣈྻΛίϐʔͰ͖Δ
    PDFΛ࡞Δʹ͸ʁ
    32
    Episode 3.
    

    View Slide

33. © ZOZO Technologies, Inc.
    33
    ViewΛඳը͢Δ
    

    View Slide

34. © ZOZO Technologies, Inc.
    34
    UIView
    CALayer PDFContext
    drawRect
    render
    ίϐʔͰ͖ͳ͍
    PDF
    BitmapContext
    ϏοτϚοϓ
    PDFContext
    ίϐʔͰ͖Δ
    PDF
    viewΛඳը͢Δ
    

    View Slide

35. © ZOZO Technologies, Inc.
    35
    let renderer = UIGraphicsPDFRenderer(bounds: view.bounds)
    let data = renderer.pdfData { context in
    context.beginPage()
    view.layer.render(in: context.cgContext)
    }
    UIGraphicsEndPDFContext()
    viewΛඳը͢Δ
    

    View Slide

36. © ZOZO Technologies, Inc.
    36
    let renderer = UIGraphicsPDFRenderer(bounds: view.bounds)
    let data = renderer.pdfData { context in
    context.beginPage()
    view.draw(view.bounds)
    }
    UIGraphicsEndPDFContext()
    viewΛඳը͢Δ
    

    View Slide

37. © ZOZO Technologies, Inc.
    37
    

    View Slide

38. © ZOZO Technologies, Inc.
    Կ΋ඳը͞Εͳ͍
    
    

    View Slide

39. © ZOZO Technologies, Inc.
    39
    let renderer = UIGraphicsPDFRenderer(bounds: view.bounds)
    let data = renderer.pdfData { context in
    context.beginPage()
    view.draw(view.bounds)
    }
    UIGraphicsEndPDFContext()
    viewΛඳը͢Δ
    

    View Slide

40. © ZOZO Technologies, Inc.
    40
    let renderer = UIGraphicsPDFRenderer(bounds: view.bounds)
    let data = renderer.pdfData { context in
    context.beginPage()
    view.subviews.forEach {
    $0.draw($0.bounds)
    }
    }
    UIGraphicsEndPDFContext()
    viewΛඳը͢Δ
    

    View Slide

41. © ZOZO Technologies, Inc.
    41
    

    View Slide

42. © ZOZO Technologies, Inc.
    ϨΠΞ΢τ͕
    ࠨ্ʹີͰ͢
    

    View Slide

43. © ZOZO Technologies, Inc.
    43
    view.layer.render͸
    ϨΠΞ΢τ
    എܠͷඳը
    ಁաॲཧ
    Ϙʔμͷඳը
    AspectFill
    ରԠ
    

    View Slide

44. © ZOZO Technologies, Inc.
    44
    ͋ͱ͸࣮૷͢Δ͚ͩ
    

    View Slide

45. © ZOZO Technologies, Inc.
    45
    

    View Slide

46. © ZOZO Technologies, Inc.
    46
    ৄ͍࣮͠૷͸GitHub΁
    https://github.com/EndouMari/
    SampleScreenshot
    

    View Slide

47. View Slide