IM-BloomMaker フォーム部品(Bulma)を使用したバリデーション処理の作成

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になった
コンテンツ種別「Bulma」の「フォーム部品（Bulma）」を使用したバリデーション処理について紹介いたします。
実際にサンプル画面を作成しながらバリデーション処理について説明していきます。

完成イメージ

このCookBookで作成するサンプル画面です。
以下の動作確認ができます。

1. 「name」テキストボックスの必須チェックが行われます。
2. 「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 を入力してください。

JSONエディタのOKボタンをクリックすると、作成された変数を確認することが出来ます。

2. 変数の入力規則を設定

作成した変数の入力規則を設定します。
変数横の編集アイコンをクリックします。
変数エディタ下方にある入力規則から設定します。
「name」には、必須属性を設定します。

「email」にはフォーマット指定「Eメールアドレス形式」を設定します。

3. 定数の作成

右ペインにある変数タブを開き、変数タブ上のプルダウンにて「定数」が選択されていることを確認し、
「JSON形式で編集」アイコンをクリックして「JSONエディタ」を開き、以下の JSON を入力してください。

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．エレメントの配置

1. 左ペインにあるエレメント一覧から、「フォーム部品（Bulma）」を開きます。
2. 「フォーム部品（Bulma）」内の「フィールド」を2つ配置します。
3. 1つ目の「フィールド」内に「テキスト入力」を配置します。
4. 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 で登録しています。