[ 前のページ ] [ 次のページ ] [ 目次 ] [ 索引 ]

# 1 ダイアログ・ボックスの設計

ダイアログ・ボックスはメッセージを表示したり，ユーザの入力を促したりします。 この章では，有効なダイアログ・ボックスを設計するためのガイドラインを示します。

次のような場合にはダイアログ・ボックスを使用するのが有効です。

- ある操作をメニューだけで行うには複雑過ぎる場合，つまり単一のメニューだけではすべての選択肢を用意できない場合

- 関連する操作であるが，必ずしもそれらを同時に行う必要がない場合( フォントおよびポイント・サイズの変更等)

- ユーザがアプリケーションの別の箇所と会話する一方で，現在の制御ボタン類を使用可能な状態にしておきたい場合

効果的なダイアログ・ボックスを設計するためには，次のことを理解しておく必要があります。

- ダイアログ・ボックスの種類と位置の決定方法

- ウィンドウ装飾の使用方法

- プッシュ・ボタンの作成

- 標準メッセージのダイアログ・ボックスの使用方法

- 意味があり視覚に訴えるように制御ボタン類をレイアウトする方法

この章では，またダイアログ・ボックス作成の実施に関連した以下のトピックについても取り扱います。

- ダイアログ・ボックス内のテキストおよび画面上の他のオブジェクトを表現する

- タイトル・バーを作成する

- 処理中のダイアログ・ボックスと待ちカーソルを使用する

# 1.1 ダイアログ・ボックスの種類と位置の決定

DECwindowsのアプリケーションは1つ以上の1次ウィンドウとそれに関連するダイアログ・ ボックスで構成されます。ダイアログ・ボックスは2次ウィンドウとも呼ばれます。Motif ウィンドウ・マネージャのもとでは，2次ウィンドウは次の特徴を持っています。

- 移動用に特定のボタンおよびキーの割り当てを使用しない限り， 親である1次ウィンドウの後ろに動かすことはできない。詳細はMotif ウィンドウ・マネジャーの「ショートカット」ヘルプ項目を参照してください。

- 親によってのみ最小化および復元が行なわれる。ダイアログ・ ボックス自身で最小化したり復元したりすることはできない。

ダイアログ・ボックスの特徴はすべてDECwindows Motifツールキットによって与えられています。 つまり，ダイアログ・ボックスがBulletinBoard またはFormウィジェットの　サブクラスである限り，2次ウィンドウを親によって最小化したり復元したりするためのコーディングを行う必要はありません。

## 1.1.1 ダイアログ・ボックスの種類

ダイアログ・ボックスにはモードなしとモード付きの2種類があります。

モードなし

モードなしの場合，ダイアログ・ボックスが表示されている間も，アプリケーションの他のウィンドウで作業することができます。 たとえば，図 1-1はダイアログ・ ボックスが表示されていても， ユーザが1次ウィンドウに文字入力できることを示しています。 モードなしダイアログ・ボックスにより，ユーザの作業環境は柔軟性に富んだものになります。

ダイアログ・ボックスの大部分はモードなしで作成する方が良い結果が得られます。

### 図 1-1 モードなしダイアログ・ボックスの場合は他のウィンドウでも作業できる

プログラミングのヒント

  省略時のダイアログ・ ボックスの設定は「モードなし」です。モードなしのダイアログ・ ボックスを使用するには，XmDialogStyleをXmDIALOG_MODELESSに設定します。

  ダイアログ・ボックスをモード付きにするには, XmFormまたはXmFormのサブクラスを使用してXmDialogStyle を次の値の1つに設定します。

  - XmDIALOG_PRIMARY_APPLICATION_MODAL

  - XmDIALOG_FULL_APPLICATION_MODAL

  - XmDIALOG_SYSTEM_MODAL

  また，ダイアログ・ボックスをXmBulletinBoardを使用してモード付きに設定することもできます。 しかし，XmBulletinBoardは，特別なジオメトリ情報の取り扱いが必要な場合にのみ使用すべきです。

  Note that XmDIALOG_PRIMARY_APPLICATION_MODALがXmDIALOG_ APPLICATION_MODALに置き替わっていることに注意が必要です。新しいアプリケーションでは，XmDIALOG_PRIMARY_APPLICATION_MODAL だけが使用されます。

モード付き

モード付きの場合，ダイアログ・ボックスが表示されている間は特定のウィンドウに対する処理を禁止します。 モード付きダイアログ・ボックスは，1 次アプリケーション・モード付きとフル・アプリケーション・モード付きの２種類があります。 どちらを使用するかは，アプリケーションと表示するダイアログ・ ボックスの性質によって決まります。次にそれぞれのモード付きダイアログ・ ボックスについて説明します。

- 1次アプリケーション・モード付き

  1次アプリケーション・モード付きのダイアログ・ボックスが表示されている場合， その祖先ウィンドウに対する処理を禁止します。たとえば， ブックリーダの場合は，ライブラリ選択ダイアログ・ボックスが，1 次アプリケーション・モード付きのダイアログ・ボックスです。 このボックスが表示されている間，ユーザはライブラリ・ウィンドウと会話することができません。 ただし，他のブックリーダの1次アプリケーション・ ウィンドウと会話することはできます。たとえば，先に開いてある本の次のトピックに移動することはできます。

  1次モード付きダイアログ・ボックスから祖先ウィンドウにポインタを移動させた際には， 使用アプリケーションがポインタを警告ポインタの形に変え， モード付きダイアログ・ボックスを画面から消去するまでは祖先ウィンドウでは何もできないことをはっきりと示します。 この警告ポインタは「進入禁止」を表わす国際的な記号です。図 1-2 は親ウィンドウで警告ポインタを表示した例です。

  プログラマはそれぞれのウィンドウ上で適切な形にポインタを変える必要があります。

  ### 図 1-2 警告ポインタ

  プログラミングのヒント

    ポインタを変えるには， ポインタを新規に作成し，1つのウィンドウから別のウィンドウに移動する際にそのポインタをセット， またはリセットしなければなりません。 ポインタを変える手順は，次のとおりです。

    1. 2つのファイルを取り込みます。

       OpenVMSシステムの場合:

       - decw$cursor.h

       - decw$include/cursorfont.h

       DEC UNIXシステム, Microsoft Windows NTシステムの場合:

       - Xm/decwcursor.h

       - X11/cursorfont.h

    2. カーソルを作成します。たとえば，警告ポインタを作成するには，DEC が提供するDXmCreateCursorルーチンを使用して，Cプログラムに次のコードを追加してください(DECwindows Motif はAda ，Fortran，Pascalもサポートします)。

                caution_pointer = DXmCreateCursor (toplevel，
                                  decw$c_INACTIVE_CURSOR);
                XDefineCursor (XtDisplay(toplevel)，
                    XtWindow(toplevel)，
                    caution_pointer);
                XFlush (XtDisplay(toplevel));

    3. 省略時のカーソルをリセットします。 たとえば，Cプログラムに次のコードを追加します。

                XUndefineCursor (Xtdisplay (toplevel)， XtWindow (toplevel));

- フル・アプリケーション・モード付き

  アプリケーション・モード付きのダイアログ・ボックスは，アプリケーションのどのウィンドウに対する処理も禁止します。 たとえば，アプリケーションのメニューの項目から「終了」を選ぶとフル・ アプリケーション・ モード付きダイアログ・ボックスが現われ，終了する前にファイルを保管したいかどうかユーザに質問します。 ユーザはこの質問に答えるまで， このアプリケーションのどの部分とも会話することができません。

  ユーザがポインタをアプリケーション・モード付きダイアログ・ボックスからアプリケーションの他のウィンドウに移動した際には， アプリケーションがポインタを警告ポインタの形に変えます。 この形の変更により， モード付きダイアログ・ボックスを解除するまでアプリケーションの他のウィンドウでは何も処理できないことを示します。 フル・アプリケーション付きダイアログ・ボックスを使用の場合は， この警告ポインタは，図 1-2 に示すように親ウィンドウ上に現われるだけでなく，そのアプリケーションに属する他のどのウィンドウ上にも現れます。

  ユーザがアプリケーションの他のウィンドウに入力しようとしたり， マウスを使用しようとすると，アプリケーションは警告音を出し，ユーザに他のウィンドウと会話できないことを知らせます。

  モード付きダイアログ・ボックスを解除したあとは，ユーザは他のどのウィンドウとも会話できるようになります。

## 1.1.2 ダイアログ・ボックスの配置

ダイアログ・ボックスのモードを決定したら，各ダイアログ・ボックスを画面上のどこに配置するか， またネストするかどうかを決めなければなりません。

### 1.1.2.1 １つのダイアログ・ボックスを配置する

