SPREAD

SPREADを使用して作成した「売り上げ分析システム」に「PlusPak for Windows Forms」を使用して、使い勝手のよいユーザーインターフェースを適用しました。最後に「InputMan for Windows Forms」を使用して入力機能を強化させましょう。InputManは、エンドユーザーに対して柔軟で細かい入力補助機能を提供するだけではなく、開発者にとっても効率的な開発を実現します。
ここでは、InputManを使用してユーザーエクスペリエンスを向上させる方法について紹介します。


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

ClickOnceデモで動作を見る


InputManコントロールに置き換え

はじめに、ユースケースデモで使用している標準コントロールをInputManコントロールに置き換えます。

目的に応じたInputManコントロール

ユースケースデモでは、TextBox、ComboBox、DateTimePickerといった標準コントロールを使用していますが、これを以下のようなInputManコントロールに置き換えます。

標準コントロール InputManコントロール
TextBox テキストコントロール(GcTextBox)
マスクコントロール(GcMask)
ComboBox コンボコントロール(GcComboBox)
DateTimePicker 日付コントロール(GcDate)
日付時刻コントロール(GcDateTime)

ここで注意したいのが、日付に関するコントロールです。InputManには、日付入力機能を持つコントロールとして、次の2種類が用意されています。

  • 日付時刻コントロール(GcDateTime)
    DateTime型で日付と時刻の両方の入力および表示が許可されます。
  • 日付コントロール(GcDate)
    DateTime型ですが、日付部分のみの入力および表示が許可されます。内部で時刻部分の値は00:00:00と設定されています。

[実績取込・登録]画面では、「対象日」に日付を選択しますが、ここでは入力、表示またデータの扱いのいずれにおいても、時刻部分を意識する必要はありません。このような場合、時刻部分の設定が不要な日付コントロールが適しています。
しかし、「前回取込日時」には、時刻部分の表示が必要です。この場合は日付時刻コントロールを使用します。

[実績取込・登録]画面
画像「[実績取込・登録]画面」

また、[実績確認]や[実績分析]画面では、「対象年度」として「年」部分のみ表示されています。「年」部分は日付の一部ですが、実際のデータフィールドやコード上ではDateTime型としては扱いません。このような場合、日付時刻や日付コントロールよりもマスクコントロールの利用が便利です。4桁の数字と「年度」というリテラル文字による書式を設定することで、見た目は年を扱う入力フィールド、コード上は加工しやすいString型として簡単に処理できます。

[実績確認]画面
画像「[実績確認]画面」
[実績分析]画面
画像「[実績分析]画面」

[実績取込・登録][実績確認]のほか、[マスタメンテナンス]画面では、コンボコントロールをInputManに置き換えます。InputManのコンボコントロールは、ドロップダウンリストの項目間に罫線を引いてリスト項目を見やすくします。

[マスタメンテナンス]画面
画像「[マスタメンテナンス]画面」

InputManに置き換える効果

すでに作成済みのアプリケーションで標準のコントロールをInputManのコントロールに置き換えるためにはコードの修正が必要になる箇所が出てきます。しかし、置き換え後は追加設定なしで以下のような効果を得ることができます。

データチェック

InputManコントロールは、入力段階で不正な値の入力を許可しないようにできるので、データチェックの手間を減らせます。
例えば、年度を入力する対象年度にInputManを利用すると、数値以外の入力を抑制できます。また、全角で入力された場合には半角に自動で変換するなど、検索ボタン押下時にチェックロジックを組むことなく、入力段階で不正な値の入力を防ぐことができます。

環境に応じた快適な入力操作を実現

日付やコンボコントロールのドロップダウンボタンを押下すると、カレンダーやリストボックスなどのドロップダウンオブジェクトが開きますが、InputManはマウスまたはタッチ操作のどちらで開かれたかどうかを自動的に検出します。タッチ操作により開かれる場合、日付や項目の選択がしやすいよう、マウス操作時よりも大きなサイズのオブジェクトが表示されます。
タブレットなどのタッチデバイスが普及する昨今、複数の環境に対して有効なユーザーインタフェースの設計は難しくなる一方ですが、InputManではなんの設定も要りません。このような自動検出機能は既定で備わっています。

