Bubbleの重要なコンセプト

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

こんにちは。陽が沈むと肌寒さが一層増しますね。いかがお過ごしでしょうか。この記事では、ノーコードツールbubbleの重要なコンセプトについていくつか紹介したいと思います。気合いを入れてLet’s Go!

型(タイプ)、フィールド、モノ

アプリケーションでデータを保存するとき、データの構造を考え、エディタでどのように表現すべきかを考える必要があります。そこで、型(タイプ)とフィールドの定義が非常に重要になります。以下の説明では、ユーザーが自分の車を他のユーザーに貸すことができるレンタカーマーケットプレイスを想定して、それぞれのコンセプトについて説明します。

型(タイプ)

異なるデータタイプは、データ駆動型アプリケーションを構築する際に定義する最も高レベルな概念です。これらのデータタイプは、データベースにデータを持たせたいオブジェクトや概念のようなものと考えることができます。私たちのマーケットプレイスのケースでは、異なるデータタイプには「車」、「予約」、「レビュー」が含まれます。これらのタイプを定義することは、これらのアイテムをどのように記述するかを定義する前に、データベースに何が含まれるかを記述する最初のステップです。

どのbubbleアプリケーションにも存在する組み込みのデータ型は、ユーザー型です。私たちのマーケットプレイスの例では、ユーザーはお互いに交流することになるので、データベースに存在する必要があります。このデータ型は特殊で、特定のプロパティを持っています。

bubbleにデータタイプが存在すると、そのタイプのモノのリストも可能になります。データタイプが「車」の場合、「車のリスト」は、バブルで作業したり、繰り返しグループで表示したりすることができる別の型になります。 リストは最大10,000個のアイテムを保持することができ、リスト内のアイテムは自動的に削除されることに注意してください。 

フィールド

フィールドは、与えられたデータ型のエントリーがどのように記述されるべきかを定義する方法です。実質的には、これは与えられたエントリーのデータを保存する場所です。

例えば、car(上で定義したようにcarというタイプを持つ)には、brand、mileage、color、pictureなどのフィールドがあります。これらのフィールドを定義することで、適切なデータを適切な場所に保存し、アプリケーションに表示することができます。

データタイプにフィールドを作成する場合(これを行うためのユーザーインターフェイスについては、この章の後の方で説明します)、そのフィールドのタイプを選択する必要があります。ほとんどのフィールドは、バブル内蔵のフィールドタイプのいずれかを使用します。

・テキスト:テキストを表現することに使われます(つまり、これは文字の集合のことです)。

・数字:小数点以下の桁数を除いて数値を表現することに使われます。

・イエス/ノー:値がイエスかノーなのかを表現することに使われます。(昔からあるプログラミング言語のブール演算子のことです)

・日付:具体的な日時を表現することに使われます。

・地理的な住所:地図上の住所を表現することに使われます。

・画像、ファイル

・数字の間隔

・日付の間隔

例えば、基本的な例では、車はテキストタイプの「名前」(フィールド)、イメージタイプの「画像」、数字タイプの「価格」を持っています。

フィールドタイプは、アプリを構築する際にデータをどのように使用するかに重要な影響を与えます。例えば、いくつかの操作を行う場合がそれに該当します。テキストタイプのフィールドは、連結または切り捨て、数値の乗算などができます。住所を地図上に表示することができます。車の10%を計算するためには、価格を「数字」タイプのフィールドにする必要があります。フィールドのタイプは、リスト内のエントリーを表示するためにも重要になります。車を価格で表示したい場合、フィールドは数字でなければなりません。

フィールドは、自分で定義したタイプ(またはユーザータイプ)を持つこともできます – 言い換えれば、与えられたフィールドのタイプは実際にはデータタイプとして使用するができる、ということです。これらの型は複合タイプと呼ばれ、データベース内の2つのエントリーを関連付ける方法です。例えば、車の所有者がuserタイプであるとします。これは、車に’owner’というフィールドがあり、データベース内の特定のユーザーを指し示す状況と考えることができます。

モノ

bubbleでは、モノとは、データベース内のエントリーのことです。例えば、この例ではユーザーが作成した特定の車です。この概念は、データベースのエントリーに名前を付けるために便宜的に定義されています。bubbleエディタでは、多くの場所でthings(モノ)に言及しているのを見ることができます。

すでに構築されたフィールド

bubbleは設計上、各タイプにいくつかのフィールドを追加します。これらのフィールドは、日付タイプにおける「作成した日」と「更新した日」にあたります。User(ユーザー)ではないものについては、3つ目のフィールドはCreator(作成者)であり、フィールドタイプはUserにあたります。ユーザーではないモノについては、このフィールドはモノが作成された時にログインしていたユーザーにリンクします(モノを作成するためのいくつかのアクションを参照してください)。すべてのモノには スラッグもあります。これは短縮形で、ユニークな方法でモノを参照するためのもので、例えば URL などで使用することができます。

