Titanium Desktopでアプリ開発

Titanium Desktopを使った業務アプリの開発で、設計方針を決める話の第３話です。

今回は、画面設計の方針を決めます。実現する技術に関してではなく、画面内に入れる情報レイアウトなどの標準化ですね。とくに目新しいことはなく、非常に一般的な方針を「おさらい」する感じです。

画面を上中下の３層に分けて、上部層がタイトル、下部層には画面移動などの、画面内容と関係の薄い操作系ボタンを入れます。下部層のボタンは左側と右側に分けて、画面切り替えボタンを左側に、その他のボタンを右側に並べましょう。

画面の中央層には、各画面の中心となる情報表示、情報操作のフィールドやボタンなどを並べます。ボタンについては、個別の情報に関係するものは情報表示の隣に、「登録」などの情報全体に関わるものは下側に並べます。

上中下の３層の区切りが明確になるように、区切り部分にBRタグを入れて境界を目立たせます。業務アプリですから、見栄えよりも分かりやすさを重視しているわけです。全体としての下部層にボタンが並び、中央層の下部にもボタンが並びますから、その区切りを伝える意味もあります。

続いて操作性に関してです。以前のシステムを設計したときから、マウスだけで（つまりキーボードを使わずに）操作できるようにとの強い要望が依頼主ありました。もちろん全部の操作が対象ではなく、日常業務で操作する画面に関してだけです。値の増減は、できる限り「＋」や「−」ボタンなどで行い、キーボードなしで使えるように配慮します。

エラーなどのメッセージを出す場所も決めます。下部層では、左右両端のボタンの間に、メッセージ用のラベルを用意します。中央層でも、一番下に付けた左右両端ボタンの間に、メッセージ用のラベルを作ります。

２つメッセージ用ラベルの使い分けは、非常に簡単です。個々の画面の内容に関するメッセージは、中央層のラベルに表示します。システム全体に関わるエラーなどは、下部層のラベルに表示するという具合です。たとえば、アプリの環境設定ファイルが読めない場合、システム全体でのエラーですから、下部層のエラーに表示することになります。ほとんどの機能はボタンで開始しますから、ボタンが付いている側のラベルを使うことになり、迷うことはありません。

画面に出すエラーメッセージも重要度で色分けします。重大なエラーは赤色で、注意点なら青色で、処理が成功したのを知らせるなら緑色などです。この辺の簡単な実現方法は、また別の機会に取り上げましょう。

残りはHTMLとCSSについてですが、これは次回に。