おすすめ記事

おすすめ記事一覧

Bubble (バブル)とはいったい何か。日本語でわかりやすく解説。

コードの知識は不要になる?ノーコードプログラミングツールのBubbleを使ってみた | LaunchCart | 越境EC専用カート

.Bubble (バブル)とは?

ノーコードツール・bubble(バブル)をご存知でしょうか。bubbleはビジュアルプログラミングツールであり、同時にクラウドプラットフォームでもあります。プログラミングツールを使ってアプリケーションを構築し、クラウドプラットフォームがそれらを実行します。アプリケーションの編集はブラウザでアクセスでき、。ダウンロードする必要はなく、どのデバイスからでも簡単にアプリにアクセスできます。アプリケーションがbubble上に構築されたあと、そのアプリケーションをクラウドソリューションに展開する必要はなく、bubbleのクラウドインフラ上に表示されます。

バブルでできること・できないこと

bubbleでは、Webアプリケーションを簡単に構築することができます。アプリケーションは、コンピュータ、タブレット、携帯電話・スマートフォンのブラウザでアクセスできます。アプリケーションにはデータベースがあり、ユーザーはアカウントの作成、データの保存、取得をすることができます。Bubbleの編集はとても自由で、従来のプログラミング言語のように、固定された可能性のセットはありません。異なるデータとロジック操作を組み合わせることで、非常にシンプルなものから非常に複雑なアプリケーションまで作成することができます。機能の詳細な特徴のリストを使わずに、bubbleは下記のことをサポートしています。

・ユーザーアカウントの作成
・データの保存、変更、削除、取得
・リアルタイム更新
・API を公開しているあらゆる種類の外部サービス(支払い、データソース、認証プロバイダなどを含む)への接続。
・画面の幅に合わせて調整するレスポンシブアプリケーションの構築。

バブルの編集は非常に自由度が高いです。とはいえ、コア言語でできることにはいくつかの制限があります。bubbleの言語は表計算式に匹敵するパワーを持っています:多くのことができますが、データに対する再帰的な操作やループ操作を必要とするもの(例えば、カスタムの機械学習アルゴリズムを書くなど)は難しいでしょう。グッドニュースは、bubbleはJavascriptプラグインを介して完全に拡張可能であるということです。独自のプラグインを作成して、サポートされていないサービスへの接続を追加したり、Javascriptで書かれた要素を追加したり、サーバーコードを書いたりすることができます(「Building Bubble Plugins」を参照)。bubbleモデルは、当社のビジュアル言語を使用してWebサイトのコア機能を記述し、bubbleで構築するのが難しいアルゴリズムを処理するためにJavascriptをプラグインするというものです。

また、ユーザーインターフェイスを構築するためのbubbleのビジュアルアプローチは、できることの制限があります。たとえば、プラットフォームゲームを構築するには、おそらく bubble は最適な選択ではないでしょう。bubbleアプリはページ上でのアニメーション要素をサポートしていますが、新しいユーザー体験をデザインしようとすると、何らかの限界にぶつかる可能性があります。

ネイティブアプリケーション

bubbleはまだiOSとAndroid用のネイティブアプリケーションを生成していませんが、一部のユーザーはすでに両方のストアにアプリを展開することに成功しています。ネイティブファーストのソフトウェアを構築していて、bubbleを使いたい場合は、まずWeb版を1ページのアプリとして構築し、それをネイティブアプリケーションに後から変換することをお勧めします。公式・フォーラムは他のユーザーがすでに経験しているので、このプロセスに最適です。将来的にはこれを元々にコア機能に追加する予定があるそうですが、具体的なスケジュールについてはまだわかっていません。

誰がバブルを使うことができるのか

Microsoft Excelを使い慣れている人であれば、誰でも比較的簡単にbubbleを学ぶことができるでしょう。学習曲線があり、完全なアプリを構築しようとする前に、レッスンを行い、ビデオを見て、このマニュアルを読むことを強くお勧めします。コミュニティは、初心者と上級者の両方の質問に非常に役立つので、広範囲に活用してください。

基本原則

アプリを構築する

