前回に引き続き、Nmad Mobile で使いやすい修正を加える作業を行います。今回の対象はフォームです。そのままの状態だと情報量の割に隙間が多く、画面を有効に使えていません。
この改善を含めて、Nomad 専用のフォームを追加します。
左右余白の削除とスクロールの停止
既存のフォームをコピー＆ペーストして、Nomad 用フォームとして仕上げます。
まずは、フォームの左右に隙間をなくし、画面を有効活用します。これには、表の幅の設定を「ウィンドウに合わせる」に変更すると対応できます。
ただ、スクロールの発生に合わせて、上下だけでなく左右にまでスクロールできてしまいます。これだと使いずらく、結果的に状況は悪化しています。
今回のケースでは、フレームセットでスクロールを止める方法で対処します。
事前にフレームセット mfsExpence を作成します（モバイル用の設計要素には m を先頭についけています）。フレームは１つだけにして、名称を mfrmForm とし、スクロールを停止します。
Nomad 用フォーム側では、自動フレームの設定で、先ほど作成したフレームセットを指定します。
上下の余白削除とレイアウトの変更
タイトル行（”支出”と表示しているグレーの帯）の上下のスペースが無駄なので詰めます。また、スペースの有効活用とスマホ用の対応として次の修正を行います。
- 表の上下を非表示に変更
- 金額と日付を横並びに配置
- 表の連結は不意におかしな動作をすることがあるので、表を項目ごとに分離
- 各表の間のスペースは非表示
- キーボードを使用するメモ欄を上に移動
- 罫線が主張しすぎるので、色を薄くし、下側のみ表示
- フォントを少し大きく
また、画面に隙間が空くなど美しくなかったので次の調整を行いました。
- タイトル行の 行の間隔： 0 cm
- 明細行の 行の間隔： 0.3 cm
リストボックスの利用
ダイアログリストの［▼］ボタンは少し小さいですね。また、タップ数も増えますので、リストボックスを採用し直接的な入力に変更します。
フィールドの種類をリストボックスに変更し、サイズを入力すると設定できます。また、列を追加してフィールドを横並びにして、操作しやすくしてみました。
なお、場所の項目は将来的に Google Map と接続する予定なので、そのままとしています。
フォーム名の設定
このフォームはノーツ用とは別の”スマホ用”ですので、次の通りフォーム名を設定します。
| m.支出 | mfExpence | fExpence |
別名が 2 つ存在します。ノーツでは別名が複数あるフォームで文書を保存した場合、フォーム名が記録される Form フィールドには最後の別名がセットされます。
これを利用して、スマホから文書を作成する場合、このフォームで開くようにしています（後述）。また、Nomad 用のビューから開いた場合もこのフォームで開くようにフォーム式を設定します。
この設定により、環境に応じたフォームで表示するアプリが作成できます。Form フィールド的には 1 種類となりますので、ノーツとハイブリッド運用でも、既存環境への影響を低減できますね。
新規作成ボタン
文書を作成するためのボタンを配置します。ボタンを作成するフォームは前回作成した埋め込みビューを配置しフォーム mfViewByMon です。
| ボタン | 式 |
| 閉じる | @Command([FileCloseWindow]) |
| 新規作成 | @Command([Compose]; "mfExpence") |
前述の通り、新規作成時のフォーム名が "mfExpence" となっているのがポイントです。
動作確認
これで、スマホ用の対応はいったん完了です。Nomad Mobile からアクセスして動作確認を行います。多少の改造は、必要ですが、見た目や操作性はよくなったと思います。
最後に
今回採用したフォームのスクロール停止方法では、縦方向のスクロールもできなくなります。フォーム内に項目が多くスクロールが必要になる場合には利用できませんので、ご注意ください。
フレームに横方向のスクロールだけ止める機能があるといいんですけどね...
| 前回 | 作ってみよう |
0 件のコメント:
コメントを投稿