bubble内の各モノは、作成時に割り当てられた一意のIDを取得します。これは、真ん中に x が付いた一見ランダムな数字の長い文字列の形式をしています。このフィールドを使用することは一般的ではありませんが、あるモノを一意に識別する方法が必要な場合には、unique idフィールドを使用することができます。

これらのフィールドを自分で作成するのではなく、bubbleのデータエンジンに頼ってフィールドを作成し、モノが作成されたときに正しいデータを割り当て、必要なところでそのデータを使用することができます。

要素(エレメント)の内容のタイプ

コンテナ要素(およびマップ要素のようなビジュアル要素セクションのいくつかの要素)には、「コンテンツの種類」フィールドがあります。このプロパティを使用すると、要素が表示するデータの種類を定義することができます。例えば、繰り返しグループは「車」のリストを表示することができます。これを繰り返しグループレベルで定義することは、コンテナ内の指定されたタイプの異なるフィールドにアクセスできるようにするために非常に重要です。例えば、繰り返しグループが車のリストを表示する場合、最初のセルにテキストを追加し、テキストのキャプションを「現在のセルの車の名前」と定義することができます。コンテンツのタイプを定義することで、各コンテナのコンテキストでどのフィールドが利用可能かを bubble に知らせることができます。

タイプを作成するためのユーザーインターフェース

bubbleでデータタイプとフィールドを作成するには、主に2つの方法があります。関連するセクションで説明されているように、データタブで行うこともできますし、何かを作成したり変更したりするアクションで作業するときに、その場で行うこともできます。どちらの方法もデータ構造には同じ効果があり、ほとんどの場合、データをどのように考えるかに依存します。アプリにワークフローを追加し始める前にデータ構造から始めることもできますが、その場合はデータタブの方が自然である、といえるでしょう。

タイプの不一致と問題点

イシュー(問題)チェッカーは、アプリケーションの不整合を特定するのに役立ちます。アプリケーションを設計する際に修正しなければならない不整合の多くは、タイプの不整合です。要素やアクションが指定されたタイプを期待していて、別のタイプにつながるデータを定義するために式を使用している場合、イシュー(問題)チェッカーはこれを修正すべき問題としてフラグを立てます。これらの問題を修正することは、ランモードでアプリケーションの期待される動作を得るために非常に重要です。

例えば、コンテンツのタイプが「車」であるグループを使用しているとします。これは、グループ(とその中の要素)が特定の車を参照して、その車の画像、名前、価格などをランモードで表示することを意味します。ここで、グループ内のデータを表示するアクションがあるとしましょう(言い換えれば、グループ内に表示されるべきものを定義します)。このアクションはcarというタイプのものを表示します。ランモードでグループに表示しようとしているものがuserとして評価されるようにアクションを設計した場合、タイプの不整合が発生します。イシュー(問題)チェッカーは編集モードでこれを検出します。

このようなタイプの不整合はフィールドタイプにおいても起こります。例えば、ユーザーのクレジットカードをチャージするためにCharge the current userアクションを使用している場合、フィールドの1つは金額になります。このフィールドは当然、数字でなければなりません。この金額を定義するために動的な式を使用し、それがテキスト(文字)またはアドレス(住所)として査定された場合(つまり、数字で入力されなければならないのに文字や住所が入力されているとき)、イシュー(問題)チェッカーはこれを解決すべき問題としてフラグを立てます。

ファイル

bubbleには元から付いているのファイルストレージ機能があります。bubbleにアップロードされたファイルは、Data からFile Managerを通じて見ることができます。ただし、ファイルがbubbleアプリにアップロードされると、アプリの背後にあるAmazon S3バケットに直ちにアップロードされることに注意してください。これは、ファイルがアップロードされるとすぐに、そのファイルへのURLを取得することを意味します。ただし、ファイルを非公開にすることも可能です。

まとめ

いかがだったでしょうか。今回の記事では、ノーコードツールbubbleの重要なコンセプトを数点ご紹介しました。タイプ、フィールドには細かく注意を施すべき点が多く存在しましたね。では、また次の記事でお会いしましょう。See You Soon!

Katsu

Katsu

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







関連記事

  1. 記事作成

    Bubbleのバルク操作・コメント・コラボレーションを紹介!!

  2. 記事画像

    【学生必見】BubbleによるWebアプリ開発のリアルに迫る!

  3. 記事画像

    発注者も必見!ノーコードツールで開発を行うメリット13個

  4. 記事作成

    Bubble・アプリをテストする際の一般的な設定

  5. 記事作成

    Bubbleのプラグイン基礎を徹底解説!!

  6. Adalo Resource・FAQ一般的な質問

  7. SaaSロゴ

    Active Campaign

  8. SaaSロゴ

    Tiger(Jungleworks)

  9. 記事作成

    【ブログ運営者必見】サイトにCTAを設置できる「HelloBar」をご紹介!

人気記事

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

おすすめ記事一覧

  1. タスク
  2. 記事画像
  3. 記事画像
  4. 記事画像
  5. Productivity
PAGE TOP