WKWebView は、JavaScript の受け渡しがとても楽に行えるのが大きなメリットです。
単なる文字列としてメッセージ送信を実行すれば、それだけでネイティブ側をコントロールできるのですが、JSON 自体をメッセージで送信し、メッセージハンドラ経由で WKWebView で JSON を受け取ることも可能です。
今回は、メッセージハンドラで JSON を受け取り SwiftyJSON でパースした値を print 出力したいと思います。
目次
- 準備
- JSON を送受信する
- まとめ
準備
Lead（承）
JSON の準備
サーバー側で適当な JSON を用意します。
[code]
var data = JSON.stringify({
title: “sirochro”,
url: “www.sirochro.com”,
num: 1
});
[/code]
WKWebView の準備
ViewController に WebKit をインポートし、デリゲートメソッド userContentController を実装しておきます。
[code]
import WebKit
class ViewController: UIViewController, WKScriptMessageHandler {
…
…
func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
}
}
[/code]
SwiftyJSON の準備
そのまま JSON を利用することも可能ですが、今回は JSON へのアクセスを簡単にしてくれる SwiftyJSON をダウンロードし、プロジェクトにインポートしておきます。
これで準備は完了です。
JSON を送受信する
先ほどの JSON をメッセージハンドラで送信、ViewController で受信します。
メッセージ（JSON）の送信
[code]
var data = JSON.stringify({
title: “sirochro”,
url: “www.sirochro.com”,
num: 1
});
window.webkit.messageHandlers.callbackHandler.postMessage(data);
[/code]
メッセージ（JSON）の受信
userContentController の中で受け取った JSON を SwiftyJSON でデコードし、print 出力します。
[code]
func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
if let dataFromString = message.body.dataUsingEncoding(NSUTF8StringEncoding, allowLossyConversion: false) {
let json = JSON(data: dataFromString)
print(json[“title”].string)
print(json[“url”].string)
print(json[“title”].intValue)
}
}
[/code]
結果
[code]
sirochro
www.sirochro.com
1
[/code]
まとめ
とくに面倒な手順もなく、思いの外かんたんに JSON がネイティブに受け渡せたことと思います。
現在 WKWebView がデファクトスタンダードとなりつつあり、今後は UIWebView から WKWebView への移行は加速していくと思われます。
WKWebView で実現できないことは、セキュリティ上の問題があることが多いはずですので、UIWebView を利用しているアプリがあれば、早めにシフトしておくといいのではないでしょうか。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
