=== プログラムの解説 ===
4. Windowの画面デザイン

4.1 全体のデザイン

目次のページ前のページ次のページ

 VB_Graphicsは、複数のウインドウを使うMDI方式 (Multi Document Interface)で全体画面を設計します。Windows のアプリケーションの標準スタイルでユーザーが操作できるように、標準のウインドウ画面のデザインにしてあります。タイトルバー・メニューバーが上部に、下縁にステータスバーを付けます。この幾何学的な設計は、すべてVB6の開発ツールで作成します。図形の作成と表示に使うグラフィックスウインドウ、つまり、画板(キャンバス)に相当する領域は一つですので、SDI方式 (Single Document Interface) でもプログラミングできます。しかし、第1.2節で説明したように、一つの親ウインドウの作業領域の中で四つの子ウインドウを目的別に使い分けるように改訂しました。ウインドウの位置と寸法は、作業中に変更できますが、基本的には画面の大小に対応して文字も図形も大きさを変化させるように計画します。このことがプログラミングをやや複雑にし、また動作が幾らか不安定になる原因です。この点の改良は経験を積まなければならないようです。

 コンピュータのプログラムは、使用するコンピュータのハードウェアとプログラミング言語の影響を受けます。多くの実用プログラムは、DOSの環境で動作するN88-Basic, Quick Basic などが走るパソコンで開発されて来ました。ユーザーインタフェースは、これらの言語の提供するコンソール環境を使うことが一つの常識になっていました。それは、標準に640×480ピクセルのモニタを使うことであって、文字の表示は半角の固定幅で80文字×30行詰めです。N88-Basicの場合には640×400とやや扁平な画面を採用していました。モニタ画面の設計の最初は、外見上、DOSのモニタ画面をWindowsの画面で再現させることです。DOSの環境で動作せるBasicは、一つのモニタを文字用と図形用と異なった目的に使い分け、それを一つのスクリーンに重ね合わせて使いました。VBに移植する場合、これを明瞭に二つの子ウインドウに分けます。文字表示用はコンソールウインドウ、図形表示用がグラフィックスウインドウです。幾つかのウインドウ(フォーム)を使い分ける理由の一つは、プリンタでハードコピーを取るときの、PrintFormメソッドの利用も考慮したためです。

 Windowsの環境になって、文字の表示もグラフィックス方式になりましたので、二つのウインドウを使い分ける必然性が無い様に思われます。しかし、文字幅がプロポーショナルフォントを標準とするようになりましたので、文字と図形とを同じ画面に表示するよりは、別画面とする方が扱い易くなります。どちらの場合においても、一つのデフォルトの画面で文字や図形の配置をデザインしておいて、それをウインドウに割り付けます。デフォルトの画面は、640×400ピクセルを想定しています。ウインドウの画面は、タイトルバーやメニューバーが上端に付きますので、有効な作業領域がやや扁平になります。これはN88-Basicでのプログラミング資産を継承することを意識しました。

 モニタは解像度が年々向上してきて、例えば1024×768ピクセルのような、約2倍精緻な画面が得られるようになりました。しかし、640×480のピクセルのモニタも少なからず利用されていますので、不注意に高解像度のモニタを前提として画面設計をしますと、画面の全部が表示されなくなることがあります。これを考慮するプログラミングは、ウインドウの位置と寸法とをユーザーが変更しても、文字と図形とが相似に追随するように設計することです。

 第2.5節でも説明しましたが、与えられたウインドウの作業領域に合わせて図形文字を表示させる場合、上で説明したデフォルトのアスペクト比を持った画面で設計し、これをピクチャボックスに貼付け、さらに、それをウインドウのフォームに一杯に接するように載せる、三段階の処理をします。複数のピクチャーボックスに別々の画面を構成しておいて、それを差し換えたり並べたりして表示する方法もありますが、VB_Graphicsではフォーム毎に一つのピクチャーボックスを使い、これを別々のプロシージャ単位で描き換える方法を採用しています。コンソール表示の書き換え単位は、プロシージャ名としてCRT**としてあって、標準モジュールCRTdesign.basに集めました。グラフィックスの描き換え単位は、VB_Graphicsでは例題(File/Samples)単位にまとめてあります。ピクチャーボックスをフォームの作業領域に貼付けう技法は、グラフィックスの専門分野では、第2.3節で説明したように、ウインドウ・ビューポート変換を応用します。文字用と図形用とでは、この変換方式が少し違います。ソースコードの例示と解説を次節以降に示します。


次のページ