印刷用ページ       送信     
クリックして評価とフィードバックをお寄せください
MSDN
MSDN ライブラリ
テクニカルドキュメント
 デバイス アプリケーションのユーザー インターフェイスおよびデータの ...

  低帯域幅での表示をオンにする
デバイス アプリケーションのユーザー インターフェイスおよびデータの Visual Studio 2005 を使用した設計
 

Maarten Struys
PTS Software bv
OpenNETCF.org

November 2005

日本語版最終更新日 2006 年 4 月 18 日

適用対象:
   Microsoft Visual Studio 2005
   Microsoft .NET Compact Framework 2.0
   Windows Mobile 5.0
   Windows Mobile-based Pocket PCs
   Microsoft Windows CE

要約: Visual Studio 2005 の新機能のうち、.NET Compact Framework 2.0 アプリケーション用のユーザー インターフェイスおよびデータベースの設計に関する機能を説明します。この記事は、新しい開発環境、特に Visual Studio 2005 の一部である新しい Windows フォーム デザイナを紹介します。また、Visual Studio 2005 を手に入れればすぐに使える新しいコントロールを一通り紹介します。新しいコントロールを使用すれば、ポートレート(縦長)モードとランドスケープ(横長)モードの両方をサポートするアプリケーションが簡単に作成できます。Visual Studio 2005 では、複数のデバイスを簡単にターゲットにできます。また、フォームの継承により、既存のフォームを再利用し、拡張する方法も説明します。さらに、ビジネス用途のモバイル アプリケーションのほとんどが必要とするデータの保管とアクセスに関して、Visual Studio 2005 の新しいデータ デザイナを用いて、SQL Server 2005 Mobile Edition データベースを作成し、データを構築していく方法を説明します。この記事には、ローカルのデータベースを作成して、簡単なアプリケーションで使用する方法も書かれています。

Microsoft Download Center から Using_VS2005_to_Design_User_Interfaces_and_Databases_for_Device_Applications.msi をダウンロードしてください。

目次

はじめに
Windows Mobile 5.0 ベースの Pocket PC 用のシンプルなユーザー インターフェイスの設計
コントロールのドッキングと固定
Splitter コントロール
タブ オーダーの設定
デバイス フォーム ファクタの変更
ターゲット プラットフォームの変更
ビジュアルなフォームの継承
Visual Studio データベース ツールの使用
まとめ

はじめに

Visual Studio の新バージョンが出るたびに、ビジュアルなデザイナ ツールがより高機能になり、より多くのコードが自動生成されることで、開発者の生産性は向上してきました。コードが自動生成されることの大きな利点は、あちこちに張り巡らされる様々なコードの作成に集中力を奪われることなく、アプリケーションの中心的な機能にのみ没頭できることです。市場には、フォーム ファクタの異なる様々なデバイスが出まわっているので、最終的なユーザー インターフェイスにできるだけ近い、真のWYSIWYG(what-you-see-is-what-you-get)ユーザー インターフェイス デザイン ツールが重要になってきています。大量のデータをデバイス内に保管するアプリケーションが増えるにつれて、SQL Server Mobile データベースのテーブルやデータベースを開発環境内でビジュアルに設計できる機能が重要になってきています。Visual Studio 2005 は、ユーザー インターフェイスとデータの設計に関わる作業を軽減する素晴らしいデザイン ツールを提供します。

この記事に書いたとおり、コードを 1 行も追加することなく、ポートレート モードとランドスケープ モードとの間をダイナミックにモード変更できるユーザー インターフェイスを作成できます。共通の特徴を持つ複数のフォームを使用するアプリケーションを作成する場合は、フォーム デザイナに完全に対応したフォームの継承機能を利用して、個々のフォームに必要なコードの記述量を減らせます。さらに、アプリケーション内でローカル データベースを使用する場合は、Visual Studio 2005 デザイナ ツールを用いて、データベースを作成し、データを構築することもできます。

Windows Mobile 5.0 ベースの Pocket PC 用のシンプルなユーザー インターフェイスの設計

新しいデバイス アプリケーションの開発を始めるには、まず、Visual Studio 2005 でプロジェクトを新規作成する必要があります。作成するのは、C# または Visual Basic .NET の Smart Device プロジェクトで、Windows Mobile 5.0 が稼働する Pocket PC をターゲットにします。Windows フォーム デザイナ自体には直接関係ありませんが、この記事ではサンプル コードはすべて C# で示します。Visual Basic .NET のサンプル コードもすべてダウンロードできます。

デバイス アプリケーションを新規作成すると、Visual Studio 2005 は、ターゲット デバイスのサイズと一致する空のフォームを、実際のデバイスにできるだけ近いデバイス スキンを使って表示します。図 1 に示した[デバイス コントロール] ツールボックスを利用して、コントロールをアプリケーションのフォームへドラッグできます。

クリックすると大きな画像を表示します

図 1. Visual Studio 2005 のデザイナ ビュー

Visual Studio 2005 のツールボックスを見ると、Microsoft Visual Studio .NET 2003 に比べて、利用できるデバイス コントロールの数がかなり増えたことが分かります。新しいコントロールに慣れるには、そのコントロールを使った簡単なアプリケーションを作成し、コントロールのプロパティを眺め、動作を確認するのが最も良い方法です。もちろん、コントロールのオンライン ヘルプも参考になります。ユーザー インターフェイスのデザインを始めるとすぐに分かりますが、Windows フォーム デザイナによって、コントロールを簡単に整列でき、コントロール間の間隔の最小値を知ることができます。図 2 に示すように、ガイドの線が自動的に表示され、整然としたユーザー インターフェイスを短時間で作成することができます。

クリックすると大きな画像を表示します

図 2. ユーザー インターフェイスのレイアウトに役立つガイドの線

コントロールのドッキングと固定

