Bubbleでネイティブアプリを開発する方法とポイント・事例

Bubbleは、数あるノーコードツールのなかでも高い拡張性を誇る人気のツールです。

本来Bubbleはネイティブアプリの開発にはそれほど向いていませんが、拡張機能を駆使してネイティブアプリの開発に成功した事例も複数存在します。

そこでこの記事では、Bubbleでネイティブアプリを開発する方法やポイント、実際に開発を行った事例などを解説します。

Bubbleはネイティブアプリ開発には不向き

Bubbleは、元々Web開発ツールとしてリリースされました。

そのため、Bubbleはネイティブアプリの開発のために最適化されていません。

後述する拡張機能などを駆使することでネイティブアプリ開発が実現できますが、基本的にBubbleはネイティブアプリ開発に不向きであることを覚えておきましょう。

外部サービスを利用することでネイティブアプリ開発は可能

Webアプリ開発用として制作されたBubbleを活用してネイティブアプリを開発するためには、外部サービスとの連携が必要不可欠です。

Bubbleでネイティブアプリを開発する際には、以下のような変換サービスを使用します。

• BDK Native
• Codeless Academy
• Air Native(Zeroqode)
• Zeroqode
• GoNative

上記のような拡張サービスを使わない場合、Bubble単体でのネイティブアプリ開発は難しいと覚えておきましょう。

それぞれの外部サービスの特徴や使い方については、後述で詳しく解説します。

Bubbleでネイティブアプリ開発が向いていない理由

Bubbleでネイティブアプリ開発ができない理由として、外部サービスでWebアプリをネイティブアプリへ変換する際、Webアプリでは動作していた機能がネイティブアプリでは動作しなくなってしまう可能性があるという点が挙げられます。

動作しなくなってしまうケースのほか、予期せぬ動作の違いを引き起こした場合はミスが見逃されやすくなり、リリース後のトラブル発生の原因につながってしまう可能性があります。

また、Bubbleを用いてネイティブアプリを開発した先例が少なく、「トラブルシューティングのための情報源が見つかりにくい」「ネイティブアプリの修正に手間がかかるため開発コストが読みにくい」といったデメリットもあるため、注意が必要です。

Bubbleでのネイティブアプリ開発に向いているケース

Bubbleを用いたネイティブアプリの開発は、基本的に難しいことが分かりました。

しかし、実際にはBubbleを用いて開発したネイティブアプリが成功している事例があるのも事実です。

それでは、どういったケースでBubbleを用いたネイティブアプリの開発が向いているのでしょうか。

Bubbleでのネイティブアプリ開発に向いているケースを3つ解説します。

Bubbleで開発したWebアプリのネイティブアプリ版を開発したい場合

アプリを開発する際、比較的素早く開発できるWebアプリを先にリリースし、開発や審査に時間がかかるネイティブアプリは後からリリースするというケースが多くあります。

既にBubbleで開発したWebアプリがあり、そのネイティブアプリ版を後から開発するようなケースであれば、Bubbleでネイティブアプリを開発すると良いでしょう。

この場合、既にできあがっているWebアプリをネイティブアプリへ変換し、動作チェックを行うという流れになります。

一からネイティブアプリを開発し直すよりも大幅にコストを削減できるため、Bubbleの活用がおすすめです。

Bubbleデータベースの顧客情報を利用してネイティブアプリを開発したい場合

既にBubbleを用いて何らかのサービスを運用しており、Bubble上に顧客のデータベースが存在するというケースもあります。

Bubbleデータベースにある顧客情報を利用してネイティブアプリを開発したい場合も、Bubbleを用いたネイティブアプリの開発が向いているでしょう。

データベースが2つ存在してしまうと、技術的な管理コストが大幅に増大します。

また、せっかく集めた顧客情報をリセットするのは、マーケティング的にも望ましくありません。

こういったケースでは、既存データベースと連携できるようなネイティブアプリをBubbleで開発していくのが良いといえます。

新規ツールを使いたくない場合

Bubbleは、数あるノーコードツールのなかでも汎用性が高い反面、学習ハードルも高い特徴を持ちます。

そのため、せっかく蓄積したBubbleでの開発ノウハウを無駄にしたくないケースもあるでしょう。

Bubble開発を既に習得しており、新規ツールの学習コストをかけたくない場合にも、Bubbleを用いたネイティブアプリ開発へ挑戦する価値があります。

実際、Bubbleを用いてネイティブアプリを開発した事例はいくつか存在しおり、既にBubbleに習熟している場合は、新規ツールで開発するよりトータルコストが抑えられるケースも多いです。

Bubbleでネイティブアプリを開発するためのサービス

Bubbleでネイティブアプリを開発するためには、外部サービスの活用が必要不可欠です。

そのために必要な代表的なツールとしては、BDK NativeやCodeless Academyといったものが存在します。

ここでは、Bubbleでネイティブアプリを開発するためのサービスを4つご紹介します。

BDK Native

BDK Nativeは、Bubbleを用いて開発したアプリをネイティブ化する際に最もよく活用されているサービスです。

BDK Nativeを用いることで、主に以下のような機能を実装することができます。

