実践 カスタマイズ (2) フォームカスタマイズ

フォームに関して記述する。

フォームとは原則データの作成や変更を行う画面である。

フォームの種類は以下の画面のように4種類存在する。

それぞれ複数作成することができ、ユーザーが保有するセキュリティロールごとに表示すること可能である。

20140825_001

■ メイン

ビュー上のボタンの[新規]をクリック時に起動するメインの画面

■モバイル

iphoneなどモバイルアクセス時の画面

■簡易作成

一部のレコード作成時に利用可能な画面。表示項目を限定し、

簡易に一時保存できるようにすることを目的としていると思われる画面。2013から登場。

■簡易表示フォーム

1意に確定する関連するエンティティ上での表示画面。

取引先企業フォーム上に取引先担当者エンティティの取引先責任者というフィールドが関連して存在する。

通常、取引先企業フォーム上には取引先企業エンティティのフィールドしか配置できないが、

この機能を利用することで、取引先担当者の電子メールフィールドなどを表示することが可能となる。

 

ここでは、[メイン]のフォームのみに関して記載する。

このフォームのカスタマイズをすることが大半であるためである。

フォームのカスタマイズの大半はフィールドレイアウトである。

タブとセクションで区切りをつくり、その中にフィールドを配置するようなイメージであることは

自習書などで理解していると思う。機能としてはこれ以上のものは特にない。

そこで、ここではレイアウト配置のコツに関して記載したいと思う。

 

■全体配置

きれいに見せたい。2011までのフォームであれば、2列もしくは3列表示と適度なタブ区切りによって

ある程度きれいに見えるような配置が可能であった。しかしながら2013のフォームで

単純に上記のようなレイアウトを行うと縦長かつ空間が多くなり、かなり間延びしたようなものになる。

20140825_002

※画像は2011からアップグレードした場合の画面そのものである。空白が多く、

スクロールバーを見るとかなり縦長となっていることが分かる。

いくつかの案件やデモ環境作成を通じ、私は以下をルールとした。

・標準画面と同じく1タブ3セクション配置

左列はエンティティのフィールド、中央はフロー的関連情報(投稿、活動)、右列はストック的関連情報

このように配置するとそれなりにきれいに見える。

20140825_003

・スクロールをしないレイアウト

1画面に収まる程度であれば問題ないが、エンティティのフィールドが多い場合は1画面に収まらない。

この場合はタブで区切る。遷移方法は最初のタブをクリックして閉じることで移動する。

下図の[概要]がタブ箇所。[概要]をクリックするとタブが閉じられ、[詳細]が現れたように見える。

このようにレイアウトを配置するとスクロールをしなくて済む。

20140825_004

ただし注意すべきは解像度である。

上記のレイアウトでも解像度が異なれば、下記のように1画面に収まらないことがある。

必ずどの解像度をベースとするかを決定しておくべきである。

20140825_005

■エンティティのフィールドで主要なものは、デフォルト表示画面に表示できる数を上限にする。

上記例では[取引先企業番号]から[説明]までである。10フィールド程度となり、かなり少なく感じるが、

よく検討すると概要として閲覧すべき情報はこの程度に収まることが多い。

また、これ以外に必要なのものは例のとおり、タブを区切って配置する。

失格[詳細]はセクションを3列に区切り、利用単位(部署など)もしくは業務プロセス単位(受注前、受注後など)にする

フィールドが多い場合は情報単位で集めておくときれいに見えると共に、利用者としても情報にたどりつきやすい。

■[レイアウトの幅][フィールドラベル幅]の調整する

2013のフォームは2011で存在していた左側の関連ナビゲーションが削除された分、

横にスペースを確保することができる。これを考慮せず、3列配置をすると

ラベル幅とフィールド幅のバランスが悪くなることがある。

このような場合はタブの[レイアウトの幅]とセクションの[フィールドラベル幅]の調整を行う。

・タブの[レイアウトの幅]

%指定でタブ内のセクションの幅の割合を決定する

20140825_006

・セクションの[フィールドラベルの幅]

セクション単位でフィールドにおける表示ラベル部分の幅をピクセルで設定する。

現在の値より小さくするとラベル幅が狭まり、入力フィールドが広がる。

20140825_007

 

■過剰にセクションを設けない

思った以上にきれいなレイアウトは困難であるため。矛盾を覚悟に記載するが、

解像度を定義したところでユーザーのディスプレイは様々である。

当然、変更を依頼されることもある。

解像度の定義は相手の要求を100%受け入れなくてもよいようにする程度のものであり、

一定のものは受け入れる必要が発生するのが一般的である。

この際に、融通が利かないほど複雑な設定をしているとどうにもならなくなってしまう。

また、セクションはレイアウトバランスを崩す原因となりがちである。

例えば、[■全体配置]で添付している画像の[住所]箇所は2列、3列、2列という定義がなされている。

2011ではセクション間は通常のフィールドどおしと同じくらい詰めて表示されていたが、

2013ではセクション間に(もう少し詰めてもらいたいような)微妙な空間が設けられた。

結果、間延びしたレイアウトとなっている。

■情報の単位は縦にまとめる。

セクション内のタブ遷移(Tabキークリック時の遷移)の仕様が縦であるためである。

横への遷移させたい場合は1行毎にセクションを区切ればよいが、

・手間である

・2013からはセクション間に微妙な空間が存在する

というような理由から推奨しない。顧客と議論をし始めると受け入れざるを得ない状況にも

なる可能性があるため、そもそも議論が発生しないように導くのがよいであろう。

マスタデータのようなフィールドが少なくなりがちなエンティティのフォームでは、

従来は上から詰めて3行で配置するようなことが一般的であると思われるが、

2013では左列だけ利用するようなものであるとトランザクションデータのエンティティとの

統一感が取れてよいかもしれない。

 

以上、ベストプラクティス的な内容を記載した。

特別技術的というものではないが、これらを念頭においてフォームデザインをすると

きれいに素早くレイアウトを完成させることができるのではないと思う。

次回はビューに関して記載する。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中