SPREAD

SPREADを使用して作成した「売り上げ分析システム」に「PlusPak for Windows Forms」および「InputMan for Windows Forms」を追加して入力機能とユーザービリティを効果しましょう。ここでは、PlusPakを使用してさらに使い勝手のよいユーザーインターフェースを実現する方法について紹介します。


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

ClickOnceデモで動作を見る

InputManとPlusPakでユーザビリティを
強化
画像「InputManとPlusPakでユーザビリティを強化」拡大して見る

ファンクションキーでのコマンド実行

キーボード操作だけでメニュー遷移や入力ができるように、ファンクションキーをフックして各種の処理を実行する方法は業務アプリケーションでよく見られる手法のひとつです。しかし、これをVisual Studioの標準機能だけで実装する場合は、ツールバーコントロールなどを継承し、個々のファンクションキーを画面上に表現するボタンとキーフックを持ったコントロールを自作しなければなりません。
PlusPak には、画面上に仮想的なファンクションキーを配置できる「ファンクションキーコントロール」があります。このファンクションキーコントロールを使用してキーボードだけでも操作できるようにしたいというエンドユーザーからの要望に応えます。

ファンクションキーコントロールの配置とデザイン

PlusPakのファンクションキーコントロール(GcFunctionKey)はキー操作をフックし、それぞれに独自の処理を割り当てるコントロールです。それをフォーム上に配置してキーセットを設定するだけで、ファンクションキーを画面上に追加できます。
では、実際に[実績取込・登録]画面にGcFunctionKeyコントロールを配置してみましょう。

画像「GcFunctionKeyコントロールを配置」

配置後に表示される[GcFunctionKeyタスク]画面から、[標準のキーセットを挿入]をクリックしてショートカットキーを設定します。

画像「標準のキーセットを挿入」

設定されたファンクションキーは、[FunctionKeyButtonコレクションエディタ]からボタン上に表示するイメージやテキストを変更できます。今回は、「見やすい画面にしたい」という要望のために処理の内容を視覚的に認識できるようなアイコンを作成し、ファンクションキーの各ボタンに適用します。

画像「プロパティを設定」
各画面の処理内容とファンクションキーの機能
ファンクションキー 画面名
実績取込・登録 実績確認 実績分析 マスタメンテナンス
F1 画像「クリアアイコン」 クリア
F2 画像「行削除アイコン」 行削除
F3
F4 画像「戻るアイコン」 戻る 画像「戻るアイコン」 戻る 画像「戻るアイコン」 戻る 画像「戻るアイコン」 戻る
F5 画像「検索アイコン」 検索 画像「検索アイコン」 検索 画像「更新アイコン」 年度変更 画像「検索アイコン」 検索
F6
F7
F8 画像「取込アイコン」 取込
F9 画像「印刷アイコン」 印刷 画像「印刷アイコン」 印刷
F10 画像「PDF出力アイコン」 PDF出力 画像「PDF出力アイコン」 PDF出力
F11 画像「Excel出力アイコン」 Excel出力 画像「Excel出力アイコン」 Excel出力
F12 画像「登録アイコン」 登録 画像「登録アイコン」 登録

ファンクションキーごとにイメージやテキストを変更してファンクションキーコントロールを完成させます。使用しないファンクションキーに関しては、Textプロパティを削除し、さらにEnabledプロパティを設定して使用できない状態にします。この作業を各画面で行っていきます。

【変更前】
画像「ファンクションキーコントロール変更前」
【変更後】
画像「ファンクションキーコントロール変更後」

イベント処理を追加する

ファンクションキーコントロールによってフックされたファンクションキーは、それぞれのキーが押下されたときおよびコントロール上(画面上)のボタンがクリックされたときにFunctionKeyDownイベントを発生させます。今回は「売り上げ分析システム」にすでに実装されているメニューと同じ処理をファンクションキーに割り当てたいので、メニューボタンで呼び出される処理をサブルーチン化してファンクションキーコントロールからも呼び出せるように修正します。

