ファンリピート社のブログFR note

bubbleで動的に制御可能な入力フォームの作り方を紹介!

こんにちは!ファンリピートの加藤です。

今回の記事ではボタンを押下する度に新たな入力フォームが追加される機能をbubbleで実装する方法についてまとめていきます。

エレメントやワークフローを様々組み合わせて作成するので、整理しながら進めていくことをお勧めします。ぜひ参考にしてみてください!

目次

当社では現在一緒に働くメンバー募集しています!
正社員
システムエンジニアとして当社のシステム開発業務に携わってみませんか?
未経験者から経験者まで広く募集しているのでぜひエントリーをお待ちしています。

bubbleとは

bubbleとはノーコードツールの名前のことですが、有名で老舗なツールと認識されている方も多いかもしれません。

一般的にウェブアプリケーションを作成しようとするとサーバーサイドとフロントサイドに関する知識やhtml、CSS、Java scriptなどの多数の言語の習得が必要となります。ただでさえ工数も多く必要になり、追加機能を付ける度にデータ構造の見直しなどさらに多くの手間がかかってしまいます。

しかし、ノーコードツールを利用すれば多少の知識は必要になるものの多数の言語習得の必要がなく、工数の大幅な削減が期待できます。

bubbleについての詳細は「ノーコードツール「Bubble」って?特徴・料金・使い方を解説」という記事でも解説しておりますので、気になる方は一度ご覧になってみてください。

実装していく!

任意のページを用意します。ここでは「form」として開発を進めていきます。

データを作成する!

まずはデータ構造などの前提についてご説明します。

Orderのデータ構造

OrderというData typeにproduct_name(商品名)、product_price(商品価格)、note(備考欄)のFieldを用意します。今回の実装ではOrderを一つのオーダー単位としていくつかのオーダーをフォームに入力していきます。

あくまでマスタデータとしての扱いではなく、注文や買取に関するフォームを想定して実装していきます。

ではエディターの画面左にある「Data」タブをクリックします。

そして、「New type」にOrderを新たなデータとして作成します。それぞれのデータ型は以下を参照してください。

ここでは商品価格をnumber型として扱います。価格をtext型にして「円」や「ドル」などの情報ごと入力させることもできますが、今回は金額の単位は統一させて考えます。

Order内のFieldsであるnote, product_name, product_price

簡単に見た目を整える

以下のようなUIを目指して作っていくので完成図を思い浮かべながら実装してください。

完成UI例

まずは背景のStyleとLayoutを変更します。

form(ご自分で設定されたページの名前)のStyle Attributeから新しいスタイルを作成します。ここでは「Background」とし、「Edit style」を押下して編集を行います。

Styleを作成する理由はその後に同様のエレメントで同様の色やフォントを扱う場合の管理がしやすいことによります。本記事では「Background」を使いまわすことはないですが、基本的にエレメント作成時に新たなStyleを作る、もしくはすでにあるStyleを選択することにします。

Edit styleからstyleを編集

Style「Background」は以下のように設定します。

Background colorを#E3F2FDに変更

作成するUIの構成は次の2点です。「入力フォーム」、「完了ボタン」で実装のメインは1番目の「入力フォーム」です。

画面左の「Containers」から「Group」を画面上にドラッグ&ドロップします。こちらでもStyleを「Form_Body」として新しく作成し、以下のように設定します。

ここで注意したいのはGroupのLayoutは格納したいエレメントを想定して、少し大き目で設定するということです。内包させたいエレメントの方がGroupよりも大きい場合、うまくGroup直下にならないことが理由となります。

Fomr_Bodyの編集内容

作成したGroup内に画面左の「Visual elements」から「Text」と「input forms」から「Input」をドラッグ&ドロップします。

TextとInputを配置した例

はじめに「商品名」に関する入力フォームを作成していきます。Textの表示を「商品名」とし、新しく「Section_title」というStyleを作成します。元のStyleから変更した点はFontを「Noto Sans JP」、Font sizeを「12px」です。

Text product_nameのAppearanceの編集例
Text product_nameのlayoutの編集例

InputはPlaceholderないに「指輪など」と変更し、Styleを「Form_Input」として以下のように設定しました。