フォームがポートレート(縦長)モードとランドスケープ(横長)モードの両方で正しく表示されるように、コントロールをコンテナ内の指定位置にドッキングまたは固定することができます。ドッキングと固定とでは、微妙な、しかし重要な違いがあります。コントロールをコンテナの 1 つまたは複数の端に固定した場合は、デバイスの表示の向きを変更しても、固定した端に対する相対位置が維持されます。コントロールをドッキングする場合は、コントロールの位置を決めるコンテナの端を指定します。コントロールをすべての端にドッキングすることもできます。この場合、コンテナ全体がコントロールで一杯になります。コンテナは、コントロールのホスト、言い換えるとコントロールの親になります。例えば、コンテナはフォーム全体の場合もありますし、GroupBox や Panel の場合もあります。

固定とドッキングの違いや、固定されたコントロールとドッキングされたコントロールの表示の向きを変更した時の振る舞いを見るには、簡単なユーザー インターフェイスを作成して、異なる背景色を持つ複数の Label コントロールを配置します。これで、固定、ドッキング、および向きの変更に伴う振る舞いを見ることができます。このユーザー インターフェイス デザイン自体には意味はありませんが、ドッキングと固定の違いが理解できるでしょう。また、ポートレート モードからランドスケープ モードへ変更する際の影響も示します。図 3 のようなユーザー インターフェイスを作成した場合を考えます。

クリックすると大きな画像を表示します

図 3. ポートレート モードの Pocket PC 上の、ドッキングも固定もされていないラベルとパネルを持つユーザー インターフェイス

上の 3 つのラベルは、パネルがホストです。一方、下の 2 つのラベルは、フォーム自体がホストです。フォームに追加したすべてのコントロールについて、固定を明示的に解除します。Visual Studio 2005 の既定の動作では、すべてのコントロールは、ホストするコンテナの上端と左端に固定されます。このユーザー インターフェイスは、ポートレート モードではよく見えますが、向きをランドスケープ モードに変更すると、図 4 に示すように、問題が生じます。

クリックすると大きな画像を表示します

図 4. ランドスケープ モードの Pocket PC 上の、ドッキングも固定もされていないコントロールを持つユーザー インターフェイス

ポートレート モードで表示されていたラベルの一部が、ランドスケープ モードでは見えなくなりました。パネルの label1 を含む部分が、スクリーンからはみ出しています。また、ランドスケープ モードでは、label5 も消えてしまっており、ディスプレイの左右両側が空白のままです。つまり、ランドスケープ モードでは、ポートレート モードのユーザー インターフェイスの一部分しか表示されていないように見えます。

実際にコードを書かずに、この問題を解決するには、.NET Compact Framework 2.0 アプリケーションの新機能である、ドッキングと固定を使用します。Anchor プロパティを設定するだけで、コントロールをスクリーンの 1 つまたは複数の端に固定できます。コントロールの固定とは、固定された端からの相対位置が常に一定ということです。これは、表示の向きには依存しません。Dock プロパティを使用すれば、特定のコントロールに対して、その親コントロールの端に合わせるように指定したり、画面の一定の領域を満たすように指定したりできます。複数のコントロールを親コントロールの同じ端にドッキングすると、コントロールは重なり合います。図 5 では、いくつかの点で 図 3 と差異があることが分かります。ここでは、コントロールは固定され、ドッキングされています。

クリックすると大きな画像を表示します

図 5. ポートレート モードの Pocket PC 上の、ドッキングされ、固定されたコントロールを持つユーザー インターフェイス

図 5 は、ラベルがドッキングされた状態を示します。上の 3 つのラベルは、すべてパネルがオーナーです。一番上のラベルは、ドッキングされていませんが、パネル コントロールの左端、上端、右端に固定されており、そのパネル コントロールが、フォームの上端にドッキングされています。画面の向きにかかわらず、左端、上端、右端からラベルへの距離は一定です。ユーザー インターフェイスをランドスケープ モードで表示すると、ラベルのサイズが調整されます。パネル コントロール内の残り 2 つのラベルは、縦に並んで表示されています。この 2 つは、パネル コントロールの下端にドッキングされています。タブ オーダーは、ラベルの表示順で決定されます。ここで画面の向きをランドスケープ モードに変更しても、図 6 に示すように、フォーム上のコントロールはすべて表示範囲に収まります。また、コントロールがフォーム全体を占有しています。

クリックすると大きな画像を表示します

図 6. ランドスケープ モードの Pocket PC 上の、ドッキングされ、固定されたコントロールを持つユーザー インターフェイス

図 6 に示した ユーザー インターフェイスは、図 4 に示したものより、ずっと見映えが良くなっています。それぞれのコントロールがランドスケープで正しく表示できるように、サイズ調整されているためです。いろいろと試してみて、ドッキングと固定が、ポートレートとランドスケープの 2 つのモードでコントロールの配置に与える影響を把握してください。

Visual Studio 2005 では、ユーザー インターフェイスを両方の向きのモードで簡単に表示できます。デザイナ ビューでもそうです。デザイナ ビューでデバイスの向きを変更するには、フォーム上のコントロールが配置されていない場所、フォームのタイトル バー、またはデバイス スキンを右クリックして表示されるショートカット メニューで、[<フォーム クラスの名前> の選択]を選んでフォーム全体を選択します。アプリケーションに 1 つのフォームしかなく、そのフォームに Visual Studio 2005 が割り当てた初期状態の名前を使っている場合、<フォーム クラスの名前>Form1 になります。フォーム全体を選択すると、デバイス スキンを右クリックして表示されるショートカット メニューには、[左に回転][右に回転] という追加項目が表示されます。図 7 に示すように、これらを用いて画面の向きを変更します。他の方法として、フォーム全体の選択後、ツールバーのボタンを使用して向きを変えることもできます。

クリックすると大きな画像を表示します

図 7. デザイナ ビューでの画面の向きの変更

Splitter コントロール

