UI部品 基本編
チェックボックスやラジオボタンは、こちらが用意した選択肢から当てはまるものをユーザーに選んでもらうことで入力を行うパーツです。
開発の際にあらかじめ内容を設定しておくため、入力に表記揺れがなくなるという利点はありますが、その選択肢のどれにも当てはまらなかった場合はユーザーが困ってしまいます。
そこで活躍するのが「自由記述欄を持つその他」の選択肢です。
この欄を置いておくことで、開発側が想定していなかった回答を入力させることができるようになります。
その他欄の活用方法は様々で、アンケートフォームなどで利用すれば、ユーザーのより詳細な真相心理などを取得することにも役立ちます。
今回は、移動手段を選択するチェックボックスグループにその他欄を追加する方法を解説します。
ラジオグループにその他欄を追加する方法については、下記の記事をご覧ください。
1.ページの準備
チェックボックスを配置するためのページをプロジェクトに作成します。
手順1-1.プロジェクトファイルを開く
サンプルのプロジェクトファイルをダウンロードし、開きます。
手順1-2.ページを新しく作成する
プロジェクトに新しくページを作成します。Forguncyのページとは、Webブラウザに表示される画面となるものです。
ナビゲーションウィンドウのページ部分を右クリックし、「新しいページの作成」をクリックします。
新しく「ページ1」という名前のページが生成されるので、それを右クリックします。
「名前の変更」をクリックし、「移動手段入力チェックボックス」という名前にします。
2.チェックボックスグループを配置
画面にチェックボックスグループを作成します。
チェックボックスは、チェックボックス型セルに設定したセルの値が0の時はチェックされていない状態、1の時はチェックされている状態で表示されます。
手順2-1.チェックボックスグループを作成する
ページ上の、チェックボックスグループを配置したい範囲のセルを選択します。
その状態で[ホーム]リボンの[セル型]ドロップダウンから「チェックボックスグループ」を選択します。
（下図ではわかりやすくするため、上側のセルに見出しを置いています）
下図のように選択したセルが結合され、チェックボックスグループ型に変わりました。
手順2-2.チェックボックスグループの詳細設定
チェックボックスグループには様々な設定が可能です。
ここでは、チェックボックスグループのリスト項目とレイアウトといった2つの設定を行います。
手順2-2-1.チェックボックスグループのリスト項目を設定する
チェックボックスグループ内のそれぞれのチェックボックスはまだ「項目1」「項目2」「項目3」と表示されています。これを任意の文字列に変更します。
チェックボックスグループ型セルを選択した状態で、右ペインのセル型タブ内にあるリスト項目の欄にある「項目1」～「項目3」の項目を以下のように変更します。
| 変更前 | 変更後 |
|---|---|
| 項目1 | 電車 |
| 項目2 | バス |
| 項目3 | 徒歩 |
リスト項目欄からフォーカスが外れると、ページ上のチェックボックスグループ型セルにも変更が反映されます。
さらに、「徒歩」と入力した項目の行にある「+」ボタンを押下します。
すると、項目が増えます。
増えた「項目1」の欄には「自家用車」と入力しておきます。
手順2-2-2.チェックボックスグループに「その他」欄を追加する
こちらで準備したチェックボックス項目以外に、その他の欄を作成する設定を行います。
右ペインのセル型タブにある「「その他」を項目として追加」にチェックを入れます。
項目の幅も自由に変更できますが、今回はそのままにしておきます。
手順2-2-3.チェックボックスグループのレイアウトを調整する
今のままではチェックボックスグループの持つ項目が表示しきれていないため、レイアウトの変更を行います。
右ペインのセル型タブにある「レイアウト」をデフォルトの水平方向から垂直方向に変更します。
さらに項目の行間を詰めるため、「項目間のマージン」を4に変更します。
最終的に下図のような状態になります。
これでチェックボックスグループの作成は完了です。
3.デバッグを実行
これでページが完成したので、プロジェクトをデバッグ実行します。
手順3-1.デバッグを実行する
リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されます。
作成したチェックボックスがページ上に表示されるので、それぞれの動作を確認してください。
4.ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、今回使用したチェックボックスグループ型セルについてより詳しくご紹介しています。
こちらもぜひご活用ください。
