目次

はじめに
Widgetとは？
各機能の紹介
まとめ

はじめに

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

Widgetとは？

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

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

各機能の紹介

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

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

FlexContainer

作成するアプリ画面内に各Widgetを配置するためのベースとなる箱のようなものです。
背景色の設定や各要素を配置する際に、必ず用いられるWidgetです。
▶︎実際の使用例：Kony Visualizerでボックスに影をつける

FlexScrollContainer

FlexContainerと機能は同じで、スクロールをさせたい場合にこちらを用います。
画面サイズよりも、多くのアイテムをリストに表示することができるため、
多くのデータを一覧で表示する場合などに便利です。
▶︎実際の使用例：規約画面に目的の位置へスクロールする方法を取り入れてみた

Button

ボタンを表示するための機能です。
ボタンを使用すると、フォームへの移動、ダイアログボックスの操作などのアクションを設定することができます。
▶︎実際の使用例：Konyでスマートフォンのバイブレーションを実装してみる

Image

画像を表示する場合に用います。

Label

編集不可のテキストを表示する場合に用います。
アプリのタイトルや固定文言などを表示する場合によく利用されます。

RichText

リッチテキストを表示するための機能です。
URLや画像も表示することができます。

▶︎実際の使用例：リッチテキストを使って簡単な商品紹介ページを作成

SegmentedUI

リスト表示をすることができる機能です。
一覧画面など多数のデータを表示する際によく用いられます。
▶︎実際の使用例：Segmentの中にあるwidgetにデータを渡し表示させる方法

Calendar

カレンダーを表示するための機能です。
ユーザーが1つまたは複数の日付を選択できるようにします。
▶︎実際の使用例：カレンダーWidgetで特定の範囲のカレンダーを表示し、特定の日付を無効にする方法

TextBox

編集可能なテキストを表示する場合に用いられます。
ユーザー情報更新画面など、ユーザーに入力させる場面でよく利用されます。
▶︎実際の使用例：KonyでSMSを送信する方法

TextArea

編集可能な複数行のテキストを表示する場合に用いられます。
ユーザーからのコメントを記載してもらうなど、長文を入力する際に使われます。
▶︎実際の使用例：KonyでSMSを送信する方法

Browser

アプリケーション内にHTMLコンテンツを表示することができます。　　
画面上で、他Webサイトを表示したりするときに利用します。
▶︎実際の使用例：ブラウザwidgetを使ってアプリにWebを表示してみた
スクリーンショット 0004-06-24 14.44.27.png

Camera

写真やビデオを撮影するためのデバイス上にカメラを表示します。
▶︎実際の使用例：
・Camera Widgetを使って画像取り込みアプリを作ってみた
・Konyのカメラのオーバーレイ機能について
・QRコードを読み取ってアプリが開く機能をKonyで作ってみた Part①

CheckBoxGroup

チェックボックスを表示し、1つまたは複数の項目を選択させる場合に用います。
使用例として、アンケート機能やユーザー情報設定の際によく利用されます。

ListBox

プルダウンリストを表示する機能です。
1つまたは複数の項目を選択させる機能としてよく用いられます。

Map

マップを表示するための機能です。
位置情報を元にマップ上に場所を表示することが可能です。
▶︎実際の使用例：Map Widgetを使って撮影場所を表示する

Phone

標準の電話アプリを起動し、電話をかけることができる機能です。
▶︎実際の使用例：Konyで作成したアプリから電話をかける方法

RadioButtonGroup

ラジオボタンを表示し、ユーザーに選択させる機能です。

Slider

音量調整などでよくみられる、
インジケーターを動かして値を設定させる際に用いられる機能です。
▶︎実際の使用例：Slider Widgetを使って音楽の音量調整機能を実装してみた

Switch

スイッチ機能は、端末設定のON/OFF設定など
2つの選択肢のうちどちらかを選ばせる場合に利用される機能です。

TabPane

画面上にタブを作成し、画面を表示分けしたい時によく利用されます。
▶︎実際の使用例：VisualizerでTabPane Widgetを利用する方法

Video

アプリ上に動画を表示するための機能です。
使用例として、教育動画やPR動画、挨拶動画で用いられます。
▶︎関連記事：Visualizerで動画ファイルを表示させる方法（Web, Mobile）

DataGrid

表を表示する際に用いられます。
使用例として、様々な高級車のデータ、その画像、および価格などの多数のデータを表示する場合に用いられます。

次の記事

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

次は、3章の「Webアプリを作ってみよう」です。
▶︎Webアプリを作ってみよう

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

最後に一言

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

参考

Widget Programmers' Guide