.NET Compact Framework 2.0 で利用できる新しいコントロールには、名前からは使い方がよく分からないものが 1 つあります。Splitter コントロールです。Splitter コントロールを、ドッキングされたコントロールと併用すると、完全版 .NET Framework の Splitter コントロールと同じように、コントロールのサイズを実行時に変更できます。

設計時に Splitter コントロールを追加するだけで、実行時に分割線が表示され、サイズ変更が可能になります。ドッキングされたコントロールと Splitter コントロールをフォームに追加する順番によって、分割線がどのドッキングされたコントロールに対して作用するかや、どのように表示されるかが決まります。Visual Studio のオンライン ヘルプによれば、Splitter コントロールは、直前にドッキングされたコントロールのサイズ変更を可能にします。ドッキング順は手動で変更できないため、サイズ変更させたいドッキングされたコントロールを追加した直後に、Splitter コントロールを追加する必要があります。また、図 8 に示すように、Splitter コントロールは、サイズ変更させたいドッキングされたコントロールの端にドッキングする必要があります。

クリックすると大きな画像を表示します

図 8. Splitter コントロールのデザイナ ビュー

図 8 のユーザー インターフェイスは、次の手順で作成します。まず、3 つのピクチャを順にフォームに追加し、すべてフォームの上端と右端にドッキングします。続いて、図 8 でフォームの左下にある最後のピクチャ ボックスを、残りの部分を埋め尽くすようにドッキングします。その後、2 つの分割線を左下のピクチャ ボックスにドロップし、それぞれピクチャ ボックスの上端と右端にドッキングします。

このユーザー インターフェイスをデザイナ ビューで見ると、フォームの右側のピクチャ ボックスは水平方向にのみサイズ変更でき、左側のピクチャ ボックスは水平、垂直の両方向にサイズ変更できるように見えるでしょう。しかし、水平方向の分割線を移動すると、図 9 のように、分割線の位置によって、すべてのコントロールが変更を受けます。右下のピクチャ ボックスは、フォームの右端にドッキングされており、常にフォームの右端にできるだけ多くのスペースを占めようとするため、このような振る舞いになります。この例で、分割線に直接関連付けられていないコントロールでも、サイズが変更されるという影響を受けることが分かります。この例は、分割線とドッキングされたコントロールの関係の理解にはなりますが、このような複雑な振る舞いをするユーザー インターフェイスの作成は、お薦めできません。

クリックすると大きな画像を表示します

図 9. Splitter コントロールを用いたドッキングされたコントロールのサイズ変更

Splitter コントロールがドッキングされたコントロールにどのような影響を与えるかをユーザーに明示するために、コントロールをドッキングする順番を考慮する必要があります。図 10 に示すように、ドッキングされたコントロールに作用する Splitter コントロールは、他のコントロールを共通のドッキング領域に追加する前に、追加しなければなりません。

クリックすると大きな画像を表示します

図 10. サイズ変更させたいドッキングされたコントロールの直後に作成された Splitter コントロールのデザイナ ビュー

同じユーザー インターフェイスを異なる順序で作成すると、その違いが分かります。水平方向の Splitter コントロールを、上のピクチャ ボックスを作成した直後に作成します。次に、右側のピクチャ ボックスを、続いて、垂直方向の Splitter コントロールを作成します。最後に、左側のピクチャ ボックスを作成します。実行時のサイズ変更の振る舞いは変わりませんが、図 11 に示すように、ピクチャ ボックスと分割線が作成される順序が変わり、分割線によって異なるコントロールのサイズを変更できることをユーザーに示すことができます。

クリックすると大きな画像を表示します

図 11. 正しい順序で作成された Splitter コントロールを用いた、ドッキングされたコントロールのサイズの変更

タブ オーダーの設定

どのコントロールがフォーカスを得るか、すなわち、どのコントロールがキー入力を受け付けるかを決定するのに、タブ オーダーが関与します。「タブ オーダー」と呼ばれるのは、キーボード(Pocket PC ではソフトな入力パネルの場合もあります)の [TAB] キーを用いて、コントロール間でフォーカスを移動できるためです。

Visual Studio .NET 2003 では、キー入力を受け付けることができるコントロールのタブ オーダーは、固定されていました。タブ オーダーには、設計時にコントロールを作成した順序が反映され、コントロールを削除して再度追加しない限り、順番を変更することはできませんでした。Visual Studio 2005 では、ユーザー インターフェイスのコントロールをすべて作成した後でも、タブ オーダーが変更可能です。これにより、タブ オーダーに留意することなく、より柔軟にユーザー インターフェイスを設計できます。例えば、図 12 は、プロジェクトの元のタブ オーダーのデザイナ ビューを示します。

クリックすると大きな画像を表示します

図 12. 元のタブ オーダー

このプロジェクトは、タブ オーダーの例を示す目的で作成し、ユーザー インターフェイスは非常に簡単です。フォーム上のコントロールは、次の順序で作成されています。まず、ボタンを作成し、続いて DateTime コントロール、最後が 2 つのテキスト ボックスです。コントロールを作成した順序によって、タブ オーダーの初期値が決まります。図 12 の丸で囲んだ [レイアウト] ツールバーの [タブ オーダー] ボタンをクリックすると、タブ オーダーを表示、変更できます。

このアプリケーションのタブ オーダーを初期値のまま使用すると、アプリケーション実行時のコントロール間の移動はあまり良くありません。最初は、ユーザー インターフェイスの入力フォーカスは、ボタンに設定されています。[TAB] キーを押すと、入力フォーカスは DateTime コントロールに移ります。再度 [TAB] キーを押すと tBox1 に、そして最後に tBox2 に移動します。ユーザーにとっては、すべてのコントロールが上から下へと移動するほうが、より自然です。Visual Studio .NET 2003 では、入力フォーカスが上から下へと移動するには、移動させたい順序でコントロールを作成するしかありませんでした。

