【iOS】URLを渡すだけで簡単にOGカードを表示する方法

はじめに

TwitterやFacebookなどでよく下記のようなURLが埋め込まれたカードを見かけることがあると思います。

上記のカードはOpen Graph Protocolに準拠しているページのmetaタグから必要な情報を取得して表示されています。

このOGカードをiOSアプリ内でもURLを渡すだけで表示してくれるライブラリがURLEmbeddedViewです。

使い方

使い方は非常に簡単で、URLを渡すだけです。

let embeddedView = URLEmbeddedView()
embeddedView.loadURL("http://qiita.com/szk-atmosphere/items/a723a344d8c371e615ba")
view.addSubView(embeddedView)

そして、内部では取得したOG情報と画像を自動でディスクキャッシュしてくれるので、2回目以降の読み込みは自動でキャッシュからの取得になるため非常に読み込みが早くなります。
キャッシュからの読み込みでも、URL上記と同じように渡すだけで表示されます。

ちなみに、ページの最初にあったTwitterのOGカードと同じURLも以下のように表示されます。

OGデータのキャッシュ

キャッシュからOG情報を自前で取得したい場合は、下記のコードを使うことで取得することができます。
ディスクにキャッシュされている場合はディスクからデータが読み込まれ、存在しない場合は自動で取得しにいきます。

let url = "https://github.com/szk-atmosphere/URLEmbeddedView"
OGDataProvider.sharedInstance.fetchOGData(urlString: urlString) { ogData, error in
   print(ogData)
}

一度取得したOGDataが次に更新されるまでの間隔を決めることができます。
デフォルト値は10日間になります。

OGDataProvider.sharedInstance.updateInterval = 10.days

画像キャッシュ

OG情報に紐付いた画像を自前で取得したい場合は、下記のコードを使うことで取得することができます。
ディスクにキャッシュされている場合はディスクからデータが読み込まれ、存在しない場合は自動で取得しにいきます。
必要なパラメータはURLだけではなく、OGDataに含まれているimageUUIDも必要になります。

OGImageProvider.sharedInstance.loadImage(urlString: urlString) { image, error in
    print(image)
}
/*
 * v0.2.0までの記法
 * let url = ogData.imageUrl
 * let uuidString = ogData.imageUUID
 * OGImageProvider.sharedInstance.loadImage(url: url, uuidString: uuidString) { image, uuidString, error in
 *     print(image)
 * }
 */

最後に

iOSでOGカードを表示してみたいときは、さくっとURLEmbeddedViewを試してみましょう!