複数選択できるセレクトボックスで複数の値を選択する方法
1. 複数選択可能なセレクトボックスの例
以下のサンプルのように、複数の値を選択できるセレクトボックスから値を選択する場合を想定します。
通常のブラウザ操作では、Ctrl (MacはCmd) キー や Shiftキー を押しながら選択すると、複数の値を選択できます。
しかしクラウドBOTでは、単に値をクリックしても複数選択はできません。
クラウドBOTで複数の値を選択する方法を順番に解説します。
2. クラウドBOTでの複数選択方法
「ブラウザ操作を記録する」をONにした状態で選択したい項目部分をクリックし、「選択範囲メニュー」をクリックします。
「選択範囲を広げる」「選択範囲を戻す」を使い、セレクトボックス全体を選択した状態にし、「戻る」をクリックします。
続けて「入力する」をクリックします。
これにより、通常のブラウザ操作と同様に、Ctrl (MacはCmd) キーやShiftキーを押しながら複数の値を選択できるようになります。
選択できたら青色の確定ボタンをクリックします。
値が正常に選択できている事を確認します。
入力設定について
データビューアを確認すると、選択した値がデータとして保存されています。
今回のセレクトボックスのソースは以下です。
クラウドBOTによる選択は、デフォルトの設定ではvalueが使用されます。
<select id="hobbies" name="hobbies" multiple class="multiple-select">
<option value="reading">読書</option>
<option value="music">音楽鑑賞</option>
<option value="sports">スポーツ</option>
<option value="cooking">料理</option>
<option value="travel">旅行</option>
<option value="gaming">ゲーム</option>
<option value="photography">写真撮影</option>
<option value="gardening">ガーデニング</option>
<option value="movies">映画鑑賞</option>
<option value="drawing">絵画</option>
</select>
valueの値ではなく、表示されている値を選択したい場合には、選択を確定する前に歯車のボタンをクリックします。
表示されたメニューから「ラベルが一致する項目を選択する」を選択する事で、実際に表示されている値を使用して選択できます。
データビューアの値も表示されているテキストになります。
3. あらかじめ用意したデータで複数選択する方法
複数選択したい値をあらかじめデータとして用意することも可能です。
複数テキスト型データの準備
データビューアで新規データを作成する際に、「タイプ」から「複数テキスト」を選択します。
複数の値を入力できるので、選択したい項目に合致する値を入力します。
複数テキスト型の値が準備できました。
選択方法
先ほどと同じように、「選択範囲メニュー」を使用してセレクトボックス全体を選択した状態にし、「戻る」をクリックします。
「データを貼り付け」から、先ほど準備したデータを選択します。
これで選択完了・・・と言いたい所ですが、選択されていません。
複数選択する手順は合っているのですが、設定が違っているために選択できていない状態となります。
複数テキスト型のデータを準備する際、表示されているテキストをデータとして準備しましたが、デフォルトの設定ではvalueと一致する項目が選択されるため、選択対象が見つからない状態です。
この設定はタスクから変更します。
一旦仮想ブラウザを停止し、記録した選択タスクから「入力設定」をクリックします。
続けて「ラベルが一致する項目を選択する」を選択して確定します。
改めてBOTを実行すると、「データを貼り付け」により無事に複数テキストが選択されています。
まとめ
- クラウドBOTで複数の値を選択する場合は、セレクトボックス全体を選択して「入力する」か「データを貼り付け」を利用する事で選択できます。
- データの型は「複数テキスト」です。
- 選択対象に関する設定は「value」と「ラベル」があり、最適な設定を選択してください。
クラウドBOTでBOTを作る際は、通常のブラウザ操作とは違う手順を踏む必要がある場合があります。
「こんなブラウザ操作を自動化したいが方法がわからない」といった事があれば、お気軽にお問い合わせください。