Visual Studio 2005 では、[レイアウト] ツールバーの [タブ オーダー] ボタンをオンにすれば、入力フォーカスを受け取れるコントロールをクリックしていくだけで、タブ オーダーを変更できます。つまり、タブ オーダーのことを考えることなく、コントロールをフォームに追加できるのです。図 13 に示すように、タブ オーダーは後で変更できるからです。

クリックすると大きな画像を表示します

図 13. デザイナ ビューで変更したタブ オーダー

ここでアプリケーションを実行すると、入力フォーカスがユーザー インターフェイスの一番上から下へと移るため、コントロール間の移動はより自然です。個々のコントロールのタブ オーダーは、TabIndex プロパティを使って設定することもできます。また、ユーザーがフォーム内で [TAB] キーを押した時、そのコントロールにフォーカスが移動できるかどうかも、TabStop プロパティを設定することで指定できます。これらのプロパティは、キー入力を受け付けることができるコントロールにのみ実装されています。

デバイス フォーム ファクタの変更

最初の Pocket PC の画面解像度は、240 × 320 ピクセルでした。現在流通している Pocket PC の多くは、異なる画面解像度を持ち、中には正方形の画面を持つものもあります。このようなデバイスのすべてでアプリケーションの見映えが良くなるようにするために、FormFactor プロパティを設定します。FormFactor プロパティは、設計時のみの値です。すなわち、アプリケーションそのものには影響を与えません。FormFactor プロパティを使い、デバイスに様々な画面解像度を設定することで、ユーザー インターフェイスが異なるフォーム ファクタを持つデバイスで正しく表示されることを設計時に確認できます。ご覧のとおり、図 14 は Pocket PC で実行される単純なテキスト エディタです。ダウンロード サンプル コードを見れば、.NET Compact Framework 2.0 を使ってマネージ コードを作成するときに利用できる豊富な機能が実感できるでしょう。このサンプルのエディタの全機能は、ファイルのオープン、保存も含めて、わずか 30 行のソース コードで実現できます。もちろん、このサンプルの機能は限定的なもので、スペルチェック、文法チェックや、検索、置換といったエディタの典型的な機能は含まれていませんが、サンプルはエディタとして完全に機能します。

クリックすると大きな画像を表示します

図 14. 単純なテキスト エディタのユーザー インターフェイスを持つ Pocket PC アプリケーション

このアプリケーションを、正方形の画面解像度を持つ Pocket PC で実行する場合を考えます。コントロールの固定のおかげで、コードを書くことなく、同じユーザー インターフェイスを保つことができます。新しい設計時のみのプロパティ FormFactor によって、Visual Studio 2005 のデザイナでアプリケーションの外観を確認できます。図 15 に示すとおり、新しいスキンが表示され、ユーザー インターフェイスは新しいデバイス フォーム ファクタに合わせて自動的に調整されます。

クリックすると大きな画像を表示します

図 15. 正方形画面のフォーム ファクタを使用して表示した、単純なテキスト エディタのユーザー インターフェイスを持つ Pocket PC アプリケーション

フォーム ファクタは、Visual Studio 2005 で簡単に変更できます。アプリケーションをリコンパイルする必要さえありません。フォーム ファクタを変更しても、Pocket PC デバイスであることに変わりはないので、Pocket PC 固有のコントロールを使いつづけることができます。変更されるのは、設計時のフォームのレイアウトのみです。

では、もし完全に異なるデバイスに変更したらどうなるでしょうか。同じアプリケーションを Smartphone デバイスで使用する場合を想像してください。

ターゲット プラットフォームの変更

あるアプリケーションのターゲット プラットフォームを変更することは、Visual Studio .NET 2003 ではサポートされていませんでした。例えば、Pocket PC 用のアプリケーションを作成した場合、Visual Studio .NET 2003 では、プロジェクトのターゲットを Smartphone に変更することはサポートされていませんでした。最善の手法は、実作業のロジックをすべてユーザー インターフェイスのロジックから切り離し、実作業のロジックは新しいターゲットのプラットフォームでも再利用し、ユーザー インターフェイスは設計しなおすというものでした。

Visual Studio 2005 では、ターゲット プラットフォームを変更することが可能です。もちろん、ソフトウェア開発者の目から見れば、実作業のロジックをユーザー インターフェイスのロジックから切り離すことは、それでも有用でしょう。しかし、Visual Studio 2005 で異なるプラットフォームにターゲットを変更できることによって、アプリケーションのユーザー インターフェイスが異なるハードウェアに対応するように修正する際の生産性が向上します。実際、ターゲット プラットフォームを変更しても、変わるのはユーザー インターフェイスだけなのです。プロジェクトが生成するアプリケーションの他のすべての要素は同じです。Pocket PC で利用できるコントロールのいくつかは Smartphone では利用できないため、デザイナは、このようなコントロールを Smartphone で利用できる最も近いコントロールに置き換えます。

Visual Studio 2005 を使えば、プロジェクトのターゲット プラットフォームを変更できます。デザイナは、新しいターゲット プラットフォームの要件を満たすような、ユーザー インターフェイスの改訂を支援します。Visual Studio 2005 で新しいターゲット プラットフォームに変更するには、[プロジェクト] メニューの [ターゲット プラットフォームの変更] を選択します。このコマンドを選択すると、図 16 に示すように、現在のターゲット プラットフォームと、選択できる新しいターゲット プラットフォームの一覧を示すダイアログ ボックスが表示されます。

クリックすると大きな画像を表示します

図 16. Pocket PC から Smartphone へのターゲット プラットフォームの変更

[OK] をクリックすると、Visual Studio はターゲットのプロジェクトを変更します。つまり、プロジェクトを閉じて開き直しますが、フォーム デザイナが、アプリケーションを Smartphone のフォーム ファクタで表示する点が異なります。Visual Studio は、コードや、フォーム上で継続して利用できる元のコントロールは全く変更しません。ただし、Smartphone の小さい画面に合わせて、コントロールのサイズ変更が必要な場合があります。

