セグメントのプロパティにあるSelection Behaviorを設定して簡単にアンケートアプリを作成してみた

#目次
1. はじめに
2. 実装方法
3. まとめ

#はじめに
一覧を選択した時に選択した行と選択されていない行の見た目に差異があるとユーザにとって分かりやすいです。
そこで今回はアンケートアプリを作成しながら、セグメントのプロパティにある`Selection Behavior`について紹介したいと思います。

#実装方法
**①画面の作成**
今回はこのように作成してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c75421d0-b3d1-f308-b767-d1719a3ef10b.png)

1つ目の質問が1つしか選択できない`シングルセレクト`の質問になります。
2つ目の質問が複数選択できる`マルチセレクト`の質問になります。
選択すると、選択された行の右側にある灰色の丸部分がチェックが入った丸に変更されます。

| チェックが入っていない状態 | チェックが入っている状態 |  
| ---------- | --------- | 
| check_off.png | check_on.png |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/94546739-082a-c2c3-9731-8deabca13111.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/112f42cd-df2a-0075-ac4d-ecf51b434815.png) |

こちらの2つの画像を格納します。
左上のタブが`Assets`になっていることを確認し、`Media` > `Common`の右側にあるボタンをクリックしてください。
`Import Images`で該当画像を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3846f78f-c6a3-213c-b503-7dbae7b61bf3.png)

リストの部分はsegmentで作成しています。
このように作成しました。

1つ目の質問： `segAnimal` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/311e5a33-1d4c-738a-3c38-7bf0d9331389.png)

2つ目の質問： `segReason` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8823d208-01bd-c366-2229-f47185449020.png)

**②Selection Behaviorの設定（Single Select）**
まず1つ目の質問（1つしか選択できない`シングルセレクト`）の設定を行います。

1) 好きな動物を選択するセグメントの`segAnimal`をクリックしてください。
2) 右にある`Properties` > General > Selection Behavior を確認してください。
3) Selection Behaviorをクリックし、`Single Select`を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/758bfc85-8e06-bb43-7fe0-46d3eb079fe6.png)

4) 今回チェックボックスをタップした時に、チェックボックスがONになっていることがわかるようにしたいので、変更したい箇所のWidget名を確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cbe86798-157d-9acb-71d7-65e33c3716de.png)

5) Image Identifierをクリックし、 `imgCheck`を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9c3f5488-84ca-cb02-dc8d-e46c34344c73.png)

6) Select State Image (選択行の場合、表示する画像）のEditをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b8181390-7311-015c-2341-0964c435b6ef.png)

7) 画像を選択し（今回は`check_on.png`)、OKをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/290162c2-bac6-569b-0545-fc01bfd35dc8.png)

8) Unselect State Image (選択されていない行の場合、表示する画像）のEditをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cb3200dd-db17-47a7-5b8e-5d69488fd32a.png)

9) 画像を選択し（今回は`check_off.png`)、OKをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/111be5c9-397a-4023-3555-2c1c37eb63bb.png)

**③Selection Behaviorの設定（Multi Select）**
続いて2つ目の質問（複数選択できる`マルチセレクト`）の設定を行います。

1) 理由を選択するセグメントの`segReason`をクリックしてください。
2) 右にある`Properties` > General > Selection Behavior を確認してください。
3) Selection Behaviorをクリックし、`Multi Select`を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7d4019b8-6029-ba59-fa91-423e358cb8ea.png)

4) 変更したい箇所のwidget名を確認してください。こちらも同じく、`imgCheck`の部分です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3ba49acf-fcc1-e21f-6e9e-b4215bd4bf64.png)

5) Image Identifierをクリックし、 `imgCheck`を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ad6ad5c0-eca5-57a8-be3f-d7ecd962d9ad.png)

6) Select State Image (選択行の場合、表示する画像）のEditをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e3d0a5be-7259-e96b-f4b7-8c4cd9b8e61a.png)

7) 画像を選択し（今回は`check_on.png`)、OKをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/290162c2-bac6-569b-0545-fc01bfd35dc8.png)

8) Unselect State Image (選択されていない行の場合、表示する画像）のEditをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a7f00536-0641-4a6f-7fa4-58d481e6b01b.png)

9) 画像を選択し（今回は`check_off.png`)、OKをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/111be5c9-397a-4023-3555-2c1c37eb63bb.png)

**④実装の確認**
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/jlUocY4NhE">pic.twitter.com/jlUocY4NhE</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1341311565799202817?ref_src=twsrc%5Etfw">December 22, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

1つ目の質問は1つのみの選択、2つ目の質問は複数選択できることが分かりますね！

#まとめ
今回は、セグメントのプロパティにある`Selection Behavior`を説明しました。
Konyでしたら、このようにシングルセレクト、マルチセレクトもコーディングせずにGUIの中で設定できます！
ぜひ試してみてください:wave:

#参考
selectionBehaviorについて：
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/Segment_Properties.htm#selectio

Q&A:
https://basecamp.temenos.com/s/question/0D56A00000zeUsFSAU/how-to-change-color-of-selected-row-on-row-click