マウスとタッチ操作によるドロップダウンリストの違い

画像「マウスとタッチ操作によるドロップダウンリストの違い」

また、簡単な設定を行うだけで、さらに強力な効果を得ることができます。次項ではユースケースデモに実装されている強化機能について詳しく説明します。


日付の和暦表示

標準のDateTimePickerを利用していたときは、yyyy/MM/ddの書式での入力を行っていますが、これを表示だけ和暦にしたいという要望があった場合InputManではプロパティの設定を変更するだけで対応が完了します。

和暦表示の設定

[実績取込・登録]画面では、「対象日」の入力がyyyy/MM/ddの形式で作成されています。これを、元号を使った和暦表示に変更します。
日付コントロールはプロパティから書式を設定するだけで和暦表示にできます。書式の設定はフィールドを編集する方法と書式を設定する方法がありますが、今回は書式を設定する方法で変更します。

  1. フォーム上に配置した日付コントロールのスマートタグから[表示書式の設定]を選択します。
    画像「スマートタグから表示書式の設定」
  2. 書式の一覧から、和暦の日付書式を選択してOKボタンを押下します。
    画像「書式の設定」
  3. 日付コントロールが和暦表示になりました。
    画像「和暦表示」

「前回取込日付」は一覧に実現したい書式がありません。その場合には、[表示書式の設定]でカスタム書式を作成すれば希望の書式を設定できます。

画像「和暦表示に設定」

今回は表示のみ和暦で行う設定を行いました。入力書式はデフォルトのままで「yyyy/MM/dd」形式です。入力は西暦、表示は和暦という要望は、日本の業務アプリケーションではよく見られますが、このようにノンコーディングで実現できます。

アプリケーション構成ファイル

日付の表示を和暦にした場合、表示する元号はInputMan内部で定義しています。新しい元号が制定されたときには、InputManはサービスパックで新元号に対応しますが、即座に反映させる必要のあるシステムなどではアプリケーション構成ファイルを設定しておくと便利です。アプリケーション構成ファイルは以下の手順で追加します。

  1. プロジェクトを右クリックして[新しい項目]を選択します。
    画像「[新しい項目]を選択」
  2. カテゴリ[全般]から「アプリケーション構成ファイル」を選択します。
    画像「アプリケーション構成ファイル」
  3. 追加されたアプリケーション構成ファイルに設定を記述します。
  4. <?xml version="1.0" encoding="utf-8" ?>
    <configuration>
      <configSections>
        <section name=" GrapeCityEra" type="System.Configuration.NameValueSectionHandler"/>
      </configSections>
      <GrapeCityEra>
        <add key = "1868 09 08" value = "明治_明_M_1,M"/>
        <add key = "1912 07 30" value = "大正_大_T_2,T"/>
        <add key = "1926 12 25" value = "昭和_昭_S_3,S"/>
        <add key = "1989 01 08" value = "平成_平_H_4,H"/>
      </ GrapeCityEra>
    </configuration>
    

アプリケーション構成ファイルはアプリケーション名に拡張子 .config を付けた名前で、配布するアプリケーションと同じフォルダに配置されます。新元号の制定時にはこのファイルを変更するだけで即座に新元号に対応できるため、プロジェクトのリビルドなどの手間を省くことができ、また、エンドユーザーでも簡単に新元号を追加できます。

なお、アプリケーション構成ファイルは、SPREADおよびPlusPakと共通です。SPREADの日付型セルやPlusPakのGcCalendarで和暦表示を使用しているときは、アプリケーション構成ファイルを変更するだけで、アプリケーション全体の和暦表示に対して新元号を適用することが可能です。


Enterキーでフォーカス移動

項目を入力後、Enterキーの押下でフォーカスを移動したいという要望はよくありますし、優れたユーザーエクスペリエンスと言えます。InputManではEnterキーに「フォーカス移動」というショートカット機能を割り当てることで、この機能を簡単に実現できます。