親ウィンドウ(１次ウィンドウ)の情報を見たり使用したりする必要のないようなダイアログ・ ボックスの場合は，図 1-3に示すように， 親ウィンドウの作業領域の中心にダイアログ・ ボックスを表示させてください。こうすることにより，マウスの移動とユーザの視線の移動を最小限に抑えることができます。

しかし，親ウィンドウにある情報を見たり使用したりできるようにする必要のあるダイアログ・ ボックスの場合は，ダイアログ・ボックスを親ウィンドウの横または下に配置してください。 ダイアログ・ボックスに最適な位置は， アプリケーションによって異なります。

図 1-3に示すように， 画面の左上，すなわち(0,0) にはダイアログ・ボックスを配置しないでください。この位置に配置すると， ユーザの観点からみて，アプリケーションの1次ウィンドウの位置とはほとんど関係を持たない意味のない配置となります。

### 図 1-3 ダイアログ・ボックスを適切に配置する

プログラミングのヒント

  ウィンドウがXmBulletinBoardDialog またはXmFormDialogの場合，ツールキットによってダイアログ・ ボックスは親ウィンドウの中心に配置されます。ウィンドウがXmBulletinBoard のサブクラスでない場合は，ダイアログ・ボックスは画面の左上の(0,0) に配置されます。この場合は，ダイアログ・ボックスのX 座標とY座標の値を指定してください。

ダイアログ・ボックスをユーザが移動した後そのダイアログ・ボックスをもう一度表示させる場合は， 必ず移動した位置を尊重してください。たとえば， 省略時にダイアログ・ボックスを親ウィンドウの中心に表示し，ユーザがそれを親ウィンドウの下に移動させたとします。 ユーザがそのダイアログ・ ボックスを次に呼び出した時はユーザが最後に移動させた場所， つまり1次ウィンドウの下に表示させるようにしてください。

ダイアログ・ボックスの位置を保管する場合は，親ウィンドウに対しての相対的な位置ではなく， 画面上の座標の位置で保管するようにしてください。 たとえば，前の例で親ウィンドウを画面の中心から右上に移動させ， その後ダイアログ・ボックスをもう一度呼び出したとします。この場合， 親ウィンドウの真下ではなく，画面の中心の下側，つまりユーザが最後に配置した場所にダイアログ・ ボックスを表示するようにしてください。

### 1.1.2.2 複数のダイアログ・ボックスをネストする

1つのダイアログ・ボックスに含めるには情報量が多すぎる場合，複数のダイアログ・ ボックスを作成します。これをダイアログ・ボックスをネストするといいます。 最初のダイアログ・ボックスには必須でかつ共通の機能を入れ， 以降のダイアログ・ボックスには共通性の低い機能を入れて， ネストしたダイアログ・ボックスを編成します。

最初のダイアログ・ボックスに最も重要でよく使う制御ボタン類を入れて， ほとんどの場合に最初のダイアログ・ボックスだけを使用すればいいように設計します。 どの制御ボタンを最もよく使用するかを理解するために， ダイアログ・ボックスの設計には実際にアプリケーションを使用するユーザにも参加してもらうとよいでしょう。 基本操作は最初のダイアログ・ ボックスのみで終了でき，2次ダイアログ・ボックスを開く必要がないように設計するべきです。 ただし，オプションが使用可能であることがユーザにわかるように設計してください。

ダイアログ・ボックスに，プッシュ・ボタンを押す操作以外に5〜7つの操作が含まれる場合は， ネストすることを考えます。たとえば，テキストを入力する， ラジオ・ボタンを選択する，リスト・ボックス内のアイテムを1 つ選択する等の操作が考えられます。ただし，ダイアログ・ボックスのネストのレベルは3 段階までにします。

1次ダイアログ・ボックス上のプッシュ・ボタンを選択して，2次ダイアログ・ ボックス(ネストしたダイアログ・ボックス)を起動します。1つの2 次ダイアログ・ボックスしか起動しない場合は，プッシュ・ボタンのラベルに「オプション... 」を使用します。図 1-4に例を示します。

### 図 1-4 2次ダイアログ・ボックスの存在を示す「オプション...」プッシュ・ボタン

反復記号(...)はボタンを押すとダイアログ・ボックスが起動することを示します。 ただし，反復記号は「ヘルプ」ボタンには使用しません。

1次ダイアログ・ボックスから複数の2次ダイアログ・ボックスを起動することもできます。 ただし，その場合はプッシュ・ボタンに操作の内容を明確にラベル表示してください。 たとえば，1つを「パターン...」とし，もう1 つを「テンプレート...」とします。

どの制御ボタンをネストするかを決める場合，サンプルのダイアログ・ボックスを設計し， どれが最良の配置か，またどの制御ボタンを1次ダイアログ・ ボックスに入れるのがよいかをユーザにたずねてみるとよいでしょう。 たとえば，図 1-5はプッシュ・ ボタンを押すステップの他に7 つのステップをもつダイアログ・ボックスの例です( 「性別」の3つのラジオ・ボタンがそれぞれ1つのステップを構成します) 。このダイアログ・ボックスは非常に煩雑で，多くのユーザはその複雑さゆえに尻込みしてしまうでしょう。

### 図 1-5 ステップの多すぎるダイアログ・ボックス

このような場合，1次ダイアログ・ボックスにはユーザが頻繁に実行するステップだけを入れ， 頻度の低いその他のステップは2次ダイアログ・ ボックスに入れて，ネストしたダイアログ・ボックスを作成します。図 1-6 に再編成したダイアログ・ボックスの例を示します。

### 図 1-6 ステップの多すぎるダイアログ・ボックスのネスト

ネストしたダイアログ・ボックスの配置には，次の２つのテクニックがあります。

- ネストしたダイアログ・ボックスのプッシュ・ボタンをその前に表示したダイアログ・ ボックスのボタンの上に重なるように配置します。 たとえば，ネストしたダイアログ・ボックスの「了解」ボタンを１次ダイアログ・ ボックスの「了解」ボタンの上に配置すると，ネストしたダイアログ・ ボックスを画面から消したときにマウスを動かさなくても済みます。

- ネストしたダイアログ・ボックスを，図 1-7 に示すように1次ダイアログ・ボックスのタイトルの右下にカスケード式に( 左から右へ)配置します。

これらの２つのテクニックは，ネストしたダイアログ・ボックスは1次ダイアログ・ ボックスよりも小さくなるという想定のもとに同時に使用することができます。 ネストしたダイアログ・ボックスを最初のボックスよりも小さくできない場合は， ネストしたボックスのプッシュ・ボタンを最初のボックスのプッシュ・ ボタンにできるだけ近づけて配置してください。

### 図 1-7 ダイアログ・ボックスをネストする

プログラミングのヒント

  2次ダイアログ・ ボックスがXmBulletinBoardのサブクラスでない場合はダイアログ・ ボックスのX座標とY座標を指定する必要があります。

# 1.2 ウィンドウの装飾

ウィンドウ・マネージャはどのウィンドウに対してもいくつかの種類の装飾を与えます。 すべてのウィンドウには次の装飾が自動的に設定されます。

- サイズ変更枠

  コーナー・ハンドルはX座標とY座標の両方でボックスのサイズ変更を行いますが， サイド・ボーダーは一方の座標だけのサイズ変更を行います。

- ウィンドウ・メニュー・ボタン

  ウィンドウ・メニュー・ボタンを押すとウィンドウ・メニューが現れます。 通常，ウィンドウ・メニューにはウィンドウの復元，移動，サイズ決定， 最小化，最大化，スタックの変更およびクローズのためのメニュー項目が含まれます。

- タイトル領域

- 最小化ボタン

  最小化ボタンを押すとウィンドウがアイコンになります。

- 最大化ボタン

  最大化ボタンを押すと，可能なだけウィンドウを拡大することができます( 大きさをきめることができます)。

ダイアログ・ボックスには次の装飾のみを指定してください。

- ウィンドウ・メニュー・ボタン

- タイトル領域

- サイズ変更枠

  この装飾はオプションです。詳しくは，第1.2.2 項を参照してください。

これらの装飾は省略時の設定です。図 1-8 は，1次ウィンドウの装飾と2次ウィンドウの装飾を比較したものです。

### 図 1-8 1次ウィンドウおよび2次ウィンドウの装飾

## 1.2.1 ダイアログ・ボックスのタイトル

各ダイアログ・ボックスにはタイトルをつけてください。タイトルを構成する要素には次のものがあります。

- アプリケーション名(最後にコロンをつける)

- 空白

- メニュー項目名，またはそのダイアログ・ボックスを起動したプッシュ・ ボタン名

図 1-9に例を示します。

ダイアログ・ボックスのタイトルとしてメニュー項目と共にメニュー名を含めることもできます。 たとえば，ユーザがオプション・メニューをプル・ ダウンし，メニュー項目から「ウィンドウ」を選択したとします。この場合， 次のようなタイトルをダイアログ・ボックスに付けます。

               メール: ウィンドウ オプション

