HapInS Developers Blog

HapInSが提供するエンジニアリングの情報サイト

トップ > テックブログ > Bubbleのワークフローとデータベース

Bubbleのワークフローとデータベース

テックブログ


このページでは、Bubbleのイベントアクション設定ができるワークフローとデータベースの基本情報について記載

①ワークフローとは

Bubble Appの裏で機能する複数のロジックを定義する機能

Eventが発生したとき、Actionを実行させる場所

開発における、バックエンドに相当する

EventとActionの要素で構成されている

  • Event:トリガーの設定
    • 例）クリック、ページロード等の動的変化を設定する
  • Action:イベントの設定
    • Event発火の結果、「実行したいこと」を設定する

②Workflow

Event

上段の正方形オブジェクトで設定する

Eventのカテゴリー

General

  • 使用例
    • ユーザーがログインした時
    • ページをローディングした時

Elements

  • 使用例
    • ボタンをクリックした時

Custom

自身でイベントを作る時に使用する

Action

Eventの正方形をクリックしたら表示される長方形のオブジェクトで設定する

Actionの主なカテゴリー

利用頻度が高いものに絞って記載

  • Account
    • ユーザーに関係することを主に設定する
  • Navigation
    • 「前のページに戻る」などの、ページ遷移などを主に設定する
  • Data
    • データベースのレコード作成、変更を設定する
  • Element actions
    • 非表示のものを表示するなど、Elementに関係する設定をする

③アラート機能の作成方法

「ボタンをクリックした時」というイベントを想定例として記載

Eventの設定

  1. ボタンを設置
  2. ボタンを選択した状態でWork flow画面へ移動
  3. 正方形オブジェクトをクリック
  4. An element is clickedを選択
  5. An element is clickedエディターの「Elements」に、設置したボタンを選択
  6. Eventの設定完了

Actionの設定

  1. Designでアラートを作成する
    1. Alert Elementを設置し、「ログインが完了しました」という表示を作成
    2. Alertエディターの「Position the alert at the top」というチェックボックスをクリックすると、ページの最上位部に配置位置が移動する
      1. 正しく最上部に移動しない場合もあり。その場合は、手動で位置移動させる
  2. Work flow画面へ移動
  3. Element Actions＞Show messageを選択
  4. Show messageエディターの「Elements」に、設置したアラートを選択
  5. Actionの設定完了

アラートの表示時間を変更したい場合