コード(C#)
// *******************************************************
// ファンクションキー/ボタン押下時処理
// *******************************************************
private void funcMenu_FunctionKeyDown(object sender, KeyEventArgs e)
{
    switch (e.KeyCode)
    {
        case Keys.F1:
            // *******************************************************
            // クリアボタン押下
            // *******************************************************
            clickClear();
            break;
        case Keys.F4:
            // *******************************************************
            // 戻るボタン押下
            // *******************************************************
            clickPrev();
            break;
        case Keys.F5:
            // *******************************************************
            // 検索ボタン押下
            // *******************************************************
            clickSearch();
            break;
        case Keys.F8:
            // ******************************************************
            // 取込ボタン押下
            // *******************************************************
            clickImpFile();
            break;
        case Keys.F12:
            // *******************************************************
            // 登録ボタン押下
            // *******************************************************
            clickExecute();
            break;
    }
}
コード(VB)
' *******************************************************
' ファンクションキー/ボタン押下時処理
' *******************************************************
Private Sub funcMenu_FunctionKeyDown(sender As Object, e As KeyEventArgs)
    Select Case e.KeyCode
        Case Keys.F1
            ' *******************************************************
            ' クリアボタン押下
            ' *******************************************************
            clickClear()
            Exit Select
        Case Keys.F4
            ' *******************************************************
            ' 戻るボタン押下
            ' *******************************************************
            clickPrev()
            Exit Select
        Case Keys.F5
            ' *******************************************************
            ' 検索ボタン押下
            ' *******************************************************
            clickSearch()
            Exit Select
        Case Keys.F8
            ' *******************************************************
            ' 取込ボタン押下
            ' *******************************************************
            clickImpFile()
            Exit Select
        Case Keys.F12
            ' *******************************************************
            ' 登録ボタン押下
            ' *******************************************************
            clickExecute()
            Exit Select
    End Select
 End Sub

独自デザインのボタンとチェックボックス

現在のアプリケーションで使用しているボタンやチェックボックスは、標準コントロールを利用したオーソドックスなものです。また、ボタンのテキストを含めアプリケーション全体のフォントが小さいため、解像度の高いモニタやタッチデバイスを使っている人などは使いづらいと感じる可能性もあるでしょう。これらを改善するためにフォントサイズを大きくし、さらにメニュー内容を視覚的に理解できるようなアイコンをボタンに表示させることで、より見やすく操作しやすい画面を実現します。
メニュー画面ではPlusPakに含まれる「シェイプボタンコントロール」を使用します。

シェイプボタンコントロールを利用した[メニュー]画面

画像「シェイプボタンコントロールを利用した[メニュー]画面」

画像を設定できるシェイプボタンコントロールに置き換える

ユースケースデモの[メニュー]画面では、「実績確認」「実績分析」など、似たテキストを持つボタンが配置されています。これらボタンの区別がつきやすいようにアイコンを表示して、さらにボタンを大きくすることでぱっと見てわかりやすく、またタッチによる操作が行いやすいボタンに変更します。

メインメニューのボタンデザインを変更

画像「メインメニューのボタンデザインを変更」

シェイプボタンコントロールは、任意のイメージをボタンとして設定できます。シェイプボタンの用途はさまざまですが、たとえば次の画面にユーザーを誘導したいときに視覚的に訴求力のある矢印型のボタンにしたり、データを削除するためのボタンをユーザーが一瞬クリックを躊躇するようなイメージにしたりすることでユーザビリティを向上できます。今回はメニュー画面に配置しているボタンをシェイプボタンコントロールに置き換えます。手順は、まず既存のボタンにセットされたプロパティ値をシェイプボタンに移行し、その後シェイプボタンに処理を割り当てたり、任意のイメージを設定したりして変更していきます。シェイプボタンへの置き換えはPlusPakの機能で簡単に行うことができます。

  1. フォーム上にGcShapeButtonを配置します。
  2. 画像「GcShapeButtonを配置」
  3. コントロールを右クリックして表示されるコンテキストメニューより、[ボタンコントロールを移行]を選択します。
  4. 画像「ボタンコントロールを移行」
  5. [移行するボタンコントロール]のダイアログから移行の対象となるVisual Studioの標準のボタンコントロールを選択します。
  6. 画像「Visual Studioの標準のボタンコントロールから移行」
  7. [移行後に元のボタンコントロールを削除する]のチェックを外してOKボタンを押下します。
  8. 画像「[移行後に元のボタンコントロールを削除する]のチェックを外してOKボタンを押下」
  9. プロパティがコピーされたGcShapeButtonが作成されました。
  10. 画像「GcShapeButtonの作成」

NameプロパティやToolTipの設定、TabIndexプロパティを手動で設定して※元のボタンを削除し、イベント処理を割り当てれば置き換えは完了です。
シェイプボタンコントロールは透過に対応していますのでPNGやGIF形式の画像を利用することで任意の形のボタンを作成できます。使い方は簡単で、ボタンの状態に応じた画像を作成し、それぞれに適用するだけです。

※ ToolTipなどを配置して追加される拡張プロパティとLocked、GenerateMember、Modified、TabIndex、Enabled、Visible、Nameはボタンの移行機能で移行できません。

ボタンの状態
メンバ 解説
ActiveImage ボタンが有効で、フォーカスがコントロールにある場合のイメージを設定します。
DefaultImage ほかのイメージが未設定(Null)のときにデフォルトで使用されるイメージを設定します。
DisableImage ボタンが無効(Enabled=false)のときに表示するイメージを設定します。
HoverImage ボタンが有効で、マウスカーソルがコントロール上に置かれている場合のイメージを設定します。
NormalImage ボタンが有効で、フォーカスがコントロールにない場合のイメージを設定します。
PressedImage ボタンが有効で、マウスボタンがコントロール上でクリックされた場合のイメージを設定します。

画像の設定は、コントロールのスマートタグから行う方法が便利です。コントロールをクリックすると現れるスマートタグからそれぞれの画像を設定します。

画像「スマートタグからそれぞれの画像を設定」

独自の画像のチェックボックス

メニューのボタンに処理内容を表す画像を入れることで、直感的で操作しやすくなりました。次にチェックボックスの視認性と操作性を向上させます。また、全体の画面デザインにも統一感を持たせたいところです。

画像「独自のチェックボックス」

PlusPakには画像を設定してチェックマークを自由に定義できる拡張チェックボックスコントロールがあるので、これを使用します。拡張チェックボックスではチェック、未チェック、未確定の3つの状態を保持できます。標準のCheckBoxコントロールからの移行方法はシェイプボタンと同様です。画像はプロパティウィンドウから設定できます。


デザインの一括変更

開発中のアプリケーションはもちろん、稼働後のシステムの改修でデザイン変更を行う際に、コントロールのプロパティをひとつひとつ変更していくのは手間の掛かる作業です。

PlusPakではプロパティ設定を補助する「プロパティマネージャツール」や「スタイルプラスコンポーネント」を提供しています。これらを利用することで、コントロール間でプロパティ設定を共有したり共通したスタイルを設定したりできます。

プロパティ設定をコピーする

フォームに配置されている同じ種類のコントロールは、背景色やサイズなど基本的なプロパティの設定値を揃えるケースがほとんどです。PlusPakの「プロパティマネージャツール」を利用するとコントロールのプロパティ設定をソリューション内の同種類のコントロールにコピーすることができます。
[実績分析]画面に配置されている複数のボタンに、以下のような変更を行います。

  • ボタンのサイズとテキストを大きくする
  • マウス操作に応じてボタンの色が変わるようにする
  • ボタンに処理の内容がわかるようアイコンを適用する

まずは、現在使われている標準ボタンより豊富な外観設定機能を持つPlusPakの拡張ボタンコントロール(GcButton)に置き換えます。

  1. メニュー画面のボタンをシェイプボタンコントロールに置き換えた手順と同じ方法で、実績分析画面の標準ボタンを拡張ボタンコントロールに置き換えます。
  2. 全てのボタンを置き換えたらそのうちのどれかひとつを選択し外観を設定します。フォントサイズを大きくし、画面全体の色味に合わせブルー系の背景色を採用します。変更したプロパティは下記の通りです。
  3. プロパティ名 設定値 値の説明
    FlatStyle Flat ボタンを立体的に見せず平坦な外観で表示
    Font メイリオ, 11.25pt ボタンに表示するテキストのフォント
    ForeColor White テキストの色
    BackColor 37,160,218 ボタンの背景色
    FlatAppearance.BorderSize 1px ボタンの外側の罫線の太さ
    Size 126,33 ボタンのサイズ
  4. なお、FlatStyleのプロパティ値をSystemに設定するとコントロールの外観は、ユーザー環境のOSによって決定されます。
  5. 次に、変更したボタンを右クリックして表示されるコンテキストメニューから[プロパティマネージャ]-[プロパティのコピー]を選択します。
  6. 画像「プロパティのコピー」
  7. [“GrapeCity.Win.Buttons.GcButton”型コントロールのプロパティのコピー]画面が表示されます。左側のペインから、先ほど変更したBackColorプロパティなどのコピーしたいプロパティにチェックを入れコピーしたいコントロールを右ペイン(コピー先)から選択します。プロパティのコピーは別のフォーム上に配置されているコントロールにも適用できます。
    画像「プロパティマネージャー」
    OKボタンを押下します。[コピー先のコントロール]で指定した拡張ボタンコントロールの指定したプロパティが変更されます。
    画像「一括変更」
    あとは個別にアイコンを設定すれば、拡張ボタンコントロールへの置き換えが完了です。

コントロールのスタイルを共有する

メニュー画面に使用したシェイプボタンコントロールでは、ホバー時や押下時のイメージを個別に設定してボタンの状態をわかりやすくしています。拡張ボタンコントロールでも同様に、ボタンの状態を設定すると統一感が出てよさそうです。 MouseDownBackColorとMouseOverBackColorという、状態に応じて背景色を変更する2つのプロパティがありますが、フォームに配置されている全てのボタンに対して2つずつプロパティを設定していくのは手間が掛かります、このような場合には「スタイルプラスコンポーネント」を利用すると便利です。
スタイルプラスコンポーネントはフォームに配置されているコントロールの状態ごとにスタイルを適用する拡張プロバイダです。以下5つの状態のスタイルを設定することができます。

状態 解説
ActiveStyle フォーカスを持っている状態のスタイルを設定します。
DisableStyle 無効な状態のスタイルを設定します。
HoverStyle マウス通過時のスタイルを設定します。
PressedStyle マウスが押された状態のスタイルを設定します。
ReadOnlyStyle 読み取り専用の状態のスタイルを設定します。

実際に[実績分析]画面にスタイルプラスコンポーネントを配置して、スタイルを設定します。

  1. [実績分析]画面のフォームにGcStylePlusを配置します。
    画像「GcStylePlusを配置」
  2. 追加したGcStylePlusのスマートタグから[スタイルの編集]を選択します。
    画像「GcStylePlusのスマートタグから[スタイルの編集]を選択」
  3. 左側の[コンポーネント]からスタイルを適用したいコントロールを、右側の[スタイル]からホバー時のスタイルと押下時のスタイルをそれぞれ設定してOKボタンを押下します。
    画像「拡張ボタンコントロールの設定完了」

これで、状態ごとのスタイルを共有した拡張ボタンコントロールを設定することができました。

なお、デザインを一括設定する機能は、技術連載「PlusPakの徹底活用術」でも紹介しています。ほかにも、「売り上げ分析システム」にも適用できる機能について解説していますので、あわせて参考にしてください。

連載記事「PlusPak徹底活用術」を見る



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

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

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


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

電話でお問合せ

048-222-3001

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