UI
UIはアプリケーションのスクリーンに関する定義です。UIエディタではコンポーネントをレイアウトすることや、コンポーネントのイベント（ボタンクリックなど）に応じたアクションを定義することができます。
作成
UIにはUIと認証UIの２種類のタイプがあります。 前者はユーザが作成するUIで通常のスクリーンに用いられます。一方、認証UIは認証に関連するUIでサービスによりあらかじめ用意されているものです。認証UIは一部レイアウト等を変更することができます。
UI
新しくUIを作成するには、サイドメニューの中から[UI]アイコンをクリックして、UI 一覧を表示します。以下の操作により、新規にUIを作成できます。
- 同じパネル内にある
[UI作成]ボタンから[新規]を選択 - ダイアログ内にある
[ID]フィールドと[ラベル]フィールドに情報を入力して、[作成]ボタンをクリック
認証UI
認証UIはアプリケーションを作成するとあらかじめ作成されています。
UI 一覧パネル上部にある、[選択リスト]から[認証UI]を選択します。
組み込みで用意している認証UIは以下の通りです。
| ラベル | 説明 |
|---|---|
| Sign In ID | サインイン画面 |
| Sign in Password | パスワード入力画面 |
| Sign in New Password | パスワード変更画面（初回サインイン時） |
| Sign In MFA | MFA（多要素認証）画面 |
| Sign Up Form | サインアップ画面 |
| Sign Up Verify Email | サインアップ確認コード入力画面 |
| MFA Setting Step1 | MFA（多要素認証）有効／無効選択画面 |
| MFA Setting Step2 | MFA（多要素認証）セットアップ画面 |
| Reset Password Step1 | パスワードリセット画面 |
| Reset Password Step2 | パスワード再設定画面 |
| Change Password | パスワード変更画面 |
| Sign out | サインアウト画面 |
| Terms and Conditions | 利用規約画面 |
Tips
編集
UIはIDとラベルを変更できます。
UI一覧から編集したいUIの[メニュー] - [編集] を選択します。
削除
UIを削除するには、UIの[メニュー] - [削除] を選択します。
UIコピー
UIをコピーし、指定アプリケーションへ挿入することができます。UI一覧からコピーしたいUIの[メニュー]-[UIコピー]を選択します。
検索
UIはパネル上部の検索フィールドよりフィルタできます。
エクスポート
UI定義をファイルとしてローカルにダウンロードすることができます。UIの[メニュー] - [エクスポート]を選択することで可能です。
インポート
ローカルにエクスポートしたUI定義はサービスにアップロードすることができます。 UIリスト右上の [UI作成]ボタンから[インポート]を選択します。[インポート]ダイアログからUI定義ファイルを選択して、アップロードを実行します。
インポート可能なUI定義は、同じアプリケーションタイプのUI同士のみとなります。
| エクスポート元アプリケーションタイプ | インポート先アプリケーションタイプ | 対応 |
|---|---|---|
| デスクトップ | デスクトップ | o |
| モバイル | モバイル | o |
| デスクトップ | モバイル | x |
| モバイル | デスクトップ | x |
Tips
コミット
ユーザはリポジトリに対してアプリ定義をコミットを行うことができます。
画面遷移図
アプリケーション定義に含まれる UI 間の遷移関係を画面遷移図として出力することができます。
UIブロックの移動/サイズ変更、リンクの接続ポイント移動を行うことができます。
画面遷移図の構成要素は下記になります。
| 構成要素 | 図形 | 説明 |
|---|---|---|
| UIブロック | 矩形ブロック | UI ラベルを表示します。 |
| リンク | ライン | 遷移元から遷移先に矢印を表示します。 |
出力
画面遷移図は下記のいずれかの方法は出力することができます。
• UIリスト右上の[UI メニュー (作成ボタン右)] - [画面遷移図]を選択
• UIの[メニュー]- [画面遷移図]を選択
Tips
保存
UIブロックの配置位置/サイズ変更、リンクの接続ポイント変更した情報を、画面遷移図のツールバー[保存]ボタンをクリックすることで保存することができます。
Tips
UI定義へ遷移
画面遷移図のUIブロックのコンテキストメニュー[UIを開く]をクリックすると、対象のUI定義に遷移します。
表示選択
初期表示時はアプリケーション定義に含まれるすべてのUIを選択状態になっていますが、任意に選択を解除することができます。
- 画面遷移図のツールバー
[表示選択]をクリックします。 - 表示アイテムを選択するダイアログが表示されます。
- 表示選択後、
[適用]ボタンをクリックします。 - 表示選択状態を保存する場合は、ツールバー
[保存]ボタンをクリックします。
エクスポート
画面遷移図のツールバー[PNG出力]をクリックすることで、画面遷移図をPNG形式でエクスポートすることができます。
配置リセット
画面遷移図のツールバー[配置リセット]をクリックすることで、画面遷移図の変更情報（UIブロックの配置位置/サイズ変更、リンクの接続ポイント変更）をリセットし、初期表示時の画面遷移図の状態に戻します。