カスタム Bridge
独自のネイティブ Bridge モジュールを作る
概要
標準の Bridge(window.unveilyBridge)では対応できない独自のネイティブ機能が必要な場合、自作のネイティブ Bridge を追加できます。MainActivity(Android)やアプリのエントリコードはお客様が直接編集する領域なので、そこに独自のインターフェースを登録します。
高度 · プラットフォーム固有の拡張
これは Kotlin/Swift を自分で記述する高度な拡張です。標準のグルー(window.unveilyBridge)には、任意のアクションを実行する汎用の .call() ディスパッチャは ありません。 代わりに、自作のネイティブオブジェクトを WebView に注入し、ウェブからはそのオブジェクトを直接呼び出します。
Android と iOS の両方がカスタム Bridge に対応しています。登録方法はプラットフォームごとに異なります。
Android — @JavascriptInterface を登録
Bridge クラスを作成し、MainActivity から WebView に注入します。
// app/src/main/java/.../bridge/MyNativeBridge.kt
class MyNativeBridge(private val context: Context) {
// JavaScript から window.MyNativeBridge.myAction(...) として呼び出される
@JavascriptInterface
fun myAction(paramsJson: String): String {
val params = JSONObject(paramsJson)
val input = params.optString("input")
val result = doNativeWork(input) // ネイティブの処理
return JSONObject().apply {
put("success", true)
put("result", result)
}.toString()
}
}// MainActivity.kt — WebView を設定する箇所で注入
webView.addJavascriptInterface(MyNativeBridge(this), "MyNativeBridge")ウェブからは注入したオブジェクトを直接呼び出します。@JavascriptInterface メソッドは 同期的に文字列を返す ため、結果の JSON は自分でパースします。
// ウェブ → 注入したネイティブオブジェクトを直接呼び出す
const raw = window.MyNativeBridge.myAction(JSON.stringify({ input: "hello" }));
const result = JSON.parse(raw);
console.log(result.result);iOS — WKScriptMessageHandler を登録
iOS では WKUserContentController にメッセージハンドラを登録します。
// WebView の構成時にハンドラを登録
let controller = webView.configuration.userContentController
controller.add(self, name: "myAction")
// メッセージの受信
func userContentController(_ controller: WKUserContentController,
didReceive message: WKScriptMessage) {
guard message.name == "myAction",
let body = message.body as? [String: Any] else { return }
let input = body["input"] as? String ?? ""
let result = doNativeWork(input)
// 結果はコールバック(evaluateJavaScript など)でウェブへ返す
webView.evaluateJavaScript("window.onMyActionResult({ result: '\(result)' })")
}// ウェブ → iOS メッセージハンドラ(postMessage は非同期 — 結果はコールバックで受信)
window.webkit.messageHandlers.myAction.postMessage({ input: "hello" });
window.onMyActionResult = function (result) {
console.log(result.result);
};メンテナンスのヒント
カスタム Bridge はお客様のコード領域にあるため、Unveily SDK のアップデートで上書きされることはありません。ただし、標準の Bridge で対応できる機能はできるだけ window.unveilyBridge を活用し、カスタムは本当に必要な場合のみに最小限にとどめてください。