나무's 블로그

앞선 포스팅에 이어서 작성된다.

앞선 블로그(https://wlgusdn700.tistory.com/28) 에 가면 iOS에서 화면 캡처하는 것을 알 수 있고 그 캡처된 이미지를 UIImage로 불러올 수 있다.

나는 이 캡처된 UIImage를 인스타 스토리에 공유할 것이다!

당연히 카카오/구글/페북 developer 사이트에 방법은 나와있다!

developers.facebook.com/docs/instagram/sharing-to-stories 이곳에 가면 있다.

근데 왜 적냐? 코드가 Objective-C 다.... 안드로이드는 java -> kotlin 이 사실상 문법이 비슷비슷해서 이해할 수 있겠는데...

Ob-C를 내가 어떻게 아냐고....ㅜ

사실 Ob-C를 볼줄이라도 아는 사람들은 곧바로 Swift로 변환이 가능할 것이다. 나도 Objective-C 문법 블로그를 찾아 보면서 변환했다.

func backgroundImage(backgroundImage: UIImage) {
        if let urlScheme = URL(string: "instagram-stories://share") {
            if UIApplication.shared.canOpenURL(urlScheme) {
                let pasteboardItems = [["com.instagram.sharedSticker.stickerImage": backgroundImage.pngData(),
                                        "com.instagram.sharedSticker.backgroundImage": backgroundImage.pngData()]]

                let pasteboardOptions = [UIPasteboard.OptionsKey.expirationDate: Date().addingTimeInterval(60 * 5)]

                UIPasteboard.general.setItems(pasteboardItems, options: pasteboardOptions)

                UIApplication.shared.open(urlScheme as URL, options: [:], completionHandler: nil)
            } else {
                print("인스타 앱이 깔려있지 않습니다.")
            }
        }
    }

코드는 굉장히 간단하다

url로 인스타 앱 중 스토리로 공유하는 화면?을 열것이다.

우선 해당 url을 iOS App에서 열수 있는지 확인을 한다. 인스타 앱이 안깔려있어도 못 여는 것 같다.

pasteboardItems 에는 좀 요상한 자료구조가 담긴다. Array(Dictionary) 이런 형태다.

그리고 문자열에서 유추할 수 있듯, sticker와 background가 있는데, 말그래도 배경과 스티커라고 생각하면 된다.

pasteboardOptions 등 외의 코드는 는 이번주내로 다시 알아볼 것이다.

중요한 점!

Instagram의 맞춤 URL 스키마를 허용 리스트에 등록

앱에서 Instagram의 맞춤 URL 스키마를 사용하려면 허용 리스트에 추가해야 합니다. 이를 위해서는 앱의 Info.plist에 있는 LSApplicationQueriesSchemes 키에 instagram-stories를 추가합니다.

라고 Facebook Developer 에 적혀있다. 따라하면 된다.

Info.plist 에 들어가서 LSApplicationQueriesSchemes를 추가하고 해당 value에 "instagram-stories"를 넣으면 된다.

** value는 Array형태로 넣어야한다

안드로이드에서는 manifest에 Internet만 허용해주면 대부분의 url에는 접근이 가능했던 것 같은데, iOS는 따로따로 지정해줘야하나보다... 확실히 apple이 보안/정보 측면에서 강도 높게 설정하고 유지하고 있다고 다시 생각하게 되었다.

사이드 프로젝트를 진행하면서 화면을 캡처한 후에 공유하는 기능이 필요해서 본격적인 개발 전에 기능 구현 정도는 해봐야겠어서 미리 겪어본 것들을 적는다.

확실히 몇년 사이에 구글링만해도 없는 정보가 없는 것 같다. 하지만 SwiftUI로 적용되는 예제나 문서, 글은 확실히 적다...

나 스스로도 나중에 필요할 때, 검색하다 내 블로그를 들어올 수 있도록 작성하는 것이 목표이다.

어쩃든 시작

우선 Swift로 Screen Capture 하는 법을 찾아보면 UIView를 확장하여 적용된 코드들이 많이 나온다.

하지만 SwiftUI에서는 UIKit을 사용하지 않으려고 하기 때문에, 굳이 굳이 SwiftUI로의 전환을 하는 데에 생각보다 많은 시간을 쏟았다.

func takeCapture() -> UIImage {
        var image: UIImage?
        guard let currentLayer = UIApplication.shared.windows.first { $0.isKeyWindow }?.layer else { return UIImage() }

        let currentScale = UIScreen.main.scale

        UIGraphicsBeginImageContextWithOptions(currentLayer.frame.size, false, currentScale)

        guard let currentContext = UIGraphicsGetCurrentContext() else { return UIImage() }

        currentLayer.render(in: currentContext)

        image = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()

        return image ?? UIImage()
    }

우선 화면을 Capture하여 UIImage로 뽑아주는 함수이다.

currentLayer 에 UIApplication.shared.keyWindow.layer 로 적용되어 있는 코드들이 많은데 keyWIndow가 deprecate되면서 다른 방법을 찾아보았다.

프로젝트에 중요한 기능이기에 일단 구현하여 실행을 해본 후에 공부하려고 맘 먹었다.(원래 이러면 안되는데... 시간이 부족해서 ㅜㅜ)

func saveInPhoto(img: UIImage) {
        UIImageWriteToSavedPhotosAlbum(img, nil, nil, nil)
    }

    func sharePicture(img: UIImage) {
        let av = UIActivityViewController(activityItems: [img], applicationActivities: nil)
        UIApplication.shared.windows.first?.rootViewController?.present(av, animated: true, completion: nil)
    }

이어서 사진을 사진 iOS App에 저장하는 함수와 UIActivityVC를 사용하여 Share하는 함수이다.

이 코드들을 적용해서 캡처된 사진을 보면 사진이 뿌옇게 나오는 현상이 있었다.

그래서 UIImage의 background나 opacity 같은 속성을 건드려야 하나? 라고 생각하고 있던 찰나

버튼을 누르는 순간 바로 캡처가 되는 것인가? 라고 생각되어서 버튼을 누르고 0.5초 뒤에 캡처되게 구현하였다.

당연히 DispatchQueue.main.asyncAfter 를 이용해서 딜레이를 주니 정상적으로 캡처가 되었다.

TODO: 이번주 내로 저 메소드들에 있는 한 라인/속성 들이 무엇을 의미하는 지 공부해서 수정할 것이다.

p.s : 이번달 내로 2020 회고도 작성해보고 싶다... 2020년이 제일 바쁜 해였어서?!