サポート > リポジトリ > スマートフォン・携帯 > スマートフォンの利用(iUI版)

旧世代のスマートフォンを対象とした、軽量フレームワーク iUI を用いた仕組みを説明します。

ここでは「営業日報」を携帯電話経由で登録できるアプリケーション紹介します。

スマートフォンに付属の Web ブラウザを使います。Web アプリケーションにログオンすると、図1のようなログオン画面が表示されます。

図1 ログオン画面
スマートフォンのWebブラウザから入力する URL は、PC と同一になります。
(例 http://MACHINENAME:8921/wagby/)
Wagby が接続機器を識別し、スマートフォンと判定すると自動的にスマートフォン用の画面を表示します。
上記の接続先 URL に "logon.do" を加えないようにしてください。
例えば http://MACHINENAME:8921/wagby/logon.do と指定すると、PC 版の画面が表示されます。

アカウントとパスワードを入力し、ログオンボタンを押します。

図2 ログオン認証を行う

スマートフォン向けのメニューが表示されます。

図3 メニュー

一覧表示画面では、データ1件毎に「詳細」ボタンが用意されています。

図4 一覧表示画面

詳細表示画面では、項目名と値が並べて表示されます。PC向けの画面レイアウトではなく、シンプルなレイアウトになります。

図5 詳細表示画面

更新を行うこともできます。リストボックスでの選択や、テキスト文字の入力も対応しています。

図6 更新画面
図7 時間をリストボックスで選択する

検索処理もリストボックスなどを使うことができます。

図8 検索条件入力画面
画面例は iPhone (iOS) を用いていますが、Android OS でも同様に動作します。

ログオン画面の下部には PC とモバイルを切り替えるリンクが用意されています。ここで PC を選択すると、PC 用の画面をスマートフォンに表示させることもできます。

図9 ログオン画面の下部に用意された切り替えリンク

PC用のログオン画面を表示させた例です。

図10 PC用ログオン画面の表示

PC用のメニュー画面を表示させた例です。

図11 PC用メニュー画面の表示

横向きにすると、これに対応して画面描画も切り替わります。カレンダビューを表示させた例です。

図12 PC用カレンダビューの表示

PC 向け「営業日報 (dailyreport)」モデルのサブモデル dailyreportMobile を新たに用意します。サブモデルは、スマートフォンおよび携帯電話の制約を回避するよう配慮して作成します。(制約は後述します。)

サブモデルの作成方法はこちらをお読み下さい。メインモデルとサブモデルは常に次のような関係になります。

メインモデル > サブモデル
図13 メインモデルとサブモデルの関係
図14 営業報告モデル(メインモデルとサブモデル)

サブモデル側では、携帯電話の制約を回避した項目設定とします。ここでは「写真」の項目を除いています。

図15 サブモデルの定義

「モデルの関連性」でメインモデルを設定します。

さらに、サブモデル側の「画面 > その他 > モバイル端末」に「携帯」を選択します。

図16 モバイル端末の設定
サブモデルを用意せず、一つのモデル定義に「スマートフォン・携帯対応画面を作成する」を設定することもできます。この場合はスマートフォンの制約があるため、PC では使いにくい画面になる懸念があります。そのためスマートフォン・携帯電話から利用する場合は、サブモデルを用意することが望ましい設計です。

開発PCでのテスト

スマートフォンを開発 PC と同一の LAN に (Wi-Fi経由で) 接続します。 スマートフォンに付属している Web ブラウザから(開発PC上で起動した)Wagby アプリケーションへ接続してください。

本番環境でのテスト

キャリア (NTTドコモ, KDDI, ソフトバンクなど) が提供する回線を使って外出先から Wagby でビルドしたアプリケーションに接続します。 本番機をインターネットから接続できるよう設定してください。社内LANで閉じている場合は、インターネットからの接続を行うことはできません。

インターネットから接続させるための本番機の設定については、Wagby販売パートナーにご相談ください。

スマートフォンは PC と異なる画面操作性が必要なため、PC 版とは異なる挙動となります。

動作しない画面動作定義

  • 印刷形式で表示
  • 一覧表示(グリッド形式)
  • 一括更新
  • 一括削除
  • 一括帳票出力
  • 一括メール送信
  • 一覧更新
  • CSV・Excel ダウンロード
  • CSV・Excel アップロード更新
  • 帳票画面
  • カレンダビュー
  • マップビュー
  • 集計ビュー
  • 帳票出力
  • 全文検索
  • ワークフロー
  • ウィザード・タブ
  • 検索・一覧表示画面を同一画面にて取り扱うこと
  • 検索・一覧表示画面のコピー登録ボタン
  • ポータル

動作しない項目定義

  • 項目の型:モデル参照(検索画面)
  • 項目の型:日付の場合は、カレンダ入力不可。リストボックスでの日付のみ。
  • 追記型リストボックス
  • 繰り返し項目
  • 繰り返しコンテナ
  • 外部キー子モデル連携

その他、動作しない機能

  • サジェスト
  • 項目の絞り込み
  • 横並び、縦並び等の複雑なレイアウト定義
  • 管理処理メニュー(管理者用)
  • 共通処理(パスワード変更など)
  • パスワードリマインダ機能
  • 選択肢モデルの内容を変更するための一覧更新画面
図10から図12に示したように、PC版の画面をそのまま適用した場合は、PC版とほぼ同等になります。ただしファイルのダウンロードやアップロードは動作しません。

PC 版との仕様の差異

  • 「ファイル型項目」の扱いが異なります。Android OS では登録・更新画面で写真の選択と送信が可能です。iPhone OS では閲覧は可能ですが登録・更新に未対応です。携帯電話ではファイル型を扱うことができません。
  • 検索ボタン押下後、検索結果がある場合、一覧表示画面へ遷移します。このため「一覧表示へ」ボタンは表示されません。
  • 検索画面遷移直後の検索処理を行なっていて、検索結果がある場合、メニューの「○○検索」を選択すると検索画面は表示せずに一覧表示画面へ遷移します。
  • メニューの「○○検索」から必ず検索画面を表示させたい場合、検索画面遷移直後の検索処理を行なわないようにする必要があります。
  • アクションボタンの表示位置は上下に固定されています。削除・メール送信ボタンは下に表示するようにしています。

"スマートフォンの利用 > iPad利用時のデフォルトをPC画面とする"をお読みください。

Wagby Developer Day 2017