• プッシュ通知
• Touch ID/Face ID
• QRやバーコードのスキャン
• デバイスの振動
• カスタムのプッシュ画面

BDK Nativeには専用のモバイルアプリが用意されており、これをインストールすればネイティブアプリに変換した後の動作をシミュレーションできます。

また、複数ページが含まれるようなWebアプリのネイティブ化も可能です。

Codeless Academy

Codeless Academyは、BDK Nativeと同様にWebアプリをネイティブアプリへ変換できるサービスです。

Bubbleとモバイルアプリの専門家によって開発されているため、信頼性の高い変換サービスといえます。

BDK Nativeと同様に以下のような機能の変換が可能です。 

• プッシュ通知
• Touch ID/Face ID
• QRやバーコードのスキャン
• デバイスの振動
• カスタムのプッシュ画面

Bubbleで開発されたWebアプリの変換に特化しているため、Bubbleで開発したWebアプリをネイティブアプリへ変換する際に活用すると良いでしょう。

Air Native(Zeroqode)

Bubbleで開発したWebアプリをネイティブアプリへ変換する際には、Zeroqodeが開発しているAir Nativeもおすすめです。

Air Nativeでは、主に以下のような機能を持ったネイティブアプリへ変換できます。

• GPS追跡
• 写真撮影
• デバイスの振動

Air Native（Zeroqode）は、さまざまなBubbleプラグインを開発していることでも有名であり、信頼性が非常に高いです。

また、ネイティブアプリを公開するためには、App StoreやGoogle Playでの審査を通過する必要がありますが、Air Nativeでは変換後のアプリがApp StoreやGoogle Playで100%公開されることを保証しているのも特徴的です。

GoNative

Webアプリをネイティブアプリへ変換する際におすすめのサービスとして、GoNativeもあります。

GoNativeは、Bubbleで開発されたWebアプリだけでなく、さまざまなプラットフォームで開発されたWebアプリをネイティブアプリへ変換できるサービスです。

具体例として、以下のような機能を利用できます。

• プッシュ通知
• 生体認証
• ナビゲーションメニュー
• スプラッシュ画像
• ダークモード

GoNativeでは、購入する前にネイティブアプリへ変換した後の動作をチェックできるプレビュー機能があります。

また、App StoreやGoogle Playでの審査を通過するためのプロフェッショナルサービスも利用可能です。

Bubbleでネイティブアプリを開発できるサービスの選び方

Bubbleでネイティブアプリを開発できるサービスをご紹介しました。

それでは、これらのツールを選ぶ際にはどのようなポイントに気をつければ良いのでしょうか。

Bubbleでネイティブアプリを開発できるサービスはどれも似たようなものと考えられがちですが、それぞれのサービスには機能面や価格面などで細かな違いが存在します。

以下では、Bubbleでネイティブアプリを開発できるサービスの選び方を解説します。

機能

ネイティブアプリには、「プッシュ通知」や「端末のバイブレーション」など、Webアプリでは通常使用しないような機能が多くあります。

これらを効果的に活用すればクオリティの高いネイティブアプリが開発できますが、ネイティブアプリへ変換するサービスがこれらの機能へすべて対応しているとは限りません。

そのため、Bubbleでネイティブアプリを開発するサービスを選ぶ際、真っ先に気をつけたいのが機能面です。

まずは変換後にネイティブアプリで使用したい機能を洗い出し、変換サービスがそれらに対応しているかどうかをチェックしましょう。

価格

Bubbleで開発されたWebアプリをネイティブアプリへ変換するサービスは、ほとんどが有料サービスです。

サービスの利用料金はそれぞれ異なるため、必ず事前に値段を確認しておきましょう。

なお、ネイティブアプリへ変換する際には、iOS向けの変換とAndroid向けの変換を別々で行います。

iOSとAndroidの両方へ変換を行う場合と片方のみへの変換を行う場合では異なる料金が設定されている場合もあるため、あらかじめ注意が必要です。

サービスによっては、アプリをストアへ公開するためのサポートをオプションで提供しているものもあります。

トラブルシューティングなどの充実度

Webアプリをネイティブアプリへ変換する際、予期せぬトラブルが発生するということは珍しくありません。

変換後に「期待していた動作と違う」「Webアプリと全く異なる動きをしてしまう」となってしまっては、修正対応に多くの時間がかかってしまいます。

また、アプリにバグが多いとストアの審査を通過できず、せっかく変換したネイティブアプリをそもそもリリースできないといった事態も招きかねません。

変換サービスを選定する際には、トラブルシューティングなどの充実度をチェックするのもおすすめです。

たとえば、先述紹介したサービスのなかならAir Nativeがストアの審査通過を保証しており、GoNativeではストア審査のサポートを提供しています。

ネイティブアプリに適したアプリをBubbleで開発するポイント

ネイティブアプリをBubbleで開発したい場合、Bubbleでの開発時にいくつかの気をつけておきたいポイントが存在します。

Bubble上での設定を変更したり、アプリの仕様をネイティブアプリ向けにしたりすることで、変換後のネイティブアプリをよりクオリティの高いものにすることができるでしょう。

