ノーコードツール「Bubble」で「ネイティブアプリ」の開発を検討している方は、本記事を参考にしてください。
Bubble開発歴2年の今池 瑛生さん（@AkioImaike）に「How to Adapt Your Bubble App to Mobile」を元に、Bubbleでネイティブアプリを開発するために必要な知識を詳しく解説していただきました。
実際に、今池さんがBubbleでネイティブアプリを開発した経験も交えて解説していますので、Bubbleでネイティブアプリの開発を検討している方は、必見の内容となっています。
\ネイティブアプリの開発はお任せください/
目次
【注意】前提としてBubbleはネイティブアプリの開発に向いていない
Bubbleは外部サービスを利用することで、ネイティブアプリを開発することが可能です。
しかし、BubbleはあくまでもWeb開発ツールであり、ネイティブアプリ開発には最適化されていません。
実際にBubbleでネイティブアプリを開発した筆者は、ネイティブアプリをBubbleで開発することは、以下の点で難しいと感じました。
- Webアプリをネイティブアプリに変換するため、予期せず動作しない機能があった
- Bubbleでネイティブアプリを開発した事例は世界的にもまだまだ少ないため、トラブルシューティングに時間がかかる
- Bubbleの有料プランに加え、ネイティブアプリの修正にもその都度コストがかかるため、開発コストが読みにくい
ただし、以下の場合にはBubbleでネイティブアプリを開発しても良いかもしれません。
- 既にBubbleで開発したWebアプリのネイティブアプリ版をつくりたい
- Bubbleデータベースに顧客情報があり、それを利用したネイティブアプリを開発したい
- Bubble開発を既に習得しており、新規ツールの学習コストはかけずに、アイデアの検証をしたい
とはいえ、基本的にネイティブアプリの開発は、ネイティブアプリの開発に最適な「Adalo」の使用をおすすめします。
\Adaloの開発はお任せください/
Bubbleでネイティブアプリを開発するためのサービスの選び方
Bubbleアプリをネイティブアプリ化するサービスは様々ですが、機能・価格・情報量を参考に選択すればよいでしょう。
1.機能
ネイティブアプリで実装予定の機能が利用できるか？それぞれのサービスで利用できる機能に大きな差はありませんが、各サービスで利用できない機能もあります。
実装予定の機能が利用できるかは必ずチェックしましょう。
2.価格
初期費用にどれぐらいかかるかはもちろんですが、Bubbleでネイティブアプリを開発する場合、多くの修正が予想されます。
そのため、修正にかかる費用なども検討しましょう。
3.情報量
Bubbleでネイティブアプリを開発した事例はまだまだ少ないです。
サービスの利用方法や、トラブルシューティングなどの情報が充実しているサービスの方が、開発でつまずく可能性が低くなります。
Bubbleでネイティブアプリを開発するための5つの方法
Bubbleアプリをネイティブアプリに、変換するサービスを5つ紹介します。
1.BDK
画像：BDK
概要
BDKはBubbleアプリをネイティブ化するときに、最もよく使われているサービスです。
Bubbleアプリのみを対象とし、これまで数多くのアプリをネイティブ化しています。
例として、以下の様な機能を実装できます。
- プッシュ通知
- Touch ID/Face ID
- 生体情報の統合
- QRやバーコードのスキャン
- ネイティブコンタクトへのアクセス
- デバイスの振動
- デバイスのGPSへのアクセス
- カスタムスプラッシュ画面
また、専用のBDKアプリをモバイルにインストールすることで、購入前にBubbleアプリのネイティブ環境での動作をプレビューすることができるほか、複数ページのWebアプリのネイティブ化にも対応しています。
価格
- iOSとAndroidの両方の開発：$349
- iOSまたはAndroidのみの開発：$199
- 再構築：$39
- プラグインの一括購入：$16（$4/月）
2.Nativator.io
画像：Nativator.io
概要
NativatorはBubbleアプリだけでなく、より幅広いWebアプリをネイティブアプリに変換できます。
Nativator.ioは、例として以下の機能を使用できます。
- カメラ機能
- ファイルアップロード機能
- ジオロケーション
- プッシュ通知
- オーディオビデオ／マイクアクセス
- オフラインのネイティブアラート
アプリに関するいくつかの詳細（名前、アイコン、説明、URL）を設定し、購入前にアプリをプレビューすることができます。
iOSアプリへの変換には、アプリストアの開発者アカウントが必要なため、セットアッププロセスは少し複雑になります。
価格
- iOSまたはAndroidのみの開発：$6.99/月
- iOSとAndroidの両方の開発：$9.99/月
3.GoNative
画像：GoNative
概要
GoNativeはBubble以外で開発されたWebアプリもネイティブアプリに変換できます。
GoNativeは例として、以下の機能を使用できます。
- スプラッシュ画像
- ナビゲーションメニュー
- ダークモード
- プッシュ通知
- 生体認証
また、購入前のプレビューだけでなく、アプリストアでのアプリ公開のためのプロフェッショナルサービスも提供しています。
価格
- 1ライセンスの購入：$790（AndroidとiOSの両バージョン、無制限の再構築が含まれている）
- アプリ公開のためのプロフェッショナルサービスが付随するプラン：$1,440
- さらに上位のプラン：$5,440
4.Codeless Academy
概要
Codeless Academyは、BDKと同様の機能をもつ比較的新しいプラットフォームです。
Codeless Academyは例として、以下の機能を使用できます。
- プッシュ通知
- カスタムスクリーン
- Touch ID/Face ID
- 位置情報
- QR/バーコードスキャナ
- Apple Pay
BDKと同様に、Codeless Academyアプリをモバイルにインストールすることで、Bubbleアプリのネイティブ環境での動作をプレビューできます。
価格
- iOSとAndroidの両方の開発：$299
- iOSまたはAndroidのみの開発：$175
- 再構築：$25
- プラグインの購入：$15
5.Zeroqode
画像：Zeroqode
概要
数多くのBubbleプラグイン、テンプレートの提供で有名なZeroqodeは、ネイティアプリへの変換サービスも提供しています。
変換後のアプリがApp StoreやGoogle Playで公開されることを100％保証しており、他のプラットフォームと同様に、アプリのスプラッシュスクリーン、AndroidとiOSのアイコンなどを設定できます。
Air Nativeプラグインを購入すると、例として以下の機能を追加することができます。
- 写真撮影
- GPS追跡
- バイブレーション
Webサイトでアプリのプレビューが可能ですが、Bubbleアプリの”Allow all iframes”を有効にする必要がある点に注意してください。
価格
- iOSとAndroidの両方の開発：$299
- アプリ公開の依頼：$499
- プラグインの一括購入：$29（$10/月）
【補足】BubbleでPWAを開発できる「Progressier」
画像：Progressier
補足になりますが、ネイティブアプリの開発には高額な費用がかかります。
そこで、開発費用を抑えたい方は、Webサイトをネイティブアプリの様に使用できる「PWA」の開発を検討してはいかがでしょうか。
「Progressier」を使用することで、BubbleでPWAの開発が可能になります。
概要
ProgressierはBubbleアプリをネイティブアプリではなく、プログレッシブWebアプリ(PWA)に変換することができます。
Progressierには、PWAの統計情報（例：インストール数）の照会、プッシュ通知、iOSとの互換性などが含まれます。
アプリのURLを入力、いくつかの項目（名前、ドメイン、ロゴ）を設定し、提供されるスクリプトをBubbleアプリに貼り付けることで、プレビューできます。
価格
- 1アプリ開発：$15/月（開発アプリ数が増えるごとに開発費用が安くなる）
Progressierを使用して開発するアプリの数が増えるにつれて、1つのアプリにかかる開発費用が安くなる仕組みです。
\国内最高レベルのBubble開発/
ネイティブアプリに適したアプリをBubbleで開発するコツ
Bubbleアプリをネイティブ化するサービスは、アプリの外観を変化させるのではなく、Bubbleで開発したWebアプリをネイティブアプリの技術標準に適合させます。
そのため、アプリはあくまでモバイル向けに設計・開発する必要があります。
具体的に、以下の手順を参考にしてください。
ネイティブアプリとしてBubbleアプリを構築する場合、この機能を有効にすることで、ネイティブアプリ構築のヒントが表示されます。
書かれている内容は、以下の通りです。
このページをネイティブアプリとして使用することになります。ネイティブアプリを作るときには、いくつかの点に注意する必要があります。
①ページ幅を640ピクセルや320ピクセルなど、モバイル端末に適したページ幅に変更する必要があります。
②このアプリではページを変更しないほうが良いです。
グループを隠したり見せたりすることで、ユーザーを他のセクションに移動させます。
③私たちのプラグインエレメントをチェックして、よりネイティブアプリに適したエレメントを探してください。
Bubble forumで遠慮なく質問してください。これは初期のベータ版であり、助けを得るためには質問するのが最良の方法です。
一部のネイティブ化サービスは、複数ページのWebアプリに対応していないため、シングルページアプリケーションで開発します（BDKは複数ページに対応しています）。
ネイティブアプリなので、スマホからの閲覧を想定した画面幅で開発します。
また、タブレットなどの画面幅が広いデバイスで使用しても、ページ要素が不自然に伸びたりしない様に注意します。
BubbleエディタのSettings > General > iOS appearanceから設定できます。
アニメーションを活用することで、ネイティブアプリらしい動作にすることができます
基本的にBubbleの各エレメントは、Webアプリでの表示・動作に最適化されています。
ネイティブアプリ開発では、スマホ上での表示・動作に適したエレメントを使用します。
\国内最高レベルのBubble開発/
Bubbleで開発されたネイティブアプリの事例
最後に、実際にBubbleで開発されたネイティブアプリの事例を紹介します。
Qoins
画像：Qoins
Qoinsは、フィナンシャルコーチングと天引きシステムで借金の返済を支援するアプリです。
アプリに登録したユーザーは「借金返済の目標を設定」➜「銀行口座をアプリに接続」➜「支払いの自動切り上げなど貯蓄方法を選択」します。
その後、Qoinsを介した決済は自動的に切り上げられ、余分な請求分は借金の返済に充てられます。
2018年に75万ドルの資金を調達し、これまでに3000万ドル以上の借金がQoinsを介して返済されています。
Send Eats
画像：Send Eats
Send Eatsは、フードデリバリーアプリです。
お気に入りのお店を登録、お気に入りの注文を繰り返しオーダーすることができます。
IndianLocal
画像：IndianLocal
IndianLocalは、インドのご近所情報を発信するソーシャルネットワークです。
近所で何が起きているかを調べたり、ベビーシッターを探したり、地元の企業から割引を受けたりすることができます。
Bubbleでネイティブアプリを開発する方法｜まとめ
以上、Bubbleでネイティブアプリを開発する方法を解説しました。
技術的にBubbleでネイティブアプリを開発することは可能ですが、そもそもBubbleはネイティブアプリの開発に適していないので、よほどの理由がない限りは「Adalo」などのノーコードツールの使用をおすすめしています。
また、NoCode DBを運営する「ツクル事業部」は、ノーコード開発サービスを提供しています。
BubbleとAdaloのどちらの開発も対応していますので、開発を検討している方はお気軽にご相談ください。
最後まで読んでいただきありがとうございました。
