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.plan や hasFeature() のような 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 以上
}
}ナビゲーションモジュール(bottomTabs・sideDrawer・topDownMenu・accessibility)が有効かどうかは、同期メソッド 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 | ✓ 対応済み |