ショートカット機能の割り当ては、ショートカットコンポーネントを使用します。これは、コントロールをフォームに配置したときに自動的に追加され、いくつかのショートカットキーがデフォルトで設定されます。例えば、InputManの各コントロールにはF2キーに「値のクリア」という動作が設定されています。詳細については、製品ヘルプの「ショートカット動作の一覧」を参照してください。

ここでは、[実績取込・登録]の「対象日」で使用している日付コントロールに対してEnterキーでフォーカス移動を行うショートカットキーを設定する方法を紹介します。

  1. 日付コントロールのスマートタグから[ショートカットキーの編集]を選択します。
    画像「ショートカットの編集」
  2. デフォルトで設定されているショートカットキーは今回不要なので削除します。
    画像「ショートカットキーの削除」
  3. リストからショートカットキーに「Return」を選択します。
    画像「ショートカットキーに「Return」を選択」
  4. 動作から「NextControl」を選択して追加ボタンを押下します。
    画像「「NEXTControl」を追加」
  5. 「同種のコントロールにも適用」にチェックを入れてOKボタンを押下します。チェックを入れることで、この時点でフォーム上に配置している同種のコントロールに設定が適用されます。
    画像「同種のコントロールにも適応」

Enterキーによるフォーカスの移動の他にも、InputManにはフォーカス移動に関連したプロパティがいくつか用意されています。

  • ExitOnLastCharプロパティ
    コントロールに設定された最大文字数分の入力が終了したときに、 自動的に次のコントロールへフォーカスを移動するかどうかを設定するプロパティ
  • ExitOnLeftRightKeyプロパティ
    左右矢印キーを使ったフォーカスの移動方法を設定するプロパティ

ユースケースデモでは、これらのプロパティも設定してフォーカス移動の動作を強化しています。

画像「フォーカス移動の動作を強化」

入力時の入力チェック

ユースケースデモでは、検索ボタン押下時に対象日や対象年度の入力チェックを行っています。一括での入力チェックは、入力項目の数が多くなればなるほど、どの項目がエラーなのかを判断しにくくなったり、その項目まで後戻りをして正しい値を入力しなおすことに手間を感じたりすることがあります。
InputManが提供している入力チェックを行うための検証コンポーネントは、エラーを知らせる検証アクションを多数用意しているため、不正値が入力されると入力動作を妨げない形で即座にエラーを通知することができます。

検証コンポーネントには、テキストやマスクコントロール、また標準コントロールでも使用可能な汎用検証コンポーネント、InputManのコントロール専用の日付時刻検証、日付検証、時刻検証、数値検証およびタイムスパン検証コンポーネントの6種類があります。

検証アイテムを設定する

検証アイテムとは、コントロールに入力された値をどのように検証するかを設定するアイテムです。
汎用検証コンポーネントでは以下の17種類の検証アイテムが利用できます。

検証アイテム 解説
必須入力(EmptyText) 対象のコントロールのTextプロパティが空かどうかを検証します。
データタイプ(InvalidType) コントロールに入力された値が指定したデータ型に一致するかどうかを検証します。
文字列リスト(IncludeList) 文字列リストに設定した文字列のいずれかが入力されているかどうかを検証します。
禁止文字(ExcludeList) 文字列リストに設定した禁止文字列が入力されていないかを検証します。
サロゲートペア文字(SurrogateChar) JIS2004で追加されたサロゲートペア文字が入力されていないかどうかを検証します。
正規表現(RegularExpression) 入力された文字列を、正規表現を使って検証します。
ペア文字(InvalidPairChar) カッコなどのペアとなる文字が両方存在するかどうかを検証します。
数値範囲(InvalidNumberRange) 入力された値が、指定した数値の範囲内の値かどうかを検証します。
日付範囲(InvalidDateTimeRange) 入力された値が、指定した日付の範囲内の値かどうかを検証します。
他のコントロールと数値比較(NumberCompareControl) 対象となるコントロールの値と数値を比較検証します。
数値比較(NumberCompareValue) 指定する数値と値を比較検証します。
日付値比較(DateTimeCompareValue) 指定する日付値と値を比較検証します。
文字種(CharFormat) 入力された文字が文字種キーワードで指定した文字種かどうかを検証します。
文字列比較(CompareString) 指定する文字列と入力された文字列を比較検証します。
文字列の長さ(TextLength) コントロール文字列の長さが指定した範囲内かどうかを検証します。
エンコード形式(EncodingCheck) コントロールの値が指定したエンコードの種類に一致するかどうかを検証します。