図 17 は、Smartphone がサポートしない、いくつかのコントロールを示します。ターゲット プラットフォームがサポートしないコントロールは、フォーム上に警告表示(三角形に感嘆符 "!")が付き、プロパティが淡色表示になるので、すぐに区別できます。Visual Studio 2005 は、サポートされないコントロールのサポートされるコントロールへの変更を支援します。サポートされないコントロールを選択して、コントロールの上端にある矢印をクリックすると、比較的近い機能を持つサポートされるコントロールが並ぶ、ポップアップ メニューが表示されます。図 17 に示すように、ボタンの場合、Visual Studio は、テキスト ボックス、またはメニュー項目への変換を支援します。ボタンをメニュー項目に変更すると、メニュー項目は元の button_Click イベントをフックするようになり、メニュー項目は Pocket PC のボタンと同じ機能を獲得します。また、図 17 では、SaveFileDialog、および OpenFileDialog コントロールが、Smartphone ではサポートされないことが分かります。これらのコンポーネントはボタンではないため、代わりとなる Smartphone コントロールに単純に変換できません。コントロールの変更に多少の作業が必要となります。このダウンロード サンプル コードの場合、ファイルのオープンと保存のダイアログを独自に用意するのが一般的な方法です。ダウンロード サンプル コードでは、これらのダイアログは実装されていませんが、基本概念は理解できるでしょう。

クリックすると大きな画像を表示します

図 17. Smartphone アプリケーションに変換された Pocket PC アプリケーション

すべてのボタンをメニュー項目に変換し、OpenFileDialog および、SaveFileDialog コンポーネントを削除すれば、プロジェクトをビルドし、実行できます。図 18 に示すように、同じアプリケーションが Smartphone 上で実行されます。ターゲット プラットフォームの変更は、元に戻すことはできません。Visual Studio は、アプリケーションのコードは変更しませんが、ユーザー インターフェイスのレイアウトには変更を加えます。

クリックすると大きな画像を表示します

図 18. Smartphone 上で実行する単純なテキスト エディタ

アプリケーションを異なるターゲット デバイスに変更するには、多少の作業は必要ですが、ほとんどの場合、新しいターゲット デバイス用のユーザー インターフェイス全体を作成するのに比べて、少ない作業量で済みます。

ビジュアルなフォームの継承

この数年間、多くのデバイス開発者が、フォームの継承に対してビジュアルなサポートを要望していました。Visual Studio .NET 2003 では、ビジュアルなフォームの継承はスマート デバイス プロジェクトではサポートされていません。ただし、フォームを別のフォームから継承する際に、C# プリプロセッサを用いて条件コンパイルを駆使すれば、限られた範囲でデザイナ サポートが可能です。これに対して、Visual Studio 2005 は、ビジュアルなフォームの継承をデザイナで完全にサポートしています。この重要な追加機能によって、フォームの再利用、拡張が可能になり、新しいフォームをいつも最初から作成する必要はなくなります。

ビジュアルなフォームの継承を示すために、まず、他のフォームを後で派生するのに使用できる簡単な基本フォームを説明します。必ずしも必要というわけではありませんが、独立したクラス ライブラリを作成して、そこに基本フォームを保管することには意味があります。基本フォームをプロジェクトの一部として作成すると、他のアプリケーションで再利用しようとする際に探しにくくなります。その上、Visual Studio のフォーム デザイナは、基本フォームから派生したフォームを表示する前に、メタデータを読み込む必要があります。その結果、基本フォームと派生フォームが同じプロジェクトに含まれる場合、基本フォームから継承するのに 1 回余計にコンパイルする必要が生じます。基本フォームを、独立したクラス ライブラリ内に作成すれば、この必要はありません。

基本フォームに関しては、将来を見越して考えることが重要です。特に、継承フォームで修正できるコントロールと、修正できないコントロールがあることを把握しておく必要があります。コントロールやその振る舞いを修正するには、コントロールのアクセス修飾子を private 以外に設定する必要があります。派生フォームでは、private コントロールのプロパティは変更できません。図 19 は、アプリケーションで再利用できる簡単な基本フォームを示します。

クリックすると大きな画像を表示します

図 19. 独立したクラス ライブラリに保管された基本フォーム

この基本フォームには、クリック時にすべての派生フォームで同じアクションを実行する private ボタンが 1 つあります。このボタンは private なので、ボタン自体もそのメンバーも、派生フォームからはアクセスできません。この基本フォームには、virtual メソッドとして実装したイベント ハンドラを持つ protected ボタンもあります。一般的な virtual メソッドと同様に、イベント ハンドラは、派生フォームで個別にオーバーライドできます。この 2 番目のボタンは protected のため、ボタン自体、およびそのメンバーは派生フォームからアクセスできます。派生フォームには、別のクリック イベント ハンドラを作成することもできます。この場合、基本フォームのイベント ハンドラと派生フォームのイベント ハンドラの両方が実行されます。また、この基本フォームには、派生フォームからアクセスできる protected ラベルがあります。なお、図 19 の基本フォームには、メニューがありません。既定では、デザイナは、新規に作成したフォーム上に mainMenu1 という名前の Menu コントロールを自動的に作成します。基本フォームにメニューを持たせて、派生フォームで拡張することは可能ですが、注意しながら派生フォームのメニューを削除し、基本クラスのメニューのアクセス プロパティを protected、または public にする必要があります。

次のサンプル コードが示すとおり、基本フォームは、複数の派生フォームによって共有される共通の機能を含みます。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace BaseFormLibrary
{
    public partial class BaseForm : Form
    {
        public BaseForm()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            label1.Text = "Same action on all forms";
        }

        protected virtual void button2_Click(object sender, EventArgs 
e) { label1.Text = "Default action"; } } }

BaseForm メソッドには、2 つのボタン クリック イベント ハンドラがあります。button1_Click イベント ハンドラは private メソッドなので、オーバーライドできません。button1_clickprivate で実装することで、派生フォームで button1 をクリックすると、常に同じアクションが実行されます。button1_Click イベント ハンドラを protected virtual で作成することも可能です。この場合、button1_Click イベント ハンドラを派生フォームでオーバーライドでき、独自の機能を実装できます。