この場合，「メール」はアプリケーション名，「ウィンドウ」はメニュー項目名， 「オプション」はメニュー名となります。

### 図 1-9 ダイアログ・ボックスの適切なタイトルと不適切なタイトル

図 1-9には不適切なタイトル例も示しています。 この例では不適切なタイトルとしてウィジェット名を使用しています。 ウィジェット名はユーザにとって何の意味もありません。したがってダイアログ・ ボックスのタイトルには使用するべきではありません。

プログラミングのヒント

  ダイアログ・ ボックスのタイトルの設定には，XmNdialogTitleリソースを使用してください。

## 1.2.2 ダイアログ・ボックスのサイズ変更

ダイアログ・ボックスにサイズ変更枠を組み入れるかどうかについては， 次のガイドラインを参考にしてください。

- ダイアログ・ボックスにテキスト入力フィールド， リスト・ボックス，またはその他のサイズが可変の制御ボタン類がある場合は， サイズ変更枠を与えてください。図 1-10 に示すダイアログ・ ボックスにはサイズ変更枠があるため，ユーザはファイル名全体を見たり， テキスト入力フィールドにタイプしたもの全体を見ることができます。

- ダイアログ・ボックスに固定サイズの制御ボタン類(プッシュ・ ボタン，チェック・ボタン，ラジオ・ボタン等)しかない場合，ダイアログ・ ボックスの大きさは構成要素をすべて表示できるだけの大きさにします。 つまり，ユーザがボックスのサイズを変更しなくてよいように設計します。 この場合，サイズ変更枠は組み入れる必要はありません。

  プログラミングのヒント

    サイズ変更枠を含まないダイアログ・ ボックスを作成するには，XmNnoResizeの値をTrue に設定してください。サイズ変更枠を含むダイアログ・ボックスを作成するには，XmNnoResize の値をFalseに設定してください。このリソースはXmBulletinBoard から継承されます。

### 図 1-10 テキスト入力フィールドやリスト・ ボックスを含むダイアログ・ボックスにはサイズ変更枠を使用する

サイズ変更枠をつける場合は，次のガイドラインを守ってください。

- ダイアログ・ボックスをユーザが縮小できるように設計する場合には， 次のことに注意してください。

  - ダイアログ・ボックスの最小サイズを設定して，役に立たなくなるほどダイアログ・ ボックスを小さくできないようにします。 つまり，最小サイズのときでもユーザにはすべての制御ボタンが見え， プッシュ・ボタンを選択できるようにしてください。

  - 縮小時に制御ボタンも一緒に移動させて，見えなくなったり， 選択できなくなったりしないように設定してください。図 1-11 に例を示します。

    ### 図 1-11 縮小に合わせてプッシュ・ボタンを移動させる

    プログラミングのヒント

      DECでは， 縮小に合わせてプッシュ・ボタンが移動するルーチンDXmFormSpaceButtonsEqually を提供しています。詳しくは，第1.3節を参照してください。

      次のコード例を使用してダイアログ・ボックスに最小サイズを設定してください。 次の例では最小サイズは100になっていますが，作成するダイアログ・ ボックスごとに許容できる最小サイズを決定する必要があります。

               Arg arglist[2];
               XtSetArg(arglist[0]， XmNminWidth，  100);
               XtSetArg(arglist[1]， XmNminHeight， 100);
               XtSetValues(XtParent(dialog_box)， arglist， 2);

  - 図 1-12に示すように， ボックス内の情報を切り捨てないようにしてください。ダイアログ・ ボックスが切り捨てられると，重要なプッシュ・ボタンや他のコントロール類が見えなくなってしまいます。

    ### 図 1-12 プッシュ・ボタンを切り捨てない

  - 図 1-13に示すように， プッシュ・ ボタンのラベルを切り捨てないようにしてください。ユーザがラベルを読めなくなり， どのプッシュ・ボタンを押せばよいのかわからなくなります。

    ### 図 1-13 プッシュ・ボタンのラベルを切り捨てないこと

  - 図 1-14に示すように，縮小したダイアログ・ ボックスでプッシュ・ボタンが重ならないようにしてください。 ユーザがボタンのどこをクリックすればよいのかわからなくなってしまいます。

    ### 図 1-14 プッシュ・ボタンを重ねないこと

- ユーザがダイアログ・ボックスのサイズを大きくする場合は， ダイアログ・ボックスのサイズと比例してレイアウトが変化するように設定してください。 図 1-15に示すように， 単に空白の領域を付け足してダイアログ・ボックスを拡大するのは望ましくありません。

プログラミングのヒント

  ダイアログ・ ボックス内のコントロール類のサイズやレイアウトを拡大するには，XmForm ウィジェットもしくはXmFormDialogウィジェットを使用して， 拡大，縮小する必要のあるコントロールの左右アタッチメントを指定してください。 プッシュ・ボタンを適切に拡大，縮小させるには， DXmFormSpaceButtonsEquallyを使用してください。

### 図 1-15 ダイアログ・ボックスのサイズと比例してレイアウトを変化させる

# 1.3 プッシュ・ボタンの作成

この節では，ダイアログ・ボックスのプッシュ・ボタンの作成と配置についてのガイドラインとプログラミングのヒントについて説明します。

## 1.3.1 省略時のプッシュ・ボタン

すべてのダイアログ・ボックスには省略時のプッシュ・ボタンを設定してください。

省略時のプッシュ・ボタンとは，ユーザがリターン・キーを押すことによって選択されるボタンです。 ユーザはリターン・キーを押し，作業を続けることができます。 省略時のプッシュ・ボタンを指すと，図 1-16 に示すように，Motifが強調表示を加えて自動的に表示されます。

プログラミングのヒント

  省略時のプッシュ・ ボタンを使用可能にするには，UILファイル内の省略時のボタン・ ウィジェットの名前にXmNdefaultButtonを設定します。F11(エスケープ・ キー)を取消しキーとして使用可能にするには，UILファイル内の取消しボタン・ ウィジェットの名前にXmNcancelButton を設定します。

## 1.3.2 取消ボタン

必要な場合には，ダイアログ・ボックスに「取消」プッシュ・ボタンを与えてください。

プログラミングのヒント

  F11(エスケープ・ キー)を取消しキーとして使用可能にするには，UILファイル内の取消しボタン・ ウィジェットの名前にXmNcancelButtonを設定します。

## 1.3.3 プッシュ・ボタンのラベル

プッシュ・ボタンのラベルは図 1-16 に示すようにセンタリングしてください。省略時の設定でセンタリングされますので， それを無効にしないようにしてください。

ダイアログ・ボックスの標準プッシュ・ボタンを使用するときは，次に示す順のいずれかに従うようにしてください。

- 了解 適用 リセット 省略時設定 取消 ヘルプ

- 了解 取消 オプション... ヘルプ

- はい いいえ 取消 ヘルプ

つねに，「了解」ボタンが一番最初に，「ヘルプ」ボタンが一番最後となるように配置してください。 「取消」ボタンは，次の唯一の例外を除いて， 最後のボタンの一つ前に配置します。「オプション...」ボタン，または他のダイアログ・ ボックスを表示する別のボタンがある場合が例外で， この場合は、そのボタンを「取消」と「ヘルプ」ボタンの間に配置する必要があります。

## 1.3.4 プッシュ・ボタンの配置

プッシュ・ボタンは，図 1-16 で示すように， 下部全体にわたって横に配置するか，図 1-17 で示すように，ダイアログ・ ボックスの右上付近に縦に配置してください。

### 1.3.4.1 プッシュ・ボタンの横配列

ボタンを横に配置する場合の好ましい方法は次の２つです。

- ボタンをダイアログ・ボックス全体に等間隔で配置する。

- ボタンをダイアログ・ボックスの中央にまとめて配置する。

ダイアログ・ボックスが細長い，あるいはボタンの数が多い場合は，どちらも方法も効果的です。 ただし，ダイアログ・ボックスの幅が広い，あるいはボタンの数が少ない場合には， 左右のマージンを等しくして，ボタン全部を中央に配置する必要があります。 このように配置すると，ボタン間で必要なマウスの移動が最小限に抑えられます。

一番目の方法では,ボタンの間隔とマージンを等間隔にしてください。つまり， 左端から最初のボタンまでの間隔と各ボタン間の間隔を等しくし， さらに最後のボタンと右端までの間隔も他の各ボタンの間の間隔と等しくなるようにしてください。 ダイアログ・ボックスの下部に等間隔に並べたプッシュ・ ボタンの例を図 1-16に示します。

### 図 1-16 ダイアログ・ボックスの下部に等間隔に配置したプッシュ・ ボタン

