2023.07.21 2023.07.21

URLをコピーしました！

品質を追求するあなたへ！Bubbleでバリデーション関数の作成について解説！

2023 7/21

こんにちは。ファンリピートの鳴海です。

今回はBubbleでバリデーション関数の作成方法について、説明したいと思います。

＼年末までに限った無料特典／
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着２社限定】デモアプリ構築・無料依頼フォーム

【当社では、こんなデモアプリがすぐに作れます】

貴社で「まずつくってみたい」試作品アプリの構築を毎月先着２社限定で無料で承っております
社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
ご興味のある方は下記のフォームよりお申し込みください

Bubble.ioとは

Bubble.ioは、直感的なドラッグ&ドロップ操作でシンプル〜複雑なWebアプリケーションを構築できるサイトです。

ドラッグ&ドロップ操作

ドラッグ&ドロップという操作で、Webアプリが制作できます

またアプリをインストールする必要がなく、クラウドプラットフォームというサイト上でアプリケーションを構築できるので、インターネットがあればいつでもどこでもアクセスができるため、チームで連携してアプリを作れます。

レスポンシブに対応している

画面サイズに合わせて、自動調整してくれる機能があります。

BubbleではCSS Flexboxと呼ばれるページ要素のレイアウト方法により、要素自体に0~100%、px単位で設定ができるため、細かいデザインの設計が可能となっています。

拡張性が高い

プラグインでは、UI、機能など様々なプラグインをインストールできます。

マップ機能や検索機能などデフォルトでも様々なシステムが搭載されていますが、プラグインでは画像をスライドショーでの表示、ヘッダーをハンバーガーメニューなどといった機能があります。

バリデーション関数とは

バリデーションというのは、入力内容でデータ項目が正しく規定された条件などで適合しているか確認する機能です。

よくある例としては、フォームの入力欄でメールアドレスや名前などが空の状態のままだと送信ボタンがクリックできないようにしたり、アラート表示させて、ユーザー側に入力を求めるようにします。

今回は果物の発注管理の一覧画面で、データ項目が正しく反映されているか検証し、もし反映されていないものがあればポップアップでそのデータを表示させるようなデモアプリの作成方法について解説したいと思います。

API connectorとは

API connectorというのは、表記通りでAPI通信するためのプラグインとなっています。こちらについては以下参考にしていただければなと思います。

APIの概念、API connectorについて説明しています。

株式会社ファンリピート

bubbleでAPI経由でのフィルター機能は可能？プラグインのAPI Connectorを例に実装方法を解説！ | 株式会社… こんにちは。ファンリピートの鳴海です。今回はプログラミングを書かないノーコードツールBubbleで、API経由でのフィルター機能ができるか調査してみました。 bubbleとは？…

API connectorを使ったslackの通知方法について説明しています。

株式会社ファンリピート

ノーコードで自動Slack通知？Bubbleで実装方法を解説 | 株式会社ファンリピートこちらではBubbleのSlack通知する方法について解説しています。ただ手順について説明しているだけでなく、Bubbleのアカウント開設方法やSlack botの作成手順、毎日通知する…

Bubble Backendとは

個人でAPIを作成して、アプリの画面上ではない裏側の処理でデータの編集や機能を実装する場所です。こちらについても以下参考にしていただければなと思います。

database change triggerという機能について説明しています。

株式会社ファンリピート

bubbleでデータ更新logを簡単に保存させる方法について解説！ | 株式会社ファンリピート BubbleでAPIを用いたData logの処理を記録する方法を簡単に説明します。

Recursive API workflowやフロント側のページで設定したAPIを呼ぶ方法について説明しています。

株式会社ファンリピート

【Bubble】Bubbleで1000件以上のデータの更新方法!! | 株式会社ファンリピート Bubbleで再帰的に1000件以上のデータをスケジュールして、更新処理を行う実装方法を解説。また再帰的な処理な例やBubbleについてそれぞれの説明。

実装方法について

注意としてBubble backend workflowについては、Starterプラン以上が対象ですので、Freeプランの方はご利用いただけません。現時点だと2週間のみstarterプランになれますので、デモアプリで一度実装してみたいという方はそちらを活用してください。

データ型

データ型については以下の通りです。

Userが注文した果物ごとに数量や値段を保持するデータとなります。

事前に以下の通りでデータを入れておきましょう。

値の内容は任意で、一部だけ空欄の状態にしてください。

User

ordersでは、orderで追加した情報のunique idを追加してください。

Order

Bubble Backend workflow

Bubble Backend workflowを使えるように、Settingタブ>APIタブで有効にします。

ページタブのBackend workflowsを開きます。

New API workflow..を選択し、追加します。

パラメーターや名前を設定します。

ここではAPIで情報を受け取る際のどのようなデータ型かなどを設定できます。

処理では、受け取った情報内で異常があるものだけ返却するようにしたいので、Data > Return data from APIを選択します。

受け取った値に対してフィルターするようにします。

フィルター内では以下の内容が含まれているかどうか判定します。