Input product_nameのAppearanceの編集例
Input product_nameのlayoutの編集例
Form_Inputの編集例1
Form_Inputの編集例2
Form_Inputのlayoutの編集例

すると以下のようなUIとなります。

product_nameの関連エレメントを配置した例

編集した二つのエレメントを選択し(WindowsではShiftキーを押しながらクリック)、右クリックから「Column container」を選択します。

Column containerを選択

配置した4つの「Text」をShiftキーを押しながら選択し、右クリックをします。「Croup elements in」から「Column container」を選びます。すると縦で配列されたグループ化が可能になります。

現在のElements treeからもグループ化が完了したことが確認できます。

LayoutからTextとInputの間隔を少し開けたいので、以下のような設定を行います。

Group product_nameのRow gapを8pxに設定

入力項目はあと2つあるので、先ほど作成したGroupをコピー&ペーストを行い、各内容を「product_price」、「note」に対応したものに変更します。

prodduct_nameのグループを二つコピー
コピーしたエレメントの名前をproduct_price, noteに対応させる

1点気をつけていただきたい点はproduct_priceをnumber型と設定したため、Inputのフォーマットをそれに対応させなければいけません。Content placeを「Decimal(10進数)」とし、Shoe thousands separatorにチェックを入れます。すると、3桁ごとにコンマが表示されます。

例:1000000 → 1,000,000

Input product_priceのfomatをDecimalに変更

以上のような要領でカード(オーダー一つに対するフォーム)を作成します。完成例は以下のようになります。

カードの完成例

「オーダー1」、「×アイコン」を追加し、それぞれ「オーダーの何番目か」、「オーダーの削除」に対応したものになります。各設定は以下のようになります。「Elements tree」と各設定からエレメントの親子関係や設置を参考にしてください。

Group section_continerのlayoutの設定例
Icon deleteのlayoutの設定例
Group Formのlayoutの設定例
Elements treeの設定例1

ここまでで単一のフォーム、つまりカードを作ることができました。Repeating groupによりこのフォームを複数個作る動作をさせます。作成したカードをRepeating groupに格納して以下の設定をします。

RepeatingGroup FormのAppearanceの設定例
RepeatingGroup Formのlayoutの設定例

次にRepeating group下部に「+」Buttonを追加し、全体をグループ化します。「+」ボタンを押下するたびにフォームが増えていくという内容だったと思いますが、その全容が見えつつあります。それぞれの設定は以下の通りです。

Button add_orderのAppearanceの設定例
Button add_orderのlayoutの設定例
Group Form_listのlayoutの設定例

最後に完了ボタンを配置していきます。以下の通りの設定にしていきます。

Button doneのlayoutの設定例
Group Buttonのlayoutの設定例
Group Form+doneのlayoutの設定例

最後に全体のElements treeを紹介するので親子関係とエレメント名を確認してください。

Elements treeの設定例2

Repeating groupにフォームを表示させよう!

最初に一連の動作ロジックについて例を簡単に列挙すると以下の通りになります。

pageをloadする

→任意の値をオーダー1に与える

→フォームの値を保存する

→「+」ボタンを押す

→任意の値をオーダー2に与える

→フォームの値を保存する

→「完了する」ボタンを押下

→終了

Repeating groupに表示をさせることから始めていきます。

Repeating groupはすでに格納されているデータ(もしくはステイト)を表示させるものですが、空のデータを「+」ボタンor「×」アイコンに応じて作成、削除させます。そのため空データを入れるためだけのFieldを用意します。

fieldsにitem idを追加

ここでの空データとは具体的に文字、数字を含む8桁のランダムな値とします。

Group Form_listでその値を持たせるための設定を行います。まずType of contentを「text」、Data sourceを「Calculate formula」と選択します。

Group Form_listのData sourceをCalculate formulanに設定

その後、Typeを「Generate random string」にし、以下のような設定をしてください。こうすれば自動的に今回空データとして扱いたい値が生成されます。

Group Form_listのData sourceをCalculate RandomStringに設定

次に生成されたデータをRepeating groupに表示させていくためにCustom statesをしていきます。ここではRepeatingGroup Formに値を持たせます。右上の「i」アイコンを押下後に「Add a new custom state」で値を持たせられます。