プログラミングのヒント

  DECでは， プッシュ・ボタンを等間隔で等サイズになるように，フォーム・ウィジェットにプッシュ・ ボタンを設定するルーチンDXmFormSpaceButtonsEqually を提供しています。次のコード例を利用してください。

               DXmFormSpaceButtonsEqually (parent，widget_list，num_widgets)
                   Widget     my_form;
                   Widget     *widget_list;
                   Cardinal   num_widgets;

  ここで

  - Parentはボタンを含むフォーム・ウィジェットのウィジェットID

  - widget_listは，変更対象となるボタンのウィジェットIDの配列

  - num_widgetsは，ウィジェット・リストに含まれるウィジェット数

二番目の方法では,中央にボタンを配置するために,アタッチメントを使用して真ん中のボタンをダイアログ・ ボックスの相対的な位置にアタッチしてください。

ボタンの数が奇数または偶数の場合のセンタリングには、次のプログラミングのヒントを使用してください。

プログラミングのヒント

  このプログラミングのヒントはボタンが奇数個の場合に役立ちます。 この例では、 「了解」,「適用」,「リセット」,「取消」,「ヘルプ」の5個のボタンが配置されています。

  ボタンのセンタリングをするには,最初に，「リセット」ボタンの左側をダイアログ・ ボックス幅の中間点にアタッチします。その後で， XmNleftOffsetをボタンのサイズの半分に設定します。

                   reset_args : arguments
                       {
                           XmNlabelString = "Reset";
                           XmNwidth = 1500;
                           XmNleftAttachment = XmATTACH_POSITION;
                           XmNleftPosition = 50;
                           XmNleftOffset = -750;     /* font units */
                       };

  ユーザが行う各国語対応とフォント設定について配慮が必要と考える場合は， 実行時にレイアウトを修正がすることが可能です。次のステップに従ってください。

  1. ボタン全部を見て／調べて，一番大きなボタンのサイズを計算します。

  2. すべてのボタンの幅を，最大のボタンに少しスペースを加えたサイズに設定します。 この追加スペースをつけることによって，テキストがボタンの枠に入り込むことがなくなります。 ボタン全部のテキストが短い場合は， ボタンの最小のサイズを「取消」ボタンの幅にだいたい等しく設定します。

  3. 真ん中のボタンのXmNleftOffsetをボタンのサイズの半分に設定します。

  4. 必要に応じて，他のボタンを「リセット」ボタンの左または右側にアタッチします。 各々のボタンに間に約200フォント・ユニット分のオフセットを置きます。

                      left_button_args : arguments
                          {
                              XmNwidth = 1500;
                              XmNrightAttachment = XmATTACH_WIDGET;
                              XmNrightOffset = 200;     /* font units */
                          };

                      right_button_args : arguments
                          {
                              XmNwidth = 1500;
                              XmNleftAttachment = XmATTACH_WIDGET;
                              XmNleftOffset = 200;     /* font units */
                          };

     使用ボタンが大体同じサイズでない場合は，第1.3.5項の長いプッシュ・ ボタンのプログラミングのヒントを参照してください。

プログラミングのヒント

  このプログラミングのヒントはボタンが偶数個の場合に役立ちます。この例では、 「了解」,「リセット」,「取消」,「ヘルプ」の4個のボタンが配置されています。

  ボタンのセンタリングをするには,最初に，「リセット」を中央に近くに配置し， ボタンの右側をダイアログ・ボックス幅の中間点にアタッチします。 その後で，XmNrightOffsetをボタンの間のスペースのサイズの半分に設定します。

                   reset_args : arguments
                       {
                           XmNlabelString = "Reset";
                           XmNwidth = 1500;
                           XmNrightAttachment = XmATTACH_POSITION
                           XmNrightPosition = 50;
                           XmNrightOffset = 100;     /* font units */
                        };

  ユーザが行う各国語対応とフォント設定について配慮が必要と考える場合は， 実行時にレイアウトを修正がすることが可能です。次のステップに従ってください。

  1. ボタン全部を見て／調べて，一番大きなボタンのサイズを計算します。

  2. すべてのボタンの幅を，最大のボタンに少しスペースを加えたサイズに設定します。 この追加スペースをつけることによって，テキストがボタンの枠に入り込むことがなくなります。 ボタン全部のテキストが短い場合は， ボタンの最小のサイズを「取消」ボタンの幅にだいたい等しく設定します。

  3. 必要に応じて，他のボタンを「リセット」ボタンの左または右側にアタッチします。 各々のボタンに間に約200フォント・ユニット分のオフセットを置きます。

                      left_button_args : arguments
                          {
                              XmNwidth = 1500;
                              XmNrightAttachment = XmATTACH_WIDGET;
                              XmNrightOffset = 200;     /* font units */
                          };

                      right_button_args : arguments
                          {
                              XmNwidth = 1500;
                              XmNleftAttachment = XmATTACH_WIDGET;
                              XmNleftOffset = 200;     /* font units */
                          };

     使用ボタンが大体同じサイズでない場合は，第1.3.5項の長いプッシュ・ ボタンのプログラミングのヒントを参照してください。

### 1.3.4.2 プッシュ・ボタンの縦配列

プッシュ・ボタンを縦に配置した場合は，省略時のプッシュ・ボタンを一番右上の位置に配置し， 他のプッシュ・ボタンをその下に並べてください。 上下のプッシュ・ボタンの間隔は，省略時メニュー・フォントの45 フォント・ユニット分としてください。図 1-17 は縦に配置したプッシュ・ボタンの例です。

### 図 1-17 ダイアログ・ボックスの側面に縦に配置したプッシュ・ ボタン

## 1.3.5 プッシュ・ボタンの寸法

各プッシュ・ボタンのラベルの長さが異なる場合であっても，すべてのプッシュ・ ボタンは同じ寸法にしてください。ただし，1つのラベルだけがとくに長い場合， 他のボタンはすべて同じ寸法にするのであれば，そのボタンだけ大きくしても構いません。

ボタンが横に並んでいる場合は，大きいボタンは他のボタンよりも幅が広くても構いませんが， 他のボタンより高くなってはいけません。ボタンが縦に並んでいる場合は， 大きいボタンは他のボタンよりも高くても構いませんが， 他のボタンより幅を広げてはいけません。図 1-18 を参照してください。

プログラミングのヒント

  アプリケーションが各国語対応された場合， 長いプッシュ・ボタンのラベルが翻訳されて短くなる場合もあります。

  各国語対応されるアプリケーションの場合は，簡単に変換できるよう，サイズ決めと位置決めのリソースをUIL インクルード・ファイルに入れておいてください。 たとえば，プッシュ・ボタンのサイズを固定して使用している場合， そのサイズをUILインクルード・ファイルの中で定義し，コメントを付けておきます。 ほとんどのボタンは

               normal_width

  のような文字に定義できるでしょう。 また，サイズが大きいものは

               long_width

  のような文字に定義できるでしょう。

  そしてそれらの値を次のように設定します。

               value
                   normal_width = 50;
                   long_width = 100;  /* width of the longest button*/

  プッシュ・ボタンのXmNwidthリソースを定義するときにこれらの文字を参照します。 各国語対応にする時点でボタンのラベルの幅を変える場合は， これらの文字の値を変更するだけで済みます。

### 図 1-18 他よりも大きいプッシュ・ボタンの扱い方

## 1.3.6 「ヘルプ」プッシュ・ボタン

「ヘルプ」プッシュ・ボタンを含める。

ユーザが「ヘルプ」プッシュ・ボタンを押すと，ダイアログ・ボックスについての概要の説明が表示されます。 追加トピックを入れ，ダイアログ・ ボックス内の各制御ボタンの使い方に関する詳しい説明を加えても構いません。 ただし，ユーザに対する簡単なメッセージの場合は「ヘルプ」プッシュ・ ボタンを使用する必要はありません。オンライン・ヘルプの設計についての詳しい説明は， 第5章を参照してください。

警告またはエラー・ダイアログ・ボックスで，1〜2行の文でエラーの説明とその解決方法を示すことができない場合は， そのダイアログ・ボックスに「ヘルプ」プッシュ・ ボタンをつけてください。ダイアログ・ボックス内に表示したエラーまたは警告メッセージに関する説明をヘルプ・ ウィンドウに表示し， トラブルの解決方法を示します。

# 1.4 標準メッセージ・ダイアログ・ボックスの使用

メッセージ・ダイアログ・ボックスは，エラー・メッセージ，警告，アプリケーションの状態といった情報をユーザに提供します。 また，ユーザに質問するものもあります。

他のダイアログ・ボックスと同様に，メッセージ・ボックスにもウィンドウ・ メニューとタイトル領域があります。各メッセージ・ボックスには対応するアイコンがあり， そのボックスの目的を示します。

メッセージ・ダイアログ・ボックスを作成する際には,デザインについての以下の事項を配慮してください。

- 意味のあるタイトルをつける。

- 完全な文を使用する。