ネイティブアプリに適したアプリをBubbleで開発する際のポイントを解説します。

“This page is a native app”を有効にする

Bubbleでネイティブアプリを開発する際に必ず有効にしておきたい設定が、”This page is a native app”（このページはネイティブアプリです）という項目です。

Bubble上で”index”から”Apearance”タブを選択し、うえから2番目の位置に表示されています。

これを有効にすると、ネイティブアプリ開発に適したアプリを開発するためのヒントがBubble上で表示されます。

Bubbleでは英語で表示されますが、日本語でいうと「640ピクセルや320ピクセルなど、モバイル端末に適したページ幅に設定する必要があります。このアプリではページを変更しない方がよいです。代わりに、グループを隠したり見せたりすることでユーザーを別のセクションへ移動させます。よりネイティブアプリに近く感じてもらえるよう、私たちのプラグイン要素をチェックしてみてください。」というような内容です。

こうしたアドバイスを参考にすれば、よりクオリティの高いネイティブアプリをBubbleで開発できるでしょう。

シングルページアプリケーションにする

ネイティブアプリへ変換するサービスは、シングルページのアプリケーションにしか対応していない場合が少なくありません。

先程のBubble上で表示されるヒントにも掲載されていたように、ページを変更するのではなく、グループ単位で表示非表示を切り替えて画面の変化を実装しましょう。

なお、既にシングルページでなくなってしまった場合などは、シングルページ以外も変換できるBDK Nativeの活用がおすすめです。

モバイルの画面幅に設定する

Webアプリは、基本的にスマホだけでなく、タブレット端末やパソコンからも利用できるように作成します。

ターゲット層や内容によってはパソコンでの利用がメインとなる場合も多いです。

こうしたアプリをネイティブアプリへ変換する際には、モバイルの画面幅に設定し直す必要があります。

具体的には、小さい端末で横幅が320px、広く普及しているiPhoneなどは横幅375px前後が主流です。

Bubbleのネイティブアプリ開発事例

Bubbleがネイティブアプリ開発に向いていないのは事実ですが、しっかりとポイントを押さえておけば十分にネイティブアプリ開発を成功させることが可能です。

実際、Bubbleを用いてネイティブアプリの開発に成功した事例もあります。

ここでは、Bubbleを用いて開発したネイティブアプリの代表例として、「Qoins」「nPitch」「Send Eats」の3つをご紹介します。

参考：https://walker-s.co.jp/media/bubble-native-app/

Qoins

Qoinsは、借金の返済をサポートするファイナンシャル系アプリです。

アプリに登録したユーザーは、以下のステップで借金の返済を目指します。 

• Qoinsで借金返済の目標を設定する
• 銀行口座をQoinsへ接続する
• 支払いの自動切り上げなど、貯蓄方法を選択する
• Qoinsを用いて決済を行う

Qoinsを介した決済を行う際には、自動切り上げなどで余分な部分が発生するため、これが借金の返済に充てられます。

2018年に75万ドルの資金調達を実施し、3,000万ドル以上の借金返済をサポートしました。

ただし、2023年現在ではQoinsはサービスが停止しています。

Bubbleを用いたネイティブアプリ開発事例としてご紹介しました。

nPitch

nPitchは、野球の投手や監督、コーチ、保護者のために開発された投球データ分析や球数管理に特化したアプリです。

たとえば、以下の機能を利用できます。 

• 投球数カウントにより、投げすぎによる怪我を防ぐ
• 投球データから自動作成されるグラフを参考に、配球や球種を把握する
• 関係者でデータを共有して、投手の育成に活かす
• アプリ内の有益な記事から、投手にとって役立つ情報を得る

野球という限られた分野で、さらに投手向けというニッチなターゲットを持つnPitchのようなアプリは、従来のスクラッチ開発で取り組むとリスクが大きくなる傾向があります。

そのため、ノーコード開発だからこそ開発できたノーコードの強みを存分に活かしたサービスといえます。

参考：https://no-code.media/2021/09/11/post-1798/

Send Eats

Send Eatsは、フードデリバリーを行うアプリです。

Send Eats上でお気に入りのお店を登録すれば、Send Eats上でデリバリーの注文ができます。

また、お気に入りのオーダーを繰り返し行うこともできるため、利便性も比較的高いです。

フードデリバリーのアプリは数多く展開されていますが、Send Eatsは極めてシンプルな構成となっているのが特徴です。

Bubbleを用いたネイティブアプリ開発では、シンプルさが大切だと理解できる事例といえます。

参考：https://play.google.com/store/apps/details?id=com.send_eats_app

まとめ

Bubbleでネイティブアプリを開発する際のポイントやツール、事例について解説しました。

Bubbleでのネイティブアプリ開発は、現代ではそれほど普及しておらず、互換性やトラブルシューティングの面で難があります。

しかし、今回紹介したような外部サービスなどを駆使することで、Bubbleでも他ツールと遜色のないクオリティのネイティブアプリを完成させることが可能です。

ぜひこの記事で解説した内容を参考にして、Bubbleでのネイティブアプリ開発を成功させてください。