UI 設計ツール NINA による組み込み機器 UI 開発の効率化
豊岡 明† 小中 裕喜‡ 三菱電機株式会社 先端技術総合研究所† 三菱電機株式会社 先端技術総合研究所‡ 1. はじめに 近年、携帯電話やカーナビ、情報家電などの 組み込み機器において、機器の高機能化による UI (User Interface)の複雑化・肥大化が進んで いる。その一方で、組み込み機器の UI は機器デ ザインの一部であるため、外観や動作仕様は機 種ごとに変更される。このような特徴から、組 み込み機器用 UI ソフトウェアの開発工数は増加 を続けており、その開発効率の向上が急務とな っている。 我々はこれらの問題を解決するために、UI ソ フトウェアの効率的な開発を実現する UI 設計ツ ール NINA[1]の開発を進めてきた。本稿では、コ ンシューマ向け情報機器の UI を対象として、 NINA による UI ソフトウェア開発の有効性につい て述べる。 2. NINA の概要 NINA は組み込み機器向けの UI 設計ツールであ る。組み込み機器は PC と異なり、画面が小さく ポインティングデバイスを備えないことが多い。 このため、組み込み機器用の UI は、限られた操 作手順に従って画面を切り替えながら操作する のが一般的である。NINA では、このような画面 の切り替えを伴う UI のモデリングに適した、 SCO (State Chart Object)という概念に基づい て UI 設計を行う。 SCO は、複数のステート(状態)とそれらの間の 遷移を設計可能な UI 部品である。各ステートは 1 つの画面レイアウトを持ち、ある時点での SCO のステートに対応する画面レイアウトが、その 時点での SCO の外観として表示される。 各画面レイアウトにはボタンやラベルといっ た基本 UI 部品の他に、他の SCO を UI 部品とし て配置できる。これにより SCO の階層化が可能 となる。SCO の階層化により、画面中のカスタム UI 部品から機器アプリケーションの UI に至るま で、すべて同一の枠組みで設計し、組み合わせ て動作させることができる。 図 1 に、SCO の階層化の例を示す。 図 1 SCO の階層化の例 図 1 の SCO1 は、音楽の再生と停止を操作する 簡単な UI を実現している。SCO1 は停止中と再生 中の 2 つのステートを持ち、ボタン押下イベン ト発生時にもう一方のステートに遷移する。各 ステートの画面レイアウトには、停止中と再生 中に対応した UI 画面が作成されている。 図 1 の SCO2 は、再生する曲名を選択してから 再生画面を表示する UI を実現している。SCO1 と 同様に、選曲画面と再生画面がそれぞれステー トとして定義されている。ここで再生画面には、 SCO1 がカスタム UI 部品として画面レイアウト内 に配置されている。 続いて NINA の構成要素を示す。 z レイアウトエディタ: 作図ソフトライクな操 作で画面レイアウトを作成。 z チャートエディタ: UI 画面間の遷移を状態遷 移図として設計。 z シミュレータ: 設計した UI の動作を開発 PC 上で即座に確認。 z コードジェネレータ: 設計した UI から実機An effective UI software development for embedded devices using UI design tool NINA.
† Akira Toyooka, Advanced Technology R&D Center, Mitsubishi Electric Corporation.
‡ Hiroki Konaka, Advanced Technology R&D Center, Mitsubishi Electric Corporation.
1-185
6A-1
用のソースコードを自動生成。 z ドキュメントジェネレータ: 設計した UI か ら内部仕様書を自動生成。 図 2 に、NINA を使用した UI ソフトウェアの開 発手順を示す。 図 2 NINA による UI ソフトウェアの開発手順 (1) 機器の UI 仕様書や UI 案をもとに、レイア ウトエディタとチャートエディタを用いて UI を設計する。 (2) 作成した UI をシミュレータで実行し、UI の 動作を確認する。 (3) 動作確認の結果、不具合や変更したい箇所 があれば、(1)に戻って修正する。以降(1)か ら(3)の手順を繰り返すことで、実機を使用 することなく NINA 上で UI を作り込める。 (4) UI 設計がある程度進んだら、コードジェネ レータを用いて実機用ソースコードを生成す る。生成されたソースコードを、実機用ラン タイムソフトウェアとともにコンパイル・リ ンクすることで、実機用の UI ソフトウェア が完成する。 (5) ドキュメントジェネレータを用いて、内部 仕様書を生成する。 3. NINA 適用の評価 コンシューマ向け情報機器の UI を対象として NINA の適用効果を評価した。表 1 に、対象とな る UI の概要を示す。 表 1 対象となる UI の概要 項目 仕様 操作デバイス リモコン (ボタン約 30 個) UI 画面数 約 50 画面 表 2 に、プログラマによるハンドコーディン グと NINA を用いた場合それぞれについて、UI ソ フトウェアの開発工数を測定した結果を示す。 表 2 ハンドコーディングと NINA の開発工数比較 開発内容 ハンドコー ディング NINA 工数比 メニューの階層構造 変更 16h 4h 25% 設定画面(4 項目から 1 項目選択)新規作成 16h 8h 50% カスタム UI 部品の 外観変更 6h 1h 17% 高機能な UI 画面の 外観デザインと操作 仕様の変更 120h 48h 40% ※開発者は 1 名 ※h: hour ハンドコーディングでは、画面レイアウト変 更時の UI 部品座標の再設定や、画面遷移変更時 の遷移処理の修正、および実機での動作確認に 時間を要した。これに対し NINA では、レイアウ トエディタ、チャートエディタおよびシミュレ ータにより修正結果を視覚的に確認できること が、工数の差に表れたと考える。 5. おわりに 組み込み機器の UI ソフトウェア開発を効率化 する UI 設計ツール NINA を開発した。そして、 従来のハンドコーディングと NINA 適用それぞれ による UI ソフトウェアの開発工数を測定し、 NINA によって、UI ソフトウェアの開発工数を 50%～17%程度に削減できることを確認した。 今後、製品開発への適用を進めるとともに、 不足機能の拡張開発を行う予定である。 参考文献 [1] 小中裕喜, ほか: 階層的部品定義に基づく 組込用 UI 設計ツール, 組み込みソフトウェア工 学シンポジウム 2002, 情報処理学会研究報告, 2002-SE-139, 7～8 (2002)