- 同一メッセージを伝えるには，同じメッセージ・ボックスを再使用する。

標準メッセージ・ダイアログ・ボックスのタイトルは次の要素から構成されます。

- アプリケーション名（あとにコロンが続く）と空白

- メッセージ・ボックスの操作またはメッセージ・ボックスの種類

タイトルで操作を指定して，ユーザがメッセージ・ボックスのコンテキストに関してできるだけ詳しい情報が得られるようにします。 たとえば，メッセージ・ ボックスに次のタイトルの２つのいずれかを使用して，電子メール・ ホルダの削除を希望するかを問うことができますが，最初のものの方がユーザに多くの情報を伝えることになります。

             Mail: Delete Folder

             Mail: Question

メッセージ・ダイアログ・ボックスでは完全な文または文に準じた語順を使う必要があります。 実際の文章で使用すると同じように句読点を加えてください。 メッセージは簡潔になるように心掛け，素早く，簡単に読めるようにします。 ただし，冠詞のtheやa，接続詞の andなどを省かないようにしてください。テキストを作成する際には, 他の言語に翻訳される場合があることに留意してください。

一般的には,システムのエラー・コードをメッセージに使用することは避けます。 その代わりに,ユーザが実行できる動作の記述を組み込みます。 これ以外の情報は該当するメッセージ・ボックスの「ヘルプ」テキストに配置します。

ダイアログ・ボックスに文を１つ以上を含める必要がある場合は，最後の文または質問の前に空白行一行を追加してください。 この空白行の追加により， ユーザがボタンの１つを押したときに，どのようになるかに直ちに集中することができます。

ダイアログ・ボックスでは，用語「中止（Abort）」ではなく，「取消（Cancel ）」を使用することに注意してください。

ユーザがメッセージ・ボックスを表示させる同じ操作を実行した場合は， 二番目のメッセージ・ボックスは表示しないでください。その代わりに, 同じメッセージ・ボックスを再使用します。ただし，画面の一番上にそれを配置してください。 同一ボックスの再使用により，画面に多くのメッセージ・ ボックスが表示されて煩雑な状態になることが避けられます。

一般的には,アプリケーションのメッセージ毎に新しいダイアログ・ボックスを表示することはしないでください。 含まれているテキストを交換して， １個または数個の標準メッセージ・ウィンドウを再使用するように心掛けてください。 ユーザがその前のメッセージを表示できることが重要である場合は， スクロールしたウィンドウに新しいメッセージを付加してください。

DECwindowsアプリケーションを作成する場合は，次の5種の標準メッセージ・ ダイアログ・ボックスのなかから１個以上を選んで使用してください。

- 質問(XmQuestionDialog)

- エラー(XmErrorDialog)

- 情報(XmInformationDialog)

- 警告(XmWarningDialog)

- 処理中(XmWorkingDialog)

## 1.4.1 質問ダイアログ・ボックス

ユーザに質問する場合には，質問ダイアログ・ボックスを使用してください。 たとえば，図 1-19に示すように， エラーや警告を表示した後で質問をする場合は質問ダイアログ・ ボックスを使用します。質問メッセージ・ボックスはアプリケーション・ モード付きにします。

図 1-19にあるように， 質問ダイアログ・ ボックスは，質問であることを示すアイコンとともに表示します。 ボックスのタイトル，質問内容，そして適切なラベルのプッシュ・ボタンで構成します。

### 図 1-19 質問ダイアログ・ボックスの例

プログラミングのヒント

  メッセージ・ ボックスをアプリケーション・モード付きにするには，XmNdialog StyleリソースをXmDIALOG_FULL_APPLICATION_MODALに設定します。

リターン・キーを押したときに選択される省略時のプッシュ・ボタンは， ユーザが選択する可能性の最も高いものを設定します。破壊的な結果をともなう可能性のあるものを省略時のプッシュ・ ボタンに設定してはいけません。 次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

- 「はい」，「いいえ」

- 「はい」，「いいえ」，「ヘルプ」

- 「はい」，「いいえ」，「取消」

- 「はい」，「いいえ」，「取消」，「ヘルプ」

## 1.4.2 エラー・ダイアログ・ボックス

ユーザがエラーを引き起こした場合には，エラー・メッセージ・ボックスを表示させます。 たとえば，存在しないディレクトリにファイルを書き込もうとした場合などです。 メッセージ・ボックスでエラーを伝えた後に質問をする場合は， 質問ダイアログ・ボックスを使用します。ユーザの操作以外の原因でエラーが発生した場合は， 情報ダイアログ・ボックスを使用します。 エラー・ダイアログ・ボックスはアプリケーション・モード付きに設定します。

エラー・ダイアログ・ボックスにはエラーであることを表わすアイコンがついています。 エラー・ダイアログ・ボックスは図 1-20に示すように， タイトル，エラーの内容，適切にラベル表示したプッシュ・ ボタンで構成します。ユーザが選択する可能性の最も高いものを省略時のプッシュ・ ボタンとして設定します。破壊的な結果をともなう可能性のあるものを省略時のプッシュ・ ボタンに設定してはいけません。 次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

- 「了解」

- 「了解」，「ヘルプ」

- 「了解」，「取消」

- 「了解」，「取消」，「ヘルプ」

### 図 1-20 エラー・ダイアログ・ボックス

Motifではエラー・ダイアログ・ボックスの中でも「取消」ボタンを使用することができます。 ただし，「了解」プッシュ・ボタンを押した場合と結果が異なる場合だけ「取消」プッシュ・ ボタンを使用してください。

## 1.4.3 情報ダイアログ・ボックス

エラー以外の情報を表示する場合，あるいはユーザの操作以外の原因でエラーが発生した場合には， 情報ダイアログ・ボックスを使用します。この情報は平叙文で記述しなければなりません。 質問文で記述する場合は，質問ダイアログ・ ボックスを使用します。情報ダイアログ・ボックスはモードなしに設定します。

情報ダイアログ・ボックスには情報であることを表わすアイコンがついています。 情報ダイアログ・ボックスは図 1-21に示すように， タイトル，文，および適切にラベル表示したプッシュ・ボタンで構成します。 ユーザが選択する可能性の最も高いものを省略時のプッシュ・ ボタンとして設定してください。破壊的な結果をともなう可能性のあるものを省略時のプッシュ・ ボタンに設定してはいけません。次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

- 「了解」

- 「了解」，「ヘルプ」

### 図 1-21 情報ダイアログ・ボックス

## 1.4.4 警告ダイアログ・ボックス

ユーザがある操作をするとトラブルを引き起こす可能性のある場合，これを警告するために警告ダイアログ・ ボックスを使用します。警告ダイアログ・ ボックスは，アプリケーション・モード付きに設定してください。

警告ダイアログ・ボックスには警告であることを表わすアイコンがついています。 警告ダイアログ・ボックスは図 1-22に示すように， タイトル，メッセージ，および適切にラベル表示したプッシュ・ ボタンで構成します。ユーザが選択する可能性の最も高いものを省略時のプッシュ・ ボタンとして設定します。破壊的な結果をともなう可能性のあるものを省略時のプッシュ・ ボタンに設定してはいけません。 次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

- 「はい」，「いいえ」

- 「はい」，「いいえ」，「ヘルプ」

- 「了解」，「取消」

- 「了解」，「取消」，「ヘルプ」

「はい」と「いいえ」のラベルが組み合わせの中に含まれています。 Motifでは，「はい」と「いいえ」のプッシュ・ボタンを使用して警告ダイアログ・ ボックスの中で質問をすることも可能ですが，質問する場合は質問ダイアログ・ ボックスを使用するのがよいでしょう。

### 図 1-22 警告ダイアログ・ボックス

## 1.4.5 処理中ダイアログ・ボックス

処理中ダイアログ・ボックスは，処理中であることを表示し，ユーザはその処理を取り消すことができます。 処理中ダイアログ・ボックスはモードなしに設定してください。 処理中ダイアログ・ボックスには処理中であることを表わすアイコンがついています。 処理中ダイアログ・ボックスは図 1-23 に示すように，タイトル，メッセージ， および適切にラベル表示したプッシュ・ボタンで構成します。ユーザが選択する可能性の最も高いものを省略時のプッシュ・ ボタンとして設定します。 破壊的な結果ともなう可能性のあるものを省略時のプッシュ・ボタンに設定してはいけません。 次のラベルの組み合わせのいずれかを使用してボタンを配置してください。

- 「了解」，「取消」

- 「了解」，「取消」，「ヘルプ」

### 図 1-23 処理中ダイアログ・ボックス

# 1.5 意味のある視覚に訴えるレイアウト

ダイアログ・ボックスは機能的であるだけでなく，それぞれの構成要素を視覚に訴えるように編成することが大切です。 ダイアログ・ボックスの制御ボタン類を上手にレイアウトすると， ユーザは作成したダイアログ・ボックスを最大限に活用することができます。

