2009年12月5日、セミナーイベント「VSUG Day 2009 Winter」が日本工学院蒲田校において開催された。当日はVisual Studioをはじめ、.NET FrameworkやSilverlight、Windows Azureなどを対象としたさまざまなセッションやアカデミーが行われ盛況を博した。ここでは、Microsoft MVP for Visual Basic／Oracle ACEの初音玲氏によるセッション「Visual Studio 2008を活用したWindows 7対応アプリの作成」の内容を紹介する。
Visual Studio 2008を活用したWindows 7対応アプリの作成
初音氏のセッションでは、「Visual Studio 2008」を使って「Windows 7ユーザーエクスペリエンスガイドライン」で規定されているユーザーインターフェースがどれくらい実現できるかを検証した。冒頭で「Windows 7の前に、Windows Vistaへの対応は終わっていますか？」という質問を参加者に投げかけた。これはVisual Basic 2008へのバージョンアップがVista対応への近道であるためだ。
Visual Basic 2008で何が変わったかというと、アプリケーションのプロパティに［UAC設定の表示］という項目が増えている。これを開いてみると、Visual C#における「マニフェスト」の項目が追加されている。前バージョンではマニフェストを作成してexeファイルの中に入れるという作業が必要だったが、Visual Studio 2008からは標準で搭載されるようになった。
マニフェストファイルで重要なのは、「requestedExecutionLevel」の項目で、「aslnvoker」「highestAvailable」「requireAdministrator」3種類の権限を設定できるようになっている。
| レベル | 意味 |
|---|---|
| aslnvoker | アクセス許可の追加要求を行わない。 |
| highestAvailable | 親プロセスが利用できる最も高いアクセス許可を要求する。 |
| requireAdministrator | 完全な管理者アクセス許可を要求する。 |
どのユーザーでもクリックワンスで実行できるものは「aslnvoker」のみとなる。これらを踏まえて、初音氏は本題に入った。
Windowsユーザーエクスペリエンスガイドラインに沿ったアプリケーションを作るためには
今回初音氏が紹介したユーザーインターフェースのベースとなるのは、マイクロソフトが2009年に発表した「Windowsユーザーエクスペリエンスガイドライン」。Visual Basic 6.0以来、久しぶりに発行されたユーザーインターフェースのガイドラインだ。開発の際に、これに準拠したユーザーインターフェースのデザインを構築するよう記されたものだが、PDFファイルで775ページもあり、すべてを読むには骨が折れる。
ガイドラインの目次には「デザイン原則」「コントロール」「コマンド」「テキスト」「メッセージ」「対話操作」「ウィンドウ」「外観」「エクスペリエンス」「Windows環境」と10項に渡って規定が記されており、コントロールだけでも21種類の細かな規定が記されているが、日本語で作成する場合には判断に困る場合が多い。
そこで初音氏は、「コントロール」「コマンド」「メッセージ」に内容を絞り、その中でも特に重要と思われる点について紹介した。
ガイドライン上での各種コントロール定義と注意点（1）
バルーン
「それほど重要ではない問題を通知するために使用する」とガイドラインには記されているが、実際にはあまり使われることがない。その原因として、使い勝手がよくないことと重大なバグが解決されないままになっていることが考えられる。該当場所を指し示すヒゲのようなものは、ToolTipクラスのIsBalloonプロパティの値を「True」にすることで表示が可能となるが、このヒゲが全然違う場所を指してしまう。これを解決するには、IsBalloonの値を「False」に設定してヒゲを出さないようにするしかない。バルーンは相対位置で設定することもできるが、「IsBalloon」の値を「True」にした時点でデザインが崩れてしまう。
また、バルーンは「入力問題」と「特殊な状態」を通知するとガイドラインには規定されており、「特殊な状態」の場合はバルーン内に「警告アイコン」が表示される。しかし、実際に検証してみると、Windowsの入力フォームでCaps Lockがオンになっているときに表示されるバルーンには警告アイコンが表示されている。
チェックボックス
チェックボックス作成の際の注意点は、チェックボックスにチェックが入った状態（Onの状態）の意味をラベルに書くことである。例えば、「電源を入れる」という表現ではなく、「電源」という文言のみをラベルに表示することがポイントだ。
また、説明文では「［○○○］チェックボックスをオンにします。」のように、［～］（大カッコ）の中にラベルの名前を入れることも覚えておいて欲しい。さらに、ガイドラインでのチェックボックス、およびラベルの大きさ、複数のラベルの行間についての推奨ピクセル数と、Visual Studioの標準値が異なるため、規定どおりに作成するにはマニュアルで面倒な調整作業をしなければならない。
コマンドボタン
コマンドボタンに関しては、Visual Studioのツールボックスからコマンドボタンをホームにドラッグ＆ドロップすると、推奨値どおりに作成できる。説明文では、［保存］ボタンであれば「［保存］をクリックします。」といった具合に記述することがポイントで、単に「ボタン」とだけの記述はNGとされている。
コマンドリンク
コマンドリンクとは、ウィンドウの中の四角い部分にカーソルを合わせると色が変わり、クリックすることでリンク先にジャンプする画像リンクコントロールのようなもの。しかし、このパーツに関しては、ガイドラインには記されていない。これについては、後ほど解決方法を紹介する。
ドロップダウンリスト
コンボボックスのコントロールで、プロパティの「DropDownStyle」属性を「DropDownList」とすることで表示されるもの。これに関しては、ラベルとリストの間にコロン（：）を入れること、説明文には「［○○○］ボックスの一覧の［△△△］をクリックします。」と記載することが注意点である。
コンボボックス
コンボボックスはコントロールから、プロパティの「DropDownStyle」属性を「DropDown」とすることで表示できる。ここでの注意点も、ラベルとリストの間にコロン（：）を入れることと、説明文を「［○○○］ボックスの一覧に□□□を入力します。」とすること。入力も可能だが、基本的にリストからも選べる。また、推奨値の高さと、Visual Studioの標準値は異なるため、規定に沿った形で実現するにはフォントサイズを変えなければならず、かなり困難な作業となる。
ガイドライン上での各種コントロール定義と注意点（2）
グループボックス
グループボックスは「関連性を視覚的に表示」するもので、作成上での注意点は必ずラベルをつけること、グループボックスを入れ子にしない、線上にコントロールを配置しないなどがある。
リストボックス
ガイドライン上では、リストボックスは「一覧に表示された一連の値から選択」とされている。作成上の注意点は、論理的な順序で一覧を作成する、選択肢が空白の状態はNGのため「なし」と表示する、最低5行分の高さを確保するなどがある。また、複数選択が可能なリストボックスでは、選択した値に対して背景色がつくようにするのではなく、チェックボタンを配置するように推奨されており、説明文には「［○○○］ボックスの一覧の［△△△］をクリックします。」と記載するよう規定されている。
プログレスバー
処理の進捗状況を表示するプログレスバー。Windows 7では、タスクバーでも同様に進捗が分かる表示方式になっているが、Visual Studioで作成した場合、このタスクバー内での表示がうまくいかない。これについては後ほど解決方法を紹介する。
ラジオボタン
チェックボックスをクリックし有効にすることで選択を行うラジオボタンは、「相互に排他的な関連から選択する」とガイドラインに規定されている。、Visual Studioから作成すると、ガイドライン推奨値よりも小さいサイズで作成されるため、規定に合わせるためには面倒な調整作業が必要となる。
また、技術的なドキュメントでは「ラジオボタン」と表記するのに対し、ユーザー向けのマニュアルなどには「『オプションボタン』と表記するように」との記述がある。そのため、説明文では「［○○○』オプションボタンをクリックします。」と記載する必要がある。
さらに、一般的にはどれも選択したくない、あるいは該当するものがないという場合に備えて［選択しない］［なし］といった項目を作成してしまいがちだが、これは間違いで、例えばプリンタの印刷方向選択であれば、「縦」「横」以外の項目として「プリンタ設定に合わせる」といった具合に、具体的な表記をしなければならない。
ステータスバー
メインウィンドウの下部にある領域。メインウィンドウのみに表示し、サブウィンドウへの表示ができない。また、状態に関する情報だけがが可能とガイドラインでは規定されている。ログイン画面などでは、サブウィンドウにこのステータスバーを表示させたくなるが、ガイドラインでは禁じられている。
タブ
プロパティ画面などで使用するタブは、「関連する情報をラベル付きの個別ページで表示」と規定されている。注意点としては、「タブ間に明確な関連があること」とが挙げられる。そのため、関連性が薄い場合には別ウィンドウを表示させなければならない。また、「タブ間は並列関係であること」とも規定されており、階層関係の場合は子ウィンドウなどを表示する。これも説明文には「［○○○］タブをクリックします。」と記載する。
テキストボックス
文字や数字を表示・入力・編集するテキストボックスでも、推奨値とVisual Studioの標準値が異なっており、推奨値に合わせるためには調整作業が必要である。テキストボックスでは文字長程度しか制限できないため「入力値に合ったコントロールを使用すること」「文字がすべて表示されるようサイズを決めること」「指示ラベルは上に配置すること」などの注意点が挙げられている。
メニュー
メニューは「コマンドまたはオプションの一覧」として定義されており、MenuStripで表示する。「メインウィンドウのみに使用すること」が注意点に挙げられており、ダイアログボックスやサブウィンドウへの表示はできない。
また、メニューカテゴリは3～10個の範囲内で作成するという指定があり、7個以上のカテゴリについてはサブメニューにする必要がある。また、メニュー階層は3階層までとされているが、実際に任意のソフトで確認するとマイクロソフトのものでさえ順守されていないことが分かる。
ガイドライン上での各種メッセージ定義と注意点
メッセージには「エラー」「警告」「確認」「通知」の4種類がある。
まず、エラーメッセージには「［OK］ボタンの表示は不可」とあり、これはエラーに対して［OK］という表現のボタンは不適切という意味だ。［Close］や［閉じる］といった表現をするように規定されている。正しいエラーメッセージの例もガイドラインには掲載されているが、同じの内容の物はVisual Studioで作成できないという落とし穴がある。
警告メッセージについては、使用する状況として「重要な財務データなどの貴重な資産が失われる恐れがある」「システムへのアクセスまたは整合性が失われる恐れがある」「プライバシーまたは機密情報の制御が失われる恐れがある」「30秒以上処理がかかる恐れがある」の4つが挙げられている。
確認メッセージについては、「［OK］と［キャンセル］」というボタンの組み合わせは不可で、［はい］［いいえ］とするように記述されている。また、リスクの高い内容の場合については［いいえ］、それ以外は［はい］をデフォルトで選択状態にしておかなければならない。さらにアイコンは、削除したら元に戻せないような内容やセキュリティ上の確認以外は、過剰な表現を避けるために表示しないという規定がある。
画面右下のタスクバーに表示される通知メッセージは、NotifyIcon1.ShowBalloonTip(9000)で定義され、NotifyIcon.Iconにアイコン設定することが必須となる。
ガイドライン上での各種メッセージ定義と注意点
レイアウト設計時の注意点としては、視線の動きに合わせたレイアウトを推奨しており、具体的には画面の左上から下、もしくは右下へと、視線の動きに合わせて、選択項目や確認ボタンを配置することを規定している。
ガイドラインの推奨値とVisual Studio標準値のずれをなくすには？
初音氏は、ここまで話した中に度々出てきた「ガイドラインの推奨値とVisual Studioの標準値のずれ」を解消するための有効なツールとして、「Windows API Code Pack for .NET」があると紹介した。このツールは.NET Framework 3.5 SP1環境下であれば誰でも利用可能で、下記のマイクロソフトWebページからダウンロードができる。
- Windows API Code Pack for .NET[http://code.msdn.microsoft.com/WindowsAPICodePack]]
このWindows API Code Pack for .NETを使用することで解消できる問題の一例としては、タスクバーの右クリックから最近使ったファイルを開ける「ジャンプリスト」の作成や、Windows 7で色の変更が可能となったプログレスバーの作成、エラーメッセージのオプションへの［Close］ボタン設置などがあり、Windows 7特有の問題を解決可能となる。
最後に初音氏は、下記の8項目のデザイン原則を紹介し、これらを踏まえて開発を行って欲しいと締めくくった。
- コンセプトを減らして、信頼を高める
- どんなに小さいことでも重要である
- 外観と内容を重視する
- 探し回ることのないように、見つけやすくする
- 開始前のUXと質問（質問量は少なく）
- カスタマイズではなく個人設定にする
- エクスペリエンスのライフサイクル
- モバイルユーザー向けに作成する