button2_Click イベント ハンドラの修飾子に注目してください。フォーム デザイナは button2_Click イベント ハンドラのコードも private アクセス修飾子で生成しますが、イベント ハンドラの宣言はソース ファイルで修正できます。button2_Click イベント ハンドラを protected かつ virtual と宣言することで、派生フォームでオーバーライドでき、button2 のクリック時に独自のイベント ハンドラを実行できます。派生フォームで button2_Click イベント ハンドラをオーバーライドしなければ、基本フォームの button2_Click イベント ハンドラが実行されます。基本クラスからクラスを派生する際の振る舞いと全く同じです。button2 が protected で宣言されているため、この記事のサンプル コードでは例示していない、別の振る舞いも可能です。 つまり、protected で宣言された button2 のプロパティやイベント(クリック イベントを含む)は派生フォームからアクセスできるため、別のイベント ハンドラをクリック イベントに追加することで、基本フォームのイベント ハンドラと派生フォームのイベント ハンドラを両方とも実行できます。

基本フォームを使用するには、スマート デバイス プロジェクトを新規作成し、BaseFormLibrary アセンブリへの参照を追加します。Device Application 型のスマート デバイス プロジェクトを新規作成すると、デザイナは、プロジェクトにフォームを自動的に追加します。このフォームは System.Windows.Forms.Form から派生されたフォームです。作成した基本フォームからフォームを派生するには、フォームのソース ファイルに名前空間 "BaseFormLibary" の using 宣言を追加して、コード内のフォームの宣言を次のように修正するだけです。

    public partial class Form1 : Form

から

    public partial class Form1 : BaseForm

に。こうすると、アプリケーションのフォームが以前作成した基本フォームから派生します。図 20 に示すように、このフォームのデザイナ ビューには、基本クラスのコントロールと独自に追加したコントロールのすべてが表示されます。

クリックすると大きな画像を表示します

図 20. 基本フォームのコントロールを含む派生フォームのデザイナ ビュー

基本フォームに配置されたコントロールは、派生フォームに継承されています。継承されたコントロールかどうかは、図 21 に示したアイコンが左上隅に表示されているかどうかで区別できます。

Aa454904.ui_data_designers_netcf2_21(ja-jp,MSDN.10).gif

図 21. 継承アイコン


中央のボタンが基本フォームの private のボタンで、オーバーライドできないということが、左上隅にもう 1 つ表示されたロック アイコンにより分かります。また、このボタンのプロパティが淡色表示になっているのも、派生フォームからは修正できないことを表します。もちろん、継承フォームに新たなコントロールを追加することは可能です。

図 20 の一番上のボタンは、継承フォームに追加された新しいボタンです。ダウンロード サンプル コード に含まれる VisualInheritance という名前のアプリケーションには、基本フォームから継承された 2 つのフォームがあります。メイン フォームは、[Overridable action] ボタンのクリック イベント ハンドラをオーバーライドして、2 番目の継承フォームを開きます。2 番目のフォームでは、[Overridable action] ボタンのクリック イベント ハンドラがオーバーライドされていないので、このボタンをクリックすると、基本フォームで定義された既定のイベント ハンドラが実行されます。次のサンプル コードは、このアプリケーションのメイン フォームのソース コードです。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using BaseFormLibrary;

namespace VisualInheritance
{
    public partial class Form1 : BaseForm
    {
        public Form1()
        {
            InitializeComponent();
        }

        protected override void button2_Click(object sender, EventArgs 
e) { Form2 form = new Form2(); form.ShowDialog(); } } }

このサンプル コードには、注目すべき点があります。まず、クラス宣言で、このフォームは BaseForm から派生されている点です。次に、button2 のイベント ハンドラがオーバーライドされている点です。派生フォームのイベント ハンドラの機能を別のもので置き換えたい場合は、新しいイベント ハンドラを付け加えるのではなく、button2_Click イベント ハンドラをオーバーライドする必要があります。次のサンプル コードに示すとおり、Form2 のコードはもっと単純です。フォームに追加作成された button3 のイベント ハンドラがあるだけです。Form2 で button1 や button2 をクリックすると、BaseForm のイベント ハンドラが実行されます。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using BaseFormLibrary;

namespace VisualInheritance
{
    public partial class Form2 : BaseForm
    {
        public Form2()
        {
            InitializeComponent();
        }

        private void button3_Click(object sender, EventArgs e)
        {
            label1.Text = "Local button clicked";
        }
    }
}

以上が、Windows フォーム デザイナのビジュアルなフォームの継承機能の概要です。派生フォームで再利用したいコントロールは、何でも基本フォームに置くことができます。ただし、派生フォームで振る舞いを変更したい場合は、必ずコントロールの Modifiers プロパティを protected、または public に変更します。Modifiers プロパティを private 以外の値に設定しさえすれば、派生フォームでコントロールを隠すことも、ドッキングすることも、サイズ変更することもできます。

Visual Studio データベース ツールの使用

SQL Server 2005 Mobile Edition(以下、SQL Mobile)は SQL Server CE の新しい名前です。Visual Studio 2005 では、SQL Mobile データベースの使用に関しても、重要な機能が提供されています。Visual Studio で、初めて、特別な設定なしでデータベースを作成できるようになりました。Visual Studio 2005 が登場するまでは、コード内で、またはデバイス上の QueryAnalyzer を使用して、デバイス側でローカルに SQL Server CE データベースを作成することしかできませんでした。Visual Studio 2005 では、統合された Visual データベース ツールを用いて、データベースを作成できます。また、データベースにデータを追加したり、型付きデータセットを作成することもできます。

