Lesson12 セレクトボックスやチェックボックスを選択してみよう フォローする
【ラーニング Lesson12】
この記事は、約6分で学習が終了します。
Lesson概要
Webサイト上のセレクトボックスの選択方法や、チェックボックスをON/OFFにする方法を学びます。
このLessonで学べること
・セレクトボックスの選択方法
・チェックボックスを1つずつON/OFFにする方法
・チェックボックスを一括でON/OFFにする方法
作成するロボット
下記のWebサイトにおいて、以下の操作をするロボットを作成します。
・「Theme Color」欄において、お好きな色を選択します。
※ダミーデータのため、実際の色は変わりません
・「Notifications」欄において、「Web」にチェックを付けます。
・「Administrator」欄において、全ての担当者にチェックを付けます。
・最後にスクリーンショットを撮ります。
Webサイト
https://cobit-learning.biztex.co.jp/tips/settings.html
出力結果のイメージ
最終的な出力結果のイメージは、以下のようになります。
解説テキスト
1. 編集画面から、以下のWebサイトにアクセスします [URLを開く]
https://cobit-learning.biztex.co.jp/tips/settings.html
※手順が不明な場合は、Lesson1を確認してください。
2. 「Theme Color」セレクトボックスを選択します [セレクトボックスの選択]
操作手順
a. 「Theme Color」セレクトボックスの要素を選択します。
b. 編集画面の左側に、機能一覧が表示されますので、[セレクトボックスの変更]を選択します。
c. 設定画面内のセレクトボックスをクリックし、ロボットに選択させたい項目を
指定します。
※今回は「Green」を選択してください。
d. 「決定」ボタンをクリックします。
e. 「Theme Color」セレクトボックスが「Green」と選択されたことを確認して下さい。
3. 「Notification」欄のチェックボックスをONにします[名称一致クリック]
🎖️POINT
初期表示時のチェックボックスが全てOFFの場合は[クリック]ステップでONにすることができますが、
例えば設定画面のように、初期表示時にチェックボックスがすでにONになっている場合、[クリック]
ステップでクリックすると、OFFとなってしまいます。操作したい項目の初期状態に関わらず、必ずON(またはOFF)にするには、[名称一致スイッチ]ステップを使用します。
操作手順
a. 「Notification」欄の任意のチェックボックスの要素を1つ選択します。
b. 編集画面の左側に、機能一覧が表示されますので、[名称一致スイッチ]を選択し
ます。
c. 「ONにする」が選択された状態で、「直接入力」をクリックします。
機能説明
■ONにする
チェックされていなければチェックし、チェックされている場合は何もしません
■OFFにする
チェックされていなければ何もせず、チェックされている場合は外します
■直接入力
一致させる名称(ラベル)を記入します。
■取得テキストから選択
一致させる名称(ラベル)を、このロボット内で取得したテキストから選択します なお、ON/OFFラベル一括取得で得た複数のラベルを選択する事も出来ます。 その場合はその複数のラベルに一致する複数のチェックボックスをスイッチさせる事が可能です。
d. 一致させる名称を入力します。
※今回は「Web」と入力して下さい。
e. 「入力」ボタンをクリックします。
f. 「Web」のチェックボックスがONになったことを確認します。
4. 「Administrator」欄のチェックボックスを全てONにします[ON/OFFラベル一括取得][名称一致スイッチ]
🎖️POINT
[名称一致スイッチ]ステップのみで、全てのチェックボックスを1つずつ項目名を指定してONにすることもできますが、その前に[ON/OFFラベル一括取得]ステップを使ってOFFとなっているチェックボックスを一括取得しておくことで、[名称一致スイッチ]ステップにて、OFFとなっている複数のチェックボックスを一括でON(またはOFF)にすることができます。
操作手順
a. 「Administrator」欄の任意のチェックボックスの要素を1つ選択します。
b. 編集画面の左側に、機能一覧が表示されますので、[ON/OFFラベル一括取得]を
選択します。
c. 今回は「OFF」のチェックボックスを「ON」に変更したいため、「OFFのラベ
ルを取得」を選択し、名前を入力します。
※今回は「OFFラベル」と入力します。
機能説明
■ONのラベルを取得
チェックされているラベルを複数取得します。
※一切チェックされていなければ何も取得出来ません
■OFFのラベルを取得
チェックされていないラベルを複数取得します。
※全てチェックされている場合は何も取得出来ません
d. 「保存」ボタンをクリックします。
e. 再度「Administrator」欄の任意のチェックボックスの要素を1つ選択します。
f. 編集画面の左側に、機能一覧が表示されますので、[名称一致スイッチ]を選択し
ます。
g. 「ONにする」が選択された状態で、「取得テキストから選択」をクリックしま
す。
h. 「OFFラベル」を選択します。
i. 「選択」ボタンをクリックします。
j. 全てのチェックボックスがONになったことを確認します。
5. Settings画面のスクリーンショットを取ります(確認のため)
※手順が不明な場合は、Lesson1を確認してください。
6. 編集を終了して、ロボットを実行します。
※手順が不明な場合は、Lesson1を確認してください。
完成フロー図
実行結果
実行結果の詳細で、スクリーンショットが以下の画像と同じ設定に変更されていたら成功です!
※Learning Contents用のページのため、設定内容の更新はしておりません。