More than 1 year has passed since last update.

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

Last updated at 2022-06-28Posted at 2022-06-28

はじめに

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

Visualizerは、
主に以下のように機能が分かれています。

一番左のサイドメニューでは、
プロジェクトの設定やドキュメント、チュートリアルを見ることができます。
公式のドキュメントを参考にしたい場合は、こちらからアクセスすると便利です。

画面の作成を行う場合は、左メニューで行います。

それぞれ4つのタブに分かれており、

を行うことができます。

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

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

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

Widgetを作成したい場合は、
使いたいWidgetを選択して、真ん中のワークスペースにドラックアンドドロップすることで
画面に配置することができます。

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

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

画面の上あるプルダウンをクリックすると、
Android,iOSの様々なデバイスを選択でき、
実際そのデバイスでどのような表示になるかを確認することができます。

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

ここでは主に、ビルドした際のログなどを確認することができます。
全部で6つのタブがありますが、よく使用するものだけご紹介します。

こちらのメニューでは、
PROPERTIESとDATA & SERVICESの2つのタブに分かれています。
どちらもよく使う機能なので、覚えておくようにしましょう

①PROPERTIES：
追加したWidgetの見た目の作成を行うことができます。

Lookタブ : 位置の調整やテキスト文字の修正を行うことができます
Skinタブ : 文字色や、背景、影など装飾を行うことができます
ここで一度作成した見た目はNameでわかりやすい名前を登録しておくと、
他のWidegtにも適用することができ、とても便利です。
Labelタブ(使用するWidgetによって表示が変わる）:
Widget特有の設定値を設定することができます。
（例：画像の場合は、画像データ、ラベルの場合は、ツールチップの設定など）
Actionタブ : 設置したWidgetのアクションを設定することができます。
設定したいアクションをクリックすると、
アクションエディタが開き、直感的な操作でアクションの設定ができます。
（下記の例では、ボタンをクリックするとForm2に遷移するアクションを設定しています。）