ユーザー名
メールアドレス
注文情報

これでBackend workflowsの設定は完了です。

API connector

API connectorで作成したAPIを呼ぶ際に、tokenが必要なので発行します。

Pluginsタブ> + Add pluginsをクリックします。

API ConnectorでInstallボタンをクリックします。

そうすると、API connectorが追加されますので、Add another APIを押下します。

右上のexpandを押下し、Add a shared headers for all callsで先ほどのAPI keyを以下の通りで入力します。
Key:Authorization

Value Bearer 先ほどコピーしたAPI key

入力が終わりましたら、Add another callで実際に設定していきます。

以下の通りで設定します。

URLの設定項目

POSTメゾット

Use as Data

URL:[home url]api/1.1/wf/[functionName]

[home url]はもしブランチや本番反映などする際はURLがまた変わってきます　　　ので、ここでは動的な値をいれるようにしています。

home urlのvalueには、https://アプリ名/version-test/を入力します。

functionNameのvalueには、先ほどBackendで設定した名前を入力します。

Headersの設定

Key :Content-Type

Value: application/json

次にBody パラメーターを設定します。

Bodyパラメータの設定

Body paramters↓

{

    "user_list": [<user_list>]

}

Value↓

”ユーザーテーブルで追加したデータのunique id①”,”②”

上記で設定を完了したら、initialize callを押下します。

そして、successとできたら成功です。そのままSAVEボタンを押下しましょう。

Design

indexページを開き、Groupエレメントを配置して、エレメント内に再度GroupエレメントとRepeating groupを設置します。

Group Bというエレメント内には、以下のエレメントを配置します。

checkboxエレメント
Textエレメント x 5
1. ユーザーID
2. ユーザー名
3. 注文数、注文名
4. メールアドレス
5. 作成日

次にGroup Bをコピーします。

Repeatinggroupエレメント内にペーストします。

現状だとただテキストのみ表示されるようになっていますので、各要素のデータソースを変更します。

Repeating groupのデータソース設定

Group userの設定

そして各エレメントでどの項目を表示するか設定します。

ユーザーID
1. userのuserID

ユーザー名
1. userのName

注文数、注文名
1. orderのproductName、Quanity

※Delimiterでは改行を入れています。

メールアドレス
1. userのemail

作成日
1. userのcreated date

※日付はyyyy/mm/ddのフォーマットにしています。

次にPOPUPを追加します。

POPUP内では、以下の通りに配置します。

Iconエレメント
Groupエレメント
1. Repeating groupエレメント
  1. Groupエレメント
    1. Textエレメント
2. Textエレメント

配置が完了しましたら、次にデータソースを設定します。

はじめにRepeatinggroupのiアイコンを押下して、set statesを追加します。

データ型はcheck_column response(APIの返却データタイプ)で、keyはvalidated_information_listで、listにチェックを入れます。

そして、Type of contentはcheck_column response(APIの返却データタイプ)、Data sourceは追加したset statesにします。

Layoutではページ読み込み時には非表示で、折りたたみはチェック

Conditonalでは、返却値が0ではない場合は表示となるように設定します。

Repeatinggroup内のGroupは下記のように設定します。

Textエレメントでは、UserIDを表示させます。

Groupエレメント内の2つめのTextエレメントは以下の通りです。

layout設定

ページ読み込み時には非表示で、折りたたみはチェック

Conditinal設定

返却値が0のない場合は表示となるように設定します。

POPUP内のIconを設定します。

Iconを設定して、Edit worflowを押下します。

Step1はPOPUPを閉じるように設定します。

Step2ではRepeating groupで設定したAPIの返却値をリセットします。

これでPOPUP内の処理は完了しました。

次に一覧画面で選択した内容をAPIに渡せるように実装します。

Repeating groupのiアイコンをクリックして、keyがselected_information、データタイプはUser、Listにチェックをいれましょう。

次にWorkflowタブを開き、An input’s value is changedを選択します。

Only whenでは選択していない時にします。

Step1では、先ほど追加したset statesに減らすようにします。

Workflowをコピーして、複製し、次は選択した時にします。

Step1では先ほどの:minusから:plusにして、追加するようにします。

最後に一覧画面上にボタンエレメントを追加します。

Edit workflowを押下して、Step1には以下の処理をいれます。

POPUP内で設定したset statesのvalueにAPI Providerを選択します。

そして下記の通りに設定します。

home url :Website home URL
(body)user_list :一覧画面のset states:format as text

という形に設定し、format as textでは“This User’s unique id*で、Delimiterは,にします。

設定ができましたら、最後にResponse Validation errorを選択します。

Step2では、POPUPを表示するようにすればOKです。

これで完成です。

まとめ

今回はBubble Backend worflowsでバリデーション関数について解説し、実際にデモアプリの作成方法について説明しました。ですがバリデーションの場合だとどの項目が異常なのかというのはユーザー側に明確化した方がいいので、もしこの実装方法についてわかったら、新しく記事を出したいと思います。

ここまで読んでいただきありがとうございました。