日付時刻、日付、時刻、タイムスパン、数値の各検証コンポーネントでは以下の4種類の検証アイテムが利用できます。

検証アイテム 解説
値の比較(CompareValue) 指定する値とコントロールに入力された値を比較検証します。
他のコントロールと比較(CompareControl) 対象となるコントロールの値とコントロールに入力された値を比較検証します。
範囲(InvalidRange) 入力された値が、指定した値の範囲内かどうかを検証します。
データタイプ(InvalidValue) コントロールに入力された値が日付や数値、タイムスパン型として有効かどうかを検証します。

検証アクションを設定する

追加した検証アイテムによって無効と判断された場合、検証アクションで設定した動作が行われます。検証アクションは全ての検証コンポーネント共通で10種類が提供されています。

検証アクション 解説
GcBalloonTipによる通知(GcBalloonTipNotify) コントロールに入力された値が不正なときに、柔軟なスタイルのバルーンチップによってエラー内容を通知します。
3段階のボーダーによる通知(ThreeStateBorderNotify) 未入力の状態、有効な状態、無効な状態の3つのステータスに応じてコントロールボーダーを表示します。
3段階のアイコンによる通知(ThreeStateIconNotify) 未入力の状態、有効な状態、無効な状態の3つのステータスに応じてアイコンを表示し、エラーの内容を通知します。
フォーカス制御(FocusProcess) コントロールに入力された値が不正なときに、フォーカスの移動を禁止するかどうかを設定します。
値の制御(ValueProcess) コントロールに入力された値が不正なときに、値(Textプロパティの値)をどのように処理するか設定します。
アイコンによる通知(IconNotify) コントロールに入力された値が不正なときに、ErrorProviderのようなアイコンでエラーの内容を通知します。
音による通知(SoundNotify) コントロールに入力された値が不正なときに、音によってエラーを通知します。
バルーンチップによる通知(TipNotify) コントロールに入力された値が不正なときに、バルーンチップによってエラーを通知します。
下線による通知(LineNotify) コントロールに入力された値が不正なときに、文字列に下線(波線)を表示してエラーを通知します。
色による通知(ColorNotify) コントロールに入力された値が不正なときに、コントロールの背景または前景色を変更してエラーを通知します。

例えば、以下の条件を満たすためには、下線による通知、色による通知とバルーンチップによる通知の3つを併用します。

  • 入力の動作を妨げたくない
  • フォーカスが移動できなかったり、値が元に戻ってしまったりするような動作は避けたい
  • エラー箇所は目立つようにしたい
  • エラーの内容を分かりやすく通知したい

独自の検証アイテム

検証アイテムは一般的な検証を想定して用意されていますが、それだけでは十分な検証を行えないケースもあります。そこで、InputManの検証コンポーネントでは検証アイテムや検証アクションに、独自の処理を設定できるようになっています。
独自の検証機能を実装する方法については、ナレッジベースで解説しています。

文書番号:38309 独自の検証アイテム/検証アクションを作成し、検証コンポーネントに設定するには

