こんにちは！今回は、Bubbleでついに利用できるようになったネイティブアプリの構築ビルダー「Native mobile app editor（β版）」を紹介します。
Native mobile app editorは、2024年10月のBubbleCon 2024で発表された新機能で、ネイティブアプリの開発・プレビュー・デプロイ・ストア公開ができるアプリビルダーです。2024年10月から招待制で順次利用できるようになりました。
本記事では、Native mobile app editorの使い方や新機能を紹介します。
※2025年1月上旬時点ではNative mobile app editorは招待制のβ版機能のため、全ての方が利用できる機能ではありません。また、本記事の内容はβ版の仕様に基づいており、正式版リリース時には機能や特徴が変更される可能性がありますのでご了承ください。
▼BubbleCon 2024で発表されたニュースの紹介記事
- 1. Native mobile app editor概要
- 2. Native mobile app editorの新しい要素や機能
- 3. まとめ
1. Native mobile app editor概要
1.1. 概要
Native mobile app editorは、ネイティブアプリを開発できるBubbleのアプリビルダーです。従来のビルダー「Web app editor」で開発できるのはWebアプリのみでしたが、Native mobile app editorではネイティブアプリの開発・テスト・ストアへの公開を行うことができます。
基本的なアプリの構築方法はWeb app editorと変わりませんが、ネイティブアプリ特有の機能やアクションが利用できるようになりました。例えば、プッシュ通知やスマホカメラとギャラリーへのアクセスが代表的ですが、これらもNative mobile app editorでは実装可能です（2025年1月時点ではプッシュ通知はiOSでのみ送信可能となっています）。また、Listの項目を左右にスワイプしたときのアクションを設定できるようにもなりました。
その他にもネイティブアプリ特有の要素やプロパティ、ナビゲーションの種類はいくつか追加されていますが、Workflow作成方法等基本的な操作方法に変更はないので、これまでのWeb app editorに慣れている方はそこまで戸惑うことなく利用できそうです。
なお、アプリでNative mobile app editorを有効化すると、1つのアプリについてWebアプリとネイティブアプリの両方を構築することができます。Dataは共通ですが、画面や機能はそれぞれ構築する必要があります。
ちなみに、2025年1月時点では招待者限定のβ版機能となっています。
※Waiting listへの登録はこちら
1.1.1. 補足：ネイティブアプリとWebアプリ
Webアプリは、Google ChromeやSafari等のブラウザ内で実行されるもので、HTML、CSS、JavaScriptで構築されます。ブラウザを使用するのでアプリをスマホ端末にインストールする必要がなく、レスポンシブデザインを適用することでPCからもスムーズに利用できたり、また修正の反映に審査が不要ですぐにアップデートできるといったメリットがあります。
一方ネイティブアプリは、Apple App Store または Google Play Store からダウンロードされユーザーのデバイスのOS上で直接実行されるものです。ネイティブアプリでは、アプリを使用している端末のハードウェア機能であるカメラやGPS等の機能を利用することが可能になります。特にプッシュ通知を送信できるのは大きなメリットで、習慣化が難しいアプリ等はこの機能が重要になってきます。ただし、OS別の開発が必要となるため、MVP等には向いていない手段と言えます。
BubbleではこれまでWebアプリの開発しか対応していませんでしたが、今回ついにネイティブアプリの構築からストアでの公開までがBubble上で行えるようになりました。
開発しているサービスの内容や特徴、目的に応じてWebアプリとネイティブアプリを使い分けてみてくださいね。
1.2. 料金
2025年1月時点ではNative mobile app editorは招待制のプライベートβ機能で、有料プランに加入しているアプリで使用できるようになっています。将来的には同一のアプリでWebアプリとネイティブアプリの両方を構築する場合、追加で料金が必要になるとされています。
1.3. 使用開始手順
初めてNative mobile app editorを使用するときには、まず有効化する必要があります。ネイティブアプリを構築したいアプリのEditorを開き、Settingsタブ>Mobile>Add mobile appをクリックします。このタブが表示されていない場合、まだNative mobile app editorが利用できないようです。招待されるまでもうしばらくお待ちください。
クリックするとDesignタブに遷移し、自動で作成されたViewが表示されます。これでWebアプリとネイティブアプリの両方が開発できるようになりました。
2. Native mobile app editorの新しい要素や機能
Web app editorで利用できる要素は基本的に静的でウェブ特化されたものでしたが、Native mobile app editorでは動的でモバイル特化した機能や要素が使えるようになりました。ここからは、Native mobile app editorの新しい機能や要素を、Web app editorと比較しながら紹介していきます。
2.1. 基本構成単位：Page vs View
まず、アプリを構成する基本構成単位が異なります。
従来のWeb app editorではアプリを構成するのは「Page」でした。Pageはそれぞれ独立して異なるURLを持ち、移動する際には再読み込みが必要でした。
Native mobile app editorでは、基本の構成単位が「View」になります。Pageと同じく最上位の親要素です。View間の移動時の再読み込みが不要なので、シームレスでスムーズな体験を提供することができるようになります。
両Editorで異なる部分を確認します。まず、Native mobile app editorを有効化すると、Editor左上の現在のPage名が表示されている部分にViewと表示されます。
さらにここをクリックして一覧を表示すると、上からViewの一覧、Pageの一覧、さらに下部にWebとMobileのReusable elementの一覧が表示されます。このリストから、いつでもWeb app editorとNative mobile app editorを切り替えることができます。
2.1.1. Viewの種類
Viewの種類は4種類に分けられます。
- Scrollable（スクロール可能View）…ユーザーが画面をスクロールしてすべてのコンテンツを確認できる最も一般的なViewです。長い文章や複数の要素からなる画面に使用します。
- Non-scrollable（固定View）…スクロールができないViewで、画面サイズ内に収まるコンテンツを表示するときに使用します。スプラッシュ画面、全画面画像や動画表示画面が代表的な使い方です。
- Vertical list（縦方向リストView）…情報を単純なリスト形式で縦に表示するためのViewです。リスト内の要素は1つのまとまりとされます。
- Section list（セクション付きリストView）…リストの内容のグループ化機能のある縦方向リストのViewです。リストアイテムを特定の属性で分類して表示できます。情報をカテゴリーや属性ごとに整理して表示する画面に使用します。
Viewの種類は、DesignタブでViewを選択して表示されるプロパティエディタ>View typeで設定します。
2.1.2. Viewのナビゲーション
Viewにはネイティブアプリ特有の下記のナビゲーションを設定できます。
- スタック…階層構造を持ち、Viewが「カードを重ねるように」順番に積み上げられていく方式です。ナビゲーション履歴を保持し前の画面にスムーズに戻れるというメリットがあり、詳細な情報に移動するとき等、ユーザーがアプリ内を深く掘り下げたり戻ったりして探索する際に便利です。
- モーダル…画面の下からスライドして表示されたり既存の画面上に重ねて表示されるような、主なナビゲーションフローから独立した一時的な画面を表示する方法です。フォーム入力や短い情報の表示など、一時的な操作が必要な際に最適です。
ナビゲーションの種類は、Action Navigation>Go to viewで選択することができます。
2.1.3. Viewのプロパティ
Viewが追加されたことに加え、Viewのプロパティにもネイティブアプリ特有の項目が追加されました。
2.1.3.1. Top app bar
Top app barは、画面名やアプリ名を表示する画面上部のバーです。
App barを表示するには、表示したいViewのプロパティエディタ>「Show top app bar」を有効化します。
ちなみに、App barは高さなどのレイアウトを編集することはできません。
2.1.3.2. Tab bar
Tab barは、画面下部でアプリの主要なタブを表示するナビゲーションバーです。
Tab barを表示するには、表示したいViewをクリックしてプロパティエディタ>「Show tab bar」を有効化します。これでこのViewでTab barが表示されるようになります。
Tab barにViewを追加するには、プロパティエディタ>Include as Tab itemをチェックして有効化します。これで現在のViewをTab barに追加することができます。最低1つのViewで「Include as Tab item」が有効化されているとき「Show tab bar」を有効化することができるようになります。
「Include as Tab item」を有効化すると、自動でNavigationに現在のViewの名前と適当なアイコンが追加されます。このとき、自動でレスポンシブデザインが適用されるので調整の手間が省けるのはとても助かりますね。
ちなみに、Tab barの高さやアイコンの種類、サイズなどは自由に編集できます。
なお、「Include as Tab item」を有効化すると自動的に「Show tab bar」も有効化されます。
2.1.3.3. Safe area
上部・下部にデバイス固有のPadingを表示できるのがプロパティ「Safe area」です。
Safe areaを有効化することで、端末の画面上部・下部のステータスバーやナビゲーションバーが表示される可能性のある範囲を避けてアプリを構築できるようになります。
Safe areaは、Viewをクリックしてプロパティエディタ>「Show safe area」をチェックして有効化することができます。ちなみに、「Show safe area」の設定内容に関わらず、「Show top App bar」が有効化されているときは上部のSafe areaが、「Include as Tab Item/Show tab bar」が有効化されているときは下部のSafe areaが必ず表示されます。
2.1.3.4. Status bar
端末のステータスバーを表示できるのがプロパティ「Status bar」です。Status barを有効化すると、画面上部で時間や充電状況を表示するステータスバーをこの画面で表示できるようになります。
ほとんどのシーンではステータスバーが表示されていた方が便利ですが、没入感を持たせたいとき等は無効にすると良いですね。
Status barは、Viewをクリックしてプロパティエディタ>Show status barをチェックして有効化することができます。
2.1.4. ViewのCustom state
Custom stateはViewでも設定可能です。ただし、値の保持・削除については注意が必要です。
Viewの移動には、Go to tab（タブを移動）とGo to view（タブはそのままでViewだけ移動）という大きく分けて2種類があります。Go to viewで同一タブ上で別Viewへ移動後元のViewに戻ってくる場合、Custom stateの値が保持されます。
一方、Go to tabで別のタブへ移動後同じViewを表示（別タブ上で元のViewを表示）する場合、Custom stateの値は保持されません。
同一タブ上の移動の範囲ではCustom stateの値を保持することができます。タブを移動しない場合、Custom stateの内容によってはView移動時に値を削除するActionを実装した方がよい場合がありますのでご注意ください。
2.2. 繰り返し表示要素：Repeating Group vs List
次に異なるのが、データをリスト形式で繰り返し表示したいときに使用するものです。
Web app editorでは、データを繰り返し表示したいときは独立したUI要素「Repeating Group」を配置しました。比較的自由度が高く、表示形式や動作をカスタマイズしてスクロールやレスポンシブの設定をすることができました。
一方でNative mobile app editorでは、Viewのプロパティ「List」を使用します。プロパティListでは繰り返し表示のための要素を追加する必要がなく、表示したいViewやSheetのView TypeでいずれかのListを選択し、Data sourceを設定することで表示できます。こちらもモバイル端末に最適化されていて直観的な操作が可能になります。
Listの設定は、ViewやSheetをクリックしてプロパティエディタ>View typeで設定することができます。
ちなみに、現時点では同一View内で異なるData sourceを持つ複数のリストを表示することはできないのでご注意ください。
2.2.1. List Viewの要素追加
View typeをListに設定したViewでは他の要素を追加することができません。Listの説明などを追加する場合は、List専用のヘッダーとフッターを追加します。
追加するには、Designタブ上でListを選択して、上部または下部に表示された「＋」アイコンをクリックします。
クリックすると空白のスペースが追加され、ここに要素を追加できるようになります。ここにはList以外の要素を追加できます。
2.2.2. Listのプロパティ
Vertical/Section ListではList項目にスワイプ時のアクションを設定することができます。スワイプアクションはユーザーがList項目を左右にスワイプしたときにトリガーするアクションで、項目をリストから削除したり編集したりするアクションが代表的です。なお、左右の両方向に異なるアクションを設定することが可能です。
スワイプアクションはListに配置されているList Itemをクリックして、List Itemにホバーしたときに左右に表示される「＋アイコン」をクリックして追加します。
クリックした側にスワイプアクションが追加されます。今回は左側に追加しましたが、右側に追加することも可能です。左右にそれぞれ3つまで追加することができます。
スワイプアクションではテキストを表示することはできませんが、Iconの種類や背景色を変更することができます。カスタマイズ後は、スワイプアクションの「Add workflow」からアクションを設定してください。
2.3. 固定表示要素：Floating Group / Popup vs Sheet
次に異なるのは、Page/View上で特定の情報や操作を補佐的に提供する要素です。
まず、ナビゲーションメニュー等を画面上のどこかにコンテンツを固定して表示したいとき、Web appでは「Floating group」を使用しました。Floating groupは基本的に同一画面上で常に表示されます。
一方でNative mobile app editorでは「Sheet」が使えるようになります。Sheetは一時的なオーバーレイ要素で、スライドアップ・ダウンの動的なトランジションで画面の一部を覆うことが可能なものです。スワイプで非表示にすることもでき、ネイティブアプリ特有のトランジションを実装できます。
また、ユーザーに確認を促したり注意を引きたいとき、Web appでは「Popup」を使用しました。Popupは背景を暗くして画面中央に表示され、背景の操作が完全に不可になります。
一方でNative mobile app editorでは「Sheet」が使えるようになるので、画面の一部のみの占有とどまり、ユーザーの操作の流れを中断せずに情報を表示することができます。また、必要に応じて背景の操作を許可できるようになります。モバイル端末に最適化されたスライドアニメーションで表示することも可能です。また、Sheetは注意喚起の他、フィルタの設定やオプションリストの提示にも使用できます。
Sheetをスワイプで閉じる操作や背景の操作可否の設定はSheetのプロパティエディタで設定できます。
2.4. プッシュ通知
プッシュ通知はiOS/Androidの機能で、アプリが利用されていない瞬間でもユーザーにアプリの更新やリマインダーを知らせることができます。
なお、現時点でNative mobile app editorではiOSにのみプッシュ通知送信機能を実装することができます。
2.4.1. 実装手順（iOS）
iOSのプッシュ通知は、Apple Push Notification Service（APNs）を通じて端末に送信されます。プッシュ通知を送信するにはAPNsキーを設定する必要があります。Settingsタブ>Mobile>Apple settings>Apple Push Notification Serviceで設定します。
設定するキーは、Apple Developer Program（有料）に加入して取得してください。
キーを設定できたら、通知の送信アクションを設定します。プッシュ通知の送信アクションはEmails & Notifications>Send push notificationです。
このアクションでは、プッシュ通知のTitle、Subtitle、Body、Devicesを設定することができます。Devicesでは、通知を送信する端末を設定します。
なお、通知をスケジュールに沿って送信したい場合はAPI Workflowで実装してください。
2.5. スマホカメラ・ギャラリーへのアクセス
Webアプリでは、端末のカメラやギャラリーにHTML5の機能でアクセスすることができましたが、この方法ではフラッシュ等利用できる機能に制限がありました。
一方ネイティブアプリでは、OSが提供するAPIを使用してアクセスできるためカメラの機能をフルで利用できます。また、ギャラリーへの直接アクセスが可能になります。ネイティブアプリではシームレスにカメラやギャラリーを利用できます。
2.5.1. 実装手順
端末のカメラとギャラリーへのアクセスはActionで簡単に実装できます。
Action Native Mobileでカメラの起動かギャラリーの起動アクションを選択できます。
「Open camera」では、端末のカメラを起動できます。撮った画像のコピーを端末のギャラリーに保存するか（Save to camera library）、画像をプライベート設定にするか（Make this file private）、プライベート設定にする場合は画像の所有者（Attach this file to）を設定できます。
「Open camera library」では、端末のギャラリーから画像を選択できます。アップロードする画像の枚数（Type）、画像をプライベート設定にするか（Make this file private）、プライベート設定にする場合は画像の所有者（Attach this file to）を設定できます。ここで選択された画像のURLが戻り値として返されます。
2.6. Settings Mobile
アプリをストアで公開するにあたって必要な設定は、Settingsタブ>Mobileで行います。
通知については、Apple Push Notification serviceのキーやFCM private keyを設定することができます。
2.7. プレビュー
構築中のアプリをプレビューする機能にも変更がありました。
2.7.1. Web preview
Web previewは、ブラウザで開発中のアプリをプレビューできる機能です。こちらもネイティブアプリ向けに新しくなりました。DesignタブでViewを表示して画面右上の「Preview」をクリックします。ここまではWeb app editorと同じです。
Previewをクリックすると、下記のような画面が表示されます。Native mobile app editorのPreviewでは、実際に代表的な端末でアプリがどのように表示されるかを確認しながらプレビューできます。
ちなみに、画面幅や高さは選択した端末によって固定されており手動で指定することはできません。現時点で試せる端末は下記の通りとなっています。
なお、Native mobile app editorのPreviewでは、Web app editorでアプリに編集を加えた時にPreview上部に表示されるページの再読み込みを促すアナウンスメントバーが表示されません。Previewへの反映はWeb app editorと同様ページを再読み込みしたときですので、編集を加えた際はページの再読み込みを忘れないようにしましょう。
2.7.2. BubbleGo（β版）
全く新しいプレビュー機能がBubbleGoです。BubbleGoは、開発中のアプリをストアで公開することなく、端末にアプリをインストールしたときと同じように動かしてテストできるネイティブアプリです（現時点ではiOSでのみ利用可能）。ストアからインストールして使用することができます。
BubbleGoを利用するには、まずTestFlightアプリをインストールします。
インストール後、TestFlight起動時に表示されるリンクをクリックすることでBubbleGoを利用できるようになります。
2.8. デプロイ
構築したアプリはWebアプリとネイティブアプリの両方にデプロイすることができます（Web appとNative mobile appの両方を構築している場合）。Webアプリとしてのデプロイは従来と同じ手順です。ネイティブアプリとしてのデプロイも手順は同じですが、デプロイの種類を2種類から選択することができます。
まず、エディタの画面右上のブランチが表示されているボタンをクリックしてデプロイ設定タブを表示します。さらに表示されたタブの「Deploy to Live」をクリックします。
表示されたポップアップの「Select deploy type」で「Web and mobile」を選択すると、「Mobile build type」と「Release type」等の設定項目が表示されます。
「Mobile build type」ではデプロイの種類を選択することができます。
- OTA（Over The Air）アップデート…ストアの審査が不要で即時反映でき、新しいアプリのインストールが不要なデプロイ方法です。ネイティブのコードやストアの設定には影響を与えない軽微な変更をする場合が対象です。
- Buildアップデート…アプリストアで新しいバージョンとして配布されるデプロイ方法です。アプリ自体のネイティブコードやOS依存の部分の変更をする場合が対象です。
なお、ネイティブアプリをデプロイするには、Settingsタブ>MobileでApple App Store/Google Play Storeの設定を完了させておく必要があります。
3. まとめ
今回の記事では、Bubbleでネイティブアプリを構築できるNative mobile app editorの使い方と新機能について解説しました。
Bubbleでついにネイティブアプリを構築できるようになりました！もちろんプッシュ通知や端末のカメラ機能へのアクセスも、従来のweb app editorとほぼ同様の流れで実装できます。バブラーの皆様にとっては待望のアップデートではないでしょうか。
現在はβ版での提供なので、正式版としてさらなる改善が期待できます。ぜひ本記事を参考にネイティブアプリを構築してみてくださいね！