このセクションでは、Visual Studio 2005 でデータを扱う方法の概要を説明します。SQL Mobile の操作方法の詳しい解説は省いて、Visual Studio データベース ツールの説明だけを行います。ただし、全体を理解するために、Visual Studio 内での SQL Mobile データベースの作成方法と、簡単なアプリケーションでのデータベースの使用方法、型付きデータセットの作成方法、データ バインドを用いたコントロールによるデータ表示方法は、一通り紹介します。

Visual Studio 2005 内で SQL Mobile データベースを作成するには、Visual Studio 2005 サーバー エクスプローラを使用します。既存のプロジェクトに新しい SQL Mobile データベースを追加したり、既存の SQL Mobile データベースのスキーマを修正したり、SQL Mobile データベースにデータを追加したり、ActiveSync 最新版を使用して既に配置されたデータベースを検査することができます。

まず、プロジェクトを新規作成して、アプリケーションで使用する簡単なデータベースを作成します。作成するデータベースは、簡単な DVD コレクションのデータベースです。サンプルなので、非常に簡単な構造で、DVD のタイトルとジャンルだけを格納します。データベースは、2 つの異なるテーブル、DVD_Titles と DVD_Categories からなります。サーバー エクスプローラを使用することで、データベースを開発マシン上にローカルに作成できます。データベースをプロジェクトに追加して、アプリケーションとともにデバイスに配置する方法は、後で説明します。

Visual Studio 2005 で SQL Mobile データベースを作成する方法は、いくつかあります。プロジェクトに新しいデータ接続を追加することでデータベースを作成するには、図 22 に示すように、サーバー エクスプローラ[データ接続] を右クリックして、[接続の追加] を選択します。

注    サーバー エクスプローラが Visual Studio 2005 で表示されていない場合は、Visual Studio 2005 の [表示] メニューで [サーバー エクスプローラ] をクリックして表示します。

クリックすると大きな画像を表示します

図 22. スマート デバイス プロジェクトへのデータベース接続の追加

Visual Studio は、図 23 の左側に示した、接続を追加するダイアログ ボックスを表示します。このダイアログ ボックスでは、既存の SQL Mobile データベースに接続したり、データベースを新規作成することができます。デバイスが ActiveSync で接続されていれば、デバイス上にデータベースを作成することも、デバイス上の既存のデータベースに接続することもできます。データベースを新規作成する場合は、まず開発マシン上にローカルに作成し、その後アプリケーションの一部としてデバイスに配置します。

クリックすると大きな画像を表示します

図 23. [接続の追加] ダイアログ ボックス(左)、[SQL Server 2005 Mobile Edition データベースの新規作成] ダイアログ ボックス(右)を用いたローカルな SQL Mobile データベースの新規作成

[接続の追加] ダイアログ ボックスでは、既存のデータベースを参照するか、データベースを新規作成します。[作成] ボタンをクリックすると、[SQL Server 2005 Mobile Edition データベースの新規作成] ダイアログ ボックスが表示されます。図 23 では、新しいデータベースを開発マシンの My Documents フォルダに作成します。また、このダイアログ ボックスには、データベースを暗号化するオプションがあり、セキュリティ パスワードを追加できます。この記事の例では、データベースの名前として MyDVDCollection を指定するだけで構いません。[OK] をクリックすると、Visual Studio 2005 はデータベースを作成します。[接続の確認] ボタンをクリックして、データベースへの接続を確認することもできます。

接続が有効になったら、次に、データベースにテーブルを作成します。サーバー エクスプローラ[データ接続] の下に、新規に作成したデータベースが表示されます。データベースの下を表示させると、[テーブル] という項目があります。テーブルを新規作成するには、[テーブル] を右クリックして、[テーブルの作成] をクリックします。図 24 に示すように、[新しいテーブル] ダイアログ ボックスが表示されます。

クリックすると大きな画像を表示します

図 24. データベースに追加するテーブルの新規作成

データベースに追加するテーブルを作成して、列の名前、データ型などの、列固有の属性をテーブルに設定します。[OK] をクリックして、新しいテーブルをデータベースに追加します。このダイアログ ボックスで複数のテーブルを作成できます。

ここまでは、アプリケーションのコードをまだ 1 行も書いていません。データベースとテーブルの作成には、Visual Studio のデータ デザイナ ツールを使用してきました。新規作成したデータベースへのデータの入力にも、Visual Studio のサーバー エクスプローラが使えます。テーブルにデータを入力するには、図 25 に示すように、サーバー エクスプローラでデータベースの [テーブル] ノードの下にあるテーブルを右クリックして、[開く] をクリックし、サーバー エクスプローラでそれぞれのテーブルを開いて、データを追加します。

クリックすると大きな画像を表示します

図 25. テーブルへのデータの追加

新規作成したデータベースをアプリケーションで利用するには、アプリケーションにデータ ソースを追加する必要があります。Visual Studio 2005 では、[データ] メニューの [新しいデータ ソースの追加] をクリックします。図 26 に示すように、データ ソース構成ウィザードが起動します。

クリックすると大きな画像を表示します

図 26. データ ソース 構成ウィザードを用いたデータ ソースの種類の選択

このウィザードの最初のページでは、データ ソースの種類を選択します。データ ソースの種類は、データの取得元がデータベース、Web サービス、アプリケーション オブジェクトのいずれであるかを表します。図 26 では、データ ソースの種類としてデータベースが選択されています。次のページでは、データ接続を選択します。図 27 に示すように、ウィザードは、選択できる既存の接続を表示します。このウィザードで新しいデータ接続を作成することもできます。新しいデータ接続を作成するには、[新しい接続] ボタンをクリックします。データベースが存在しない場合や、データベースを初めて使用する場合は、新しい接続が必要です。このボタンは、図 23 に示した [接続の追加] ダイアログを開きます。ここでは、既に MyDVDCollection データベースが開発マシン上に存在するので、データ ソース 構成ウィザードではこれを選択します。図 27 に示すように、ウィザードは、データベースを現在のプロジェクトに追加するかどうか聞いてきます。[はい] をクリックすると、Visual Studio 2005 はデータベースのコピーをプロジェクトに追加します。そして、Visual Studio 2005 でアプリケーションを実行すると、データベースをアプリケーションとともに配置します。

