【iOS-Swift】JavaScript、ネイティブ間でJsonデータの連携

はじめに

「iOS、Android」両対応のハイブリッドアプリを作成する場合、
画面UIは「WebView」を利用して、アプリ内に配置した「Html、JavaScript、CSS」ファイルをロードして表示し、JavaScriptでは実現できない(または機種依存がある)、プリンタへのレシート発行、現在地(緯度、経度)の取得、Bluetooth、NFC対応機器との通信、QRコードの読み取りはネイティブ側で処理するように実装することがあります。

そこで、JavaScript、ネイティブ間でのJsonデータの連携についてサンプルコードを紹介します。

注意）
コードは実際の処理から関連する部分のみの抜粋となっておりますのでこのコードだけでは動作しません。また、適切なエラー処理は入っておりません。

【事前準備】

◆ネイティブ実装コード

・変数を定義します。

private var wkWebView: WKWebView 

・WebViewの設定を行います。
　「userControllerにJavaScript」から実行する「handler」を登録します。
※「userController.add(self, name: "test")」部分です。

override func viewDidLoad() { 
        super.viewDidLoad() 
        let webConfiguration = WKWebViewConfiguration() 
        let userController: WKUserContentController = WKUserContentController() 
        userController.add(self, name: "test") 
        webConfiguration.userContentController = userController 
        self.wkWebView = WKWebView(frame: .zero, configuration: webConfiguration) 
        self.wkWebView.uiDelegate = self 
        self.wkWebView.navigationDelegate = self 
        self.view = self.wkWebView 
}

【JavaScript→Swiftへデータ送信】

◆JavaScript実装コード

・「JSON.stringify()」でJSON 文字列に変換します。

var inputNumber = 1000; 
var inputString = "test"; 
let data = JSON.stringify({ 
　　["keyNumber"]: inputNumber, 
　　["keyString"]: inputString, 
}) 

・ネイティブ側処理を呼び出します。
　ネイティブ側で「userController」に追加したhandler「test」を指定します。

window.webkit.messageHandlers.test.postMessage(data); 

◆ネイティブ実装コード

・ネイティブ側で「userContentController」が呼び出され、「message」に値が設定されます。
※サンプルコードでは「message.name」には「test」が、「message.body」に連携されたJsonデータが設定されています。

extension BaseWebViewController: WKScriptMessageHandler { 
　　func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { 
　　
　　var json: Dictionary<String, String> 
　　guard let contentBody = message.body as String, let data = contentBody.data(using: String.Encoding.utf8) else { return } 
　　json = try! (JSONSerialization.jsonObject(with: data, options:JSONSerialization.ReadingOptions.allowFragments) as Dictionary<String, String>) 
　　
　　let intValue = json["keyNumber"]  
　　let stringValue = json["keyString"]  

【Swift→JavaScriptへデータ送信】

◆ネイティブ実装コード

・「evaluateJavaScript」でJsonデータを連携します。

let data = ["keyNumber": 1000, "keyString": "test"] 
do { 
　　let jsonData = try JSONSerialization.data(withJSONObject: data, options: []) 
　　let json = String(data: jsonData, encoding: .utf8)! as String 
　　self.wkWebView.evaluateJavaScript("returnData('\(json)')", completionHandler: { result, error in 
　　　　print("Completed Javascript evaluation.") 
　　　　print("Result: \(result)") 
　　　　print("Error: \(error)") 
　　}) 
} catch { 
　　print("Error!: \(error)") 
} 

◆JavaScript実装コード

・「JSON.parse()」で渡されたデータを読み込みます。

function returnData(data) { 
　　const obj = JSON.parse(data); 
　　var inputNumber = data["keyNumber']; 
　　var inputString = data["keyString']; 
} 

いかがでしたでしょうか。
流れがわかれば、問題なくJavaScriptとネイティブ間でデータが連携できます。

なお、ハイブリッドアプリを作成できるツールはこちらのようなものがありますが、

・Monaca　説明はこちら　
・Apache Cordova　説明はこちら　
・Xamarin　説明はこちら　
・React Native　説明はこちら　

機能が少ないアプリは、アプリ内に「Html、JS、CSS」ファイルを
作成する形(WebViewでロード)がシンプルで問題も発生せず作成しやすいと思います。