コンテンツにスキップ

エディタ

エディタにはレイアウトビューとテキストビューがあり、ビューは切り替えることができます。
レイアウトビューはUIエディタのキャンバスモード、テキストビューはUIエディタのテーブルモードです。
それぞれのビューについて説明します。

レイアウトビュー

エディタを使ってUIのレイアウトを作成します。UIを開くとキャンバス領域が表示されます。
レイアウトはコンポーネントと呼ばれるテキストフィールドなどのWeb部品をマウスを使ってキャンバスに配置していきます。
コンポーネントの見た目や動きについては、コンポーネントのプロパティを設定します。

配置

左パネルにあるコンポーネントをマウスでキャンバスに対してドラッグします。任意の場所にドロップできます。

選択

コンポーネントをクリックすると選択になります。

移動

選択したコンポーネントはドラッグにより移動できます。カーソルキーを使うと 1px ずつ移動します。

リサイズ

コンポーネントは選択した後、マウスでリサイズできます。プロパティから Width/Height を設定することも可能です。

複製

コンテキストメニューまたはショートカットからコンポーネントをコピーできます。

削除

コンテキストメニューまたは Deleteキーでコンポーネントを削除できます。

順番

コンポーネントはキャンバス上に自由に配置可能であるため、コンポーネント同士が重なることがあります。コンポーネント同士の重なり順はコンテキストメニューから変更することができます。

前面へ移動

対象のコンポーネントをひとつ前面に移動します。

最前面へ移動

対象のコンポーネントを最前面へ移動します。

背面へ移動

対象のコンポーネントをひとつ背面に移動します。

最背面へ移動

対象のコンポーネントを最背面へ移動します。

整列

コンポーネントを複数選択した場合に、コンテキストメニューから対象コンポーネント群をまとめて整列させることができます。

左揃え

複数選択した対象のコンポーネント群を左揃えにします。

上揃え

複数選択した対象のコンポーネント群を上揃えにします。

右揃え

複数選択した対象のコンポーネント群を右揃えにします。

下揃え

複数選択した対象のコンポーネント群を下揃えにします。

垂直位置

複数選択した対象のコンポーネント群を縦方向で中央揃えにします。

横位置

複数選択した対象のコンポーネント群を横方向で中央揃えにします。

テキストビュー

テキストビューは、UIエディタのテーブルモードです。
UIエディタに配置したコンポーネントを一覧形式で参照し、プロパティを編集と、コンポーネントの削除ができます。
一覧形式では、下記の項目を表示します。

項目説明
IDコンポーネントのIDを表示します。
ラベルコンポーネントのラベルを表示します。
コンポーネントの幅を表示します。
高さコンポーネントの高さを表示します。
Xコンポーネントの配置位置X座標を表示します。
Yコンポーネントの配置位置Y座標を表示します。
編集メニューコンポーネントのプロパティを編集することができます。
削除メニューコンポーネントを削除することができます。

表示情報

UIコンポーネントのXY座標および幅と高さをコンポーネント選択時に表示する機能になります。 エディタ右上の表示情報から表示するプロパティ値を選択することができます。

項目説明
X/YX/Yの値を表示します。
幅/高さ幅と高さを表示します。