目次
- はじめに
- 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を表示してみた
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
最後に一言
より読みやすい記事にしていきたいので、
「ここがわからなかった！」
「ここがもっと知りたい」
など、コメントいただけると嬉しいです！