bubbleを構築する際には、それぞれのユーザーが独自の習慣を持つことになりますが、一般的なアプローチは、アプリケーションのビジュアル構造を確立することから始め、それをプログラムするワークフローを定義することです。ビジュアル構造は、入力、ボタンなど、ユーザーが対話するために必要なコア要素のセットになります。ワークフローは一連のワークフロー、つまり一連のアクションをトリガーとするイベントです。例えば、ボタンのクリックはイベント扱いです。そのため、ページ上でどのボタンや入力が必要なのかがすでにわかっていると、これらのイベントを考えるのが簡単になります。bubbleで構築するもう一つの次元は、データ構造です。この章全体では、バブルのアプリケーションデータ構造の異なる重要な概念をカバーしています。最後に、アプリが機能するために、決済ソリューション、データプロバイダなどの外部サービスに依存する可能性が非常に高いです。これはプラグインを通して行われます。

通常、アプリケーションがどのように見えるのか、ペーパーの上で下書きを始めるのは良いアイデアです。ペーパーの上にいくつかの主要な画面を描き、それぞれに必要な要素を配置してから、アクションごとにワークフローの下書きをすることは大きな価値があります。これができれば、実際のアプリケーションの設計はより速く、より自然になります。アプリについて考えているときに、以下のようなことを考慮してください。

・アプリに必要なページ数。例えば、Facebookにはホームフィードページ、ログアウト時のホームページ、プロフィールページ、設定ページ(少なくとも以前のバージョンのFacebookでは…)などがあります。

・アプリがどのようなデータを保存するか。それが賃貸市場の場所であれば、誰が借りるのか、アパートの住所はどこか、それぞれの物件のレビューはどうかなど様々なデータが必要でしょう。

ほとんどのユーザーは、最初の要素とシンプルなレイアウトでページのワイヤーフレームをデザインすることから始め、ワークフローの部分に移動して基本的な動作を設定し、必要な要素のセンスが良くなったところでデザインの部分に戻ります。アプリが成長し、製品を改良したり、機能を追加したりすると、デザイン、ワークフロー、データ構造も変更することになります。

bubbleは非常に自由な構造になっているので、アプリケーションを構築しているうちに、エクセルの数式を間違えることがあるように、いくつかのミスをする可能性が非常に高いです。これはプログラミングプロセスの一部です。bubbleには、アプリケーションのデバッグや修正に役立つツールがいくつか用意されています。また、アプリ内のデータの不整合を特定するのに役立つIssue Checkerもあります。

アプリを実行する

アプリを構築することはbubbleの力の一面に過ぎません。最初のバージョンを構築したら、実際のユーザーと実際のデータを使って実行します。アプリが本番になると、つまり実際のユーザーによって使用されると、すべてが期待通りに動作していることを確認するために、アプリを監視することができます。繰り返しになりますが、bubbleにはいくつかのモニタリングツールとログがあります。

有料の機能

一部の機能は有料プランでしか利用できない場合があります。すべての機能は編集からアクセスできますが、ご利用のプランがその機能を許可していない場合、実行モードでは機能しません。利用中のプランが機能をカバーしていない場合は、通常、機能の横に警告が表示されます。

まとめ

今回はノーコードツール・bubble(バブル)とはいったい何かを日本語で簡単に紹介しました。今までの複雑なコードを必要としないbubbleはより多くの人々が簡単にウェブアプリケーションを構築することを可能にすると感じました。bubbleの細かな説明はまた別の記事で紹介していきたいと思います。ぜひそちらもお待ちください。

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. Adalo Resource・リスト(スクリーンとコンポーネントセクション)について

  2. long tail pro

    Long Tail Pro

  3. Adalo Resource・スライダー(音量調節)とオーディオプレーヤー(スクリーンとコンポーネン…

  4. Adalo Resource・マジックテキスト(スクリーンとコンポーネントセクション)について

  5. Adalo Resource・モーダル/ポップアップウィンドウの作成方法、お気に入りボタンの作成方法…

  6. 飲食DX化2

    ◆SaaS導入事例 デジタルマーケティング会社の方に聞いてみました!

  7. amazon

    Amazon Web Service

  8. canva_log

    Canva

  9. 特集記事

    強力MAツール×ノーコード!Moosendをご紹介!

人気記事

  1. topimage
  2. 記事画像
  3. top_image
  4. 特集記事

おすすめ記事一覧

  1. top_image
  2. 飲食店 会計
  3. 記事画像
  4. Bubble
  5. 勤怠管理
PAGE TOP