このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になった
コンテンツ種別「Bulma」の「フォーム部品(Bulma)」を使用したバリデーション処理について紹介いたします。
実際にサンプル画面を作成しながらバリデーション処理について説明していきます。
完成イメージ
このCookBookで作成するサンプル画面です。
以下の動作確認ができます。
- 「name」テキストボックスの必須チェックが行われます。
- 「email」テキストボックスのアドレス形式判定が行われます。
完成サンプル
以下の完成サンプルをダウンロードしてご活用ください。
このサンプルは、2022 Spring 版以降でインポートできます。
以下の定義が含まれています。
種別 | ID |
コンテンツ | im_cookbook_185420 |
ルーティング定義 | im_cookbook_185420 |
IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。
ローカル環境で表示させる場合は、以下のURLにアクセスしてください。http://localhost:8080/imart/im_cookbook/185420
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。http://localhost:8080/imart
コンテンツの作成
以下のドキュメントを参考にコンテンツを作成していきます。
今回のコンテンツIDは im_cookbook_185240
としています。
- IM-BloomMaker ユーザ操作ガイド - コンテンツ
画面の作成
1. 変数の作成
右ペインにある変数タブを開き、変数タブ上のプルダウンにて「変数」が選択されていることを確認し、
「JSON形式で編集」アイコンをクリックして「JSONエディタ」を開き、以下の JSON を入力してください。
1 2 3 4 5 6 |
{ "name": "", "email": "", "valid_name": true, "valid_email": true } |
JSONエディタのOKボタンをクリックすると、作成された変数を確認することが出来ます。
2. 変数の入力規則を設定
作成した変数の入力規則を設定します。
変数横の編集アイコンをクリックします。
変数エディタ下方にある入力規則から設定します。
「name」には、必須属性を設定します。
「email」にはフォーマット指定「Eメールアドレス形式」を設定します。
3. 定数の作成
右ペインにある変数タブを開き、変数タブ上のプルダウンにて「定数」が選択されていることを確認し、
「JSON形式で編集」アイコンをクリックして「JSONエディタ」を開き、以下の JSON を入力してください。
1 2 3 4 |
{ "TRUE": true, "FALSE": false } |
JSONエディタのOKボタンをクリックすると、作成された定数を確認することが出来ます。
4.アクションの作成
右ペインにあるアクションタブを開き、「新規作成」アイコンをクリックします。
「Name」のチェックを行うアクションと「Email」のチェックを行うアクションの2種類を作成します。
4-1. Name項目のバリデーションを行うアクションを作成します。
「Name」のバリデーションを行うアクションを作成していきます。
なお、アクションの名前は「Validate name」とします。
4-1-1. 入力規則に則していない判定を行うアクションを作成します。
アクションエディタ内の「標準」をクリックします。
「変数〇に〇を代入する」をドラッグ&ドロップで配置します。
変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「valid_name」を選択します。
次に代入値を設定します。まず変数値のラジオボタンを選択します。
テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「定数」タブの「TRUE」を選択します。
アクションエディタに戻って、左ペインの「実行条件」タブをクリックします。
「標準」の中から、「変数〇が入力規則に則していないとき」をドラッグ&ドロップで配置します。
変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「name」を選択します。
4-1-2. 入力規則に則している判定を行うアクションを作成します。
アクションエディタ内の「標準」をクリックします。
「変数〇に〇を代入する」をドラッグ&ドロップで配置します。
変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「valid_name」を選択します。
次に代入値を設定します。まず変数値のラジオボタンを選択します。
テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「定数」タブの「FALSE」を選択します。
アクションエディタに戻って、左ペインの「実行条件」タブをクリックします。
「標準」の中から、「変数〇が入力規則に則しているとき」をドラッグ&ドロップで配置します。
変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「name」を選択します。
4-2. Email項目のバリデーションを行うアクションを作成します。
「Email」のバリデーションを行うアクションを作成していきます。
なお、アクションの名前は「Validate email」とします。
4-1-1. 入力規則に則していない判定を行うアクションを作成します。
アクションエディタ内の「標準」をクリックします。
「変数〇に〇を代入する」をドラッグ&ドロップで配置します。
変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「valid_email」を選択します。
次に代入値を設定します。まず変数値のラジオボタンを選択します。
テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「定数」タブの「TRUE」を選択します。
アクションエディタに戻って、左ペインの「実行条件」タブをクリックします。
「標準」の中から、「変数〇が入力規則に則していないとき」をドラッグ&ドロップで配置します。
変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「email」を選択します。
4-1-2. 入力規則に則している判定を行うアクションを作成します。
アクションエディタ内の「標準」をクリックします。
「変数〇に〇を代入する」をドラッグ&ドロップで配置します。
変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「valid_email」を選択します。
次に代入値を設定します。まず変数値のラジオボタンを選択します。
テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「定数」タブの「FALSE」を選択します。
アクションエディタに戻って、左ペインの「実行条件」タブをクリックします。
「標準」の中から、「変数〇が入力規則に則しているとき」をドラッグ&ドロップで配置します。
変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「email」を選択します。
5.エレメントの配置
- 左ペインにあるエレメント一覧から、「フォーム部品(Bulma)」を開きます。
- 「フォーム部品(Bulma)」内の「フィールド」を2つ配置します。
- 1つ目の「フィールド」内に「テキスト入力」を配置します。
- 2つ目の「フィールド」内に「メールアドレス入力」を配置します。
以下のように配置されていれば大丈夫です。
6.エレメントプロパティの設定
6-1. 「フィールド」エレメントのプロパティ設定(Name項目)
「テキスト入力」エレメントを配置した「フィールド」を選択します。
「showLabel」にチェックを入れます。これで「フィールドラベル」エレメントが表示されるようになります。
「フィールドラベル」エレメントの「value」に固定値で「Name」と設定します。
「フィールド」エレメントに戻って、「showHelp」に変数値を設定します。
「変数値」ラジオボタンを選択後、テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「valid_name」を選択します。
「showHelp」に値を設定したことにより、「フィールドヘルプ」エレメントが表示されます。
「フィールドヘルプ」エレメントの「textContent」プロパティに固定値で「Name is required」と設定します。
また、「color」プロパティのプルダウンから「danger」を指定します。
6-2. 「テキスト入力要素」エレメントのプロパティ設定
「テキスト入力要素」エレメントを選択します。
「value」プロパティに変数値を設定します。
「変数値」ラジオボタンを選択後、テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「name」を選択します。
「イベント」-「入力値変更中」プロパティに「4.1」で作成したアクションを設定します。
6-3. 「フィールド」エレメントのプロパティ設定(Email項目)
「テキスト入力」エレメントを配置した「フィールド」を選択します。
「showLabel」にチェックを入れます。これで「フィールドラベル」エレメントが表示されるようになります。
「フィールドラベル」エレメントの「value」に固定値で「Email」と設定します。
「フィールド」エレメントに戻って、「showHelp」に変数値を設定します。
「変数値」ラジオボタンを選択後、テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「valid_email」を選択します。
「showHelp」に値を設定したことにより、「フィールドヘルプ」エレメントが表示されます。
「フィールドヘルプ」エレメントの「textContent」プロパティに固定値で「Input format is incorrect」と設定します。
また、「color」プロパティのプルダウンから「danger」を指定します。
6-4. 「メールアドレス入力要素」エレメントのプロパティ設定
「メールアドレス入力要素」エレメントを選択します。
「value」プロパティに変数値を設定します。
「変数値」ラジオボタンを選択後、テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「email」を選択します。
「イベント」-「入力値変更中」プロパティに「4.2」で作成したアクションを設定します。
アプリケーション画面を公開
当該 Cookbook で作成したコンテンツは IM-BloomMaker のルーティング定義と紐づけることによって、アプリケーションとして公開することができます。
ルーティング定義の作成や設定方法が不明である場合、以下のドキュメントを参照してください。
- IM-BloomMaker ユーザ操作ガイド - ルーティング
ルーティング定義作成後は、ルーティングにURLにアクセスするための認可を付与してください。
動作確認が目的であれば、認証済みユーザに認可を付与すれば問題ありません。
なお、完成サンプルでは ルーティングID を im_cookbook_185240
で登録しています。