制御ボタン類の編成をする際には，グラフ用紙や，グリッドのついたオンライン作図ツール， あるいはインターフェイス設計ツール(IDT)を使用して各ダイアログ・ ボックスをスケッチしてみるとよいでしょう。

## 1.5.1 関連する選択肢を図形的にグループ化する

ダイアログ・ボックスは見やすい構造にするために，スペースまたはbevel を使用して関連する選択肢をグループ化します。bevel(ベベル)とは， 各グループの周りに使用する3次元のボックスまたはフレームのことです。 図 1-24に例を示します。グループ化をするために， 左のダイアログ・ボックスではスペースを使用し，右のダイアログ・ ボックスではbevelを使用しています。

### 図 1-24 スペースまたはbevelによる関連する選択肢のグループ化

プログラミングのヒント

  bevelを作成するには，XmForm ウィジェットを使用し，XmNshadowTypeをXmSHADOW_IN に設定します。次に，制御ボタンをXmFormウィジェットの中に入れます。

## 1.5.2 ダイアログ・ボックスで句読点の使用を避ける場合

ダイアログ・ボックスの構成要素が適切なグループに分けられ，インデントがなされている場合は， フィールドの間にコロン「：」や他の句読記号点を入れる必要はありません。 たとえば，図 1-25で示すように， ラベルや入力フィールドの間にコロンをつけないでください。

### 図 1-25 ダイアログ・ボックスで句読点の使用を避ける場合

枠付きのテキスト・フィールドは，ラベルと全く異なって見えます。句読点をつけると， ただ煩雑になるだけです。

ただし，句読点はテキストがメッセージを伝えるときは必要なことに注意してください。 また，コロンは，ヘッダ情報用の出力専用のフィールドでは使用できます。 たとえば，エディタでは，現在のファイル名の表示はつぎのようになります。

## 1.5.3 ダイアログ・ボックスを簡略化する

コンテキストまたはダイアログ・ボックスの使用がタイトルではっきり分からない場合は， ボックスの一番上に語句または文を加えて，その目的を明確にしてください。 このようなテキストにより，ボックスの残りの内容を簡略化することができます。

図 1-26に，トラッシュ・ ウィンドウにカラーを適用する場合のダイアログ・ ボックスの良くない例と一緒に， 効果的な例の両方を示します。

### 図 1-26 簡略化したダイアログ・ ボックス

## 1.5.4 制御ボタン類の均等な配置

ダイアログ・ボックス内に制御ボタン類を配置する場合は，次の要領でスペースを使用してください。

- ウィンドウのマージンを均等にする

  各ダイアログ・ボックスの上部，下部，両サイドのマージンが同じか確認してください。 文字または制御ボタン類がウィンドウの端に触れてはいけません。100 dpi のモニタを想定して，省略時のメニュー・フォントの67 フォント・ユニット分を最小マージンとしてください。 図 1-27 を参照してください。

  プログラミングのヒント

    67フォント・ ユニットのマージンを使うには，XmNunitType=Xm100th_font_unitsを設定し， マージンを67に指定します。

  ### 図 1-27 ダイアログ・ボックス内の均等な配置

- gutterの幅を均等にする

  gutter(ガター)とは，制御ボタン・グループの各bevel間のマージンのことです。100 dpi のモニタを想定して，gutterの最小値を省略時メニュー・ フォントの45フォント・ユニット分としてください。図 1-27 に例を示します。

- bevelマージンを均等にする

  bevelマージンとは，bevelと制御ボタン間，またはbevelとラベルとの間のマージンのことです。 各マージンの最小値は省略時フォントの45 フォント・ユニット分としてください。

  プログラミングのヒント

    bevelの影の幅を， 最小値である省略時メニュー・フォントの17ユニット分にするには，XmNshadowThickness を使います。

- ラベルとボタン，ラベルとテキスト入力フィールドとの間のスペースを調節する

  ラベルの隣にボタンまたはテキスト入力フィールドをレイアウトする場合， ラベルとボタン，またはテキスト入力フィールド間のスペースを調節して， すべてのボタンまたはフィールドの位置がそろうようにレイアウトしてください。 図 1-28はテキスト入力フィールドの適切なレイアウトと不適切なレイアウトを示したものです。

  ### 図 1-28 ラベルとテキスト入力フィールドの適切な配置と不適切な配置

  プログラミングのヒント

    図 1-28 に示すようにラベルの後ろのテキスト入力フィールドすべてをそろえるには， テキスト入力をFormDialogの左にアタッチし， 最長ラベル，スペース，マージンを足した値と等しくなるようにオフセット値を指定してください。

  ボタンの隣にラベルをレイアウトする場合，図 1-29 に示すようにボタンと各ラベル間のスペースが均等になるようにしてください。

  ### 図 1-29 左そろえと横配列

## 1.5.5 ラベルとテキスト・フィールドをそろえる

ラベルとテキスト・フィールドは，縦と横の両方向でそろえることが必要です。 ラベルを縦に最も効果的に配置するには,ラベルを，テキスト入力フィールドの一番下ではなく， テキスト入力フィールド内のテキストのベースラインにそろえてください。 図 1-30に，ラベルのそろえかたの効果的な方法を， そうでないものと一緒に示します。

### 図 1-30 ラベルをテキストのベースラインとそろえる

プログラミングのヒント

  ラベルをテキストのベースラインにそろえるには，Xm_ATTACH_OPPOSITE_WIDGET を使用して，テキスト・ウィジェットの上部をラベルの上部と結び付け， 負のXmNtopOffsetをテキスト・ウィジェットに設定します。画面に表示したときにベースラインがラベルより下がってみえる場合は， 正のXmNtopOffset を設定してください。

ラベルとテキスト・フィールドを横にそろえるときに使用する良い方法が2 つあります。一つの方法は図 1-31 に示すように，ラベルを左にそろえて配置することです。

### 図 1-31 ラベルとテキスト・フィールドの左そろえ配置

もう一つの方法は，図 1-32 に示すように，ラベルを右にそろえて配置することです。

### 図 1-32 ラベルとテキスト・フィールドの右そろえ配置

ラベルを右そろえにした場合は，ラベルの右端がそろいます。フィールドの順番は， 左ろえの場合と同じですが，その作成の実施方法が異なります。

どのスタイルを選択した場合でも，アプリケーション全体を通じて選んだスタイルを一貫して使用することと， ユーザが情報を入力するテキスト・ フィールドは常に左そろえの配置になっていることを確かめてください。

以下のプログラミングのヒントでは，左そろえラベル，続いて右そろえラベルの作成方法について述べます。

プログラミングのヒント

  左そろえラベルの場合は,次のステップに従ってください。

  1. 適切なオフセット値を使用して，ラベルの左側をフォームにアタッチします。

  2. すべてのテキスト・ウィジェットの左側を最大のラベルと結び付けます。

  3. すべてのラベルが枠内に入っているかを確認します。

  ユーザが行う各国語対応とフォント設定について配慮が必要と考える場合は， 次のステップに従って，実行時にレイアウトを修正がすることが可能です。

  1. 適切なオフセット値を使用して，ラベルの左側をフォームにアタッチします。

  2. 各テキスト・ウィジェットの左側をラベルの上部と結び付けます。

  3. 実行時に,すべてのラベルを調べて最大のサイズを見つけます。

  4. 一番上のラベルのXmNwidthを最大サイズに設定します。

プログラミングのヒント

  右そろえラベルの場合は,次のステップに従ってください。

  1. 最初に次のどちらかを選んでください。

     - ラベルの右側を，ダイアログ・ボックス内の位置（30%など）にアタッチします。

     - 最大ラベルを決め，適切な左オフセットを値を使用して， それをフォームにアタッチします。その後で，他のラベルの右側を最大ラベルにアタッチします。 他のラベルの右オフセット値をゼロ(0) ，アタッチメントの種類をOPPOSITE_WIDGETに設定します。

  2. テキスト・フィールドの左側を最大ラベルにアタッチします。

  3. テキスト・フィールドの右側をフォームにアタッチします。 左右のアタッチメント両方をテキスト・ウィジェットに設定した場合は， そのテキスト・ウィジェットのサイズは最小サイズのどれかで無効にされ， 指定したカラムの数にはならないことに注意が必要です。

     このような問題が起きないように,次の処置を実行してください。

     - フォームのサイズを直接，設定する。

     - XtManageChildを呼び出した後で，テキスト・フィールドの右のアタッチメントを設定する。

     その後で,テキスト・ウィジェットのカラム・サイズを使用して，ダイアログ・ ボックスのサイズとテキスト・ウィジェットが決められます。 また,テキスト・ウィジェットはフォームの右側にまだアタッチされており， ダイアログ・ボックスと一緒にサイズの変更が行われます。 ダイアログ・ボックスのサイズを変更可能にする方法は，第1.2.2項を参照してください。

  ユーザが行う各国語対応とフォント設定について配慮が必要と考える場合は， 次のステップに従って，実行時にレイアウトを修正がすることが可能です。

  1. 適切なオフセット値を使用して，ラベルの左側をフォームにアタッチします。

  2. 各テキスト・ウィジェットの左側をラベルの上部と結び付けます。

  3. 実行時に,すべてのラベルを調べ，最大のサイズを見つけます。

  4. 最大のものを除いて，すべてのラベルの左アタッチメントをゼロに再設定します。 ここで，最大ラベルによって，ダイアログ・ボックスの幅が決められます。

  5. 最大のものを除いて，すべてのラベルの右アタッチメントを最大ラベルに再設定します。 オフセット値をゼロ(0)，アタッチメントの種類をOPPOSITE_WIDGET に設定してラベルのすべての右側をそろえます。