クリックすると大きな画像を表示します

図 27. 選択したデータベースを接続に追加するかどうかを尋ねるメッセージ

データ ソース 構成ウィザードは、データをアプリケーションのコントロールにバインドできる型付きのデータセットを生成します(データセットの他にもデータ バインドのできるオプションがありますが、この記事では省略します)。データセットは、アプリケーションで使用するデータを一時的に保管するデータ テーブルを含むオブジェクトです。データセットを作成すると、Visual Studio は、データセット内のデータにアクセスし、編集し、データベースとデータセットの間でデータを双方向に転送するコードを自動生成します。これにより、記述しなければならないコードの量が減らせます。このアプリケーションは、データベースに既に存在するデータを表示するだけなので、コードを書く必要が全くありません。アプリケーションは生成されたコードだけで動作します。

最後に、図 28 に示すように、ウィザードが作成するデータセットの一部となるデータベース オブジェクトを選択します。

クリックすると大きな画像を表示します

図 28. データ ソース構成ウィザードを用いたデータベース オブジェクトの選択

データセットで使用できるすべてのデータを設定するには、単純にすべてのテーブルを選択します。[完了] をクリックすると、ウィザードは、アプリケーションでデータベースのデータを表示するのに利用できる型付きのデータセットを作成します。このデータセットは、データ バインドを利用して、個々のデータ項目をユーザー インターフェイスのコントロールにバインドします。アプリケーションは、MyDVDCollection データベースを使用して、データグリッド コントロールに取得できた DVD タイトルの一覧を表示し、対応するジャンルを親子関係の形で示します。

DVD のタイトルを格納するテーブルとジャンルを格納するテーブルの関係を、データセットで定義する必要があります。ここでも、Visual Studio 2005 のデザイナが活躍します。この場合は、図 29 に示すデータセット デザイナです。

クリックすると大きな画像を表示します

図 29. データセット デザイナ

データセット デザイナを開くには、ソリューション エクスプローラで MyDVDCollectionDataSet.xsd ファイルを右クリックして、[デザイナの表示] をクリックするか、または、図 29 に示すように、[データ ソース] ペインにある項目のいずれかを右クリックして、[デザイナで DataSet を編集] をクリックします。[データ ソース] ペインが表示されていない場合は、[データ] メニューの [データ ソース] をクリックして表示します。

データセット デザイナは、データセットを構成するテーブルをビジュアルに表示します。テーブル間のリレーションシップを作成するには、連結する一方のテーブルのフィールドを選択して、もう一方のテーブルへドラッグします。この操作を行うと、[リレーションシップ] ダイアログ ボックスが表示されます。このダイアログ ボックスでは、データセット内でテーブルを関連付ける列を指定します。この例では、DVDTitles が親テーブルで、DVDCategories が子テーブルです。図 30 に示すように、2 つのテーブルは DVD_CategoryID 列 で関連付けられています。[リレーションシップ] ダイアログ ボックスは、テーブルを右クリックして、[追加] の下の [Relation] をクリックしても表示できます。

クリックすると大きな画像を表示します

図 30. 2 つのテーブル間のリレーションシップの定義

このプロジェクトのデータベースでは、データセットを作成し、データセットのリレーションシップを定義しました。残る作業は、データのアプリケーションでの表示です。このサンプルは、非常に単純で、SQL Mobile データベースを利用するアプリケーション作成における Visual Studio のデザイナの機能を示すのが目的です。ユーザー インターフェイスも単純で、DVD のタイトルを入れる DataGrid コントロールと各 DVD タイトルに対応するジャンルを表示する Textbox コントロールのみです。[データ ソース] ペインでは、特定のユーザー インターフェイス コントロールを、各々の列やテーブル全体に設定できます。まず、店に表示させたい列またはテーブルをクリックし、その後、下矢印ボタンをクリックして、データの表示に使用できるユーザー インターフェイス コントロールを表示させます。次に、図 31 に示すように、フォームで表示したいユーザー インターフェイス コントロールを選択して、フォームへドラッグします。このようにしてフォームに追加したコントロールは、関係付けられたデータに自動的にバインドされます。したがって、データベースに存在するデータの内容を表示させるために、コードを書く必要はありません。

クリックすると大きな画像を表示します

図 31. データ バインド済みコントロールのアプリケーションへの追加

DVDTitles と DVDCategories 間の既存のリレーションシップを利用するには、DVD Category 列を、DVDTitles テーブルの下の子テーブルからドラッグします。データベースは、アプリケーションとともにデバイスに配置され、図 32 に示すように、すぐに使用できます。

クリックすると大きな画像を表示します

図 32. 完成した DVD コレクションのアプリケーション

データベースにレコードを追加、削除、修正するには、もちろんコードを追加しなければなりませんが、この記事では省略します。

まとめ

Visual Studio 2005 と .NET Compact Framework 2.0 を使えば、取り出してすぐに使用できる多くのコントロールが生産性を向上します。新しいユーザー インターフェイス デザイナは、素晴らしいユーザー インターフェイスの作成を支援します。デザイナでスキンを利用できるので、ユーザー インターフェイスが実際のデバイスでどのように見えるかがすぐに把握できます。必要ならば、ポートレート(縦長)モードとランドスケープ(横長)モードでのユーザー インターフェイスの表示を、1 行のコードも書かずに確認できます。データ デザイナを利用することで、SQL Mobile データベースを開発マシン上で作成、保守し、後からデバイスに配置できます。この記事では、デザイン ツールに関して、Visual Studio 2005 の機能のいくつかを紹介しました。紹介できなかった機能は、まだまだあります。実際に Visual Studio 2005 を使用して、他の機能を試してください。


© 2009 Microsoft Corporation. All rights reserved. 使用条件  |  商標  |  プライバシー
Page view tracker