SPREAD

ユースケースデモの[実績取込・登録]画面で使われているセル型について、どのように設定すると、ユーザーエクスペリエンス向上につながるのかを中心に取り上げます。


プロジェクトをダウンロードする

ClickOnceデモで動作を見る


[実績取込・登録]画面について

[実績取込・登録]画面は、メインメニューの[実績取込・登録]ボタンから呼び出されます。この画面には、基幹システムからCSVで渡されたデータを取り込む[取込モード]と、取り込み済みデータの変更を行う[検索モード]が実装されています。それぞれのモードは処理内容が異なり、[取込モード]は、CSVデータのエラーチェックを行いSPREADに表示します。データ編集はできません。[登録]ボタンをクリックすると内容をデータベースに書き込みます。[検索モード]は取り込み済みデータをデータベースから読み込み、SPREADに表示します。この場合はSPREAD上でデータ編集が可能です。[登録]ボタンクリックでデータを上書きします。

フローチャート
取り込みモードと検索モードの処理内容 画像「フローチャート:取り込みモードと検索モードの処理内容」拡大して見る
実績取込・登録画面
  画像「実績取込・登録画面」拡大して見る

[実績取込・登録]画面で使われているSPREADの機能

この画面で使われているSPREADの設定について、ユーザーインタフェース構築の目線で説明します。

セル型を設定するときのポイント

この画面では、下記のセル型を使用しています。

  • チェックボックス型
  • 日付型
  • コンボボックス型
  • 通貨型
  • 数値型

SPREADではデータ連結時に関連データソースのフィールドに基づき、列のセル型が自動的に設定されます。例えば、DateTime型のフィールドには日付型セル、Boolean型のフィールドにはチェックボックス型セルが自動設定されます。通常は、自動設定により適切なセル型が適用されますが、システム利用者の使い勝手を考えた場合、利用用途に合わせたセル型のカスタマイズが必要になる場合があります。この場合、DataAutoCellTypesプロパティをFalse設定してあらかじめ自動設定機能を無効にするか、連結後にカスタマイズしたい列のセル型を設定します。

コード(C#)
// 列の自動セル型設定を無効
fpSpread1.ActiveSheet.DataAutoCellTypes = false;	
コード(VB)
'  列の自動セル型設定を無効
fpSpread1.ActiveSheet.DataAutoCellTypes = False;

このほかにも、列幅や列ヘッダのテキストなどがデータ連結時に自動的に設定されます。用途に合わせて下記のプロパティをFalseにします(デフォルトはすべてTrue)。

プロパティ 内容
DataAutoSizeColumns フィールドのデータに基づき、列のサイズを自動的に変更します
DataAutoCellTypes 各列のセル型を自動的に設定します
DataAutoHeadings 列ヘッダのテキストにするデータフィールド名を自動的に割り当てます

これらの設定を行ったあと、適切なセル型や列ヘッダのテキストのカスタマイズを行います。

セル編集時のキャレット位置

適切なセル型を適用した上で、さらに操作性を向上させるための設定を行います。SPREADでは各セル型のFocusPositionプロパティEditorFocusCusorPosition列挙体を設定することでセル編集時のキャレット位置を制御することが可能です。業務では一日に何度もデータを編集しますので、列やセルにデータの種類に合わせたキャレット位置の制御をしておくと入力がしやすくなります。
EditorFocusCursorPosition 列挙体のメンバは下表のとおりです。

メンバ 解説
Inherit 位置はエディタのタイプまたは選択ポリシーによって決定されます。
MouseLocation テキストを選択せずに、ポインタをポインタデバイスの位置に配置します。 (≒Excel)
FirstInputPosition テキストを選択せずに、ポインタをコントロール内の先頭に配置します。
End テキストを選択せずに、ポインタをコントロール内の最後に配置します。
SelectAll テキストを全選択します。

サンプルの画面では、[購入日]、[金額]、[数量]の各セル型に、このプロパティを適用しています。通貨や数量の場合の値修正は全体を再入力する場合が多いので、編集時に値を全選択するSelectAllを設定しています。また、購入日に適用したMouseLocationはExcelのセル編集と同じ動作です。システムの利用者がExcel操作に慣れている場合やマウス操作が主体となるような場合にはこちらを利用するとよいかもしれません。

編集時にポインタの位置にキャレットを配置する場合

画像「編集時にポインタの位置にキャレットを配置する場合」
コード(C#)
// ●購入日-日付
DateTimeCellType dtP = new DateTimeCellType();
// 編集状態に移行した場合にマウスの位置にキャレットを配置
dtP.FocusPosition = EditorFocusCursorPosition.MouseLocation;
コード(VB)
'  ●購入日-日付
Dim dtP As New DateTimeCellType()
'  編集状態に移行した場合にマウスの位置にキャレットを配置
dtP.FocusPosition = EditorFocusCursorPosition.MouseLocation

編集開始時に値を全選択する場合

画像「編集開始時に値を全選択する場合」
コード(C#)
// ●金額-通貨
CurrencyCellType prc = new CurrencyCellType();
// 編集開始時に全選択
prc.FocusPosition = EditorFocusCursorPosition.SelectAll;
コード(VB)
'  ●金額-通貨
Dim prc As New CurrencyCellType()
'  編集開始時に全選択
prc.FocusPosition = EditorFocusCursorPosition.SelectAll


かんたん・多機能・安心のサポート
SPREADで楽々アプリケーション開発

まずは評価版ダウンロードから

今すぐ評価版を無料で入手する


製品・サービスに関する
ご質問・ご相談など、
お気軽にお問合せください。

電話でお問合せ

048-222-3001

(平日 9:00~12:00、13:00~17:30)