## 1.5.6 視線の動きが左から右，上から下になるようにレイアウトする

左から右への言語環境の場合，左から右，上から下へ視線が動くように制御ボタン類を編成します。 インデントを使用して，それぞれのグループ分けと相互の関係がはっきりわかるように並べ表示してください。 制御ボタンを編成する際は， 次に示すガイドラインを参考にしてください。

### 1.5.6.1 左上のコーナーを活用する

ダイアログ・ボックスの左上のコーナーはユーザが最初に見る領域です。 この領域を上手に使用してください。次の制御ボタンのいずれかをこのコーナーに配置します。

- 最も使用頻度の高いもの

- 最も重要なもの

- 一連の制御ボタンの中で最初に使うもの

  たとえば，細字か太字のどちらかを選ぶ前に，フォント・ファミリを選ぶほうが順番として理にかなっています。 この場合，左上のコーナーにはフォント・ ファミリの制御ボタンを配置するのがよいでしょう。

### 1.5.6.2 関連のある制御ボタンをはっきりとわかるように並べる

関連のある制御ボタンを並べて示す場合，図 1-29 のように左そろえの縦並び，または左から右への横並びを使用します。 横並びは項目が4つ以下の場合に使用します。それ以上の項目がある場合には， 縦並びを使用してください。外国語のテキストは長くなる可能性があるので翻訳では縦並びの方が簡単です。

ラジオ・ボタンを複数のグループで使用する場合は特に注意してください。 ラジオ・ボタンはいずれか1つを選択するものなので，ユーザが確実にグループ分けを理解できるようにレイアウトする必要があります。 ダイアログ・ ボックス内のすべてのボタンから選択できるのか，各グループのボタンから選択するのか， ユーザが混乱しないようにレイアウトしてください。

ラジオ・ボタンとトグル・ボタンのインデントに配慮を加え，グループ化が一層はっきりするようにしてください。 インデントの使用により，空白が増し， ダイアログ・ボックスの密集状態が緩和されてみえます。一般的には， 制御ボタン類のレイアウトは，相互の間に十分な空白と周囲にマージンをもたせ， 表示がユーザの目に優しく写るようにするとともに，ユーザが視線を注意を集中できるはっきりしたものにしてください。 図 1_29と図 1-33 に，インデント付きのラジオ・ボタンとトグル・ボタンのグループ分けを示します。 図 1-33は， 適切なラベル表示をした２つのグループのラジオ・ボタンと，不適切なラベル表示のラジオ・ ボタンを比較したものです。適切なラベル表示によって， グループが異なることが識別しやすくなります。図 1-33 では，bevelが異なるグループの識別に利用されています。

### 図 1-33 ラジオ・ボタンの適切なラベル表示と不適切なラベル表示

### 1.5.6.3 構造を明確にする

構造を明確にするために，制御ボタン類は次のいずれかの順序で配置します。

- アルファベット順

- 選択頻度順

- サイズ順(選択肢が10ポイント，12ポイント，14ポイントのような数値の場合)

図 1-29の重量測定値はアメリカ文化での使用頻度に応じて編成されており，2 つの計量単位が一緒になっています。 このような場合は，選択肢をアルファベット順にして次の順序にしてもよいでしょう。

- グラム(Grams)

- キログラム(Kilograms)

- オンス(Ounces)

- ポンド(Pounds)

- ストーン(Stone)

このように並べかえても，英語圏における計量法というグループ分けは守られます。

### 1.5.6.4 省略時のボタンを適切に設定する

省略時のボタンを適切に設定すると，ユーザはリターン・キーを押すだけで作業を続けることができます。 たとえば，ダイアログ・ボックスに最も選択される可能性の高い制御値を表示させることによって， ほとんどの場合にユーザはリターンを押すだけでいいように設定することができます。

図 1-34はすでに選択した値の中で最もよく選択される選択肢を省略時の設定として表示したページ・ セットアップ・ダイアログ・ボックスの例です。ユーザは，「了解」をクリック， あるいはリターン・キーを押すのいずれかの操作で省略時の設定を使用することができます。

### 図 1-34 省略時のボタンを適切に設定する

### 1.5.6.5 オプション・ボタンを使用してスペースを節約する

オプション・ボタンはオプション・メニューを表示します(オプション・ ボタンを，別のダイアログ・ボックスを起動する「オプション...」プッシュ・ ボタンとは混同しないでください。また，メニュー・バーにある「オプション」メニューとも混同しないでください) 。図 1-35に示すように， ユーザがオプション・ ボタンを押すとメニュー項目が表示されます。

オプション・ボタンを使用すると表示は順次に進行し，ユーザに情報を一度に提供し過ぎることが避けられ， 一段とすっきりした，密集程度が低い， インターフェイスが可能となります。

以下の環境下では，ラジオ・ボタンの代わりにオプション・ボタンの使用を考慮してください。

- ラジオ・ボックスが一個以上あるとき

- ダイアログ・ボックス内に他の構成要素が多くあるとき

- ラジオ・ボックス内のラジオ・ボタンが多くなり過ぎるおそれがある場合

### 図 1-35 オプション・ボタンを使用してスペースを節約する

図 1_36は，図 1-33 でユーザに与えられた同じ選択肢を， どのように2個のオプション・ボタンを使って並べるかを示しています。

### 図 1-36 2個のオプション・ボタンを使用する

１行または１列のいずれかで，1組のオプション・ボタンを一緒に作成する場合は， 必要に応じてそれらを横または縦に配置して，好ましいレイアウトを提供してください。 ボタンのサイズが大体同じ場合には，オプション・ ボタンは同じ幅にする必要があります。

### 1.5.6.6 ダイアログ・ボックス内の数値を初期設定する

ダイアログ・ボックスが二回目に表示された際に，フィールドすべてに対する値が保存されるようにしてください。 たとえば，ユーザが「作成」ダイアログ・ ボックスを再表示するときに，既に入力されている数値の大部分を保持したいと思う可能性があります。 これらの数値を保存することによって， ユーザがすべての情報を再入力する必要をなくすことができます。 「ディレクトリ」ダイアログ・ボックスの場合には，ユーザは二回目も同じ構成要素を表示を希望しても， 最後に修正した時間などフィールド一箇所の内容を変更したいと考える可能性があります。

### 1.5.6.7 複数の選択方法を提供する

必要と思われる場合は，情報を入力する方法として制御ボタン類(ラジオ・ ボタンやリスト・ボックスなど)を選択することも，テキスト入力フィールドに直接入力することもできるように設定します。 たとえば，図 1-37はユーザがテキスト・ フィールド内でサイズをタイプ入力するか， あるいはプッシュ・ボタンを選択することによってウィンドウのサイズを変更するダイアログ・ ボックスです。

### 図 1-37 いろいろな選択方法を提供する

ただし，様々な選択方法を使い過ぎて，煩雑にならないように注意することが必要です。 また，視覚的な機能(フラッシング，太字，下線など)を過度に使用してユーザを混乱させないように注意してください。 一般的には, ユーザの注意をそらすことになるのでフラッシングの使用は避けてください。

## 1.5.7 タブ・グループを作成する

タブ・グループは，タブ・キーによって移動することができるように編成されているウィジェット群から構成されるグループです。 言い換えれば， タブ・グループとは同じグループに属する制御ボタン群のことです。 たとえば，1組のラジオ・ボタンはタブ・グループになります。 タブ・キーを押すことによって，ダイアログ・ボックス内のタブ・グループ間を移動することができます( このためタブ・グループと呼びます)。

ダイアログ・ボックス内の制御ボタンは，はっきりと識別できるタブ・グループとして編成してください。 キーボードによるタブ・グループ間の移動についてツールキットは次のように区別します。

- タブ・グループ間の移動

- タブ・グループ内の移動

### 1.5.7.1 タブ・グループ間の移動

次の種類の制御ボタンをそれぞれタブ・グループとして扱ってください。

- リスト・ボックス

- サッシ

