Widgetの機能について簡単にご紹介

## 目次
1. はじめに
1. Widgetとは？
1. 各機能の紹介
1. まとめ

## はじめに
今回は、Visualizerでアプリ開発をする際に
必ず使用する、Widgetの各機能について簡単にご紹介します。


## Widgetとは？
Wigdetとは、アプリ作成の際に使える便利な部品のことです。
ラベルや、テキストボックス、フレックスボックスやカレンダーなどが標準搭載されています。

フォームにWigdetを追加したい場合は、
使いたいWigdetを左メニューから選択し、
中央のエディタ画面にドラックアンドドロップすることで
Wigdetを設置することができます。

![図38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/63b0a8c5-4ef4-0199-5f80-cb1ac864efc0.png)

## 各機能の紹介
早速各Widgetの機能についてざっくりとご紹介します！

参考として、一部実際の使用例も添付しましたので、
見ていただくとよりイメージがつきやすくなると思います:thumbsup_tone1:

### FlexContainer	
作成するアプリ画面内に各Widgetを配置するためのベースとなる箱のようなものです。
背景色の設定や各要素を配置する際に、必ず用いられるWidgetです。
▶︎実際の使用例：[Kony Visualizerでボックスに影をつける](https://qiita.com/Kony_Team/items/f9261c929af8d5d71c69)
![スクリーンショット 0004-06-24 15.06.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/848fe2a0-b561-34ea-2b47-2399f3ef21f6.png)


### FlexScrollContainer
FlexContainerと機能は同じで、スクロールをさせたい場合にこちらを用います。
画面サイズよりも、多くのアイテムをリストに表示することができるため、
多くのデータを一覧で表示する場合などに便利です。
▶︎実際の使用例：[規約画面に目的の位置へスクロールする方法を取り入れてみた](https://qiita.com/Kony_Team/items/2aaa1dd2de01e59df2bd)
![スクリーンショット 0004-06-24 15.06.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f3e51222-1999-315c-710f-51483d3a4736.png)

### Button	
ボタンを表示するための機能です。
ボタンを使用すると、フォームへの移動、ダイアログボックスの操作などのアクションを設定することができます。
▶︎実際の使用例：[Konyでスマートフォンのバイブレーションを実装してみる](https://qiita.com/Kony_Team/items/17f69a70866cee19d43d)
![スクリーンショット 0004-06-24 14.47.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bd964c8b-3acf-fa1e-67a4-0127c8d3fbdf.png)

### Image
画像を表示する場合に用います。
![スクリーンショット 0004-06-24 15.08.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d6c57f40-5f6b-778a-7cd7-96aa5a02d537.png)

### Label	
編集不可のテキストを表示する場合に用います。
アプリのタイトルや固定文言などを表示する場合によく利用されます。
![スクリーンショット 0004-06-24 15.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b7c092a1-f3ee-9e66-6dd0-8b919de6ff01.png)

### RichText	
リッチテキストを表示するための機能です。
URLや画像も表示することができます。
![スクリーンショット 0004-06-24 14.15.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d07884ff-6c94-b488-bf40-1cb28a33d44d.png)
▶︎実際の使用例：[リッチテキストを使って簡単な商品紹介ページを作成](https://qiita.com/Kony_Team/items/7bf89a8d5fcea073aa47)

### SegmentedUI	
リスト表示をすることができる機能です。
一覧画面など多数のデータを表示する際によく用いられます。
▶︎実際の使用例：[Segmentの中にあるwidgetにデータを渡し表示させる方法](https://qiita.com/Kony_Team/items/c992fd281801944ccc3f)
![スクリーンショット 0004-06-24 14.17.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e6f35632-d20a-c4ba-1eff-8f59bff0c8e9.png)

### Calendar	
カレンダーを表示するための機能です。
ユーザーが1つまたは複数の日付を選択できるようにします。
▶︎実際の使用例：[カレンダーWidgetで特定の範囲のカレンダーを表示し、特定の日付を無効にする方法](https://qiita.com/Kony_Team/items/902fabf2942207b4269b)
![スクリーンショット 0004-06-24 14.49.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/38f07cd3-8a55-e890-2a3a-f7f04a6c8fba.png)

### TextBox	
編集可能なテキストを表示する場合に用いられます。
ユーザー情報更新画面など、ユーザーに入力させる場面でよく利用されます。
▶︎実際の使用例：[KonyでSMSを送信する方法](https://qiita.com/Kony_Team/items/3880e1455e87f3e19c160)
![スクリーンショット 0004-06-24 14.31.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6327fd7c-0dc2-b0a0-ecbe-191cee2c0192.png)

### TextArea	
編集可能な複数行のテキストを表示する場合に用いられます。
ユーザーからのコメントを記載してもらうなど、長文を入力する際に使われます。
▶︎実際の使用例：[KonyでSMSを送信する方法](https://qiita.com/Kony_Team/items/3880e1455e87f3e19c160)
![スクリーンショット 0004-06-24 14.33.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f1765294-b087-8e87-4354-fb5026b54a6f.png)


### Browser
アプリケーション内にHTMLコンテンツを表示することができます。　　
画面上で、他Webサイトを表示したりするときに利用します。
▶︎実際の使用例：[ブラウザwidgetを使ってアプリにWebを表示してみた
![スクリーンショット 0004-06-24 14.44.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/26feddcf-0865-0ca9-f8b7-02b440ab2a73.png)
](https://qiita.com/Kony_Team/items/168102ba29c9501870d2)


### Camera
写真やビデオを撮影するためのデバイス上にカメラを表示します。
▶︎実際の使用例：
・[Camera Widgetを使って画像取り込みアプリを作ってみた](https://qiita.com/Kony_Team/items/df8aa2cf8d6e197c3105)
・[Konyのカメラのオーバーレイ機能について](https://qiita.com/Kony_Team/items/78c7b9cceaf8f4e539b5)
・[QRコードを読み取ってアプリが開く機能をKonyで作ってみた Part①](https://qiita.com/Kony_Team/items/d7a83958abd58c6c8083)


### CheckBoxGroup	
チェックボックスを表示し、1つまたは複数の項目を選択させる場合に用います。
使用例として、アンケート機能やユーザー情報設定の際によく利用されます。
![スクリーンショット 0004-06-24 14.54.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7a5e2d6f-1f5d-ccff-6394-6741a2a32aa4.png)



### ListBox	
プルダウンリストを表示する機能です。
1つまたは複数の項目を選択させる機能としてよく用いられます。
![スクリーンショット 0004-06-24 15.14.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4906f1fc-ee09-7510-4c05-cc12222aaf00.png)

### Map
マップを表示するための機能です。
位置情報を元にマップ上に場所を表示することが可能です。
▶︎実際の使用例：[Map Widgetを使って撮影場所を表示する](https://qiita.com/Kony_Team/items/5b2fc9384801e0ae70c7)
![スクリーンショット 0004-06-24 15.17.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/17eab218-e478-9e21-e928-59e1eb3dfd5b.png)

### Phone
標準の電話アプリを起動し、電話をかけることができる機能です。
▶︎実際の使用例：[Konyで作成したアプリから電話をかける方法](https://qiita.com/Kony_Team/items/1704c52ac958f7553f1a)
![スクリーンショット 0004-06-24 15.18.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7ff1a947-780c-d8fd-0482-30527790ad64.png)


### RadioButtonGroup	
ラジオボタンを表示し、ユーザーに選択させる機能です。
![スクリーンショット 0004-06-24 14.14.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/382523c2-7b3e-ddda-bfef-da53d7c993d4.png)


### Slider	
音量調整などでよくみられる、
インジケーターを動かして値を設定させる際に用いられる機能です。
▶︎実際の使用例：[Slider Widgetを使って音楽の音量調整機能を実装してみた](https://qiita.com/Kony_Team/items/d5a89f60f78c1cdf3d9c)
![スクリーンショット 0004-06-24 14.18.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8c9ba869-3e57-4502-edcb-525ffb496959.png)

### Switch	
スイッチ機能は、端末設定のON/OFF設定など
2つの選択肢のうちどちらかを選ばせる場合に利用される機能です。
![スクリーンショット 0004-06-24 14.21.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/853440e1-b029-abf4-ae20-cb24758e1854.png)

### TabPane	
画面上にタブを作成し、画面を表示分けしたい時によく利用されます。
▶︎実際の使用例：[VisualizerでTabPane Widgetを利用する方法
](https://qiita.com/Kony_Team/items/01cdf19623076963a00f)
![スクリーンショット 0004-06-24 14.23.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a26df4c3-bee0-6399-f508-ee92ea352615.png)


### Video	
アプリ上に動画を表示するための機能です。  
使用例として、教育動画やPR動画、挨拶動画で用いられます。
▶︎関連記事：[Visualizerで動画ファイルを表示させる方法（Web, Mobile）](https://qiita.com/Kony_Team/items/c7b4553c656a323ddb33)
 ![スクリーンショット 0004-06-24 14.35.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6d130dd4-c634-fe4d-47b6-4bef74a1dafb.png)


 
### DataGrid	
表を表示する際に用いられます。
使用例として、様々な高級車のデータ、その画像、および価格などの多数のデータを表示する場合に用いられます。
![スクリーンショット 0004-06-24 15.03.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/97642499-ed3d-39dd-00db-37b01f2b0e1f.png)


## 次の記事
Visualizerの基本的な使い方や各機能がわかったところで、
次回からは、実際にVisualizerを触りながら覚えていきましょう！

次は、3章の「Webアプリを作ってみよう」です。
▶︎[Webアプリを作ってみよう](https://qiita.com/Kony_Team/items/80d6bbab808699ab7bef)

記事一覧：
https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

## 最後に一言
より読みやすい記事にしていきたいので、
「ここがわからなかった！」
「ここがもっと知りたい」
など、コメントいただけると嬉しいです！


## 参考
[Widget Programmers' Guide](https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#Overview.htm)