Visualizerワークスペースの基本的な使い方

# 目次
1. はじめに
1. ワークスペースの説明

# はじめに
今回は、ワークスペースの基本的な使い方についてご紹介します。

# ワークスペースの説明
Visualizerは、
主に以下のように機能が分かれています。
![スクリーンショット 0004-06-27 10.35.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bed4ca43-1508-860c-3353-d06d2a0bf77d.png)

## ①プロジェクト設定等
一番左のサイドメニューでは、
プロジェクトの設定やドキュメント、チュートリアルを見ることができます。
公式のドキュメントを参考にしたい場合は、こちらからアクセスすると便利です。
![スクリーンショット 0004-06-27 10.34.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/20c8374b-9bdb-e422-2623-8a5f7347c421.png)


## ②フォーム・ロジック作成
画面の作成を行う場合は、左メニューで行います。

それぞれ4つのタブに分かれており、
- Projectタブでは、画面の作成
- Themesタブでは、保存したskin（フォントや色、形など汎用的に使う見た目のデータ）の管理
- Templatesでは、作成したコンポーネントやセグメントの編集
- Assetsでは、画像やフォントなどリソースの管理

を行うことができます。
![ezgif-2-8d35dec678.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/60c45b94-8c80-72c2-39c5-526842c7f6c6.gif)

Projectタブで、作成したいデバイスの表示がない場合は、
こちらの記事をご確認ください。
▶︎[Visualizer V9で各デバイス（Web,Mobile,Tablet etc..）メニューが表示されない
](https://qiita.com/Kony_Team/items/3c8d2aa08af47f187f7d)

## ③Widgetの選択
このメニューでは、画面の見た目を作成するための
パーツ（Widget）を選択することができます。

Widgetには、
タイトルを作成するためのLabelや、画像を挿入するためのImage等
様々なパーツが用意されています。

Widgetを作成したい場合は、
使いたいWidgetを選択して、真ん中のワークスペースにドラックアンドドロップすることで
画面に配置することができます。
![ezgif-2-f9efb05d6c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/488185f8-a186-83f2-abae-6053b0042ae6.gif)

Widgetの各機能の説明については、第2章で詳しく説明いたします！


## ④ワークスペース
ワークスペースでは、
画面の作成・表示をする場所です。

画面の上あるプルダウンをクリックすると、
Android,iOSの様々なデバイスを選択でき、
実際そのデバイスでどのような表示になるかを確認することができます。
![ezgif-2-3b3dce08f8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1e6d4d9b-abf7-2bd7-1809-ee7a0e4d66af.gif)

実際アプリで表示されるままの画面がワークスペースに表示されるため、
何度もデバッグする必要がなく便利です。


## ⑤ログ表示,公開されたアプリの表示
ここでは主に、ビルドした際のログなどを確認することができます。
全部で6つのタブがありますが、よく使用するものだけご紹介します。

- Console
コンソールログが表示されます。
また、ビルドした後のアプリのapkやbinaryデータもこちらに出力されます。
![スクリーンショット 0004-06-27 11.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c4d22527-f435-7eb9-eb19-62e27e9210af.png)
（上記は、Webアプリをビルドした場合のBinaryデータです。）
アプリの公開方法については、3章にてご紹介します。

- Search
フォームの検索や、ロジックに含まれる値を検索したい場合によく使います。
検索結果をクリックすると、その場所に飛ぶことができます。
![スクリーンショット 0004-06-27 11.48.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4fbfbe7c-c735-2abf-44e7-d135fad4ccf7.png)

- Build
ビルドした際の結果が表示されます。
ここがNGの場合は、Consoleタブを見るとエラー箇所を確認することができます。
![スクリーンショット 0004-06-27 11.05.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7c46e819-183a-44f7-d550-818bf577cf4a.png)


## ⑥色やアクションの設定、Fabricとの接続
こちらのメニューでは、
PROPERTIESとDATA & SERVICESの2つのタブに分かれています。
どちらもよく使う機能なので、覚えておくようにしましょう:writing_hand_tone1:

①PROPERTIES：
追加したWidgetの見た目の作成を行うことができます。
![スクリーンショット 0004-06-27 11.14.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8c1370af-361a-909f-328b-41342c0640f0.png)
- Lookタブ : 位置の調整やテキスト文字の修正を行うことができます

- Skinタブ : 文字色や、背景、影など装飾を行うことができます
ここで一度作成した見た目はNameでわかりやすい名前を登録しておくと、
他のWidegtにも適用することができ、とても便利です。
![ezgif-2-09d5a7d877.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/544c8267-27ea-17c3-8a93-0e86324d7df8.gif)
- Labelタブ(使用するWidgetによって表示が変わる）:
Widget特有の設定値を設定することができます。
（例：画像の場合は、画像データ、ラベルの場合は、ツールチップの設定など）

- Actionタブ : 設置したWidgetのアクションを設定することができます。
設定したいアクションをクリックすると、
アクションエディタが開き、直感的な操作でアクションの設定ができます。
（下記の例では、ボタンをクリックするとForm2に遷移するアクションを設定しています。）
![ezgif-2-c2047b688e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/31309cf5-c64f-2166-77a7-00aabf28d76f.gif)



②DATA & SERVICES：
バックエンドサービスのFabricアプリとの接続を行うことができます。
APIの通信が必要な場合は、右端にあるハンバーガーメニューをクリックすると、
作成したFabricの選択が可能です。
![ezgif-2-58a24cd206.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e156fe23-4b92-c8ac-bbca-c1862d105f74.gif)

⑦アカウントの表示
ヘッダーには、自分のアカウントと接続している環境が表示されます。
ログインしていない場合は、Fabricとの接続ができませんので、
API接続を行いたい場合は、アカウントを作成しておくようにしましょう。

また、Visulizerのバージョンをアップデートしたい場合は、
ダウンロードボタンをクリックすると、最新のアップデート版を確認することができます。
![スクリーンショット 0004-06-27 11.29.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/92437b3c-f3cb-4960-2d78-8b6d58d74ddb.png)

プロジェクトに応じてアップグレード・ダウングレードする必要がある場合は、
以下の記事で詳しく説明しているので、ご参考にしてください。
▶︎[Konyのバージョンをダウングレード・アップグレードする方法](https://qiita.com/Kony_Team/items/9623c054c3f3b122621f)


# 次の記事

次回からは、覚えておくと便利なショートカットをご紹介します！
知っておくと効率アップしますので、是非チェックしてください。
▶︎[覚えておくと便利！ショートカット集](https://qiita.com/Kony_Team/items/9091cd4c6fd7e340ad4e)

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

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


# 参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Part_II_CreatingAnApplication.htm?tocpath=Designing%20an%20Application%7C_____0