たった14行でiOSアプリ内のリンクをリッチに表示する方法

FacebookやTwitterでURLを投稿すると、リンク先のタイトルや画像を自動で取得してカードのようなUIとして表示されるのを見たことがあるでしょうか。そんな機能を簡単に実装できるApple標準のフレームワークがXcode11以降で使えるようになりました。

例えばYoutubeのリンク

Youtube動画の場合、リンクをアプリに埋め込むとそのまま再生できました。

LinkPresentationフレームワークを使うと、Youtube動画とかアプリ内でそのまま再生できるのね。https://t.co/iMYuqb2zaF pic.twitter.com/FxmEF6ygrA

— Natsui@🏡iOSエンジニア (@MeSummery) July 28, 2020

LinkPresentation framework

URL からメタデータを取得し、アプリ内でリッチなリンクコンテンツをいい感じに表示してくれるAppleのフレームワーク。iOS 13.0以降から利用可能。
https://developer.apple.com/documentation/linkpresentation

実装ステップ

利用箇所でまずフレームワークをインポートしておきましょう。

import LinkPresentation

URLからメタデータを取得する

startFetchingMetadata(for:completionHandler:)をコールしてメタデータの取得を開始します。

let metadataProvider = LPMetadataProvider()
let url = URL(string: "https://youtu.be/hMgcaYd2BZM")! // リッチに表示したいURL
metadataProvider.startFetchingMetadata(
    for: url,
    completionHandler: { metadata, error in
    // Make use of fetched metadata.
})

completionHandlerはバックグラウンドキューで実行されます。
クロージャー内でUIを操作する場合には、メインスレッドで行うようにしましょう。

メタデータを専用Viewに受け渡す

LPMetadataProviderから受け取ったメタデータをLPLinkViewの初期化時に渡します。

metadataProvider.startFetchingMetadata(
    for: url,
    completionHandler: { metadata, error in
        if error != nil { return }
        guard let metadata = metadata else { return }
        DispatchQueue.main.async { // メインディスパッチキューで実行
            let linkView = LPLinkView(metadata: metadata) // メタデータを渡す
            self.previewView.addSubview(linkView) // Storyboard上に配置した任意のUIView
            // Sizing
        }
})

今回は、生成したLPLinkViewのインスタンスをStoryboard上に配置したpreviewViewにaddSubview しました。
また、前述のとおり、completionHandler内のUIの更新は、DispatchQueue.mainで実行しましょう。

サイズを決定する

サイズを指定したら、sizeToFit()で任意のサイズにレイアウトを合わせましょう。

linkView.frame.size = self.previewView.frame.size
linkView.sizeToFit()

今回はlinkViewのサイズをSuperviewに揃えましたが、任意のCGSizeを設定しても◎
これにて完成です。

ソースコード全体

let metadataProvider = LPMetadataProvider()
let url = URL(string: "https://youtu.be/hMgcaYd2BZM")!
metadataProvider.startFetchingMetadata(
    for: url,
    completionHandler: { metadata, error in
        if error != nil { return }
        guard let metadata = metadata else { return }
        DispatchQueue.main.async {
            let linkView = LPLinkView(metadata: metadata)
            self.previewView.addSubview(linkView)
            linkView.frame.size = self.previewView.frame.size
            linkView.sizeToFit()
        }
})

ぴったり14行✌️😼

まとめ

iOS14のリリースを（おそらく）9月に控え、最新OSを2,3世代サポートしているアプリは、やっとiOS13以降のフレームワークを本格的に導入していけることと思います。
LinkPresentationは たった十数行でアプリのUXを向上できるフレームワークなので、ぜひ活用していきたいですね。

このフレームワークについては、2019年のWWDCビデオもあります。
ビデオの長さは6分前後なので、気軽に見られておすすめです。
今回の記事は触れないローカルキャッシュの取得や共有時の実装のポイントに触れられています。
https://developer.apple.com/videos/play/wwdc2019/262/

以上です
ありがとうございました。