はじめに
まだWindowsのようなGUIを持ったOSがなかった頃、MS DOSアプリケーションやワークステーションはWindowsのような「メニュー」ではなく、ファンクションキーを使ってアプリケーションの機能操作や処理操作を行っていました。Windowsのメニューも、グラフィカルでわかりやすいですが、階層が深くなってくると使いたい機能にアクセスするのに時間がかかってしまいます。
一方、ファンクションキーは1プッシュで登録してある機能を実行できるため、すぐに使いたい操作にアクセスできる便利さがあります。ただし、最大でも12個のキーしかないため、割り当てられる機能に制限が出てしまいます。
PlusPak for Windows Forms 6.0JのGcClassicFunctionKeyコントロールは、アプリケーションにファンクションキー操作の機能を設定するコントロールです。複数のキーセットを割り当てることができるため、Windowsメニューと同等の数の機能をファンクションキーに設定できます。ファンクションキー操作をアプリに実装すると、機能を実行するショートカットキーを可視化してフォーム上に配置できるため、ユーザーが使用したい機能を一目で認識できるというメリットがあります。
そこで、今回はこのGcClassicFunctionKeyコントロールを使い、RichTextBoxコントロールの機能をメニューを使わずに、3種類のキーセットを1つのファンクションキーに割り当てたアプリケーションを作成してみました。
F1キーを押して3種類のキーセットを切り替えて使う
対象読者
Visual Basic、Visual C# 2010を使ってプログラムを作ったことのある人
必要な環境
Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。なお、本プログラムはWindows 7（64bit）で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。
プログラム実行時の注意事項
PlusPak for Windows Forms 6.0Jのコントロールを使って作成したアプリケーションを配布する場合、PlusPak for Windows Forms 6.0Jのアセンブリファイルを添付する必要があります。これは、Common Language RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。
本記事のサンプルアプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。
| ファイル名 | 説明 |
| GrapeCity.Win.PlusPak.v60.dll | 本体アセンブリ |
| GrapeCity.Win.PlusPak.v60.resources.dll | 本体アセンブリのサテライトアセンブリ（※） |
上記のファイルを、プログラムを実行するフォルダに格納します。.NET Framework 2.0から追加されたクラスやメンバを使用しているため、バージョン2.0以上の.NET Frameworkがインストールされていることが必須条件です。
ユーザーインターフェースやエラーメッセージを日本語で表示するためには、本体アセンブリファイルと共にサテライトアセンブリファイルを配布する必要があります。本体アセンブリファイルを配布したフォルダに「ja」という名前のフォルダを作成して、サテライトアセンブリファイルをコピーしてください。
コンポーネントのインストール
この記事の手順を試すには、Visual Studio、Visual Basic、Visual C#の開発環境にPlusPak for Windows Forms 6.0Jをインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。
製品のトライアル版一覧ページにてダウンロードしたい製品にチェックを入れ、ページ右上部の［申込フォーム］をクリックしてグレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したEメールが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールの追加
インストールが終了したら、ツールボックスに専用のタブを作成し、プロジェクトに使用するコントロールを追加します。追加するのは、アセンブリ名が「GrapeCity.Win.PlusPak.v60」の「GcClassicFunctionKey」コントロールです。
フォームの作成
フォームは、PlusPak for Windows Forms 6.0JのGcClassicFunctionKeyコントロールと、標準コントロールの両方を使用します。
GUIのデザイン
使用するのは、標準コントロールの「RichTextBox」「ImageList」「FontDialog」「OpenFileDialog」「SaveFileDialog」「ColorDialog」「PrintDialog」「PageSetupDialog」コントロールと、PlusPak for Windows Forms 6.0Jの「GcClassicFunctionKey」コントロールです。
GcClassicFunctionKeyの各ファンクションキーには、アイコン画像を割り当てていますが、これはVisual Studio 2008に付属している21個のアイコンを利用しています。
これらのアイコンは、ファンクションキーボタンの表示のためにImageListコントロールに組み込んで使用します。
他のダイアログボックスコントロールは、ファンクションキーの動作確認のために使用するだけなので、特にプロパティの設定は行いません。
GcClassicFunctionKeyの設定については、フォームを作成しながら説明します。
GcClassicFunctionKeyコントロールについて
GcClassicFunctionKeyは、キーボードのF1からF12までのファンクションキーと、Home、End、PageUp、PageDownの4つのキーの操作をフックし、それぞれに独自の機能を割り当てることができるコントロールです。コントロール全体の外観設定とイベント処理、ボタン全体のスタイル設定（スタイルセット）、個々のボタンの設定（キーセット）を行い、独自にデザインしたファンクションキーをフォームに実装できます。
キーボード上でこれらのキーのいずれかが押されると、GcClassicFunctionKeyが最初にメッセージを受け取り、FunctionKeyPressイベントを発生させます。この処理は、GcClassicFunctionKeyにフォーカスがあるかどうかに関わらず、ファンクションキーを押した時点で、FunctionKeyPressイベントが発生し、このイベントハンドラに設定した処理が実行されます。
コントロールの外観と配置（スタイルセットの設定）
GcClassicFunctionKeyに表示するボタンは、グループに分けたり、複数行にわたって表示したり、さまざまなカスタマイズが可能です。以下の5種類のスタイルセット（描画スタイル）が用意されています。
- Office形式のフラットな描画スタイル（ActiveFlatStyleSet）
- フラット形式の描画スタイル（FlatStyleSet）
- ポップアップ形式の描画スタイル（PopupStyleSet）
- 3D形式の描画スタイル（ThreeDStyleSet）
- XPテーマに対応した描画スタイル（XPThemeStyleSet）
これらのスタイルセットには名前（識別名）をつけることができ、その名前をActiveStyleSetプロパティに設定することで、そのスタイルセットがGcClassicFunctionKeyに適用されます。スタイルセットは複数持つことができ、アプリケーション実行中にスタイルセットを切り替えて使うこともできます。
このスタイルセットでは、以下の項目を設定できます。ただし、Office形式のスタイルとXPテーマ形式のスタイルではそれぞれ文字色と背景色を設定できず、システムの設定が自動的に適用されます。
- 画像とキャプションの水平方向の配置（AlignHorizontal）
- 画像とキャプションの垂直方向の配置（AlignVertical）
- ボタンの背景色（BackColor）
- キャプションのフォント（Font）
- キャプションの文字色（ForeColor）
- キャプションに対する画像の相対的な配置（Position）
- 画像とキャプションの間隔（Spacing）
- ボタン内の上下左右のマージン（Margins）
- キャプションに適用する3D効果（TextEffect）
- キャプションのワードラップ（WordWrap）
また、グリッドコントロールのセルと同じような感覚で、ファンクションキーをグループ分けにしたり、複数行を表示したりできます。これらは、ColumnGroupsプロパティとRowCountプロパティを使用し、行列数を指定して行います。
また、ColumnSpacing（列の間隔）、RowSpacing（行の間隔）、GroupSpacing（グループの間隔）の3つのプロパティを使って各ボタンの間隔を設定できます。
ControlBevelプロパティを使用して、GcClassicFunctionKeyコントロールの外枠の内側に、3D効果を付加するベベルを設定できます。ベベルの色、幅、明るさ、および暗さは、Bevel構造体のメンバを使って設定します。
| メンバプロパティ | 設定値 |
| Color | ベベルの色（System.Drawing.Color型） |
| Width | ベベルの幅（Int32型：ピクセル単位） |
| Lightness | ベベルの明るさ（Int32型：-100～100） |
| Darkness | ベベルの暗さ（Int32型：-100～100） |
GcClassicFunctionKeyの上下左右の端からボタン表示領域の端までの距離は、Margins プロパティを使用します。また、GcClassicFunctionKeyをフォーム（コンテナ）の上下左右のどの辺にドッキングするかは、Dockプロパティで設定します。
個々のボタンの設定（キーセットの設定）
GcClassicFunctionKeyでは、個々のファンクションキーのボタンに画像を表示したり、ボタン上にマウスポインタが置かれたときにツールチップを表示したりできます。
これらのキーセットはスタイルセットごとに設定でき、キーセットに名前（識別名）を付けてActiveKeySetプロパティに設定することで、そのKeySetオブジェクトの設定内容をGcClassicFunctionKeyに反映できます。各キーには、以下の項目が設定可能です。
- ボタンの背景色（BackColor）
- ボタンの位置（ButtonIndex）
- ボタン操作の可否（Enabled）
- キャプションの文字色（ForeColor）
- ボタンに表示する画像のインデックス（ImageIndex）
- ボタンに関連付けられているキー（Key）
- キャプションとして表示する文字列（Text）
- ツールチップとして表示する文字列（ToolTipText）
キャプションの文字は、キー内に表示が入りきれないと自動的に省略記号「...」が表示されます。
スタイルセットとキーセットは、それぞれ専用のエディタを使用してデザインできます。
イベント
FunctionKeyPressは、GcClassicFunctionKeyの中核をなすイベントで、［F1］から［F12］までのファンクションキー、［Home］、［End］、［PageUp］、［PageDown］の各キー、およびこれらのキーと制御キー（［Alt］、［Ctrl］、［Shift］）を組み合わせたキーを押下した時、または対応するボタンをマウスでクリックしたときに発生します。FunctionKeyPressイベントのプロシージャに任意のコードを記述することで、ファンクションキー操作時に目的の動作を実現できます。
イベントハンドラの引数「e As GrapeCity.Win.Bars.FunctionKeyPressEventArgs」を使い、どのキーが押されたのかを識別し、キー個々の動作に処理を割り当てることができます。
また、ShiftStateDownイベントとShiftStateUpイベントを利用することで、［Ctrl］キーなどの制御キーを押下したときに、対象となる動作を切り替えることも可能です。さらに、InteractiveMouseプロパティをFalseに設定すると、マウスによるボタンクリックを禁止し、キーボード操作のみを対象にできます。
KeyRepeatプロパティでは、キーを押し続けている間、FunctionKeyPressイベントを繰り返し発生させるかどうかを指定できます。
フォームのデザイン
では、フォームをデザインしていきます。最初に、GcClassicFunctionKeyをフォームの下部に配置し、残りはRichTextBoxを配置します。また、ImageListと6個のダイアログボックスを配置します。
スタイルセットの作成
GcClassicFunctionKeyに3つのスタイルセットを組み込み、表示するファンクションキーの名前や文字色／背景色を設定します。
GcClassicFunctionKeyを配置すると、デフォルトで12個のファンクションキーと4つのキーが表示されていますが、スタイルセットは組み込まれていません。そこで、スマートタグから「スタイルセットを設定」を選び、スタイルセットコレクションエディタを表示します。
スタイルセットコレクションエディタの「追加」ボタンの横の［▼］ボタンをクリックし、リストから「ThreeDStyleSet」を選びます。これで、3D表示のボタンを持ったファンクションキーのスタイルセットが1つ追加されます。
「Key」の値を「ThreeDStyleSet1」を「ファイルスタイル」に変えます。また、「BackColor」プロパティを「LightCyan」に設定します。［追加］ボタンを2回クリックし、「ThreeDStyleSet」を2つ追加したら、「Key」「BackColor」プロパティを次のように変えます。
- Key：編集スタイル
- BackColor：GreenYellow
- ForeColor：Blue
- Key：書式スタイル
- BackColor：MistyRose
- ForeColor：DarkViolet
スマートタグで、「使用するキーセット」のリストから「ファイルスタイル」を選び、スマートタグの「ボタン配列」を、「4|4|4|4」から「4|4」に変更します。
キーセットの作成
続いて、キーセットを作成します。キーセットは、個々のファンクションキーに表示する文字列やアイコン、表示するキーの数や種類を設定します。
まず、ImageListに、キーに使用するアイコンを設定します。Imagesプロパティをクリックし、コレクションエディタを使って21個のアイコンを組み込みます。
GcClassicFunctionKeyのImageListプロパティに、ImageListコントロールを設定します。GcClassicFunctionKeyのスマートタグから「キーセットを設定」を選びます。KeySetsコレクションエディタが起動し、キーセットが1つ組み込まれているのを確認したら、コレクションエディタの「Key」を「ファイル」に変え、「ボタン配列」ボタンをクリックします。
KeySetsコレクションエディタが表示されたら、「表示するボタン配列」にある「F9」キーから右側のキーを1つずつ「キー」にドラッグアンドドロップし、「表示するボタン配列」がF1～F8になるよう設定します。
続いて、個々のキーを編集します。ドロップダウンリストが『「0」0-F1-F1』と表示されているので、「Text」プロパティを「ファイル」に変更し、ToolTipTextに「このキーでファンクションキーを切り替えます」と入力します。
『「0」0-F1-F1』ドロップダウンリストをクリックし、リストから『「1」1-F2-F2』を選びます。Textプロパティを「新規...」に変更し、ImageIndexプロパティにImageListプロパティに組み込んだら、「NewDocumentHS.png」を設定します。これで、キーにテキストとアイコンが表示されます。
上図では「NewDocumentHS.png」のImageIndexは「10」になっていますが、この数字はImageListコントロールにイメージを組み込む順番によって変わります。
ドロップダウンリストのリストから順番にファンクションキーを選び、同様の方法で各キーのテキストとアイコンを設定します。
| キー | テキスト | アイコン |
| F3 | 開く... | openfolderHS.png |
| F4 | 上書き保存 | saveHS.png |
| F5 | 名前を付けて保存 | SaveAsHS.png |
| F6 | ページ設定... | PagesettingHS.png |
| F7 | 印刷... | PrintHS.png |
| F8 | 終了 | exit.png |
KeySetsコレクションエディタの［追加］ボタンをクリックし、あと2つキーセットを追加します。「表示するボタン配列」をF1～F8になるようにし、ドロップダウンリストのリストから順番にファンクションキーを選び各キーのテキストとアイコンを以下のように設定します。
キーセット「編集」
| プロパティ | 設定値 |
| Key | 編集 |
| キー | テキスト | アイコン | ToolTipText |
| F1 | 編集 | なし | このキーでファンクションキーを切り替えます |
| F2 | 元に戻す | Undo.png | |
| F3 | やり直し | Redo.png | |
| F4 | 切り取り | CutHS.png | |
| F5 | コピー | CopyHS.png | |
| F6 | 貼り付け | PasteHS.png | |
| F7 | すべてを選択 | SelectAllHS.png | |
| F8 | 検索 | Search.png |
キーセット「書式」
| プロパティ | 設定値 |
| Key | 書式 |
| キー | テキスト | アイコン | ToolTipText |
| F1 | 書式 | なし | このキーでファンクションキーを切り替えます |
| F2 | フォント | FontDialogHS.png | |
| F3 | 文字色 | Color_fontHS.png | |
| F4 | マーカー | HighlightHS.png | |
| F5 | マーカー取消 | CancelHighlightHS.png | |
| F6 | 左揃え | AlignLeftHS.png | |
| F7 | 中央揃え | AlignCenterHS.png | |
| F8 | 右揃え | AlignRightHS.png |
ToolTipTextはF1キーのみ設定しています。
ファンクションキーの処理
デザインができたら、ファンクションキーの切り替えと各キーが押された時の処理を作成します。いずれかのファンクションキーが押される、またはマウスでクリックされると、GcClassicFunctionKeyコントロールには「FunctionKeyPress」イベントが発生します。
このイベントハンドラで処理を実行しますが、それぞれのキーの処理はイベントハンドラの引数「e As GrapeCity.Win.Bars.FunctionKeyPressEventArgs」を使用して、押されたキーを識別し処理を振り分けるようにします。
ファンクションキーの切り替え処理
F1キーを押すと、作成した3つのスタイルセットとキーセットを切り替えてGcClassicFunctionKeyに設定します。これは、変数を1つ用意しこの値を使って現在のキーセット／スタイルセットを把握し、F1キーを押すたびに順番に切り替えるようにします。
F1キーが押されると、イベントハンドラの引数「e」のKeyIndexプロパティには「0」が格納されるため、この時ActiveKeySetプロパティとActiveStyleSetプロパティに識別名を設定します。
Public Class Form1
Private flag As Integer = 0
Private fontcolor As Color = Color.Black
Private Sub GcClassicFunctionKey1_FunctionKeyPress(sender As System.Object, e As GrapeCity.Win.Bars.FunctionKeyPressEventArgs) Handles GcClassicFunctionKey1.FunctionKeyPress
'ファンクションキーの切り替え
If e.KeyIndex = 0 Then
Select Case flag
Case 0
GcClassicFunctionKey1.ActiveKeySet = "編集"
GcClassicFunctionKey1.ActiveStyleSet = "編集スタイル"
flag = 1
Case 1
GcClassicFunctionKey1.ActiveKeySet = "書式"
GcClassicFunctionKey1.ActiveStyleSet = "書式スタイル"
flag = 2
Case 2
GcClassicFunctionKey1.ActiveKeySet = "ファイル"
GcClassicFunctionKey1.ActiveStyleSet = "ファイルスタイル"
flag = 0
End Select
End If
public partial class Form1 : Form
{
private int flag = 0;
private Color fontcolor = Color.Black;
public Form1()
{
InitializeComponent();
}
private void gcClassicFunctionKey1_FunctionKeyPress(object sender, GrapeCity.Win.Bars.FunctionKeyPressEventArgs e)
{
//ファンクションキーの切り替え
if(e.KeyIndex == 0)
{
switch(flag)
{
case 0:
gcClassicFunctionKey1.ActiveKeySet = "編集";
gcClassicFunctionKey1.ActiveStyleSet = "編集スタイル";
flag = 1;
break;
case 1:
gcClassicFunctionKey1.ActiveKeySet = "書式";
gcClassicFunctionKey1.ActiveStyleSet = "書式スタイル";
flag = 2;
break;
case 2:
gcClassicFunctionKey1.ActiveKeySet = "ファイル";
gcClassicFunctionKey1.ActiveStyleSet = "ファイルスタイル";
flag = 0;
break;
}
}
}
それぞれのキーの実行処理
各キーの処理も、イベントハンドラの引数「e」のKeyIndexプロパティの値を使って押されたファンクションキーを識別しますが、3つのスタイルとキーセットを使い分けていますから、変数flagの値を使ってどのキーセットの時のキーなのかを判断して処理を組み立てていきます。
なお、本プログラムはあくまでもGcClassicFunctionKeyの機能を紹介するサンプルプログラムのため、各キーの処理はあくまでも形だけにとどめています。
'各ファンクションキーの処理 一部省略している処理があります
Dim fname As String = ""
Select Case flag
Case 0 'ファイル
Select Case e.KeyIndex
Case 1
RichTextBox1.Clear()
Case (2)
If OpenFileDialog1.ShowDialog() = Windows.Forms.DialogResult.OK Then
fname = OpenFileDialog1.FileName
RichTextBox1.LoadFile(fname)
End If
Case 3
If fname <> "" Then
RichTextBox1.SaveFile(fname)
End If
Case 4
If SaveFileDialog1.ShowDialog() = Windows.Forms.DialogResult.OK Then
RichTextBox1.LoadFile(SaveFileDialog1.FileName, RichTextBoxStreamType.PlainText)
End If
Case 5
PageSetupDialog1.PageSettings = New System.Drawing.Printing.PageSettings
PageSetupDialog1.ShowDialog()
Case 6
PrintDialog1.ShowDialog()
Case 7
If MessageBox.Show("終了しますか？", "終了", MessageBoxButtons.OKCancel, MessageBoxIcon.Information) = Windows.Forms.DialogResult.OK Then
Me.Close()
End If
End Select
Case 1 '編集
Select Case e.KeyIndex
Case 1
RichTextBox1.Undo()
Case 2
RichTextBox1.Redo()
Case 3
RichTextBox1.Cut()
Case 4
RichTextBox1.Copy()
Case 5
RichTextBox1.Paste()
Case 6
RichTextBox1.SelectAll()
Case 7
Dim str As String = RichTextBox1.SelectedText
RichTextBox1.Find(str, RichTextBoxFinds.MatchCase)
End Select
Case 2 '書式
Select Case e.KeyIndex
Case 1
FontDialog1.ShowDialog()
RichTextBox1.SelectionFont = FontDialog1.Font
RichTextBox1.SelectionColor = fontcolor
Case 2
ColorDialog1.ShowDialog()
fontcolor = ColorDialog1.Color
RichTextBox1.SelectionColor = fontcolor
Case 3
RichTextBox1.SelectionBackColor = Color.Yellow
Case 4
RichTextBox1.SelectionBackColor = RichTextBox1.BackColor
Case 5
RichTextBox1.SelectionAlignment = HorizontalAlignment.Left
Case 6
RichTextBox1.SelectionAlignment = HorizontalAlignment.Center
Case 7
RichTextBox1.SelectionAlignment = HorizontalAlignment.Right
End Select
End Select
End Sub
End Class
// 各ファンクションキーの処理 一部省略している処理があります
String fname = "";
switch(flag)
{
case 0: //ファイル
switch(e.KeyIndex)
{
case 1:
richTextBox1.Clear();
break;
case 2:
if (openFileDialog1.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
fname = openFileDialog1.FileName;
richTextBox1.LoadFile(fname);
}
break;
case 3:
if (fname != "")
{
richTextBox1.SaveFile(fname);
}
break;
case 4:
if (saveFileDialog1.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
richTextBox1.LoadFile(saveFileDialog1.FileName, RichTextBoxStreamType.PlainText);
}
break;
case 5:
pageSetupDialog1.PageSettings = new System.Drawing.Printing.PageSettings();
pageSetupDialog1.ShowDialog();
break;
case 6:
printDialog1.ShowDialog();
break;
case 7:
if(MessageBox.Show("終了しますか？", "終了", MessageBoxButtons.OKCancel, MessageBoxIcon.Information) == System.Windows.Forms.DialogResult.OK)
{
this.Close();
}
break;
}
break;
case 1: //編集
switch(e.KeyIndex)
{
case 1:
richTextBox1.Undo();
break;
case 2:
richTextBox1.Redo();
break;
case 3:
richTextBox1.Cut();
break;
case 4:
richTextBox1.Copy();
break;
case 5:
richTextBox1.Paste();
break;
case 6:
richTextBox1.SelectAll();
break;
case 7:
string str = richTextBox1.SelectedText;
richTextBox1.Find(str, RichTextBoxFinds.MatchCase);
break;
}
break;
case 2: //書式
switch(e.KeyIndex)
{
case 1:
fontDialog1.ShowDialog();
richTextBox1.SelectionFont = fontDialog1.Font;
richTextBox1.SelectionColor = fontcolor;
break;
case 2:
colorDialog1.ShowDialog();
fontcolor = colorDialog1.Color;
richTextBox1.SelectionColor = fontcolor;
break;
case 3:
richTextBox1.SelectionBackColor = Color.Yellow;
break;
case 4:
richTextBox1.SelectionBackColor = richTextBox1.BackColor;
break;
case 5:
richTextBox1.SelectionAlignment = HorizontalAlignment.Left;
break;
case 6:
richTextBox1.SelectionAlignment = HorizontalAlignment.Center;
break;
case 7:
richTextBox1.SelectionAlignment = HorizontalAlignment.Right;
break;
}
break;
}
}
}
}
まとめ
ファンクションキーは、直観的にかつ1回キーを押すだけで機能が使えるため、メニューに深い階層を組み込む際に上手に使えば、アプリケーションのアクセス性を高めることができます。
GcClassicFunctionKeyは、本アプリケーションでも使用したように複数のスタイルセットやキーセットを使うことができ、それぞれのキーにテキストとアイコンを表示させることができるため、メニューやツールボックスと同じような使い方ができます。
Windowsになってからファンクションキーはあまり使われなくなっていますが、GcClassicFunctionKeyコントロールを使って、キー1つで思い通りに操作できるユーザーインターフェイスを持ったアプリケーションを作ってみてはいかがでしょうか。
