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

ユーザーインタフェースに Dojo Mobile を用いたスマートフォン対応を説明します。iPhone 6 (iOS 8以降) または Android 6 以降を搭載したスマートフォンでのご利用を推奨します。 R7.12

スマートフォンに付属の Web ブラウザを使います。Web アプリケーションにログオンすると、図1のようなログオン画面が表示されます。(アプリケーションのタイトルは開発者が設定したものが表示されます。)

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

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

図2 ログオン認証を行う

スマートフォン向けのメニューが表示されます。PC版と異なり、タブごとの表示ではなく、縦に並びます。

図3 メニュー

新規登録画面

画面右上の「+」ボタンを押下することで、新規登録を行うことができます。 項目の並び(レイアウト)は項目の定義順となります。(縦並びや横並びのレイアウト指定はありません。)

図4 新規登録画面

文字列、数字、日付といった項目に値を入力することができます。

図5 新規登録画面への入力例

検索画面(サブウィンドウ)

図4で「年休申請ID」項目に用意された「検索...」ボタンを押下すると、画面下からサブウィンドウがせり上がって表示されます。

図6 検索画面(サブウィンドウ)

詳細画面

登録後の詳細画面です。

図7 詳細画面

詳細画面の右上にボタン(メニュー、ログオフ)が配置されています。

図8 メニューとログオフへ遷移するボタン

検索・一覧表示画面

一覧表示画面の右上にある検索ボタンを押下すると、検索入力画面に切り替わります。

図9 一覧表示画面
図10 検索画面

日付型項目では、PC版と同じカレンダ補助入力インタフェースを利用することができます。

図11 日付型項目へのカレンダ補助入力

前後のデータを閲覧する

検索結果により、前後のデータへ移動するボタンが有効になります。図12は検索結果の先頭のデータを表示しています。「次」へ移動するボタンが有効になっています。

図12 前後のデータへ移動する(1)

次のデータを表示すると、今度は「前」「次」の両方のボタンが押下できるようになっています。

図13 前後のデータへ移動する(2)

繰り返しコンテナ

図14、図15は繰り返しコンテナを表示した例です。レイアウトは項目の定義順に横に並びます。

図14 繰り返しコンテナ(1)
図15 繰り返しコンテナ(2)

更新画面では、繰り返しコンテナの値の編集、追加、削除を行うことができます。繰り返しコンテナ部分は横スクロールすることで項目全体を確認できます。

繰り返しコンテナのコンテナ名をタップすると画面スクロールがロックされます。この操作はトグル式になっています。スクロールを有効にするには再度コンテナ名をタップしてください。

図16 繰り返しコンテナの編集(1)
図17 繰り返しコンテナの編集(2)

外部キー子モデル

詳細画面の下部に、外部キー子モデルを表示した例です。

図18 外部キー子モデル

更新画面では、子モデルの同時更新を行うことができます。子モデル部分は横スクロールすることで項目全体を確認できます。

図19 外部キー子モデルの更新(1)
図20 外部キー子モデルの更新(2)

モダンカレンダビュー

モダンカレンダビューを表示させることができます。PC版と同様の操作方法になります。

図21 カレンダビュー(1)

画面右上の「+」ボタンを押下することで、新規登録を行うことができます。画面下から、基本項目の入力ウィンドウがせり上がって表示されます。

図22 カレンダビューモデルへの新規登録(1)

値を入力し、「新規登録画面表示」ボタンを押下します。

図23 カレンダビューモデルへの新規登録(2)

新規登録画面が開きます。

図24 カレンダビューモデルへの新規登録(3)
図23で入力した値を、図24の新規登録画面で受け取るために、モダンカレンダビュー利用モデルに「初期値」を設定する必要があります。 詳細は"画面機能 > カレンダビュー(モダン)>カレンダビューから新規登録画面へ遷移する"をお読みください。

複数の予定をカレンダ上で確認できます。

図25 複数データの確認

月単位での表示も行うことができます。

図26 月単位での表示

PC 向けモデルのサブモデルを新たに用意します。このサブモデルは、スマートフォンの制約を回避するよう配慮して作成します。(制約は後述します。)

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

メインモデル > サブモデル
図26 メインモデルとサブモデルの関係

さらに、サブモデル側の「画面 > その他 > モバイル端末」に「スマートフォン」を選択します。

図27 モバイル端末の設定
サブモデルを用意せず、一つのモデル定義でPCとスマートフォンの両方を利用できるように設定することもできます。この場合はスマートフォンの制約があるため、PC では使いにくい画面になる懸念があります。そのためスマートフォンから利用する場合は、サブモデルを定義することを推奨します。

開発PCでのテスト

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

本番環境でのテスト

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

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

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

動作しない画面動作定義

  • 印刷形式で表示
  • 一覧表示(グリッド形式)
  • 一括更新
  • 一括削除
  • 一括帳票出力
  • 一括メール送信
  • CSV・Excel アップロード更新
  • マップビュー
  • 集計ビュー
  • 全文検索
  • ワークフロー
  • タブ
  • 検索・一覧表示画面のコピー登録ボタン
  • ポータル

その他、動作しない機能

  • サジェスト
  • 横並び、縦並び等の複雑なレイアウト定義
  • 管理処理メニュー(管理者用)
  • 共通処理(パスワード変更など)
  • パスワードリマインダ機能
  • 選択肢モデルの内容を変更するための一覧更新画面

PC 版との仕様の差異

  • 「ファイル型項目」の扱いが異なります。Android OS では登録・更新画面で写真の選択と送信が可能です。iPhone OS では閲覧は可能ですが登録・更新に未対応です。
  • アクションボタンの表示位置は上下に固定されています。削除・メール送信ボタンは下に表示するようにしています。

iUI 版スマートフォン対応との差異

iUI を用いた軽量版との違いは次のとおりです。

画面機能

  • 検索・一覧表示画面を同一画面にて取り扱うことが標準動作となった。
  • CSVダウンロード機能が利用できる。(CSVの文字エンコーディングはUTF-8とすること。)
  • Excelダウンロード機能が利用できる。(Excelファイルを開くことのできるアプリが別途、必要。iOS だと Numbers など。)
  • カレンダビューを利用できる。
  • 帳票出力を利用できる。
  • 外部キー子モデル連携を利用できる。

モデル項目

次の定義が利用できます。

  • モデル参照(検索画面)
  • 日付のカレンダ補助入力
  • 追記型リストボックス(一部制約有り)
  • 繰り返し項目
  • 繰り返しコンテナ

iPad の Safari を用いて Wagby アプリケーションを操作する場合の標準は「スマートフォン用画面」となっています。これを PC 画面に変える方法を説明します。

動作を試す

次のファイル wagbyapp\webapps\プロジェクト識別子\WEB-INF\classes\browsertype.properties をテキストエディタで開きます。以下の3行について、先頭のコメント文字「#」を除去します。

編集前

#01.key=.*iPad.*
#01.value=iPad
#01.encoding=default

編集後

01.key=.*iPad.*
01.value=iPad
01.encoding=default

ファイルを保存後、Tomcat の再起動により、変更が反映されます。

変更を反映する

動作確認したファイルを customize/resources フォルダに保存してください。次回ビルド後に、このファイルが常に WEB-INF/classes フォルダにコピーされるようになります。

この変更によるその他の影響

BROWSERTYPE 関数の戻り値が変わります。

Wagby Developer Day 2017