Element Actions＞Show messageのエディターで変更可能

  • 表示設定単位はms(ミリ秒）
    • 1秒 == 1000

④ページ遷移機能の作成方法

「ボタンをクリックした時にページ遷移する」というイベントを想定例として記載

Eventの設定

  1. ボタンを設置
  2. ボタンを選択した状態でWork flow画面へ移動
    1. 「ページ遷移ボタン」」エディターのStart/edit workflowをクリックして、Work flow画面への移動するとボタンにEventが設定された状態で移動できる
    2. ただし、エレメント起点ではないとき（ページのローディングなど）ではこの方法は使用できない
  3. Eventの設定完了

Actionの設定

  1. Navigation＞Go to page...を選択
  2. エディターのDestinationから、遷移させたいページを選択
  3. Actionの設定完了

⑤ユーザー登録機能の作成方法

ユーザー登録フォームの作成を想定例として記載

エレメントはInput fornを使用する

実装フローは以下を想定

  1. メール、パスワードを入力
  2. 「登録する」をクリック
  3. アラート「ログインが完了しました」を表示
  4. ログイン画面（メールアドレス表示）の表示

作成方法

  • 1.メール、パスワードを入力

    1. メールアドレス用のinputフォーム作成
      1. inputフォームを設置>Content format>Emailを選択
      2. エディター名を「登録用メールアドレス」に変更
      3. Placeholderを「メールアドレス」に変更
    2. パスワード用のinputフォームの作成
      1. 「1.」で作成したメールアドレス用inputフォームを複製
      2. エディターのContent formatをPaaswordに変更
      3. エディター名を「登録用パスワード」に変更
      4. Placeholderを「パスワード」に変更

  • 2.「登録する」をクリック

    1. 登録用ボタンの設定
      1. Visual elements>Bottunを設置
      2. サイズをinputフォームに合わせる
      3. ボタンのテキストを「登録する」に変更
    2. Workflowの設定
      1. ボタンエディターの「Start/Edit workflow」からWorkflowの設定画面へ移動
      2. ユーザー登録ボタンのActionからAccount>Sign the user upを選択
        1. この時点で、既にEventは設定されている状態になっている
      3. Sign the user upエディターの「Email、Passwprd」に、「1.」「2.」で作成したInputフォームの選択＋「's value」を選択
        1. この場合、「どのメールアドレスとパスワードなのか？」を指定する必要がある
      4. Workflowの設定完了

  • 3.アラート「ログインが完了しました」を表示

    1. プレビュー確認で使用したメールとパスワードを削除する
      1. Data>App data>削除したいユーザー情報にチェック>Delete>CONFIRM
    2. 「登録する」ボタンからWorkflowへ移動
    3. Element Actions＞Show messageを選択
    4. プレビューで確認
      1. 登録ボタンをクリックした時、、以下が確認できれば成功
        1. 入力した情報はフォームからクリアされる
        2. 「ログインが完了しました」のアラート表示が出る
        3. 入力フォーム上に、登録したメールアドレスが表示されるようになる
    5. Data>App dataで登録されているか？を確認
    6. ユーザー登録フォームの実装完了
      1. 補足：ユーザー確認メールを送信>ユーザー側で認証>登録完了というプロセスが、正式には必要

  • 4.ログイン画面（メールアドレス表示）の表示

    1. 後述の「③ログイン中なのか？がわかりづらい」の解決方法を参照

補足

「⑤ユーザー登録機能の作成方法」の項目「2.「登録する」をクリック」までを作成した状態でプレビュー確認した時、実際に気になった問題点3項目と解決方法は以下

  • ①画面に入力した情報が残ったままになる
    1. 解決方法
      1. 「入力した情報をリセットする」というActionを追加する
        1. 「登録する」ボタンを選択した状態でワークフローへ移動
        2. Action>Element actionsカテゴリー>Reset inputsを選択
  • ②登録できたのか？がわかりづらい
    1. 解決方法
      1. 「ログイン完了」のアラート表示を追加する
        1. エレメントAlertを設置>テキストを「ログインが完了しました」に変更
        2. AlertエディターのPosition the alart at the topにチェックをし、サイズを調整
  • ③ログイン中なのか？がわかりづらい
    1. 解決方法
      1. 登録したメールアドレスを画面上にテキスト表示させる
        1. Textを設置
        2. 画面上部に移動
        3. Textエディターの「Insert dynamic data」の「Current user」＋「's email」を選択する
          1. Insert dynamic dataとは？
            1. 状況によって表示する内容が異なる（動的表示）で、表示する内容を指定する項目

⑥ログアウト機能の作成方法

実装フローは以下を想定する

「ログアウトボタンをクリック」した時に、「ユーザーをログアウトさせる」

作成方法

  1. 任意の場所にButtonエレメントを配置
  2. Buttonエレメントを選択した状態で、ワークフローに移動
  3. Account>Log the user outを選択

⑦ログイン機能の作成方法

項目①から⑥で使用したエレメントの機能及び操作が重複する部分のため、実作業の効率化を踏まえて工程を記載

実装フローは以下を想定する

「ログインボタンをクリック」した時に、「ユーザーをログインさせる」

作成方法

  • 1.ユーザー登録フォームをグループ化し、ワークフローごと複製する
    1. ユーザー登録フォームの各エレメントを選択
    2. エレメント上で右クリック
    3. Group element in the groupを選択
    4. 右クリックでCopy with worlflowsを選択
    5. Paste with workflowを選択
    6. 空いているスペースにペースト
    7. 補足：複数のエレメント選択のショートカットは、「Tab＋エレメント選択」

  • 2.グループ名、ボタンテキストをログイン用に変更する

    ユーザー登録フォームと区別するため、必ず変更しておく

  • 3.ログインActionに不要な機能は削除する

    1. ログインボタンをクリック
    2. ワークフローに移動
    3. Action「Step1」のSign the user upを削除
  • 4.ログインに必要なActionを入れる
    1. Step１にLog the user inを挿入
    2. Log the user inエディターの「Email、Passwprd」に、①-②で作成したInputフォームの選択＋「's value」を選択
      1. 「どのメールアドレスとパスワードなのか？」を指定する必要があるため
  • 5.プレビューで確認する
    1. ログアウトクリック
    2. 画面上のメールアドレス表示が消える ログインクリック
    3. 画面上にメールアドレスが表示される

⑧データベース

データベースとは？

  • 利用しやすいように整理した、複数のデータの塊のこと
    • サーバー上のものだけでなく、紙で管理しているもの（電話帳、名簿など）も、データベースに相当する

各項目の名称

Data types

  • テーブルの作成、編集を行う
    • テーブルとは？
      • Excelで例えると、「1つのシート」に相当
      • fieldは、「項目」に相当

privacy

  • 各テーブル内のデータを確認する

App data

  • データベースを「誰が閲覧、編集できるか？」というルールを定義する
    • 現時点のユーザーテーブルには、メールアドレス、作成日時、変更日時、任意のURL:文字列（slug）というfield（項目）が表示されている
    • slugとは？
    • その他、unique ID（判別するための固有のナンバー）もある
      • Modify an exstring database entryの画面で表示される
      • 編集（鉛筆アイコン）クリックで表示
        • この画面にある、メールアドレス以外のfieldは他の機能を作成した時にも表示される

Option sets

  • ドロップダウンの選択肢を設定

File manager

  • ファイルの管理

補足

データベースの主な名称と役割は、以下のように、Excelシートに置き換えて覚えていくと、最初は理解しやすい（あくまで当方の初見での乾燥です）

  • field
    • Excelシートなどでリストを作成するときの項目
  • record
    • Excelシートなどでリストを作成した時、見出し項目以興の行
  • Table（Data type）
    • Excelシートなどで作成したリスト情報をまとめたもの

⑨フィールドの追加方法

追加する項目及び、その表示方法は、以下を想定する

  • 追加する項目：「ユーザー名」「ユーザー画像」
  • 表示方法：ログイン後の画面上で、メールアドレスの変わりに「ログイン後の画面で表示させる」する

作成方法

  • 1.名前のフィールドを追加する

    1. Data typesタブを選択>Creae a new fieldを選択
    2. ポップアップ表示されたら、「Field names>Name」「Field type>Text」をそれぞれ入力
      1. This field is a list(multiple entries)にはチェックしない
        1. 名前（Name）は、一つでOK（複数存在しない）であるため
      2. リストとして複数データを保存する時にチェックする
        1. https://note.com/taku_nocode/n/n7b260118a38 6
    3. .CREATEをクリックで完了

  • 2.画像のフィールドを追加する

    1. Data typesタブを選択>Creae a new fieldを選択
    2. ポップアップ表示されたら、「Field names>Photo」「Field type>image」を入力
    3. CREATEをクリックで完了
      1. 本来は、このあとに「画像アップロードフォーマット」と「名前入力変更のフォーマット」も作成する
      2. 補足：defaultというフィールドは、「項目の初期値」を設定できる

  • 3.App dataを修正する

    1. App dataタブを選択>編集（鉛筆アイコン）をクリック
    2. Nameに、任意の名前を入力
    3. 任意の画像をアップロード
    4. 画像のフィールドの追加完了
    5. 補足
      1. ここで、Designの修正をすると良い
        1. 追加した名前と画像のフィールドを表示させるために必要な修正作業

  • 4.メールアドレスの表示を、名前の表示に変更する

    • 「Current user」＋「's email」を、「Current user」＋「's name」に変更する

  • 5.アップロードした画像を画面に表示させる

    1. ページに、イメージエレメントを設置
    2. イメージエレメントの、Dynamic image>「Current user」＋「'sphoto 」を選択
    3. サイズを整える
      1. サイズ60～65pxくらい。Arrangeで中央配置にする
      2. グループを以下の2つにそれぞれまとめて中央配置に整える
        1. 名前、画像
        2. ログイン、ログアウト、登録フォーム

  • 6.プレビューで問題なければ、完了

    注意：この実装状態だけでは、「App上で、ログインユーザーのみの確認」までしかできない

⑩登録ユーザーの一覧表示方法

表示方法と必要な機能は、以下を想定する

  • 表示方法
    • 登録ユーザーのメールアドレス、名前、画像をリストで表示させる
      • 「登録フォーム」と「ログインフォーム」の間に「登録ユーザーの一覧表示」を実装する
        • Bubbleでのログイン-確認方法
          • Data＞ログインしたい登録ユーザーにチェック>Run asをクリック>チェックしたユーザーアカウントでログインできる
  • 必要な機能
    • Repeating Group
      • データベース上または外部APIから取得した複数のデータリストを表示する時に必要なコンテナ

作成方法

  • 1.「リストのデータを表示する」という設定を行う

    1. Repeating Groupを設置
      1. 表示したいリストのデータタイプの設定
        1. Dataで設定した、テーブル「User」を設定する
        2. エディター>Type of content>userを選択
    2. 表示したいデータのリストを設定
      1. エディター>Data source>Do a search forを選択
      2. TypeでUserを選択>Add a new constraintで「uniqueIDが、現在のUserのuniqueIDではない」という設定をする
        1. unique ID <> Current user's unique ID
        2. <> は「notイコール」
      3. 新規登録ユーザー順に表示させる設定
        1. Sort by >登録日を指定>降順（DescendingをYes）に変更する
    3. 「リストのデータを表示する」ための設定完了

  • 2.Repeating Group内に、「表示させたい名前、メールアドレス、画像」を子エレメントとして追加する

    1. 名前を設置する
      1. Repeating Groupの最上部欄に、テキストを入力
        1. 表示する名前は、「ユーザーごとに変化する」ため。Insert dynamic data>Current Userを選択
        2. 名前を表示するために、Crrent cells User's nameを選択する
    2. メールアドレスを設置する
      1. 「1.名前を設置する」で作成したテキスト部分をコピー＆ペーストする
      2. Crrent cells User's nameの、「's name」を「's email」に変更する
    3. 「名前」とメールアドレス」の設定完了
    4. 画像を設置する
      1. 既にログインしているユーザー画像のエレメントをコピーする
      2. Repeating Group内にペースト配置する
      3. Insert dynamic data>Current User's Photoを選択
    5. 画像の設定完了

  • 3.現在の登録ユーザー以外を登録してみる

    • テストの場合、適当なメールアドレス、名前、画像でOK
    • プレビューで確認すると、「現在ログイン中のユーザー」以外の登録ユーザーも、画面上に表示される

  • 4.補足

    1. もし、「リストが表示されない場合」は以下の方法を行ってプレビューで確認する

      1. Data>Privacyへ移動する
      2. プライバシータブで設定されている設定を削除する
      3. Everyone else (default permissions)のFind this in searchesにチェックを入れる

      a～cの方法、いずれかを行うことで解消できる

    2. 正しく設定したにもかかわらず、リスト表示されない時に想定される原因

      1. Data>Userの箇所にPrivacy rules appliedの表記があり、Privacy設定が影響している場合が多い
        1. Repeating GroupにてデータをSearch（Search for）する設定をしている
        2. このSearch機能を「ユーザーがログインしていないと利用できない」設定になっている場合は表示されないことにより、データが表示されない

⑪複数のデータタイプを扱う方法

データベースの各用語について

  • Types：「名前」「メール」「画像」などの異なるデータの集まり（≒シート）のこと
  • Field：各列の項目（≒見出し）の列のこと
  • Field types：Field（≒項目）ごとにきめられた型のこと
  • things：typesの「2行目以降の行」のこと

複数のデータタイプを扱う理由

データタイプ上の矛盾を防ぐために、「データタイプを分ける」という作業が必要であるため

例）投稿機能のアプリの場合 ユーザーTypesで、「同じユーザーが複数の投稿をした状態」にある この、「複数の投稿」の後に「ユーザー名を変更した時」には、「全ての投稿に対し、ユーザー名を合変更して反映する」ということが必要

複数のデータタイプの分け方

uniqueIDは、「固有のもの」であり、「変更はできない」 つまり、uniqueIDさえわかれば、名前を始め「複数のユーザー情報が特定できる」

例）投稿機能のアプリの場合 各「thing」の固有のIDを利用し、各投稿に「uniqueID」を入力することで「データ同士を連携させる」ということが可能になる

「一つの入力欄」に対し、複数のデータを紐づけた状態はBubbleの特徴

⑫投稿機能の作成方法

表示方法と必要な機能は、以下を想定する

  • 表示方法

    ユーザーがTwitterのような投稿をできるようにする

  • 必要な機能

    「データベース➂登録ユーザーの一覧表示」で作成したリストを、「投稿用」のデータタイプに置き換えればOK

    • テキストの入力欄を作成する
    • 「投稿する」ボタンを設置する
    • 「投稿する」ボタンをクリックすると、投稿した内容がリストに表示される

作成方法

  • 1.複数のデータタイプの連携

    1. フィールドを準備する
      1. Data>Data typesへ移動>Post typeを追加する
        1. 「User type」とは別に、「Post type」で投稿用のデータタイプを作成するため
      2. reate a new field>Field nameに「Content」入力>Field typeに「text」を選択
        1. 短文の文章を投稿するフィールドを設定するため
      3. Create a new field>Field nameに「User ID」入力>Field typeに「User」を選択
        1. 「どのユーザーが投稿したのか？」を特定るためのフィールドを作成するため、「連携させたいデータタイプ」を指定するには、データタイプ「User type」と「Post type」の連携をさせる必要があるため
        2. 補足：Bubbleは各type(User以外）にデフォルトで、「Creator」というThing（⁼レコード）を作成したユーザーが記録されるフィールドが存在する

  • 2.投稿機能とリスト表示の作成

    1. 投稿用の「postページ」を作成する

      1. Designに戻り、Add a new pageで、新規ページを作成する
      2. ページ名を「post」とする
      3. Input forms>Multiline Input（長文用のフォーム）を設置する
      4. Buttonを設置>エディターのstyleを「Primary Button」に変更する
      5. Buttonのテキストを「投稿する」に変更する

    2. 投稿用のワークフローを作成する

      1. Dataカテゴリー>Create a new thing...を選択
      2. Data typeで「Post」を選択
      3. Set another fieldで、以下のような手順で「データを保存したい２つのフィールド」を追加する
        1. 「Content = MUltiline Input A's value」
        2. 「User ID = Current User」
      4. 「STEP2」のアクション>Reset relevant inputs」を追加
      5. Dataタブから、任意のユーザーを選択してログインし、プレビューで投稿してみる
      6. 投稿後、データベースのApp dataを確認する
      7. Contentsのフィールドに、投稿したデータが記録されている

    3. 投稿した内容を一覧表示させる設定を行う

      1. Repeating Groupを追加する
      2. Type of Contentを「Post」にする
      3. Data sourceを「Do search for」>Typeを「Post」に変更する
      4. 「新しい投稿が一番上に表示される」という設定にする Sort by>Create date>'yes'

    4. 表示させたい投稿内容、投稿したユーザーの名前を追加する

      1. Designに戻り、Textを追加
      2. エディターの設定を、Current cell's Post type's contentにする
      3. Textエレメントを複製し、そのエディターの設定を、Current cell's Post type's User ID's Nameにする

    5. プレビューで確認後、問題なければ完了

      1. 最初にテスト投稿した内容が、表示されていることが確認できる