プレビュー画面は、Unifinity Wizard のアプリ作りの中心です。ここで完成イメージを確認しながら、「項目設定」「画面設定」などへ何度でも行き来してアプリを仕上げ、最後にアプリを生成します。
1. プレビュー画面の構成
プレビュー画面は、大きく3つのエリアに分かれています。
| エリア | 内容 |
|---|---|
| 左（サイドバー） | 設定メニュー。「アプリ設定」「画面設定」「項目設定」の入口 |
| 中央（プレビュー） | スマートフォンの画面を模した、アプリの完成イメージ |
| 右（アプリ全体図ほか） | アプリ全体の画面構成（アプリ全体図）、画面の向きの切り替え、ズーム、画像・データの出力 |
2. プレビューの操作
中央のプレビューと右側のパネルで、完成イメージをさまざまな角度から確認できます。
表示する画面を切り替える（アプリ全体図）
右上の「アプリ全体図」には、アプリに含まれる画面が一覧で表示されます。設定を進めると、その内容に応じて「一覧」「詳細」「入力」「確認」の画面が自動的に生成されていきます。
見たい画面をクリックすると、中央のプレビューがその画面に切り替わります。
画面の向きを切り替える
縦画面と横画面を切り替えて確認できます。横画面のレイアウトが用意されていない画面では、横画面ボタンは選べません。
ズーム
プラス（＋）・マイナス（−）ボタンで、プレビューを拡大・縮小できます。
3. アプリ設定（名前とアイコン）
左サイドバーの「アプリ設定」を押すと、アプリの名前とアイコンを設定するポップアップが開きます。
| 項目 | 内容 |
|---|---|
| アプリ名 | アプリの名前（最大50文字）。UniBaaS や Player 上で表示されます |
| アイコン画像 | アプリのアイコン（PNG／JPG／GIF）。設定しない場合は既定のアイコンになります |
アプリ名は、プレビュー画面を開いたときに「アプリ_日時」の形で仮の名前が自動設定されます。生成前に、分かりやすい名前に変更しておくことをおすすめします。
4. 設定メニューから各設定へ行き来する
左サイドバーのカードから、くわしい設定画面へ移動できます。
| カード | 移動先 | 内容 |
|---|---|---|
| アプリ設定 | ポップアップ | アプリ名・アイコン（上記3） |
| 画面設定 | 画面設定画面 | 一覧・詳細・入力の各画面の設定 |
| 項目設定 | 項目設定画面 | 項目の追加・編集・並べ替え・入力方法 |
設定画面で作業したあとは、プレビュー画面に戻ってきます。 行き来しながら、少しずつアプリを仕上げていくのが基本的な進め方です。各設定画面の具体的な使い方は、次のページ「アプリの中身を設定する」で説明します。
プレビュー画面の中央上部にある「この画面を編集する」ボタンからは、いま表示している画面の設定へ直接移動することもできます。
5. 作業の保存・再開
自動保存
作成中の内容はブラウザに自動保存されます。詳しくは「Unifinity Wizard とは？」の「自動保存について」をご覧ください。
保存して終了する
プレビュー画面下部の「保存して終了」を押すと、作成中のアプリ定義を UniBaaS に保存してトップ画面に戻ります。保存したアプリ定義は、トップ画面の「作成済みのアプリを使用する場合はこちら」から再編集できます。
JSON で手元に保存する
画面右上のメニューから「設定内容の JSON をダウンロードする」を選ぶと、作成中の内容をファイルとして手元に保存できます。保存したファイルは、トップ画面の「インポート」から読み込むと作業を再開できます。設定したデータを念のため手元に残しておきたい場合に便利です。