ユースケースデモの[実績取込・登録]画面では、開始日付と終了日付の指定範囲チェックの他に年度をまたいでいないかどうかを検証する必要がありますが、この処理を独自の検証アイテムでチェックします。これにより、ほかの検証箇所と同じ検証アクションを呼び出してアプリケーション全体のエラー動作を統一させることが可能です。

  1. GcDateValidator.ValidateItemクラスを継承した独自の検証アイテムのクラスを作成し、Validateメソッドをオーバーライドします。
  2. コード(C#)
    public class CustomValidateItem : GcDateValidator.ValidateItem
    {
        protected override bool Validate()
        {
        }
    }
    コード(VB)
    Public Class CustomValidateItem
        Inherits GcDateTimeValidator.ValidateItem
        Protected Overrides Function Validate() As Boolean
        End Function
    End Class
  3. Validateメソッドでは有効な場合はtrue、無効な場合はfalseを返す必要があるので、それに合わせて処理を行います。今回の場合は検証を行うコントロールと比較するコントロール、対象年度を待避しておくコントロールのふたつの情報がカスタムクラスで必要になるため、プロパティを追加してそれらを取得/設定できるようにしています。
  4. コード(C#)
    public class CustomValidateItem : GcDateValidator.ValidateItem
    {
        private GcDate _compareControl;
        private Label _HFyear;
    
        public GcDate CompareControl
        {
            get
            {
                return _compareControl;
            }
            set
            {
                _compareControl = value;
            }
        }
    
        public Label HFyear
        {
            get
            {
                return _HFyear;
            }
            set
            {
                _HFyear = value;
            }
        }
    
        protected override bool Validate()
        {
            if (_compareControl == null ||
                _compareControl == this.Target)
            {
                return true;
            }
    
            GcDate targetControl = (GcDate)this.Target;
            GcDate gcDate2 = CompareControl;
    
            // 条件チェック
            if (targetControl.Value == null)
            {
                return false;
            }
            if (gcDate2.Value == null)
            {
                return false;
            }
    
            int fm = targetControl.Value.Value.Month;
            int tm = gcDate2.Value.Value.Month;
    
            int ffy;
            int tfy;
            if (fm < 3)
            {
                ffy = targetControl.Value.Value.Year;
            }
            else
            {
                ffy = targetControl.Value.Value.AddYears(-1).Year;
            }
            if (tm < 3)
            {
                tfy = gcDate2.Value.Value.Year;
            }
            else
            {
                tfy = gcDate2.Value.Value.AddYears(-1).Year;
            }
    
            // 年度またぎチェック
            if (ffy != tfy)
            {
                return false;
            }
            else
            {
                _HFyear.Text = ffy.ToString();
                return true;
            }
        }
    }
    コード(VB)
    Public Class CustomValidateItem
        Inherits GcDateTimeValidator.ValidateItem
        Private _compareControl As GcDateTime
        Private _HFyear As Label
    
        Public Property CompareControl() As GcDateTime
            Get
                Return _compareControl
            End Get
            Set(value As GcDateTime)
                _compareControl = value
            End Set
        End Property
    
        Public Property HFyear() As Label
            Get
                Return _HFyear
            End Get
            Set(value As Label)
                _HFyear = value
            End Set
        End Property
    
        Protected Overrides Function Validate() As Boolean
            If _compareControl Is Nothing OrElse _compareControl Is Me.Target Then
                Return True
            End If
    
            Dim targetControl As GcDateTime = DirectCast(Me.Target, GcDateTime)
            Dim gcDate2 As GcDateTime = CompareControl
    
            ' 条件チェック
            If targetControl.Value Is Nothing Then
                Return False
            End If
            If gcDate2.Value Is Nothing Then
                Return False
            End If
    
            Dim fm As Integer = targetControl.Value.Value.Month
            Dim tm As Integer = gcDate2.Value.Value.Month
    
            Dim ffy As Integer
            Dim tfy As Integer
            If fm > 3 Then
                ffy = targetControl.Value.Value.Year
            Else
                ffy = targetControl.Value.Value.AddYears(-1).Year
            End If
            If tm > 3 Then
                tfy = gcDate2.Value.Value.Year
            Else
                tfy = gcDate2.Value.Value.AddYears(-1).Year
            End If
    
            ' 年度またぎチェック
            If ffy <> tfy Then
                Return False
            Else
                _HFyear.Text = ffy.ToString()
                Return True
            End If
    
        End Function
    End Class


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

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

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


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

電話でお問合せ

048-222-3001

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