ノンコーディングでアプリが作成できるプラットフォームとして、このブログで何度も登場している bubble ですが、今回はバリデーションチェックのやり方についてご説明します。
アプリを作成する際、データの整合性を担保するためにはバリデーションチェックが必須ですよね。bubble では、このチェックを簡単に設定することができますので、その方法について以下ご説明いたします。
なお、今回の記事の内容は、主にこちらのページを参考としております。
https://bubble.io/reference#Elements.Input.content_format
bubble の公式ページですので、英語に抵抗のない方はこちらもご参照ください。
bubbleのバリデーションチェック項目
bubble では、入力内容が以下の項目かどうか、チェックを行うことができます。
- Text: 文字、または数字の列
Email: メールアドレス（@が含まれるかどうか）
Password: 文字列（パスワードポリシーに合致しているかどうか）
Integer: 整数
Decimal: 小数
Address: 住所（googlemapによって、住所が有効かどうか自動判定されます）
US Phone: 次のようなアメリカ式の番号表示かどうか (xxx) yyy-zzzz.
Percentage: パーセント
Currency: 通貨
Date: 日付。ただし、こちらは mm/dd/yyyy というアメリカ表記
Date_2: 日付。ヨーロッパでスタンダードな dd.mm.yyyy. という表記
Text (numbers only): 文字列（数字のみ）
では、具体的にどのようにしてバリデーションチェックを実施するか解説いたします。
バリデーションチェックの方法
バリデーションチェックを実施するのは、input 項目についてとなります。 まず、input forms から input を選択して画面上に配置し、edit を選択します。appearance のなかから Content format のプルダウンを選択すると、上記で挙げた項目が表示されます。 これらの項目から、インプットフォームに適したフォーマットを選択します。 すると、それぞれのフォーマットに適したチェック項目がさらに表示されます。 追加される項目は、以下の通りです。
Text: 文字数の制限。制限する場合は、最大値を設定
Email: 追加項目なし
Password: パスワードポリシーに合致しているかどうか、入力中にもチェックするか
Integer: 3桁ごとに区切りを入れるか。数値範囲を設定するか（設定する場合、最大値と最小値も設定）
Decimal: 3桁ごとに区切りを入れるか。数値範囲を設定するか（設定する場合、最大値と最小値も設定）
Address: 追加項目なし
US Phone: 追加項目なし
Percentage: 数値範囲を設定するか（設定する場合、最大値と最小値も設定）
Currency: 適用通貨を設定する。常に小数表示をするか。数値範囲を設定するか（設定する場合、最大値と最小値も設定）
Date: 追加項目なし
Date_2: 追加項目なし
Text (numbers only): 文字数の制限。制限する場合は、最大値を設定
電話番号や日付などは、アメリカやヨーロッパ基準のみですので、ほぼ使用しないと思われますが、他の項目については必要に応じて利用すると良いと思います。バリデーションチェックを利用した場合、その input フォームに適さないデータを入力するとエラーが表示されるようになります。
バリデーションチェック方法の具体例
ここまで文章で簡単にご説明してきましたが、イメージしやすいようにここで具体的な例をお見せします。
想定する画面はユーザー登録で、ユーザー名、メールアドレス、パスワードのバリデーションチェックを行います。
では、まずユーザー名のバリデーションチェックです。
インプットフォームを右クリックして Edit を選択します。
フォームの初期設定は、Content format が Text なのでそのままで良いです。
今回は、ユーザー名の最大文字数を制限することとしますので、Limit the number of characters にチェックを入れます。
ここにチェックを入れると、さらに Maximum number が表示されるので、今回は 7 と設定してみます。
すると、
このように7文字以上入力した場合でも。
変換を確定した時点で7文字まで自動的にトリミングされます。
bubble内のDBにデータを登録するときではなく、インプットフォームに入力時点でチェックを入れる仕様のようです。
メールアドレスの場合は、@が入力されていない段階だと、input フォームが赤く表示されます。さらに、エラーメッセージとして 「メールアドレスに「＠」を挿入してください。「・・・」内に「＠」がありません」 と表示されます。その間、インプットフォームは赤色に表示されており、登録ボタンは押せないように制御されています。（スクリーンショットで撮れなかったため、文字のみの解説とさせていただきます）
パスワードの場合は、パスワードポリシーに合致していない場合はインプットフォームが赤色に表示されます。ただしこの場合、筆者が試した限りでは、パスワードポリシーに合致していない、というアラートは表示されませんでした。
無料のプラグインを利用する場合
bubbleに備わっているバリデーションチェック項目は豊富ですが、無料のプラグインを利用してさらにチェックの精度を上げることができます。
上記スクリーンショット３つの Plugin が、2019/11/10現在時点で無料で使用できるものです。
そのうち、上の２つはクレジットカードが有効かどうか、さらにカードの種類をチェックするプラグインです。Card Validator はすでに978のアプリで利用実績があるようですので、こちらを利用するといいかもしれません。このプラグインをインストールすると、エレメントに Card Validator が追加されますので、そのエレメントを画面上に配置することで、機能を利用することになります。
下の Email Validator は、bubble の公式プラグインです。入力されたメールアドレスが有効かどうか、メールを送信することなくチェックすることができるプラグインとなります。
必要な場合は、試してみると良いと思います。使い方の詳しい解説は、英語になりますがこちらのページが参考になります（https://forum.bubble.io/t/email-validator-plugin/1644）。
参考URL Bubbleのプラグインを使ってみよう。
以下の記事で、プラグインを使う方法についても ご紹介しています。
