モバイルUIを利用する

1. このページで伝える機能

同じ業務データを、モバイル向けのメニューと標準画面から利用できます。

2. Wagby11で実現できること

日報を外出先から登録し、登録済みの内容を確認する例です。モバイル版では、検索・詳細・登録・更新を専用の画面構成で利用できます。モデルをPC用とモバイル用に複製する必要はありません。

PC版ログオン画面の「モバイル版へ」から切り替えてログオンします。PC版とモバイル版は同じセッションを使うため、ログオン後の切り替えで二重にログオンする必要はありません。端末の種類による自動切り替えではなく、利用者が入口を選びます。

通常はメニューや画面のボタンから移動します。設定にはテーマ、文字サイズ、言語なども用意されています。モバイル版のメニューには、利用者が使える画面のうち、モバイル版へ公開したものを表示します。

3. AIへの指示例

最小限の指示例

日報をモバイルから登録・確認できるようにしてください。

AIは対象モデル、必要な画面、メニューの入口、項目の並び方を類推して補います。外出先で登録するのか、確認だけに使うのかを伝えると、公開する操作を決めやすくなります。

より詳細な指示例

既存の日報モデルMobileReportに、標準の検索・詳細・登録・更新をモバイル版として公開してください。PC版と同じデータと権限を使います。日報を探す・日報を登録する、という入口をメニューへ用意し、一覧から閲覧、詳細から編集できることを確認してください。
既存の定義・データ・権限を保持し、Wagby11のguide・referenceを確認してください。生成・ビルド後、対象利用者でPC版とモバイル版の動作を確認してください。

4. 編集されるAppSchemaの例

以下は関連する定義の抜粋です。構文を覚えなくても、利用する画面・入力ルール・操作できる利用者をAIへ伝えられます。

ui:
  enabled: true
  profiles:
    mobile:
      pages:
        - { screen: search, type: standard }
        - { screen: detail, type: standard }
        - { screen: create, type: standard }
        - { screen: update, type: standard }

モバイル画面の公開範囲をモデルのui.profiles.mobile.pagesへ指定する例です。メニュー側には同じモデルのsearchとcreateへの入口も用意します。

5. 参考資料

モバイルUI

designer/docs/appschema/html/guide/07-screens/20-mobile-ui.html

UI定義

designer/docs/appschema/html/reference/10-ui.html

モデルメニュー

designer/docs/appschema/html/guide/11-menu/03-entity-menu.html