こんにちは！今回は、Bubble で作成したアプリを BDK Native を使用してネイティブ化する手順についてご紹介します。
BDK Native は、作成した Bubble アプリをネイティブアプリに変換できるサービスで、海外の中小企業など含め500社以上に利用されています。
お値段が高めですが、とても簡単にネイティブ化ができます！
Web アプリでは実現できなかったスマートフォン固有の機能もノーコードで追加できるため、ネイティブ化を考えている方にはおすすめです。
BDK 以外のネイティブ化の方法については下の記事でもご紹介しています。
- BDK Native について
- BDK Native の価格
- 作業の流れ
- まとめ
BDK Native について
Bubble は Chrome や Safari などのブラウザで表示する「Web アプリ」ですが、スマートフォンで App Store や Google Play からアプリをダウンロードし、端末へインストールするアプリのことを 「ネイティブアプリ」と呼びます。
BDK Native は、Bubble アプリをコーディングなしで「ネイティブアプリ」に変換（ビルド）してくれるサービスです。
iOS / Android の両方に対応しています。
もちろん、作成したネイティブアプリは App Store や Google Play ですぐに公開可能です。
BDK Native はアプリをすぐにビルドする必要はなく、ビルド版の購入前にネイティブ化のテストができます。
ビルド版は値段が高いので、購入前に実際のスマートフォン上でテストできるのはとても助かりますね。
ネイティブ化のテストは、BDK Native アプリのプラグインを Bubble プラグインストアから購入し Bubble にインストールすることでテストが可能です。
また、BDK Native を利用すると以下のようなスマートフォン固有の機能を追加することもできます。（一部抜粋）
- プッシュ通知
- アラート
- スクリーンショットの取得
- リモート音源の再生
- デバイス連絡先の読み込み
- GPSトラッキング
- QR/バーコードのスキャン
- アプリ内課金
- 生体認証
- メディアのシェア
- アプリの評価
BDK Native の価格
BDK Native の価格は下の表の通りです。
BDK Native のテストやビルドを利用する場合は Bubble BDK プラグインの購入が必須となります。 その後、本格的にネイティブ化する場合にビルド版を購入する流れとなります。
| OS | 価格 |
|---|---|
| iOS | ビルド + 1 回の無料リビルド (App配布から2週間以内): $199 その後の再ビルド: $39 |
| Android | ビルド + 1 回の無料リビルド (App配布から2週間以内): $199 その後の再ビルド: $39 |
| iOS + Android | ビルド + 1 回の無料リビルド (App配布から2週間以内): $349 その後の再ビルド: 合計 $39 |
| Bubble BDK プラグイン（必須） | 1 回 $16 |
ビルド後に Bubble アプリを更新した場合は自動的にネイティブアプリにも反映されるため、何回もビルドを購入しなくても大丈夫です。
再ビルドが必要になるのは以下のような場合です。
- BDK サイトで設定した Build Settings を変更する場合
- ビルド後に BDK がリリースした新機能を利用する場合
作業の流れ
大まかに流れを説明します。
※今回は Android 環境で実施しています。iOS (iPhone) の場合は手順が異なりますので、BDK のドキュメントを参考に実施してください。
- Bubble アプリに BDK プラグインをインストール
- Bubble アプリにスマートフォン固有の機能の追加（必要があれば）
- プレビューモードを利用してスマートフォン上でアプリの動作確認
- BDK サイトでビルド情報の設定
- ビルド版の購入
- ビルド前作業の実施
- ビルド後作業の実施
- ビルド版をストアで公開
という流れになります。
では、ひとつずつ確認していきましょう。
1. Bubble アプリに BDK プラグインをインストール
作成した Bubble アプリに BDK プラグイン（$16）を購入しインストールします。
購入後 BDK Native のバージョンが最新ではない場合は、Currently Installed version を最新のものに変更してください。
プラグインのインストールが終了したら、ネイティブアプリのローディングアニメーションが設定されるようにデバイスの既存アニメーションを削除します。
全画面の Page_load イベントに BN - Remove loading screen アクションを追加します。
Workflow タブを開き、Page_load イベントの Click here to add an action... をクリックし、Plugins -> BN - Remove loading screen を選択します。
ネイティブアプリとして表示する予定の全ての画面に入れてください。（Reusable エレメントを除く）
2. Bubble アプリにスマートフォン固有の機能の追加（必要があれば）
アプリに追加したい BDK Native のスマートフォン固有の機能があればドキュメントを参考に Bubble に追加します。
BDK Native Plugin Documentation
サンプル：Push Notification（プッシュ通知）
チャットアプリに Push Notification（プッシュ通知）を追加してみます。
通知処理には Player ID というネイティブ環境で生成される固有の ID を利用します。
デバイス毎に生成され、その値はユーザーがアプリを削除して再インストールするまで同じ ID となります。
はじめに、Player ID を保存するために Data タブの User Type に PlayerID フィールドを追加しておきます。
Design タブを開き、通知機能を追加したい画面に BN - app info を配置します。
まずは Player ID を保存する処理を追加します。
Workflow タブを開き、Click here to add an event... を押し、Elements -> A BN - app info BN - Player ID received を選択します。
作成した A BN - app info BN - Player ID received イベントで、Click here to add an action... を押し、Data (Things) -> Make changes to thing... を選択します。
下のように Player ID をデータベースに保存します。
次に、通知を送信する処理を追加します。
通知を送信したいイベント処理で Click here to add an action を押し、Plugins -> BN - Push Notification を選択します。
BN - Push Notification アクションのプロパティを設定します。
| プロパティ名 | 設定内容 |
|---|---|
| Preview Mode | プレビューモードを利用する場合はチェック |
| Title | 通知のタイトル |
| Message | 通知内容 |
| Select Target Option | One Deveice（ひとつのデバイス） ※1ユーザーで複数のデバイスを保存する場合は Many Devices を選択 |
| Deveice Player ID | Current User's playerID（ログインユーザーのデバイス） ※今回は自分宛てに通知テストしたいのでログインユーザーのIDを指定 |
これで、プレビューモードでプッシュ通知が利用可能になりました。
ビルドして実際にネイティブ化する際は、 One Signal の API キーの取得が必要ですのでご注意ください。
サンプル：Biometrics & Smart Login（顔認証や指紋認証でスマートログイン）
アプリに Biometrics & Smart Login（顔認証や指紋認証でスマートログイン）を追加してみます。
Design タブを開き、生体認証を配置したい画面に BN - Authenticator を配置します。
次に Workflow タブを開き、生体認証をおこないたいイベントで Click here to add an action... を押し、Element Actions -> Biometrics and Smartlogin a BN - Authenticator を選択します。
追加したアクションのプロパティを開き、以下のように設定します。
| プロパティ名 | 設定内容 |
|---|---|
| Element | Design タブに追加した BN - Authenticator |
| after biometric verification if supported | チェック（生体認証がサポートされたデバイスではスマートログインをおこなう） |
| skip biometric verification if not supported | チェック（生体認証がサポートされていないデバイスではスマートログインをスキップ） |
次に、スマートログインに成功した場合のアクションを追加します。
Click here ti add an action... から Element -> A BN - Authenticator verification passed を選択します。
作成したイベントのアクションに、成功した時の動きを追加しましょう。
このサンプルでは、バナーを表示した後 index に遷移するようにしています。
成功したときと同じように、失敗した場合のアクションを追加します。
Click here ti add an action... から Element -> A BN - Authenticator verification failed を選択します。
このサンプルでは、失敗した場合はバナーを表示しています。
3. プレビューモードを利用してスマートフォン上でアプリの動作確認
ここまでできたら、次はプレビューモードを利用して実際のスマートフォン上で Bubble アプリのネイティブ化を確認します。
まず、BDK Native のサイトに移動し、サインインします。
アカウントを持っている方は、Email と Password を入力し、Sign in ボタンを押します。
アカウントを持っていない方は下の方の Don't have an account? Sign up for free を押してサインアップします。
サインインできたら Preview mode エリアの Configure を押し、プレビュー情報を設定します。
Link to open for preview に Bubble サイトでプレビューした時の URL を設定します。（エディターの URL ではありません）
App Domain に Bubble サイトのドメインを設定します。 yourapp.bubbleapps.io や yourappdomain.com など。
最後に Save ボタンを押してプレビューモードの設定は終了です。
次に、テストに使用するスマートフォンで以下の URL を開き、 BDK Native アプリをインストール します。
https://thebdk.page.link/installhttps://thebdk.page.link/install
インストールした BDK Native アプリを開き、Launch ボタンを押すとネイティブ化されたアプリが起動します。
起動したら、実際にどのようにネイティブ化されたのかアプリを動かして確認してみましょう！
4. BDK サイトでビルド情報の設定
プレビューモードでテストをしたら、次はビルドをおこないます。
BDK サイトに移動し、Projects エリアの Get started を押します。
プロジェクト名（何でも良いです）、プレビューモードで入力した Bubble サイトの URL を入力し、Create Project を押します。
ビルドに必要な情報を入力します。
| 項目名 | 設定内容 |
|---|---|
| Purchased App Platform | ビルド対象のデバイスを選択 Android / iPhone / Android and iPhone |
| Native App Information (App Name) | アプリケーション名を入力 |
| Native App Information (App Icon) | アプリアイコンを設定 |
| Native App Information (Link to Open on App Load) | アプリがロードされるときに開く URL を入力 |
| Design Your Screens (Splash Screen) | アプリが最初に読み込まれた時の画面を設定（デフォルトのままだとビルド時にエラーになります） |
| Design Your Screens (Launch Loading Screen) | Bubble ページのロード時の画面を設定（デフォルトのままだとビルド時にエラーになります） |
| Design Your Screens (Native Transition Loading Screen) | ネイティブ化したアプリが別ページに遷移する時の画面を設定（デフォルトのままだとビルド時にエラーになります） |
全ての情報を入力したら、Save Project Settings を押して保存します。
5. ビルド版の購入
ビルドを購入する場合は、BDK サイトで先程作成したプロジェクトを開きます。
プロジェクト画面上部の Next Steps タブを押すと購入画面が表示されるので、Purchase Build を押して購入します。
なお、支払いは Stripe 決済となります。
6. ビルド前作業の実施
注意！！
この手順は支払い後に表示される Before the Build Guide (ビルド前手順 ) に記載されている内容です。
随時内容が更新されているため、設定時は BDK サイトに表示される最新手順もご確認ください。
支払いが済んだら、以下の3つのアカウントを作成します。
※ iOS の場合は Google play developer account ($25) ではなく Apple developer account ($99) を作成し、BDK をコラボレーターとして招待します。
Google play developer account の作成
ビルド後の公開や PC でのデバッグのために Google play developer account を作成しておきます。
Google Play Consoleにサインアップします。
アカウント情報を入力し、支払いが完了すると以下の画面に移動するので、アプリを作成ボタンを押して Bubble アプリを登録します。
アプリ名、言語、アプリ種類、無料/有料、申告への同意を入力し、アプリを作成ボタンを押します。
ビルド後にネイティブアプリファイルがダウンロードできるようになりますので、ダウンロードしたファイルを Google play developer に登録することになります。
Firebase の作成
Push Notification（プッシュ通知）を利用するために Firebase を設定します。
※ Push Notification を利用しない方も設定は必要です。
Firebase のアカウントを作成します。
Firebaseのサイトに移動し、「使ってみる」をクリックします。
Google アカウントでログインし、「プロジェクトの作成」ボタンをクリックします。
プロジェクト名を入力し、「続行」ボタンをクリックします。 「プロジェクトを作成」ボタンが出るまで「続行」ボタンを押してください。
プロジェクトが作成できたら、左上の歯車マークを押し、プロジェクトの設定画面に移動します。
Cloud Messaging タブを開き、Cloud Messaging API （レガシー）の横のメニューを押します。
「Google Cloud Console で API を管理」とを表示されるので、クリックします。
遷移先の画面で、Cloud Messaging を有効にしてください。
Firebase の画面に戻り、ユーザーと権限タブをクリックします。
「メンバーの追加」ボタンをクリックします。
メールアドレスに「gaurav@bixby.tech」（BDK の操作用メールアドレス）、役割に「編集者」を設定し、「メンバーを追加」ボタンをクリックします。
Onesignal の作成
Push Notification（プッシュ通知）を利用するために One Signal も設定します。
※ Push Notification を利用しない方も設定は必要です。
One Signal のサイトに移動し、Start for Free か Sign Up をクリックし、アカウントを作成します。
New App/WebSite をクリックし、新しく BDK 用のアプリを設定します。
Name を入力し、Google Android (FCM) を選択した後、Next を押します。
先程作成した Firebase のプロジェクトを開き、「キー」と「送信者 ID」をコピーします。
Onesignal の「Firebase Server Key」に「キー」を、「Firebase Sender ID」に「送信者 ID」をコピーします。
コピーが完了したら、Save & Continue をクリックします。
次の画面で Native Android を選択し、Save & Continue をクリックします。
Done を押して完了してください。
次に、Bubble のプラグインタブにAPP ID と API Key をコピーします。
画面上部の Setting メニューから Keys & IDs を押して、表示された APP ID と API Key をコピーします。
Bubble のプラグインタブのそれぞれの項目に貼り付けてください。
最後に、BDK が操作できるように BDK のアカウントを編集メンバーに追加します。 画面上部タブの Roles タブをクリックし、Invite to App ボタンを押します。
Invite に「gaurav@bixby.tech」（BDK 操作用メールアドレス）を入力し、Admin 権限を選択したら Invite ボタンを押してください。
ビルドリクエストの実施
BDK プロジェクト設定に先ほど作成した Firebase Project ID と Onesignal App ID を入力します。
Firebase Project ID は、Firebase の全般タブ内に記載されています。
Onesignal App ID は、Settings タブの Keys & IDs タブに記載されています。
上記 ID をそれぞれコピーし、 BDK サイトの Firebase Project ID と Onesignal App ID に貼り付けます。
入力後に Request Build ボタンを押してください。
24時間〜48時間経過すると、BDK アカウントに登録したメールアドレス宛にビルド完了のメールが届きます。
ビルド中に問題が発生すると、画面上部に Issue タブが表示されます。
ひとつずつ解決し、再度 Request Build ボタンを押して再ビルドを依頼します。
7. ビルド後作業の実施
注意！！
この手順はビルド後に表示される After the Build Guide (ビルド後手順 ) に記載されている内容です。
随時内容が更新されているため、BDK サイトに表示される最新手順もご確認ください。
ビルドが完了したら、BDK サイトからビルドされた Zip ファイルをダウンロードしましょう！
BDK サイトで対象のプロジェクトを開き、Next Steps タブに移動します。
Access Project Builds をクリックします。
自分がビルド依頼したデバイスの▼ボタンを押すと、Zip ファイルが表示されるのでダウンロードします。
なお、Zip ファイルの中身は Android App Package（AAB）ファイルとなります。
8. ビルド版をストアで公開
後は、Play Store や App Store の公開手順に従って公開するだけです！
今回は Play Store に登録して公開するのではなく、ローカル PC 環境から Android にアプリをインストールしてみました。
画面遷移や Push Notification がうまく動作していることが分かりますね。
まとめ
いかがでしたか？ BDK はお値段が高めで全て英語なのがネックですが、手間を掛けずにとても簡単にネイティブ化ができます。
ネイティブアプリは、動作速度が早くなったり、デバイス固有の機能を利用したり、ユーザーがアクセスしやすくなったりと色々なメリットがあります。
ワークフローなどを変更する必要がなく簡単にネイティブ化できたので、お値段は高いですがとてもおすすめです！
BDK への問い合わせは日本語でもできますので（返答は翻訳された日本語です）、分からないところがあればチャットやメールで聞いてみましょう！
すぐに回答もしくは設定の見直しをしてもらえます。
ネイティブ化で迷っている方は一度やってみてはいかがでしょうか。
