動作確認（SPA）

最終更新日: 2021年7月29日

SPA UIとは

Wagbyでビルドしたアプリケーションは3つのUIを利用できます。それぞれ「標準UI」「スマートフォンUI」「SPA UI」と呼んでいます。

UIとは User Interface の略で、利用者の操作画面を指します。

SPA (Single Page Application) はページ遷移が行われないため、スマートフォンのネイティブアプリケーションに近い操作性を実現できます。PC、タブレット、スマートフォンいずれでも利用できます。ただし提供される画面機能は標準UIとは異なります。

SPA画面を作成する

SPA画面を用意するかどうかは、モデルごとに設定します。

モデルの詳細画面を開き、「画面 > その他」タブの「SPA画面を作成する」を有効にした状態でビルドします。

画面 > その他

ログオン

認証

無料トライアル版では、スマートフォンからアプリケーションのURLへアクセスしたとき、認証画面が開きます。認証後に、以下に示すアプリケーションの操作を行うことができます。
（本番運用環境を利用する場合は、この認証画面は表示されません。）

  1. SPA UI を利用するための URL は次の通りです。 
    https://(契約者ごとに割り当てられた名前).dev.wagby.com/#/

    アプリケーションのログオン画面が開きます。
    次のアカウントがデフォルトで用意されていますので、ログオンします。
    ユーザID ：admin
    パスワード ：wagby
    ログオン画面（アプリケーション）
  2. 「顧客」というメニューが用意されています。こちらがさきほどの手順で作成した顧客モデルの操作を行うメニューです。
    モデルを追加すると、このメニューが増えていきます。
    メニュー画面

データの登録

  1. 「顧客」をタップして開きます。
    メニュー画面
  2. 「＋」をタップし、登録画面に遷移します。
    顧客メニューを開く
  3. 各項目入力し、「保存」ボタンをクリックします。
    （※「顧客ID」は自動的に振られるため、入力欄は用意されません。）
    登録画面へ
  4. 顧客データが1件、追加されました。
    登録完了

登録済みデータの編集

  1. 更新したいデータをクリックし、詳細表示画面にアクセスします。
    右上の鉛筆アイコンをクリックします。
    顧客詳細
  2. 内容を編集し、「保存」ボタンをクリックします。
    顧客詳細
  3. 選択した顧客データが更新されました。
    顧客詳細

データの削除

  1. 削除したいデータの更新画面にアクセスし、画面下部の赤いゴミ箱のアイコンをタップします。
    顧客更新画面のゴミ箱アイコン

データの検索

  1. 右上のフィルタアイコンをタップします。
    顧客検索
  2. 検索用のフィルタ項目を決定します。複数の項目をフィルタとして用いることができます。
    検索フィルタ
  3. 入力した内容を含むデータが抽出されます。
    検索結果の表示

PCからの操作

SPA UI は PC,タブレット,スマートフォンのいずれからも利用できます。端末の画面サイズに応じて、適切に表示されます。

PCからの操作