Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
47
Help us understand the problem. What is going on with this article?
@marty-suzuki

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

More than 1 year has passed since last update.

はじめに

TwitterやFacebookなどでよく下記のようなURLが埋め込まれたカードを見かけることがあると思います。
スクリーンショット 2016-03-14 1.20.02.png
上記のカードは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も以下のように表示されます。
スクリーンショット 2016-03-14 1.43.57.png

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を試してみましょう!

47
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
47
Help us understand the problem. What is going on with this article?