UI部品 基本編
Forguncyのテキストボックスはユーザーがデータの入力を行うのに使用するUI部品です。
テキストボックスには、未入力状態だと透かし文字を表示する機能や使用できる文字種の制限、パスワード入力用に文字を「＊」で表示する機能など様々な機能が備わっています。
ここでは、Forguncyでテキストボックスの持つ様々な機能やその設定方法について解説します。
1.ページの準備
様々なテキストボックスを配置するためのページをプロジェクトに作成します。
手順1-1.プロジェクトファイルを開く
サンプルのプロジェクトファイルをダウンロードし、開きます。
手順1-2.ページを新しく作成する
プロジェクトに新しくページを作成します。Forguncyのページとは、Webブラウザに表示される画面となるものです。
ナビゲーションウィンドウのページ部分を右クリックし、「新しいページの作成」をクリックします。
新しく「ページ1」という名前のページが生成されるので、それを右クリックします。
「名前の変更」をクリックし、「テキストボックスの配置」という名前にします。
2.テキストボックスを配置
ユーザーがデータの入力を行うテキストボックスをページに配置します。
今回は1行のテキストボックスと、より多くの文字を入力できる複数行テキストボックスの2つを作成します。
手順2-1.テキストボックスを作成する
ページ上の、テキストボックスを配置したい範囲のセルを選択します。
その状態で[ホーム]リボンの[セル型]ドロップダウンから「テキストボックス」を選択します。
（下図ではわかりやすくするため、左側のセルに見出しを置いています）
下図のように選択したセルが結合され、テキストボックス型に変わりました。
これで1行テキストボックスの作成は完了です。
手順2-2.複数行テキストボックスを作成する
1行テキストボックスの時と同様に、セルを選択した状態で[ホーム]リボンの[セル型]ドロップダウンから「複数行テキストボックス」を選択します。
下図のように選択したセルがテキストボックス型に変わります。
（下図ではわかりやすくするため、左側のセルに見出しを置いています）
これで複数行テキストボックスの作成は完了です。
続いてテキストボックスに設定できる様々な機能の実践に入りますが、ここまでの画面を確認したい場合には4.デバッグを実行 の手順に従ってください。
3.テキストボックスに様々な設定を行う
Forguncyのテキストボックスに備わっている様々な機能の設定を行います。
今回は代表的な6つの機能について解説を行います。
手順3-1.データの入力規則を設定する
入力したデータが正しいかどうかを検証する設定を行います。この設定をすることにより、入力できるデータ範囲を指定したり、データの種類を指定したりすることができます。
手順3-1-1.テキストボックスを作成
下図のように1行のテキストボックスを作成します。
手順3-1-2.データの入力規則を設定する
右ペインの「データの入力規則」ハイパーリンクをクリックします。
データの入力規則ウィンドウが開くので、以下のように設定します。
| 入力値の種類 | 整数 |
| データ | 次の値の間 |
| 最小値 | 1 |
| 最大値 | 10 |
手順3-1-3.入力時メッセージの設定
セルが選択状態になった時に、吹き出しを表示する設定を行います。
データの入力規則ウィンドウの「入力時メッセージ」タブを開き、以下のように設定します。
| タイトル | 整数を入力 |
| メッセージ | 1～100の整数を入力してください。 |
手順3-1-4.エラーメッセージの設定
設定した入力規則と合わない、無効なデータが入力された際に表示するメッセージの設定を行います。
データの入力規則ウィンドウの「エラーメッセージ」タブを開き、以下のように設定します。
| エラーメッセージ | 1～10の整数を入力してください。 |
これでデータの入力規則の設定は完了です。
続いて規定値の設定に入りますが、ここまでの画面を確認したい場合には4.デバッグを実行 の手順に従ってください。
手順3-2.パスワード用文字の表示設定をする
ユーザーにパスワードを入力させる際に、テキストボックスに打ち込んだ文字を「＊」で表示させる設定を行います。
下図のように1行のテキストボックスを配置し、右ペインの「パスワード用文字の表示」にチェックを入れます。
これでパスワード用文字の表示設定は完了です。
続いて透かし文字の設定に入りますが、この機能はデバッグをしないと動作の確認ができません。
そのため先にここまでの画面を確認したい場合には、4.デバッグを実行 の手順に従ってください。
手順3-3.透かし文字の表示を行う
ユーザーに入力を促すメッセージをテキストボックスに表示する設定を行います。
ページに1行のテキストボックスを作成し、右ペインの「透かし文字」欄に任意のメッセージを入力します。
入力が終わると、下図のようにForguncy Builderの画面にも透かし文字が表示されます。
これで透かし文字の設定は完了です。
続いて文字種制限の設定に入りますが、ここまでの画面を確認したい場合には4.デバッグを実行 の手順に従ってください。
手順3-4.入力に使える文字種を制限する
テキストボックスに入力できる文字の種類を制限する設定を行います。
ページに1行のテキストボックスを作成し、右ペインの「文字種の制限…」ハイパーリンクをクリックします。
設定は指定した種類の文字種入力を禁止する「以下の入力を禁止する」と、その逆で指定した種類の文字種のみを許可する「以下の入力を許可する」のどちらかを選んで行います。
今回は下図のように「以下の入力を許可する」を選び、「ひらがな（促音・拗音の小書き表記あり）」にチェックを入れます。
これで文字種制限の設定は完了です。
続いて読み取り専用設定の実践に入りますが、ここまでの画面を確認したい場合には4.デバッグを実行 の手順に従ってください。
手順3-5.読み取り専用設定をする
ユーザーの入力を受け付けない、入力不可状態のテキストボックスを作成します。
ページに1行のテキストボックスを作成します。
作成したテキストボックスのセルを選択し、「入力できません」と文字列を打ち込みます。
テキストボックスを選択したままの状態で、右ペインの「読み取り専用」にチェックを入れます。
これで読み取り専用テキストボックスの設定は完了です。
4.デバッグを実行
これでページが完成したので、プロジェクトをデバッグ実行します。
手順4-1.デバッグを実行する
リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されます。
作成したテキストボックスがページ上に表示されるので、それぞれのテキストボックスに文字を入力して動作を確認してください。
5.ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、今回使用したチェックボックスグループ型セルについてより詳しくご紹介しています。
こちらもぜひご活用ください。