- スケール

- 1行のテキスト入力フィールド

- 1組のラジオ・ボタン

- 1組のチェック・ボタン

- 1つのオプション・ボタン(前後に別のタイプのタグ・グループがある場合)

  1組のオプション・ボタンも1つのタブ・グループを形成します。

フィールド間の移動に対しては，次のルールに従ってください。

- 位置カーソルは，ダイアログ・ボックス内の文字と同じ方向に移動させます。 つまり，最初はダイアログ・ボックスの左上に表示させ， ユーザがタブ・キーを押したときに，左から右，上から下へとユーザが予測できるような方向に移動させます。

  プログラミングのヒント

    このようにするためには， ダイアログ・ボックス内をタブ・キーで移動させる順序と同じ順序で子ウィジェットを作成します。

- 現在のダイアログ・ボックスから他のウィンドウに入力フォーカスを与え， その後もとのダイアログ・ボックスに入力フォーカスを戻す場合は次のようにしてください。

  - ユーザがダイアログ・ボックス内のいずれかの制御ボタンをクリックした場合は， その制御ボタンに入力フォーカスを与えてください。

  - ユーザが一般領域(タイトル・バー，空白スペース等)でクリックした場合， あるいはキーボードを使用して入力フォーカスを戻した場合は， 最後に位置カーソルのあったタブ・グループの上に位置カーソルを置いてください。

ユーザがタブ・キーを押したときに入力フォーカスがどのようにタブ・ グループ間を移動するかについては，図 1-38 と図 1-39を参照してください。 ユーザがタブ・キーを押し続けると，位置カーソルは右下のタブ・ グループから左上のタブ・グループに自動的に戻ります。

### 図 1-38 タブ・キーによるタブ・グループ間の移動

### 図 1-39 タブ・キーによるタブ・グループ間の移動- 続き

### 1.5.7.2 タブ・グループ内の移動

タブ・グループ内の項目間を移動する場合は矢印キーを押します。たとえば， あるラジオ・ボタンのメニュー項目から次の項目に移動する場合，下矢印キーを押します。 ただし，矢印キーでタブ・グループ間を移動するすることはできません。

ユーザが矢印キーを押したときにタブ・グループ内で項目間を位置カーソルがどのように移動するかについては， 図 1-40を参照してください。 位置カーソルは自動的に最初の位置に戻ります。 つまり，下矢印キーを押してカーソルが最後の項目に進んだときに， 下矢印キーをもう一度押すと位置カーソルは最初の項目に戻ります。

### 図 1-40 矢印キーによるタブ・グループ内の移動

# 1.6 ダイアログ・ボックス内のテキストおよび画面上の他のオブジェクトを表現する

ダイアログ・ボックスで使用するラベルやテキストおよびメニューやタイトル・ バーなどの画面上の他のオブジェクトを作成するときは，次のガイドラインを守ってください。

- テキストに大文字だけを使用しないでください。大・小文字を混ぜて読み易く， スタイルを整えます。

               正:  Null Pointer

               誤:  NULL POINTER

- 現地の言葉や翻訳された用語を使用している場合は，該当する大文字化の規則に従ってください。

- ダイアログ・ボックスでは,できるかぎり文や文に準じた語順を使用してください。 各文の最初の語には大文字を使用します。ファイル名のように文字表示で混乱を生じない限り、 文の句読点を使用してください。

               Loading file /usr/sbin/uerf.hlp

               The file /usr/sbin/uerf.hlp cannot be found.
               Please check the file name and directory for spelling
               or other errors and try again.

- ダイアログ・ボックス内の画面上のオブジェクトの各語（トグル・ ボタンのラベル，ラジオ・ボタン，テキスト入力フィールド等）では大文字を使用してください。 ただし，5文字以内の冠詞や前置詞で，2 語の間に挾まれている場合を除きます。

               Levels with Periods
               Number of Columns
               Space Between Columns
               First Line Indent
               Dates Before 1993

- プッシュ・ボタンでは各語の最初の文字を大文字にしてください。 例外は「了解（OK）」プッシュ・ボタンの場合で，両方とも大文字になります。

               Go Back
               Exit

- メニュー名,メニュー項目,またはラベルの各語の最初の文字は大文字にしてください。 ただし，5文字以内の冠詞や前置詞で，2語の間に挾まれている場合を除きます。

               Show Room
               Go to Page...
               Save As...

- メニュー名，メニュー項目，またはラベルでハイフンを用いて結合された語が使用されている場合は， 最初の語の最初の文字，ならびに名詞， 固有形容詞，あるいは最初の語と同じ重要度を有する全部の語の最初の文字を大文字にしてください。 これらの2語の間に鋏まる冠詞， 接続詞，前置詞ではすべて小文字を使用してください。

               Side-by-Side

               Cross-References

# 1.7 タイトル・バーを作成する

タイトル・バーは1次および2次ウィンドウの両方で使用されます。

1次ウィンドウでは,次のようにラベルを提供してください。

- アプリケーション名（後にコロンを付けて）とファイル名を使用してください。 情報を中央に配置します。

  アプリケーションで省略時のファイル名が使用されている，あるいは作成する前にユーザが名前をつける必要がある場合は， その名前が起動時にタイトル・ バーの上に表示されます。アプリケーションによって， 名前を付ける前に，ユーザがファイルを作成できる場合は，最初からタイトル・ バーに名前を付けないでください。

- プリケーションのバージョン番号をタイトル・バーに付けないでください。

- UNIXやWindows NTシステムでは,ファイルのパス名を付けないでください。OpenVMS システムでは,ファイルが位置するディレクトリを組み込まないでください。

- UNIXベースのシステムでは,ファイル名の文字はユーザがタイプ入力した活字ケースで表示されます。OpenVMS システムでは,ファイル名は， すべて大文字，または読みやすくするためにすべて小文字で表示され， ファイルの拡張子と一緒にバージョン番号も含まれます。 Windows NTシステムでは,ファイル名は，すべて大文字あるいは，一貫性を保つためにすべて小文字のいずれかで表示され， ファイルの拡張子が含まれます。

  図 1-41に，タイトル・バー内のファイル名の例を示します。

  ### 図 1-41 タイトル・バーに情報を含める

2次ウィンドウでは,次のようにラベルを提供してください。

- ウィンドウのタイトルをタイトル領域の中央に配置します。 (センターリングがです。)

- 2次ウィンドウがダイアログ・ボックスである場合は,ダイアログ・ ボックスに後にコロンが付いたアプリケーション名と作成のコマンドから構成されるタイトルを与えてください。

ダイアログ・ボックスの名前付けについての詳細は，第1.2.1項を参照してください。

# 1.8 処理中のダイアログ・ボックスと待ちカーソルを使用する

処理中のダイアログ・ボックスと待ちカーソルを使用して，ユーザに進行中の使用アプリケーションの即時フィードバックを提供してください。

大部分の状況で操作が15秒以上を要する場合は,処理中のダイアログ・ボックスを使用して作業の進行を示してください。 操作に要する時間の長さは大部分が使用システムに依存しているので, 処理中のダイアログ・ボックスの表示をオプションにするとよいでしょう。

操作に要する時間が15秒以内の場合は，カーソルをDECwindowsのウォッチ・ カーソルなどの待ちカーソルに変えて，ユーザにアプリケーションが処理中であることを知らせてください。 待ちカーソルの表示を操作が完了するまで続けます。 待ちカーソルは以下の種類の操作に対して使用してください。

- ダイアログ・ボックスを表示するメニュー項目を選択する

- 直接操作を実行する

- ウィンドウをスクロールする

- 項目を開いたり，閉じたりする

- ダイアログ・ボックスで「了解」または他のボタンを選択する

ユーザがアプリケーションの操作の完了を待機しているウィンドウ全部で待ちカーソルを設定してください。 たとえば，アプリケーションがディレクトリを復元している場合は， 待ちカーソルを，ディレクトリのウィンドウばかりでなく， その復元の完了にはっきり関係していることが分かっている他のすべてのウィンドウでも設定してください。

プログラミングのヒント

  以下のコードの例を使用して，稼働中のウィンドウに対して待ちカーソルを設定してください。 アプリケーションがOpenVMSシステムで稼働しているときは，#ifdef が使用されます。もう一方の取込みステートメントは, UNIXとWindows NTシステムの両方に適用されます。

               #ifdef OpenVMS
               #include <decw$cursor.h>
               #else
               #include <X11/decwcursor.h>
               #endif
               #include <DXm/DECspecific.h>

                 /* Wait? */
                 if ( wait )
                   /* Set the wait cursor for this window. */
                   waitCursor = DXmCreateCursor(widget,decw$c_wait_cursor);
                 else XUndefineCursor(XtDisplay(widget), XtWindow(widget));

[ 前のページ ] [ 次のページ ] [ 目次 ] [ 索引 ]