スマートフォンの利用

例

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

ワンポイント

スマートフォンのWebブラウザから入力する URL は、PC と同一になります。
（例 http://MACHINENAME:8921/wagby/)
Wagby が接続機器を識別し、スマートフォンと判定すると自動的にスマートフォン用の画面を表示します。

※ ブラウザのロケーションバーの URL の末尾に /mobileSafariLogon.do を指定すると、常にモバイル用のログオン画面が表示されます。

重要

モバイル版のログオン画面で "モバイル|PC" のリンクから PC 版ログオン画面を表示させた場合、一度ログオンしてログアウトするか、アドレスバーの URL 末尾のpcView=trueをpcView=falseと指定するとモバイル版の画面が表示されます。

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

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

新規登録画面

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

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

検索画面（サブウィンドウ）

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

詳細画面

登録後の詳細画面です。

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

検索・一覧表示画面

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

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

前後のデータを閲覧する

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

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

繰り返しコンテナ

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

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

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

外部キー子モデル

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

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

モダンカレンダビュー

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

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

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

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

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

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

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

定義方法

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

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

メインモデル > サブモデル

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

注意

サブモデルを用意せず、一つのモデル定義でPCとスマートフォンの両方を利用できるように設定することもできます。この場合はスマートフォンの制約があるため、PC では使いにくい画面になる懸念があります。また、PC 版のメニューでは（そのモデルについてのアイコンは）非表示になります。そのためスマートフォンから利用する場合は、サブモデルを定義することを推奨します。

テスト方法

開発PCでのテスト

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

本番環境でのテスト

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

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

仕様・制約

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

レイアウト

「画面>その他>表示スタイル>レイアウト方法」を「HTMLテーブル」としてください。CSSレイアウトには対応していません。

動作しない画面動作定義

印刷形式で表示
一覧表示（グリッド形式）
一括更新
一括削除
一括帳票出力
一括メール送信
CSV・Excel アップロード更新
マップビュー
集計ビュー
全文検索
ウィザード・タブ
検索・一覧表示画面のコピー登録ボタン
ポータル
画面に用意する独自ボタン

動作しない項目定義

他モデル参照チェックボックス(有無フラグ)
他モデル参照チェックボックス(サブウィンドウ)

メニュー

スマートフォンを利用するモデルは、スマートフォン専用のメニューに表示されるようになります。PCのメニューには表示されません。
管理処理メニュー（管理者用）には未対応です。管理処理の操作はPC専用となります。
階層メニューは未対応です。メニュー設定画面のタブ内に配置されているモデルがグループ化されて表示されます。

その他、動作しない機能

横並び、縦並び等の複雑なレイアウト定義
共通処理（パスワード変更など）
パスワードリマインダ機能
選択肢モデルの内容を変更するための一覧更新画面

PC版との仕様の差異

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

iPad利用時のデフォルトをPC画面とする

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 関数の戻り値が変わります。

スマートフォン利用時のデフォルトをPC画面とする

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

動作を試す

次のファイル wagbyapp\webapps\プロジェクト識別子\WEB-INF\classes\browsertype.properties をテキストエディタで開きます。以下の3行を次のように編集します。

編集前

02.key=.*Mobile.*
02.value=MobileSafari
02.encoding=default

編集後

02.key=.*Mobile.*
02.value=Safari
02.encoding=default

02.value の値を "MobileSafari" から "Safari" に変更します。ファイルを保存後、Tomcat の再起動により、変更が反映されます。

変更を反映する

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

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

BROWSERTYPE 関数の戻り値が変わります。スマートフォンでアクセスしたときにブラウザタイプが "MobileSafari" ではなく "Safari" となります。

ショートカットアイコン

スマートフォン、タブレットなどのモバイル端末用のショートカットアイコン画像は、img フォルダの wagby-touch-icon.png が利用されます。アイコンの画像サイズは、180x180 ピクセル固定です。

同名のファイルを作成後に customize/webapp/img フォルダへ配置すると、ビルド後にデフォルトの画像ファイルが置き換えられます。(*1)

1. すでにデフォルトのアイコン画像でショートカットを作成された端末の場合、アイコンファイル変更後も以前のアイコンが表示されることがあります。この場合、端末のキャッシュをクリアしてください。

変更履歴

R8.3.8/R8.5.0

検索画面で "検索画面遷移直後の検索処理を止める", "リセットボタン押下時の検索処理を止める" の設定を行ったとき、検索画面項目中の「サブウィンドウ検索」画面を開くと、選択肢がセットされないという問題を修正しました。

R8.2.3

ラジオボタン、チェックボックスの折り返し数の設定が反映されるようになりました。

R8.1.2

PCで申請したワークフローを、スマートフォンで承認・決裁できるようになりました。
スマートフォンでウィザードを利用できるようになりました。