本文へスキップ
Unveilydocs

カスタム 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 を活用し、カスタムは本当に必要な場合のみに最小限にとどめてください。

On this page