Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

M"e
September 20, 2020

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

M"e

September 20, 2020
Tweet

More Decks by M"e

Other Decks in Technology

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