本文へスキップ
Unveilydocs

Bridge の概要

ネイティブ Bridge の仕組み

Bridge とは?

Unveily Bridge は ウェブ(JavaScript)↔ ネイティブ 間の通信インターフェースです。

ウェブページから window.unveilyBridge を通じてカメラ・GPS・生体認証などのネイティブ機能を呼び出し、結果をコールバックで受け取ります。基本機能は Swift・Kotlin を書かずに使え、必要に応じて Kotlin・Swift で直接拡張することもできます。

注入されるグローバルオブジェクトは小文字の window.unveilyBridge ひとつだけです。(window.UnveilyBridge のような大文字のオブジェクトは存在しません。)

基本的な構成

ほとんどの非同期メソッドは コールバック関数名を文字列で 受け取ります。ネイティブは window に定義したその名前のグローバル関数を呼び出し、結果は 1 つの JSON オブジェクト引数として渡されます。

// ウェブ → ネイティブ: 機能を呼び出す(コールバック名を文字列で渡す)
window.unveilyBridge.qr.scan("onQRResult");

// 結果はグローバルコールバック関数へ渡されます(単一の JSON オブジェクト引数)
function onQRResult(result) {
  const { text, format, type } = result;
  console.log("スキャン結果:", text);  // デコードされた値
  console.log("フォーマット:", format);  // 例: "QR_CODE", "EAN_13"
}

ネイティブからウェブへイベントを送る際は、名前が決まったグローバルコールバック関数 を呼び出します。unveily-event のような汎用 CustomEvent は存在しません。必要なイベントについて、以下のようにグローバル関数を定義してください。

// ネイティブ → ウェブ: ネイティブが名前の決まったグローバル関数を呼び出す
window.onFCMReceived = function (title, body, dataJson) {
  // プッシュ通知の受信
};
window.onDeepLinkReceived = function (url) {
  // ディープリンクの受信
};
window.onPaymentResult = function (success, message) {
  // 決済結果の受信
};

準備完了のタイミング — unveilyGlueReady

window.unveilyBridge はページ読み込み前に登録されますが、一部の名前空間(ナビゲーションモジュールなど)はグルースクリプトが注入された後に生成されます。React・Vue などの SPA で マウント時に名前空間メソッドを呼び出す 場合は、まず unveilyGlueReady イベントを待ってください。

window.addEventListener('unveilyGlueReady', () => {
  window.unveilyBridge.bottomTabs.setConfig({ items: [/* ... */] });
}, { once: true });

ユーザー操作からの呼び出しは待機不要

ボタンクリックなどユーザー操作からブリッジを呼び出す場合は、unveilyGlueReady を待つ必要はありません — その時点ではグルーは常に準備完了しています。

プラン / モジュールの確認

現在のライセンスプランは app.getInfo() で読み取ります。(window.unveilyBridge.planhasFeature() のような API は存在しません。)

// 現在のライセンスティアを確認する
window.unveilyBridge.app.getInfo("onAppInfo");

function onAppInfo(info) {
  console.log(info.tier);      // "basic" | "standard" | "pro"
  console.log(info.platform);  // "android" | "ios"

  if (info.tier !== "basic") {
    showBiometricButton();     // 生体認証は Standard 以上
  }
}

ナビゲーションモジュール(bottomTabssideDrawertopDownMenuaccessibility)が有効かどうかは、同期メソッド modules.isEnabled() で確認します。

// モジュールが有効か確認する(同期 boolean)
if (window.unveilyBridge.modules.isEnabled("sideDrawer")) {
  // sideDrawer が利用可能
}

// 有効なモジュールの一覧(配列)
const enabled = window.unveilyBridge.modules.getEnabledModules();

全機能一覧

Basic 以上

機能ドキュメント
QR・バーコードスキャンqr-scan
プッシュ通知(FCM)push-notifications
カメラ・ギャラリーcamera-gallery
位置情報(GPS)location
ディープリンクdeeplink
オフラインモードoffline-mode
データストレージstorage
アプリ情報app-info
ソーシャルログイン(Google・Apple)social-login-bridge
ナビゲーション UI(下部タブ・上部メニュー・ボトムシート)navigation
アクセシビリティ(パネル・TTS・STT・Haptic)accessibility

Standard 以上

機能ドキュメント
生体認証biometric
サイドドロワーnavigation
ソーシャルログイン(Kakao・Naver・Line)social-login-bridge

Pro

機能ドキュメント
アプリ内課金(Google Play・App Store)iap
ソーシャルログイン(Meta)social-login-bridge

プラットフォームのサポート状況

Android と iOS の両方が 同等の機能レベル(パリティ) でサポートされています。iOS のグルーは Android の JS API をそのまま反映するため、同じコードが両プラットフォームで動作します。

プラットフォーム状態
Android 7.0+(API 24+)✓ 対応済み
iOS✓ 対応済み

On this page