Add a new custom stateを選択

state nameを「order_info」、state typeを「Order」とし、リスト化したデータを持つように選択します。

State nameをorder_info、State typeをOrderにして新たなstateを作成
  1. 生成されたランダムな値によって空のorderができる
  2. Repeating groupのstateに空のorderを格納
  3. stateをRepeating groupに表示

というのが想定する流れです。

1は完了したので、2について実装していきます。

画面左の「workflow」タブから、「Click here to add an event…」から「Page is loaded」を選択します。

Page is loadedを選択

「Create a new thing…」からTypeを「Order」にし、「item id = Group Form_list’s text」とします。これでPageがロードされるたびに空データを持ったOrderを生成します。

Create a new thingからitem id = Group Form_list's textを設定

「Set state of an element」から以下のように設定します。Valueの意味ですが「RepeatingGroup Form’s order_info(Repeating groupに持たせたステイト):plus item(追加する) Result of step 1(Step1の結果)」で、要約すると「新しく作成したorderのデータをステイトに追加する」というものです。これで2の要件は達成されます。

set state of an elementからStep1の結果をstateに追加する

3についてデザイン画面に戻って設定をします。

Repeating groupのData sourceをRepeatingGroup Form’s order_info(orderを格納したステイト)としていきます。

Data sourceをRepeatingGroup Form's order_infoに設定

ボタンに対応させてフォームを追加するには?

「+」ボタンに対応させて入力フォームを増やす機能を実装します。これは先程の実装とまったく同じworkflowを「+」ボタンに対応させます。

参考のためworkflowを乗せておくので、確認してみてください。

Create a new thingからitem id = Group Form_list's textを設定
set state of an elementからStep1の結果をstateに追加する

追加した入力フォームを削除するには?

「×」ボタンで追加したフォームを削除するには追加したロジックの真逆をすればよいです。Repeating groupに表示させているのはステイトであるためこちらを削除すれば良いだけです。

「Set state of an element」から以下のように設定します。こちらのValueも要約するとステイトから現在のオーダーを削除するといったものです。

set state of an elementから親orderをstateから削除する

そして、データ上からも対応のオーダーを削除したいので以下のようにデータを削除します。

親Orderを削除する

入力したデータを保存しよう!

Repeating group内でステイトとして持たせた複数データを保存するのは難しいと思いますが、その方法として紹介するのは非常に簡単なものです。

「Enable auto-binding on parent element’s thing」にチェックを入れ、Fields to modifyに対応するデータにします。

auto-bindingを許可してField to modifyに対応するデータを選択する

そうしたら以下の注意文が出てきます。それにしたがって画面左の「Data」タブから「Privacy」を設定していきます。以上のデータを扱える条件のユーザー(ここでは誰でもできるようにする)がauto-binding可能であるようにチェックを入れます。

すると入力するたびにその内容が保存されていきます。

プレビュー画面から確認してみよう!

画面右上の「Preview」ボタンから実際の動作を確認できます。

完成UI例

以下に私が作成した例のリンクがあるので、ご自身の実装の動作と比較してみてください!

https://blogcontent202305.bubbleapps.io/version-test/form?debug_mode=true

今回の実装では必須項目などの制約がないため画面上に残している情報はすべて自動的に保存されてしまいます。必須項目や指定の条件にあっていない入力を削除したいなどという場合はBackendでの処理を追加する必要があると思います。

まとめ

以上、ボタンに対応するフォーム作成方法でした!

いかがでしたでしょうか?実装次第で本件のようにUXに配慮した使いやすいUIをbubbleでも作ることができます。ステイトを巧に操ることができれば実装の幅が大きく増えると思います。本件で扱った実装方法がご自身の実装にも参考になればと思います。

メンバーを募集中!

当社ではお客様に向き合い、お客様の事業成功にコミットをできる仲間を募集しています。

正社員、インターンから副業まで、幅広く採用活動を進めております。プロジェクトマネージャーやシステムエンジニアとして当社のシステム開発業務に携わってみませんか?

当社と共に、業界トップを目指して挑戦したい方は未経験者から経験者まで広く募集しているので、ぜひエントリーをお待ちしています。

  • URLをコピーしました!

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。

目次
閉じる