アプリのTableViewから詳細画面に遷移するインターフェースを考えます。
詳細画面に遷移する時に、HTMLをViewに描画するとき、
- URLをLoadして直にwebViewを読み込む
- HTMLの文字列をHTMLの段組みに合わせてWebViewで表示する。
参考 How to load a HTML string into a WKWebView or UIWebView: loadHTMLString()
URLをLoadして直にwebViewを読み込む
let webView = UIWebView() let urlRequest: URLRequest = URLRequest(URL: URL(string: "https://sample.com/XXX")!) // 表示したいページのURL(URLRequest型) webView.loadRequest(urlRequest)
URLを指定して、UIWebViewで表示させるだけなので、簡単ではあるものの、ページの描画に時間がかかってしまう。 そこで、APIのレスポンスでHTMLの文字列が返ってきたような場合、レスポンスで返ってきたHTMLの文字列をHTMLの段組みでWebViewに表示してみます。
HTMLの文字列をHTMLの段組みに合わせてWebViewで表示する。
QiitaのAPIを例にとって試してみます。
qiitaのAPIのレスポンスは
$ curl https://qiita.com/api/v2/items/97819a1910859a6f2ef9 | jq % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 14941 0 14941 0 0 29195 0 --:--:-- --:--:-- --:--:-- 29181 { "rendered_body": "HTMLの文字列", "coediting": false # 略 }
という形で rendered_body
のプロパティにHTMLの文字列が返ってきます。
この rendered_body
プロパティのHTMLの文字列を取り出してUIWebViewの loadHTMLString
メソッドに渡します。
var webView: UIWebView! let html: String = "rendered_bodyの中身" webView.loadHTMLString(html, baseURL: nil)
これでHTMLの文字列をWebViewに描画することができます。
以下のような感じになります。