WKWebView は、JavaScript の受け渡しがとても楽に行えるのが大きなメリットです。

単なる文字列としてメッセージ送信を実行すれば、それだけでネイティブ側をコントロールできるのですが、JSON 自体をメッセージで送信し、メッセージハンドラ経由で WKWebView で JSON を受け取ることも可能です。

今回は、メッセージハンドラで JSON を受け取り SwiftyJSON でパースした値を print 出力したいと思います。

目次

• 準備
• JSON を送受信する
• まとめ

準備

Lead（承）

JSON の準備

サーバー側で適当な JSON を用意します。

var data = JSON.stringify({
    title: "sirochro",
    url: "www.sirochro.com",
    num: 1
});

WKWebView の準備

ViewController に WebKit をインポートし、デリゲートメソッド userContentController を実装しておきます。

import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    ...
    ...
    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {

    }
}

SwiftyJSON の準備

そのまま JSON を利用することも可能ですが、今回は JSON へのアクセスを簡単にしてくれる SwiftyJSON をダウンロードし、プロジェクトにインポートしておきます。

これで準備は完了です。

JSON を送受信する

先ほどの JSON をメッセージハンドラで送信、ViewController で受信します。

メッセージ（JSON）の送信

var data = JSON.stringify({
    title: "sirochro",
    url: "www.sirochro.com",
    num: 1
});
window.webkit.messageHandlers.callbackHandler.postMessage(data);

メッセージ（JSON）の受信

userContentController の中で受け取った JSON を SwiftyJSON でデコードし、print 出力します。

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)
    }
}

結果

sirochro
www.sirochro.com
1

まとめ

とくに面倒な手順もなく、思いの外かんたんに JSON がネイティブに受け渡せたことと思います。

現在 WKWebView がデファクトスタンダードとなりつつあり、今後は UIWebView から WKWebView への移行は加速していくと思われます。
WKWebView で実現できないことは、セキュリティ上の問題があることが多いはずですので、UIWebView を利用しているアプリがあれば、早めにシフトしておくといいのではないでしょうか。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。