JP2008269575A - ソースコード生成装置 - Google Patents

Abstract

【課題】 ＧＵＩを表示するためのソースコード及びＧＵＩ表示データを生成するソースコード生成装置において、複数の実行環境毎に異なるデザインを持つユーザインタフェースを効率的にデザインし、その編集結果からソースコード及びＧＵＩ表示データを効率よく出力してソフトウェアの開発、修正、保守の効率を向上すること。
【解決手段】 ユーザインタフェース部品１つ１つに対して実行環境毎に異なる位置、サイズ、部品の属性、イベント動作などを管理し、独立して編集可能とすることで、実行環境により異なる情報と、実行環境によらず同一の内容を編集し、さらに複数の実行環境向けのソースコード及びＧＵＩ表示データを生成する。さらに、複数の実行環境に共通の操作と特定の環境に固有の操作を使い分けることにより、全体の操作回数を低減する。
【選択図】 図１

Description

本発明は、携帯電話機などに実装したコンピュータに実行させるプログラムのソースコードを生成するソースコード生成装置に係り、特に、コンピュータの複数の異なる実行環境にそれぞれ対応した画面デザインを編集し、ＧＵＩ表示データを生成すると共に、当該ＧＵＩ表示データを用いてＧＵＩ表示画面を表示させるソースコードを生成するソースコード生成装置に関するものである。

従来、プログラム開発作業においてユーザインタフェース部分を効率的かつ汎用的に作成するために、画面を定型のユーザインタフェース部品の組合せとして構築するためのグラフィカルユーザインタフェース（ＧＵＩ）ライブラリが数多く開発・提供されている。
ＧＵＩライブラリの動作方式としては、ＧＵＩライブラリをプログラムから呼出す際の引数（パラメタ）によって表示内容を静的に決定するものと、ＧＵＩライブラリを実行するプログラムの動作中に、ＧＵＩの設定内容を保存したリソースファイル等と呼ばれるデータファイルをＧＵＩライブラリが読み込むことで、実行時に表示内容を動的に決定するものがある。両者の形式を同時に採用しているＧＵＩライブラリも存在する。

静的に表示内容を設定するＧＵＩライブラリでは、ＧＵＩに関する設定値は呼出し元のプログラムのソースコードに記述され、動的に表示内容を設定するＧＵＩライブラリではリソースファイルにＧＵＩに関する設定値が記録される。
さらに、これらのＧＵＩライブラリを用いたプログラムにおける表示画面の開発作業の生産性を向上させるために、実際のＧＵＩ表示イメージをプレビューしながら、画面上にＧＵＩ部品を配置してゆくことでユーザインタフェース部分を設計するＧＵＩデザイン開発ツールが利用されている。
ＧＵＩデザイン開発ツールは、編集結果からライブラリを呼出すプログラムのソースコードや、ライブラリが実行時に読み込むリソースファイルを自動的に出力して、編集内容をプログラムの画面表示に反映させる。

プログラムの開発プロジェクトにおいては、ベースとなるハードウェア、オペレーティングシステム、実行プラットフォーム、実行時の設定値などによって、画面表示の環境が異なる場合が多い。例えば、同じプログラムが異なる画面サイズのハードウェアで実行される場合や、実行プラットフォームとなるＧＵＩライブラリのバージョンやオプション機能の有無の状況が異なる場合、またはユーザの設定によって表示機能が変更されている場合等である。

このような多種の表示環境に対応したプログラムを開発する場合には、従来においては、１つの画面に対して、環境毎に複数のＧＵＩデザインを作成する必要があった。これは、ハードウェアの画面サイズが異なる場合、小さいサイズ画面では狭い範囲にユーザインタフェース部品を配置したり小さいサイズに設定したり、表示するメセージを短い文に変えたりといった変更が必要なためである。
同様に、同じ画面サイズでもハードウェアの構成の仕方によって縦方向と横方向の表示が必要に成る場合では、縦長または横長の画面にあわせて各部品をレイアウトし直す必要があり、画面数が多いプログラムや複雑な画面を表示するプログラムでは、非常に大きな負担となっていた。

例えば、図３３に示すような表示画面を備えた携帯電話機３３０１において、表示画面を図３４に示すように横長方向に回転して画面を縦横の両方向で使用できるようにした機種がある。画面がこのように変化する携帯電話機３３０１にあっては、縦横両方の画面のデザインが必要になる。これらの画面は、写真や発信ボタンなど構成している部品は共通であるが、画面の方向に合わせて、各部品の位置やサイズが異なる。このように、複数の画面で共通部分が多い場合であっても、従来の画面デザイン手法では、各画面のデザインを実行環境毎に作成する必要があった。

また、実行環境によっては一部の動作を変更しなければならない場合も発生している。例えば、画面上に配置されたユーザインタフェース部品の間で、方向キーによって入力フォーカスが移動するプログラムでは、例えば左上から右下といったルールに従ってフォーカスを移動させることが多い。このとき縦横の画面方向に応じて部品の並び方が変わるプログラムでは、操作性を統一するためにフォーカス移動の順序を変更しなければならない。こういった場合にも、部品の配置状況に応じてフォーカスを制御する処理を用意する必要があり、煩雑な処理ロジックが必要となっていた。

このような問題に対応するために、高機能なＧＵＩライブラリの中には、画面サイズの設定が変更された場合に、自動的に位置情報を再計算して部品を再配置するものがある。これらは部品の位置を（ｘ，ｙ）座標のような固定値だけでなく、画面左端からの距離や特定の部品からの相対位置などで指定する機能や、部品の大きさを画面サイズに対する割合で指定できる機能を持っている。これは、異なる画面サイズで実行された場合にも自動的に部品の位置を変更して、１つのＧＵＩデザインの設定値で、多種多様な画面サイズに対応するものである。

プログラム開発では、プログラムの動作状態を実際に確認しながらＧＵＩデザインの編集を進めてゆく場合が多い。プログラムを実際の環境上や、シミュレータやエミュレーターと呼ばれる仮想マシン上で実行することで、ＧＵＩデザインの編集結果を確認するものである。
ＧＵＩデザイン開発ツールと、部品再配置機能を備えたライブラリ、さらにプログラムの実行確認環境を組み合わせることで、複数の画面レイアウト状態における表示を確認しながらＧＵＩデザインを開発することが可能である。
実行環境の設定を切り替えたり、実行環境のプラットフォームを切り替えたりすることで、１つのプログラムを複数の環境で実行できるため、それぞれの実行環境における動作状況を切り替えながらＧＵＩデザインを編集することができる。そして、その編集結果から、ＧＵＩライブラリを呼出すソースコードやＧＵＩ表示データを出力することで、効率的に開発作業を進めることが可能である。

ＧＵＩ表示データとは、ＧＵＩライブラリが実行時に表示部品を配置し、色や文字、画像などの属性を設定し、またイベント動作を決定するために使用するＸＭＬデータやバイナリデータ、テキストデータなど、ＧＵＩ表示の制御情報を含むソースコード以外のデータを指している。

このような公知文献の例として、自動的に表示部品の位置とサイズの変更が可能なＧＵＩ表示プログラムと書式ファイルに定義されたレイアウト情報を組み合わせて、ＧＵＩの自動レイアウトを可能とした、下記の特許文献１などがある。

特開平１０−２２８３７２号公報

ＧＵＩライブラリを用いるプログラムのＧＵＩデザイン開発において、複数の実行環境で共通に利用できるＧＵＩデザインを開発するためには、環境の数だけ複数の画面デザインを作成するか、自動再配置に対応したライブラリを利用する必要がある。また、実行環境によって異なる処理を行なうプログラムでは、環境を判定して別個の処理を行なうロジックを作成する必要がある。

実行環境の数だけＧＵＩデザインを作成する場合は、ＧＵＩデザイン作成の手間が何倍にも増加するだけでなく、ＧＵＩデザインの変更のために大きな手間が掛かるという問題がある。
同一のユーザインタフェース部品と同一の機能を持った画面でも、ユーザインタフェース部品の位置やサイズが異なるだけで多数のＧＵＩデザインを行なわなければならず、デザイン結果から生成されたソースコードやＧＵＩ表示データが期待通りに動作することを確認する作業も、実行環境の数だけ必要となる。

また、画面に新たな部品を追加する作業では、複数のＧＵＩデザインに対して追加作業を行って、適切に管理する必要がある。
同じ画面を示す複数のＧＵＩデザイン情報がツール上で連動していない場合が多いため、画面名やコメントなどにより手作業で管理せざるをえず、メンテナンスやエンハンスの効率が低下すると共に、ミスが発生し易いという問題があった。

自動再配置に対応したＧＵＩライブブラリを使用する方法では、ＧＵＩライブラリで設定可能な配置方法しか選択できないという問題がある。
例えばユーザインタフェース部品の横サイズを「固定値」または「画面幅に対する割合」の２通りで設定できるＧＵＩライブラリを利用するケースでは、全ての実行環境で一定の割合の横サイズとして良いプログラム以外には対応できない。例えば、画面の横幅が200pixel〜1600pixelの実行環境が想定される場合に、ある程度以上大きな画面では、一定の割合の横幅では大き過ぎて余白が発生する問題や、逆に小さ過ぎて全ての情報を表示できない問題があり、逆に小さな画面では、小さ過ぎて全ての情報が表示できない問題がる。
通常は特別な画面サイズに対応する処理として、画面サイズが一定範囲を超えたら固定値とするといった処理を追加するが、固定値と可変値を切り替える処理を実装するソースコードが必要となるため、画面デザインとソースコードをツール上で関連付けできない上に、部品のサイズや画面のバターンによって複雑なメンテナンスが必要になるという問題があった。

また、実行環境に応じて処理を切り替える場合も同様である。ＧＵＩデザインツールとソースコードがツール上で自動的に関連付けられないため、仕様書やソースコードのコメントによって手作業で実行環境と処理ロジックの関連付けを管理する必要がある。
また、部品の追加や画面サイズの変更などが発生した場合に、画面デザインの変更に伴う影響範囲を特定して、適切なソースコード修正を行なうためには大きな作業量が必要となり、メンテナンス及びエンハンスの効率が低下する問題となっていた。

本発明の目的は、以上のような問題点を考慮し、複数の実行環境毎に異なるデザインを持つユーザインタフェースを効率的にデザインし、そのデザイン結果から実行環境毎に異なるＧＵＩ表示データとソースコードを効率的に出力し、ＧＵＩ表示データを含むプログラムの開発、修正、保守作業の効率化を図ることができるソースコード生成装置を提供することである。

上記目的を達成するために、本発明のソースコード生成装置は、コンピュータに実行させるプログラムのソースコード及びユーザインタフェース部品を表示画面に表示するためのＧＵＩ表示データを生成するソースコード生成装置であって、
前記コンピュータの実行環境にそれぞれ対応し、位置、サイズ、属性などの部品要素情報が異なる前記ユーザインタフェース部品を編集する第１の手段と、編集結果の部品要素情報に基づき指定された実行環境に対応したユーザインタフェース部品のＧＵＩ表示データ及び当該ＧＵＩ表示データを用いてユーザインタフェース部品を表示するためのソースコードを生成して出力する第２の手段を備えることを特徴とする。
また、ＧＵＩ表示データによりユーザインタフェース部品を編集画面にプレビューする手段をさらに備えることを特徴とする。
また、前記実行環境の切り替え操作を受付け、切り替え指定された実行環境におけるユーザインタフェース部品を編集画面に切り替え表示する手段をさらに備えることを特徴とする。
また、前記実行環境に応じて、一部のユーザインタフェース部品をソースコードまたはＧＵＩ表示データの出力対象から除外する手段をさらに備えることを特徴とする。
また、ユーザインタフェース部品に対する編集操作を、すべての実行環境に共通に適用される共通操作と、特定の実行環境のみに適用される固有操作に区別する手段をさらに備えることを特徴とする。
また、新たな実行環境を追加する手段を有し、実行環境を追加した時点でそれ以前の共通操作の実行結果を反映させる手段をさらに備えることを特徴とする。
また、同一の編集操作に対し、当該編集操作が共通操作であるか固有操作であるかの切り分けを、編集操作の都度ユーザが指定する手段を有することを特徴とする。

本発明のソースコード生成装置によれば、次のような効果がある。
（１）ソースコード生成装置が出力するソースコード及びＧＵＩ表示データの動作対象となる実行環境が複数存在する場合に、１つの画面デザインに対して複数の位置、属性、イベント動作などの部品要素情報を実行環境毎に個別に指定して編集することで、実行環境毎に最適の画面デザインを持ったプログラムのソースコード及びＧＵＩ表示データを編集し、生成することが可能となる。
（２）プログラムのＧＵＩデザイン開発において、１つの画面で複数の実行環境に対応したデザイン結果やイベント動作を、ソースコード生成装置上でデザイン時にプレビューして確認することにより、実際にプログラムを動作させて確認するために必要な作業を軽減できる。
（３）複数の実行環境のうち、一部のユーザインタフェース部品が特定の環境で不要となる場合には、これらを除外したＧＵＩデザインを設計し、ソースコードまたはＧＵＩ表示データを生成することによって、ユーザインタフェース部品の制御に必要な処理の記述と、ＧＵＩデザインと連携した管理を自動的に行なうことが可能となる。
（４）複数の実行環境に対応したＧＵＩデザインの設計において、複数の実行環境で共通に使用する部品の追加などの共通操作と、画面サイズに応じた部品のレイアウトなどの実行環境ごとに独立して適用される固有操作を区別することにより、複数の実行環境に共通の編集操作を一度で済ますことができ、編集作業を効率化できる。

以下に、本発明を適用した、複数の実行環境に対応したＧＵＩデザインを行なうソースコード生成装置の一実施の形態について説明する。
図１は、本発明の実施形態の一例を示すシステム構成図である。
本ソースコード生成装置は、処理装置１、入力装置２、表示装置３、ＧＵＩデザイン情報ファイル４、リソースファイル５、複数の素材データファイル６、ソースファイル７、ＧＵＩ表示データファイル８、メモリ９、ＣＰＵ１０、既存のデザイン情報ファイル９９からなり、入力装置２はキー入力装置２１とポインティング入力装置２２からなり、メモリ９の上でソースコード生成プログラム９１とオペレーティングシステム９２が実行される。

図２は、ソースコード生成プログラム９１の機能、テーブルおよび処理対象データを示すブロック図である。
ソースコード生成プログラム９１は、ＧＵＩ編集手段１０１と、部品属性編集手段１０２と、イベント動作編集機能１０３と、実行環境選択機能１０４と、ユーザインタフェース部品提供手段１０５と、リソース管理手段１０６と、ＧＵＩデザイン情報ファイル入出力手段１１１と、リソースファイル入出力手段１１２と、ソースコード生成手段１１３と、ＧＵＩ表示データ生成手段１１４から構成され、ＧＵＩデザイン情報を記録したＧＵＩデザイン情報ファイル４と、素材データの情報を管理するリソースファイル５と、ユーザインタフェース部品に設定してＧＵＩを構成する画像や文字列である素材データを記録した複数の素材データファイル６と、従来の技術で開発したデザイン情報を記録した既存のデザイン情報ファイル９９と、ＧＵＩデザイン情報ファイル４から読み込まれた画面単位の情報を管理する画面テーブル２０１と、ＧＵＩデザイン情報ファイル４から読み込まれたユーザインタフェース部品の位置、属性、イベント動作などの部品要素情報を管理する部品テーブル２０２と、ＧＵＩデザイン情報ファイル４から読み込まれた実行環境の情報を管理する環境テーブル２０３と、予め登録されたユーザインタフェース部品の種別や原型情報を管理する原型テーブル２０４と、リソースファイル５から読み込まれた素材データの情報を管理するリソーステーブル２０５と、複数の素材データファイル６の内容を読み込んだ素材テーブル２０６と、ＧＵＩデザインの結果を視覚的な表示結果イメージとして合成した複数のプレビュー画面３０１と、ソースコード生成機能１１３およびＧＵＩ表示データ生成機能１１４の処理結果を示す結果情報３０２と、ＧＵＩデザイン結果から生成されたソースコード３０３と、ＧＵＩデザイン結果から生成されたＧＵＩ表示データ３０４を有し、ソースコード生成機能１１３によってソースコード３０３をソースファイル７に、ＧＵＩ表示データ生成機能１１４によってＧＵＩ表示データ３０４をＧＵＩ表示データファイル８に出力する。
また、データ保存処理として画面テーブル２０１と部品テーブル２０２の内容をＧＵＩデザイン情報ファイル４に、リソーステーブル２０５の内容をリソースファイル５に出力する。

本実施形態のソースコード生成装置の表示装置に表示される画面の例を図３に示す。
本装置の画面５０ａは部品提供ウィンドウ５１ａ、ＧＵＩ編集ウィンドウ５２ａ、イベント編集ウィンドウ５３ａ、実行環境選択ウィンドウ５４ａ、部品属性表示ウィンドウ５５ａ、リソース管理ウィンドウ５６ａからなり、画面５０ａの一部に新規画面ボタン５７ａ、ソース生成ボタン５８ａが表示されている。
また、ＧＵＩ編集ウィンドウ５２ａにはユーザインタフェース部品５２１ａ、５２２ａ、５２３ａのプレビュー画像が表示されている。
ＧＵＩ編集ウィンドウ５２ａに表示するプレビュー画像は、実行環境選択ウィンドウ５４ａで選択した実行環境のものが表示される。
本実施形態においては、ＧＵＩ編集操作を、共通操作と固有操作とに区別する。共通操作と固有操作とはそれぞれ以下を意味する。
まず、共通操作とは、操作の結果がすべての実行環境のＧＵＩデザインに反映されるもの(例えば、共通部品の追加操作)である。
また、固有操作とは、操作の結果が特定の実行環境のみのＧＵＩデザインに反映されるもの(各部品のサイズ変更や移動操作)である。
ただし、共通部品とは、すべての実行環境のＧＵＩ画面に含まれる部品のこと(特定の実行環境のＧＵＩ画面のみに含まれる部品は固有部品と呼ぶ)である。
さらに、共通部品の属性のうち、すべての実行環境で同じ属性値を持つものを共通属性と呼ぶ。例えば、「ＯＫ」ボタン部品がすべての実行環境のＧＵＩに含まれる場合、このボタン部品は共通部品であり、さらにそのラベル属性は、すべての実行環境において“ＯＫ”という同じ値を持つ共通属性である。
なお、図２においては、本ソースコード生成装置の動作中に生成されるデータのうち、メモリ９上に生成されるデータを４０に、ファイルとして存在するデータを４１に示すが、これは本実施形態における実装の想定によるものであり、各データがメモリ上に配置されるか、またはファイルとして配置されるかを上記に限定するものではない。

図４及び図５は、環境テーブル２０３および部品テーブル２０２の例およびそれぞれのテーブルのエントリの関連を示す図であり、図４は新しい実行環境のデータが追加される前の状態を符号２０３ａおよび２０２ａで示し、図５は新しい実行環境のデータが追加された後の状態を符号２０３ｂおよび２０２ｂで示している。
環境テーブル２０３ａは、VGAやQVGAなど実行環境ごとにエントリを保持し、実行環境に関する画面サイズや色数、固有イベントなどの情報を記録する。
部品テーブル２０２ａは、ボタンやテキストなど画面に配置するＧＵＩ部品ごとにエントリを保持し、さらに各エントリは、環境テーブル２０３ａ内に保持した実行環境に対応してサブエントリを保持する。各サブエントリは、部品に関する情報のうち、部品のサイズや位置など環境に依存した情報を記録する。
図４及び図５において、○印を付したエントリは、カレント実行環境(実行環境選択ウィンドウにおいて選択されている実行環境)のエントリを表わす。また、部品テーブル２０２ａ、２０２ｂの「タイプ」は、その部品が共通部品であるか固有部品であるかを示すフラグである。
部品テーブル２０２ａにおいては、「Picture_Box」および「InputArea」は共通部品であり、すべての実行環境の画面に含まれることを示す。一方、「Title_Text」部品は固有部品であり、実行環境VGAの画面のみに含まれる。さらに、＊を付与した属性は共通属性であり、「InputArea」部品の「文字」属性は共通属性である。新しい実行環境を追加した際、共通部品の共通属性の値は、既存の実行環境のものを継承する。

図６は、画面テーブル２０１の例を示す。画面テーブル２０１は、氏名入力画面など、画面ごとにエントリを保持し、画面に配置した部品間の親子関係など、画面内のＧＵＩ部品に関する情報のうち実行環境に依存しないものを記録する。
図６において、○印や◎印は、画面テーブル２０１内のエントリのうちＧＵＩ編集ウィンドウ５２ａに表示中の画面(「カレント画面」とよぶ)、およびカレント画面に配置したＧＵＩ部品のうち選択状態のものを表す。

図７は、原型テーブル２０４の例を示す。一般に、ＧＵＩ部品は、枠線の太さや表示文字のフォントなど各種の属性を持つ。ＧＵＩ部品がどのような属性を持つかは、ボタンやテキストといった部品の種別によって決定され、各属性がどのような値を持つかは、個々の部品のインスタンスごとに決定される。
原型テーブル２０４は、ＧＵＩ部品の種別ごとにエントリを保持し、各種別の部品が持つ属性およびそのデフォルト値を記録する。
なお、個々の部品のインスタンスの属性値は、部品テーブル２０２に記録されている。

図８は、リソーステーブル２０５の例を示す。リソースとは、文字列や画像など、ＧＵＩ画面を構成するデータのことである。リソーステーブル２０５は、リソースごとにエントリを保持し、リソースを特定するための識別子（リソースＩＤ）、および文字列や画像といったデータの型（MIME TYPE)およびその値などを保持する。具体的には、文字列型であれば文字列自体、画像型であれば画像を格納したファイルのパスなどを保持する。

図９は、素材テーブル２０６の例を示す。素材とは、データのうち画像、音声、動画など、マルチメディアコンテンツのことである。素材テーブル２０６は、素材ごとにエントリを保持し、素材を特定するための識別子、画像を格納したファイルのパスなどを記録する。

以上の構成に係るソースコード生成装置の処理の概要は以下の通りである。
ソースコード生成手段１１３は、編集開始時にユーザの指定に従ってＧＵＩデザイン情報ファイル入出力手段１１１を使用してＧＵＩデザイン情報ファイル４を読み込み、画面テーブル２０１、部品テーブル２０２、環境テーブル２０３に内容を設定し、リソースファイル入出力手段１１２を使用してリソースファイル５、複数の素材データファイル６を読み込んで、リソーステーブル２０５、素材テーブル２０６に内容を設定する。
さらに、予めプログラムされた内容から原型テーブル２０４を生成する。テーブルの準備完了後に、画面テーブル２０１と部品テーブル２０２、リソーステーブル２０５、素材テーブル２０６の内容から、画面上に配置された部品の表示状態を示すプレビュー画面３０１を生成してＧＵＩ編集ウィンドウ５２ａの初期画面として表示し、リソーステーブルの内容をリソース管理ウィンドウ５６ａに設定し、部品属性表示ウィンドウ５５ａとイベント編集ウィンドウ５３ａの内容をクリアして初期化し、原型テーブル２０４の内容を部品提供ウィンドウ５１ａに表示し、環境テーブル２０３の内容を実行環境選択ウィンドウ５４ａに表示してユーザの操作待ち状態に入る。

なお、本実施形態のソースコード生成装置は、従来技術によって作成したデザイン情報のファイルである既存のデザイン情報ファイル９９も利用することができる。すなわち、本発明のＧＵＩデザイン情報においては、図４の部品テーブル２０２ａに示すとおり、各ＧＵＩ部品のレイアウト情報を実行環境ごとに記録する。一方、従来技術においては、１つのＧＵＩデザイン情報には１つの実行環境用のレイアウト情報を記録する。従来の複数のＧＵＩデザイン情報ファイル９９（既存のデザイン情報ファイル９９）を読み込んで、本発明でのデザイン情報ファイルにマージすることによって、利用可能になる。
本ソースコード生成装置における起動時のデータの流れを図１０に示す。

ユーザの操作待ち状態において、次に、ＧＵＩデザインの編集を行なう場合には、編集対象となる実行環境を実行環境選択手段１０４により選択し、ユーザインタフェース部品提供手段１０５により新規画面の追加操作を行なう。
画面追加操作によって、画面テーブル２０１に新規エントリが追加され、ＧＵＩ編集ウィンドウ５２ａにユーザインタフェース部品を持たない空白の画面のプレビュー画像が表示される。

次に、ＧＵＩ編集ウィンドウ５２ａに表示された空白の領域に対してユーザインタフェース部品提供ウィンドウ５１ａから必要なユーザインタフェース部品を選択し、ドラッグ＆ドロップ操作によってＧＵＩ編集ウィンドウ５２ａに追加する。
ユーザインタフェース部品を追加した結果、部品テーブル２０２に新規エントリが追加され、ＧＵＩ編集機能１０１のプレビュー画像にユーザインタフェース部品のイメージ図形が追加される。

また、部品テーブル２０２のエントリには、対応するユーザインタフェース部品の位置、サイズ、属性値、イベント動作などの情報が、環境テーブル２０３に設定された環境の数だけ複数格納されており、プレビュー画像の生成には、その時点で実行環境選択ウィンドウ５４ａに指定された実行環境の位置、サイズ、属性値、イベント動作の情報が利用される。
環境テーブル２０３と部品テーブル２０２の例および環境テーブルエントリと部品テーブルのエントリ内の属性情報の関連は図４に示した通りである。

入力装置２を構成するポインティング入力装置２２の操作によってユーザインタフェース部品を選択し、位置とサイズを変更できる。変更されたユーザインタフェース部品の位置情報及びサイズ情報は、部品テーブル２０２内の対応するエントリに記憶される。
複数のユーザインタフェース部品からなる画面を作成する場合には、部品提供ウィンドウ５１ａから部品を追加する操作を必要な回数だけ繰り返す。

ユーザインタフェース部品の属性情報を編集する際には、ＧＵＩ編集ウィンドウ５２ａに表示されたユーザインタフェース部品をポインティング入力装置２２で選択する。すると、選択されたユーザインタフェース部品の属性情報が一覧表として部品属性編集機能１０２によって部品属性表示ウィンドウ５５ａに表示される。
ユーザインタフェース部品の属性の設定値を変更する場合には、キー入力装置２１によって新しい設定値を入力するか、またはポインティング入力装置２２によって新しい設定値を選択する。

ユーザインタフェース部品の属性値には、ＧＵＩライブラリで提供されるクラスやＧＵＩ表示データと１対１に対応した設定値の他に、本ソースコード生成装置の動作を指定する仮想的な属性値も含まれる。
例えばソースコードへの出力の有無を指定する属性値はソースコード生成手段１１３またはＧＵＩ表示データ生成手段１１４の動作を制御するための内部パラメタで、ＯＮに設定された状態でソースコード生成を実行すると、該当するユーザインタフェース部品の処理をソースファイルまたはＧＵＩ表示データファイルに出力し、ＯＦＦの場合は出力しない制御を行なう。
ソースコード出力値の他にも、イベント制御の有無を指定する属性、ソースコードファイル名を指定する属性など、ＧＵＩライブラリ内のクラスが持つ設定値とは直接関係のない属性値も存在し、部品テーブル２０２上のエントリに記録される

ユーザインタフェース部品の属性値に指定される文字列や画像などの素材データの情報は、一旦リソーステーブル２０５と素材テーブル２０６に登録された後に、部品属性編集手段１０２の選択肢として部品属性表示ウィンドウ５５ａに表示される。
リソーステーブル２０５に素材データファイル６を登録する場合には、リソース管理手段１０６で新規エントリを作成する。
新しく素材データファイルまたは素材文字列を入力した後に追加ボタンを選択すると、リソーステーブル２０５に素材データ及びリソースの属性情報（ファイル種別など）を格納した新エントリを追加し、素材テーブル２０６に選択された素材データファイル６の内容を読込んだ新エントリを作成する。

このようにして作成されたリソーステーブル２０５の内容が部品属性編集手段１０２の属性値候補として部品属性表示ウィンドウ５５ａに一覧表示され、本ソースコード生成装置の操作者はポインティング入力装置２２で指定することにより、ユーザインタフェース部品に設定する素材データファイル６を指定する属性を編集できる。
素材属性を含めたユーザインタフェース部品の属性の設定値はプレビュー画面３０１に即座に反映される。ＧＵＩデザイン編集時の処理とデータの流れをブロック図上の図１１に示す。

ユーザインタフェース部品のイベント動作を編集する場合には、ＧＵＩ編集機能１０１で編集対象のユーザインタフェース部品を選択する。すると、選択された部品のイベント動作情報がイベント動作編集機能１０３によりイベント編集ウィンドウ５３ａに一覧形式で表示されるので、ユーザインタフェース部品が受け取るイベントに対する動作をポインティング入力装置２２またはキー入力装置２１で指定する。
イベント動作情報が変更された場合は、対応する部品テーブル２０２のエントリにイベント動作情報が保存される。

環境テーブル２０３に格納された実行環境情報によって、プレビューやＧＵＩ編集手段、部品属性編集手段、イベント動作編集手段には異なる内容を表示することが出来る。
例えばVGA(640x480ピクセル)サイズのＬＣＤ（液晶表示装置）を使用する実行環境とQVGA(320x240ピクセル)サイズのＬＣＤを使用する実行環境を登録することで、ＧＵＩデザイン編集ウィンドウ５２ａの画面領域のサイズを切り替えて編集操作を行なうことができる。

また、カラーＬＣＤを使用する実行環境と、白黒ＬＣＤを使用する実行環境に対してＧＵＩデザインの編集を行っている場合には、「カラーＬＣＤ環境」を選択された場合にはプレビュー画像をカラー表示とし、「白黒ＬＣＤ」環境が選択された場合にはプレビュー画像を白黒表示とすることで、同じ部品からなる画面であっても全く異なるプレビュー表示を行い、より実際の実行環境に近い状況でＧＵＩデザインを編集することが出来る。
さらに環境によって発生するイベントが異なる場合にも、イベント動作編集手段１０３によってイベント編集ウィンドウ５３ａに表示するイベントの内容を切り替えることで、無駄なく必要十分なイベント動作編集を行なうことができる。

複数の実行環境に対するユーザインタフェース部品の位置、サイズ、属性値、イベント動作が設定されている場合は、実行環境選択手段１０４により編集対象としたい実行環境を選択する。
実行環境選択手段１０４による実行環境の選択内容が変更されると、本ソースコード生成装置はＧＵＩ編集手段１０１、部品属性編集手段１０２、イベント動作編集手段１０３によりＧＵＩ編集ウィンドウ５２ａ、部品属性表示ウィンドウ５５ａ、イベント編集ウィンドウ５３ａに表示される全ての内容を再表示する。

ＧＵＩ編集ウィンドウ５２ａのプレビュー画像も、部品テーブル２０２に記憶された情報のうち、新たに選択された実行環境に対応した位置、サイズ、属性値、イベント動作などの情報を元に再描画され、実行環境の選択前とは異なる内容が表示される。
実行環境の切り替えにより図３の操作画面が切り替えられた状態の例を図１２に示す。
図３におけるユーザインタフェース部品５２２ａ、５２３ａに対応するユーザインタフェース部品は、図１２の５２２ｃ、５２３ｃでそれぞれ示されるように異なる位置に配置されている。なお、５２１ａは、「環境１」に固有の部品であり、「環境２」用の図１２では存在しない。
ユーザインタフェース部品の属性情報も、図３で選択された５２３ａの属性値（５５ａ）と、図１２における同じ部品５２３ｃの属性値（５５ｃ）とは別に設定されている。
また、実行環境選択機能１０４により、実行環境の選択値を変更した後には、部品テーブル２０２に複数保存された位置、サイズ、属性、イベント動作情報のうち、現在選択された実行環境に対応する値のみが変更されるため、他の実行環境に対応した設定値は編集操作の影響を受けることなく保護される。

なお、図１２に示す「環境２」用のデザイン情報は、図３に示す「環境１」用のデザイン情報をもとに効率的に作成することができる。すなわち、図３の実行環境選択ウィンドウ５４ａにおいて「環境１」から「環境２」にポインティングデバイス入力装置２２の操作によって切り替える。
「環境２」では「環境１」に比べて解像度が低いので、そのままでは図１３に示す通り、ＧＵＩ編集ウィンドウ５２ａ内の画面デザインが不適切となる。そこで、ＧＵＩ編集ウィンドウ５２ａ内で各ＧＵＩ部品のサイズや位置の調整を行なうことによって、図１２に示す適切な画面デザインを作成できる。
従来とは異なり、画面を構成するＧＵＩ部品といった環境に依存しない情報は共通に利用して、個々のＧＵＩ部品のサイズや位置など実行環境に依存する情報のみ、実行環境ごとに編集すればよい。

このように、本ソースコード生成装置の操作者は、ＧＵＩデザインの編集中に任意のタイミングで実行環境選択ウィンドウ５４ａで実行環境の選択値を簡単に変更することが出来るため、あたかも各実行環境別に複数の画面デザインを行なっているかのように編集操作を行なうことが出来る。
実行環境を選択した場合の実行環境の切り替え処理の流れを図１４に示す。

次に、実行環境を追加する場合には、実行環境選択ウィンドウ５４ａで追加ボタン５４１を選択して、新たな実行環境の情報を格納したエントリ２０３ｃ（図５）を環境テーブル２０３ｂに追加する。それと同時に部品テーブル２０２ｂ（図５）の各エントリの位置、サイズ、属性、イベント動作などの情報の組２０２ｃを追加し、新たな環境に対応付けて初期化する。
環境テーブル２０３及び部品テーブル２０２に新規の実行環境を追加した場合のデータ変更の例を図５に示す。

このようにして編集されたＧＵＩデザインの設定値は、同じ部品の組合せからなる画面を示している。つまり位置、サイズ、属性、イベント動作などのＧＵＩレイアウトや設定が異なるだけの１つの画面であるため、ユーザインタフェース部品を追加、削除する場合には１回だけ追加、削除の操作を行なえばよい。すなわち実行環境の数だけ追加または削除操作を繰り返す必要はない。
また、後述の通り、１つのユーザインタフェース部品に対して１つのクラスが割り当てられるため、生成したソースコードで実行環境の数だけユーザコード部品クラスがメモリ上に生成されることはなく、複数の画面を編集時に管理、保存する処理も不要である。
実行環境を削除する場合も同様で、環境テーブル２０３から対象となるエントリを削除した後に、部品テーブル２０２の全エントリの位置、サイズ、属性、イベント動作の情報から、削除対象の環境に対応した設定値の組を１セット削除するだけである。

編集した結果を保存する場合は、ＧＵＩ編集ウィンドウ５２ａに配置された保存ボタン５２１を選択する。
本ソースコード生成装置は操作者の編集結果をハードディスクなどの二次記憶装置に保存するために、ＧＵＩデザインに関する編集結果をＧＵＩデザイン情報ファイル４に出力する。
具体的には、データ保存処理として画面テーブル２０１と部品テーブル２０２の内容をＧＵＩデザイン情報ファイル４に、リソーステーブル２０５の内容をリソースファイル５に出力する。このとき複数の実行環境に対するユーザインタフェース部品の位置、サイズ、属性値、イベント動作が設定されている場合は、各実行環境に対する設定値を全てＧＵＩデザイン情報ファイル４に保存する。

編集したＧＵＩ画面のデザイン内容から、ソースコードまたはＧＵＩ表示データを生成する場合には、ＧＵＩ編集画面に配置されたソース生成実行ボタン５８ａを選択する。すると、本ソースコード生成装置は、操作者のＧＵＩデザインの結果が格納された画面テーブル２０１、部品テーブル２０２、リソーステーブル２０５、素材テーブル２０６、環境テーブル２０３の内容をＧＵＩデザイン情報ファイル４に保存する。また、リソーステーブル２０５の内容をリソースファイル５に保存する。
ソースコードまたはＧＵＩ表示データの生成処理において、処理が成功したか、あるいは処理途中において何らかのエラーが発生したかを示す結果情報３０２をメモリ９上に蓄積し、処理完了後に本ソースコード生成装置の操作者にメッセージとして表示する。

このようにして生成されたソースコードまたはＧＵＩ表示データには、環境テーブル２０３に登録された複数の実行環境向けのソースコード及びＧＵＩ表示データが含まれる。
本ソースコード生成装置におけるソースコード生成処理の流れを図１５に示す。また、生成したソースコード４５の例を図１６に、生成したＧＵＩ表示データ４６の例を図１７に示す。

図１８は、本ソースコード生成装置のトップレベルの処理を実行するmain()関数の処理を示すフローチャートである。
まず、initialize()関数を起動して初期処理を実行する(ステップ１８０１)。この後、ユーザ操作が発生するまで待機し(ステップ１８０２)、ユーザ操作が発生したらユーザ操作に応じて処理を分岐する。
ユーザ操作が「新規画面」ボタン５７ａのクリックか判定し(ステップ１８０３)、そうであればnew_screen()関数を起動して新規画面の追加処理を実行(ステップ１８０４)後、ユーザ操作が発生するまで待機する。
ユーザ操作が部品提供ウィンドウ５１ａ内の部品のドラッグ操作か判定し(ステップ１８０５)、そうであればnew_component()関数を起動して部品の追加処理を実行(ステップ１８０６)後、ユーザ操作が発生するまで待機する。

ユーザ操作がＧＵＩ編集ウィンドウ５２ａ内の部品の押下か判定し(ステップ１８０７)、そうであればhandle_gui()関数を起動してＧＵＩ編集処理を実行し(ステップ１８０８)、その後、ユーザ操作が発生するまで待機する。
ユーザ操作が部品属性表示ウィンドウ５５ａ内のクリックか判定し(ステップ１８０９)、そうであればhandle_property()関数を起動して属性編集処理を実行(ステップ１８１０)後、ユーザ操作が発生するまで待機する。
ユーザ操作がイベント編集ウィンドウ５３ａ内のクリックか判定し(ステップ１８１１)し、そうであればhandle_action()関数を起動してイベント編集処理を実行(ステップ１８１２)後、ユーザ操作が発生するまで待機する。
ユーザ操作がリソース管理ウィンドウ５６ａ内のクリックか判定し(ステップ１８１３)、そうであればhandle_resource()関数を起動してリソース編集処理を実行(ステップ１８１４)後、ユーザ操作が発生するまで待機する。

ユーザ操作が実行環境選択ウィンドウ５４ａ内のクリックか判定し(ステップ１８１５)、そうであればhandle_environment()関数を起動して実行環境編集処理を実行後(ステップ１８１６)後、ユーザ操作が発生するまで待機する。
ユーザ操作がソース生成ボタン５８ａのクリックか判定し(ステップ１８１７)、そうであればgenerate_source()関数を起動してソース生成処理を実行(ステップ１８１８)後、ユーザ操作が発生するまで待機する。
ユーザ操作が終了操作か判定し(ステップ１８１９)、そうであれば処理を終了し(ステップ１８２０)、そうでなければ、ユーザ操作が発生するまで待機する。

図１９は、初期処理を実行するinitialize()関数の処理を示すフローチャートである。
まず、ＧＵＩデザイン情報ファイル４を読込み、画面テーブル２０１、部品テーブル２０２、環境テーブル２０３の内容を設定する(ステップ１９０１)。画面テーブル２０１の先頭エントリの画面をカレントにし(ステップ１９０２)、カレント画面のエントリの先頭の部品サブエントリを選択状態にし(ステップ１９０３)、環境テーブル２０３の先頭エントリの実行環境をカレントにする(ステップ１９０４)。
次に、リソースファイル５、素材データファイル６を読込み、リソーステーブル２０５、素材テーブル２０６の内容を設定する(ステップ１９０５)。プログラムされた処理をもとに原型テーブル２０４の内容を設定し(ステップ１９０６)、redraw()関数を起動して図３の編集画面５０ａの描画処理を実行して(ステップ１９０７)、処理終了する(ステップ１９０８)。

図２０は、新規画面の作成処理を実行するnew_screen()関数の処理を示すフローチャートである。
まず、画面テーブル２０１に新規エントリを追加して(ステップ２００１)、このエントリをカレント画面にした(ステップ２００２)後、redraw()関数を起動して編集画面５０ａの描画処理を実行して(ステップ２００３)、処理終了する(ステップ２００４)。

図２１は、ＧＵＩ編集ウィンドウ５２ａに部品を追加する処理を実行するnew_component()関数の処理フローである。
まず、ユーザが部品提供ウィンドウ５１ａ内から部品をドラッグした際、シフトキーを押下していたか判定し(ステップ２１０１)、そうであれば共通操作としての部品追加(すなわち共通部品の追加)操作であり、変数modeに「共通」を設定する(ステップ２１０２)。
そうでなければ固有操作としての部品追加(すなわち固有部品の追加)操作であり、変数modeに「固有」を設定する(ステップ２１０３)。
次に、部品提供ウィンドウ５１ａ内からユーザがドラッグした部品を、ＧＵＩ編集ウィンドウ５２ａ上でドラッグされた位置に配置する(ステップ２１０４)。

変数modeの値が「共通」かつドラッグ後の位置に既に他の共通部品が存在するか判定し(ステップ２１０５)、そうであればその部品を親とする親子関係を画面テーブル２０１内に設定する(ステップ２１０６)。
次に、部品テーブル２０２に、対応する部品のエントリを追加して、追加したエントリをrとし(ステップ２１０７)、エントリrの「タイプ」に変数modeの値を設定する(ステップ２１０８)。
変数modeの値が「共通」か判定し(ステップ２１０９)、そうであればエントリrのサブエントリとして、環境テーブル内の全実行環境分のサブエントリを追加(ステップ２１１０)する。そうでなければ、rのサブエントリとして、カレント実行環境に対応するサブエントリを追加する(ステップ２１１１)。
追加したエントリrおよびサブエントリに、位置、サイズ、色などの属性値を設定する(ただし、値が未定の属性には、原型テーブルを参照して、デフォルト値を設定)(ステップ２１１２)。
次に、追加した部品を選択状態にした(ステップ２１１３)後、redraw()関数を起動して編集画面５０ａの描画処理を実行し(ステップ２１１４)、処理終了する(ステップ２１１５)。

図２２は、ＧＵＩ編集処理を実行するhandle_gui()関数の処理を示すフローチャートである。
まず、ユーザ操作が、選択状態の部品のクリックか判定し(ステップ２２０１)、そうでなければユーザがクリックした部品を選択状態にして(ステップ２２０２)、 redraw()関数を起動して編集画面５０ａの描画処理を実行し(ステップ２２０７)、処理終了する(ステップ２２０８)。
選択状態の部品のクリックであった場合は、押下位置が部品の四隅か判定し(ステップ２２０３)、そうであれば部品のリサイズ操作とみなしてドラッグ終了位置まで部品サイズを変更し(ステップ２２０４)、そうでなければ部品の移動操作とみなしてドラッグ終了位置まで部品を移動する(ステップ２２０５)。
この後、新たな位置とサイズを部品テーブル２０２内の対応するエントリに設定し(ステップ２２０６)、redraw()関数を起動して編集画面５０ａの描画処理を実行し(ステップ２２０７)、処理終了する(ステップ２２０８)。

図２３は、属性編集処理を実行する関数handle_property()関数の処理を示すフローチャートである。
まず、ユーザがクリックした属性値欄に、ユーザのキー入力値を設定し(ステップ２３０１)、属性値欄をクリックした際にシフトキーを押下していたかを判定する(ステップ２３０２)。
そうであれば、共通操作としての属性値変更操作なので、選択状態の部品に対応する部品テーブル２０２のエントリ内における全サブエントリの属性値を、キー入力した値に変更し、共通属性として＊を付与する(ステップ２３０３)。
そうでなければ、固有操作としての属性値変更操作なので選択状態の部品に対応する部品テーブル２０２のエントリ内の、カレント実行環境に対するサブエントリの属性値を、キー入力した値に変更する(ステップ２３０４)。
次に、redraw()関数を起動して編集画面５０ａの描画処理を実行し(ステップ２３０５)、処理終了する(ステップ２３０６)。

図２４は、イベント編集処理を実行する関数handle_action()関数の処理を示すフローチャートである。
まず、ユーザがクリックした動作名欄に、ユーザのキー入力値を設定し(ステップ２４０１)、動作名欄をクリックした際にシフトキーを押下していたかを判定する(ステップ２４０２)。
そうであれば、共通操作としての動作名変更操作であるので、選択状態の部品に対応する部品テーブル２０２のエントリ内における全サブエントリのイベント動作を、キー入力した値に変更し、共通属性として＊を付与する(ステップ２４０３)。
そうでなければ固有操作としての動作名変更操作であるので、選択状態の部品に対応する部品テーブル２０２のエントリ内の、カレント実行環境に対するサブエントリのイベント動作を、キー入力した値に変更する(ステップ２４０４)。そして、redraw()関数を起動して編集画面５０ａの描画処理を実行し(ステップ２４０５)、処理終了する(ステップ２４０６)。

図２５は、リソース編集処理を実行するhandle_resource()関数の処理を示すフローチャートである。
まず、ユーザ操作が、「新規」ボタン５６１のクリックか判定し(ステップ２５０１)、そうであればリソース管理ウィンドウ５６ａの先頭に新規のエントリ(内容は空白)を追加し(ステップ２５０２)、ユーザのキー入力内容に従って、新規エントリの内容を設定して(ステップ２５０３)、処理終了する(ステップ２５１２)。
ユーザ操作が、「追加」ボタン５６２のクリックか判定し(ステップ２５０４)、そうであればリソーステーブル２０５に新規エントリを作成し(ステップ２５０５)、新規エントリに、リソース管理ウィンドウ５６ａ内の先頭エントリの内容を設定して(ステップ２５０６)、処理終了する(ステップ２５１２)。
ユーザ操作が、リソース管理ウィンドウ５６ａ内エントリのクリックか判定し(ステップ２５０７)、そうであれば、クリックされたエントリを反転表示し(ステップ２５０８)、処理終了する(ステップ２５１２)。
ユーザ操作が、「削除」ボタン５６３のクリックか判定し(ステップ２５０９)、そうであればリソース管理ウィンドウ５６ａの反転表示されたエントリを削除し(ステップ２５１０)、リソーステーブル２０５内の対応するエントリを削除して(ステップ２５１１)、処理終了する(ステップ２５１２)。

図２６は、実行環境編集処理を実行するhandle_environment()関数の処理を示すフローチャートである。
まず、ユーザ操作が、実行環境の「新規」ボタン５４２のクリックか判定し(ステップ２６０１)、そうであれば実行環境選択ウィンドウ５４ａの先頭に新規のエントリ(内容は空白)を追加し(ステップ２６０２)、ユーザのキー入力内容に従って、新規エントリの内容を設定して(ステップ２６０３)、処理終了する(ステップ２６１８)。
ユーザ操作が、「追加」ボタン５４１のクリックか判定し(ステップ２６０４)、そうであれば環境テーブル２０３に新規エントリを作成し(ステップ２６０５)、新規エントリに、実行環境選択ウィンドウ５４ａ内の先頭エントリの内容を設定する(ステップ２６０６)。また、部品テーブル２０２の各共通部品のエントリに、追加した環境に対応するサブエントリを追加して初期化する。ただし、各共通部品の属性の値は、共通属性については他の環境の属性値をコピーし、その他の属性については原型テーブルよりコピーする(ステップ２６０７)。
この後、追加した実行環境をカレントにして(ステップ２６０８)、redraw()関数を起動して編集画面５０ａの描画処理を実行し(ステップ２６１７)、処理終了する(ステップ２６１８)。

ユーザ操作が、実行環境選択ウィンドウ５４ａ内エントリのクリックか判定し(ステップ２６０９)、そうであればクリックされたエントリを反転表示し(ステップ２６１０)、反転表示した実行環境をカレントにする(ステップ２６１１)。そして、redraw ()関数を起動して編集画面５０ａの描画処理を実行し(ステップ２６１７)、処理終了する(ステップ２６１８)。
ユーザ操作が、「削除」ボタン５４３のクリックか判定し(ステップ２６１２)、そうであれば実行環境選択ウィンドウ５４ａの反転表示されたエントリを削除し(ステップ２６１３)、環境テーブル内２０３の対応するエントリを削除し(ステップ２６１４)、部品テーブル２０２の各部品のエントリから、削除した環境に対応するサブエントリを削除する(ステップ２６１５)。そして、環境テーブル２０３内の先頭エントリに対応する実行環境をカレントにして(ステップ２６１６)、redraw ()関数を起動して編集画面５０ａの描画処理を実行し(ステップ２６１７)、処理終了する(ステップ２６１８)。
ユーザ操作がいずれでもなければ、処理終了する(ステップ２６１８)。

図２７は、ソース生成処理を実行するgenerate_source()関数の処理を示すフローチャートである。
まず、画面テーブル２０１の先頭のエントリを変数scrに代入して(ステップ２７０１)、scrが存在するか判定し(ステップ２７０２)、存在しなければ処理を終了する(ステップ２７０５)。存在する場合は、generate_source(scr)関数を起動して、画面scrを表示するソースを生成する(ステップ２７０３)、変数scrに画面テーブル２０１の次のエントリを代入した後(ステップ２７０４)、ステップ２７０２の判定に戻る。

図２８は、編集画面５０ａの描画処理を実行するredraw()関数の処理を示すフローチャートである。
まず、preview(カレント画面, カレント実行環境)関数を起動して、画面上に配置された部品の表示状態を示すプレビュー画面を生成して、ＧＵＩ編集ウィンドウ５２ａに表示し(ステップ２８０１)、リソーステーブル２０５の内容をリソース管理ウィンドウ５６ａに表示する(ステップ２８０２)。次に、選択状態の部品が存在するか判定し(ステップ２８０３)、存在すれば選択状態の部品に対応する部品テーブル２０２のエントリの内容を、部品属性表示ウィンドウ５５ａおよびイベント編集ウィンドウ５３ａに表示し(ステップ２８０4)、存在しなければ、部品属性表示ウィンドウ５５ａおよびイベント編集ウィンドウ５３ａの内容をクリアする(ステップ２８０５)。
次に、原型テーブル２０４の内容を部品提供ウィンドウ５１ａに表示し(ステップ２８０６)、環境テーブル２０３の内容を実行環境選択ウィンドウ５４ａに表示して(ステップ２８０７)、処理終了する(ステップ２８０８)。

図２９は、ソースコード生成処理を実行するgenerate_source(screen)関数の処理を示すフローチャートある。
ここでは、まず、変数envに、環境テーブル２０３の先頭行を代入する(ステップ２９０１)。そして、envが存在するか判定し(２９０２)、存在しなければ処理終了する(ステップ２９１４)。そうであれば、「カレント実行環境がenvで示される環境であるかを判定する」ソースを生成し(図１６のＡ)(ステップ２９０３)、画面テーブル２０１内で、screenで指定した画面に属するサブエントリの集まりを変数rowsに設定し(ステップ２９０４)、rowsの先頭行を変数rowに代入する(ステップ２９０５)。次に、rowが存在するか判定し(ステップ２９０６)、存在しない場合は、変数envに環境テーブル２０３の次の行を代入し、ステップ２９０２の判定に戻る(ステップ２９１３)。
存在する場合には、変数nameにrowの「部品名」の値、変数row２に、部品テーブル２０２で「部品名」がnameかつ「環境」がenvと一致するサブエントリを代入する(ステップ２９０７)。さらに、変数(x、y)にrow2の「位置」の値、変数(h,w)にrow2の「サイズ」の値を代入する(ステップ２９０８)。そして、「部品nameの位置を(x, y)、サイズを(h, w)に設定する」ソースを生成する(図１６のＢ)(ステップ２９０９)。row2で示されるサブエントリの各属性attrの値について、「部品nameのattr属性値をrow2で指定した値に設定する」ソースを生成する(図１６のＣ) (ステップ２９１０)。
さらに、row2の各イベントeについて、「部品nameのeに対するイベントハンドラをrow2で指定したハンドラに設定する」ソースを生成する(図１６のＤ) (ステップ２９１１)。そして、変数rowにrows内でrowの次の行を代入し(ステップ２９１２)、ステップ２９０６の判定に戻る。

図３０は、画面上に配置された部品の表示状態を示すプレビュー画面を生成するpreview(screen,env)関数の処理を示すフローチャートである。
まず、画面テーブル２０１内で、screenで指定した画面に属するサブエントリの集まりを変数rowsに代入する(ステップ３００１)。次に、変数rowにrowsの先頭行を代入する(ステップ３００２)。rowが存在するか判定し(ステップ３００３)、存在しなければ処理終了する(ステップ３００８)。存在すれば、変数nameにrowの「部品名」の値を代入する(ステップ３００４)。部品テーブル２０２で、「部品名」がnameかつ「環境」がenvと一致するサブエントリを変数row2に代入する(ステップ３００５)。row2で指定された部品の属性値に従い、プレビュー画面に部品を描画し(ステップ３００６)、変数rowにrows内でrowの次の行を代入して(ステップ３００７)、ステップ３００３の判定に戻る。

図３１及び図３２は、本実施形態における画面遷移の例を示す図であり、図３３および図３４で示すＧＵＩを作成する手順の一部を示している。
まず、図３１（ａ）は、初期画面であり、主な構成要素として、ＧＵＩ編集ウィンドウ３１０１および実行環境選択ウィンドウ３１０４を含む。実行環境選択ウィンドウ３１０４では、実行環境として「環境１」が選択されている。
図３１（ｂ）は「選択」ボタン部品３１０７を共通部品として配置した図である。ユーザの操作としては、（１）「シフト＋ドラッグ」操作によってボタン部品３１０７を共通部品として配置した後、（２）「シフト＋クリック」操作によって共通操作としてボタンラベル”選択”をキー入力する。
図３１（ｃ）は、「ＣＡＮＣＥＬ」ボタン３１１０を固有部品として配置した図である。ユーザの操作としては、（３）「ドラッグ」操作によってボタン部品３１１０を固有部品として配置した後、（４）「クリック」操作によってボタンラベル”ＣＡＮＣＥＬ”をキー入力する。
図３１（ｄ）は、「環境２」に切り替えた後、「選択」ボタン部品のレイアウトを調整する図である。ユーザは、実行環境選択ウィンドウ３１０４にて「環境２」に切り替えた後、（５）「選択」ボタン部品３１０８ａを「ドラッグ」操作によって３１０８ｂの位置に移動する。なお、「環境２」に切り替えた際、共通部品である「選択」ボタン部品３１０８ａはすでに画面上に存在しているため、部品の追加操作は不要である。

図３２（ａ）は、図３１（ｄ）の続きの操作を示すものであり、イメージ部品３１１２を追加した図である。ユーザは、（６）「シフト＋ドラッグ」操作によって、イメージ部品３１１２を共通部品として追加する。
図３２（ｂ）は、「環境１」に再度切り替えた後、イメージ部品のレイアウトを調整する図である。ユーザは、「ドラッグ」操作によってイメージ部品３１１１ａを３１１１ｂの位置に移動する。なお、「環境１」に切り替えた際、共通部品であるイメージ部品３１１１ａはすでに画面上に存在しているため、部品の追加操作は不要である。
図３２（ｃ）は、「環境３」を新たに追加したのち、共通部品である「選択」ボタン部品およびイメージ部品のレイアウト調整を行なう図である。ユーザの操作としては、実行環境選択ウィンドウ３１０６にて新たな実行環境「環境３」を追加した後、（８）「選択」ボタン部品３１０９ａを３１０９ｂの位置に移動し、（９）メージ部品３１１３ａをドラッグして３１１３ｂの位置に移動する。なお、「環境３」を追加した際、共通部品である「選択」ボタン部品３１０９ａおよびイメージ部品３１１３ａはすでに画面上に存在しているため、部品の追加操作は不要である。
このように、複数の実行環境のＧＵＩデザインを設計する際、すべての実行環境に共通の操作と特定の環境に固有の操作を使い分けることにより、操作回数を低減することができる。

本発明の実施形態の一例を示すシステム構成図である。 本発明の実施形態の一例におけるソースコード生成プログラムの機能および処理データを示す機能ブロック図である。 操作画面の例を示す説明図である。 環境テーブルおよび部品テーブルの例と両テーブル間の関連付けを示す説明図である。 環境テーブルと部品テーブルへの実行環境の追加を示す説明図である。 画面テーブルの例を示す説明図である。 原型テーブルの例を示す説明図である。 リソーステーブル例を示す説明図である。 素材テーブルの例を示す説明図である。 システム起動時の処理の流れを示す説明図である。 ＧＵＩデザイン処理の流れを示す説明図である。 実行環境の切り替え操作の例を示す説明図である。 実行環境用の画面設計をもとに他の実行環境用の画面を設計する際の操作の例を示す説明図である。 実行環境の切り替え処理の流れを示す説明図である。 ソースコード生成処理の流れを示す説明図である。 生成ソースコードの例を示す説明図である。 生成ＧＵＩ表示データの例を示す説明図である。 本発明の実施形態の一例において、トップレベルの処理を実行するmain()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、初期処理を実行するinitialize()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、新規画面の作成処理を実行するnew_screen()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、ＧＵＩ編集ウィンドウに部品を追加する処理を実行するnew_component()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、ＧＵＩ編集処理を実行するhandle_gui()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、属性編集処理を実行する関数handle_property()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、イベント編集処理を実行する関数handle_action()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、リソース編集処理を実行するhandle_resource()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、実行環境編集処理を実行するhandle_environment()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、ソース生成処理を実行するgenerate_source()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、編集画面の描画処理を実行するredraw()関数の処理を示すフローチャートである。 本発明の実施形態の一例において、ソースコード生成処理を実行するgenerate_source(screen)関数の処理を示すフローチャートある。 本発明の実施形態の一例において、画面上に配置された部品の表示状態を示すプレビュー画面を生成するpreview(screen,env)関数の処理を示すフローチャートである。 実施形態における画面遷移の例を示す図である。 図３１の続きの画面遷移例を示す図である。 画面を縦横の両方向で使用できるようにした表示画面を備えた携帯電話機の例を示す外観図である。 画面を縦横の両方向で使用できるようにした表示画面を備えた携帯電話機の例を示す外観図である。

符号の説明

１…処理装置、２…入力装置、３…表示装置、４…ＧＵＩデザイン情報ファイル、５…リソースファイル、６…複数の素材データファイル、７…ソースファイル、８…ＧＵＩ表示データファイル、９…メモリ、１０…ＣＰＵ、２１…キー入力装置、２２…ポインティング入力装置、４０…メモリ上に生成されるデータ、４１…ファイルとして存在するデータ、９１…ソースコード生成プログラム、９２…オペレーティングシステム、９９…既存のデザイン情報ファイル、１０１…ＧＵＩ編集機能、１０２…部品属性編集機能、１０３…イベント動作編集機能、１０４…実行環境選択機能、１０５…ユーザインタフェース部品提供機能、１０６…リソース管理機能、１１１…ＧＵＩデザイン情報ファイル入出力機能、１１２…リソースファイル入出力機能、１１３…ソースコード生成装置、１１４…ＧＵＩ表示データ生成機能、２０１…画面テーブル、２０２…部品テーブル、２０３…環境テーブル、２０４…原型テーブル、２０５…リソーステーブル、２０６…素材テーブル、３０１…プレビュー画面、３０２…結果情報、３０３…ソースコード、３０４…ＧＵＩ表示データ、５０ａ…プログラム画面、５１ａ…部品提供ウィンドウ、５２ａ…ＧＵＩ編集ウィンドウ、５３ａ…イベント編集ウィンドウ、５４ａ…実行環境選択ウィンドウ、５５ａ…部品属性表示ウィンドウ、５６ａ…リソース管理ウィンドウ、５７ａ…新規画面ボタン、５８ａ…ソース生成ボタン、５２１ａ…テキスト表示ユーザインタフェース部品、５２２ａ…画像表示ユーザインタフェース部品、５２３ａ…テキスト入力ユーザインタフェース部品、５０ｂ…QVGA実行環境のプログラム画面、５１ｂ…QVGA実行環境の部品提供ウィンドウ、５２ｂ…QVGA実行環境のＧＵＩ編集ウィンドウ、５３ｂ…QVGA実行環境のイベント編集ウィンドウ、５４ｂ…QVGA実行環境の実行環境選択ウィンドウ、５５ｂ…QVGA実行環境の部品属性表示ウィンドウ、５６ｂ…QVGA実行環境のリソース管理ウィンドウ、５７ｂ…QVGA実行環境の新規画面ボタン、５８ｂ…QVGA実行環境のソース生成ボタン、５２１ｂ…QVGA実行環境のテキスト表示ユーザインタフェース部品、５２２ｂ…QVGA実行環境の画像表示ユーザインタフェース部品、５２３ｂ…QVGA実行環境のテキスト入力ユーザインタフェース部品、５０ｃ…QVGA実行環境のプログラム画面、５１ｃ…QVGA実行環境の部品提供ウィンドウ、５２ｃ…QVGA実行環境のＧＵＩ編集ウィンドウ、５３ｃ…QVGA実行環境のイベント編集ウィンドウ、５４ｃ…QVGA実行環境の実行環境選択ウィンドウ、５５ｃ…QVGA実行環境の部品属性表示ウィンドウ、５６ｃ…QVGA実行環境のリソース管理ウィンドウ、５７ｃ…QVGA実行環境の新規画面ボタン、５８ｃ…QVGA実行環境のソース生成ボタン、５２１ｃ…QVGA実行環境のテキスト表示ユーザインタフェース部品、５２２ｃ…QVGA実行環境の画像表示ユーザインタフェース部品、５２３ｃ…QVGA実行環境のテキスト入力ユーザインタフェース部品、４５…生成するソースコードの例、４６…生成するＧＵＩ表示データの例、２０２ａ…部品テーブル、２０２ｂ…実行環境を追加した部品テーブル、２０２ｃ…部品テーブルのエントリに追加された属性情報の組、２０３ａ…環境テーブル、２０３ｂ…実行環境を追加した環境テーブル、２０３ｃ…環境テーブルの新規エントリ、３１０１…「環境１」（縦長画面）のＧＵＩ編集ウィンドウ、３１０２…「環境２」（横長画面）のＧＵＩ編集ウィンドウ、３１０３…「環境３」（小画面）のＧＵＩ編集ウィンドウ、３１０４…「環境１」（縦長画面）を選択中の実行環境選択ウィンドウ、３１０５…「環境２」（横長画面）を選択中の実行環境選択ウィンドウ、３１０６…「環境３」（小画面）を選択中の実行環境選択ウィンドウ、３１０７…「環境１」（縦長画面）の「選択」ボタン部品、３１０８ａ…「環境２」（横長画面）の「選択」ボタン部品（レイアウト調整前）、３１０８ｂ…「環境２」（横長画面）の「選択」ボタン部品（レイアウト調整後）、３１０９ａ…「環境３」（小画面）の「選択」ボタン部品（レイアウト調整前）、３１０９ｂ…「環境３」（小画面）の「選択」ボタン部品（レイアウト調整後）、３１１０…「ＣＡＮＣＥＬ」ボタン部品、３１１１ａ…「環境１」（縦長画面）のイメージ部品（レイアウト調整前）、３１１１ｂ…「環境１」（縦長画面）のイメージ部品（レイアウト調整後）、３１１２…「環境２」(横長画面)のイメージ部品、３１１３ａ…「環境３」（小画面）のイメージ部品（レイアウト調整前）、３１１３ｂ…「環境３」（小画面）のイメージ部品（レイアウト調整後）、３３０１…画面を縦横の両方向で使用できるようにした表示画面を備えた携帯電話機。

Claims (7)

1. コンピュータに実行させるプログラムのソースコード及びユーザインタフェース部品を表示画面に表示するためのＧＵＩ表示データを生成するソースコード生成装置であって、
   前記コンピュータの実行環境にそれぞれ対応し、位置、サイズ、属性などの部品要素情報が異なる前記ユーザインタフェース部品を編集する第１の手段と、編集結果の部品要素情報に基づき指定された実行環境に対応したユーザインタフェース部品のＧＵＩ表示データ及び当該ＧＵＩ表示データを用いてユーザインタフェース部品を表示するためのソースコードを生成して出力する第２の手段を備えることを特徴とするソースコード生成装置。
2. ＧＵＩ表示データによりユーザインタフェース部品を編集画面にプレビューする手段をさらに備えることを特徴とする請求項１に記載のソースコード生成装置。
3. 前記実行環境の切り替え操作を受付け、切り替え指定された実行環境におけるユーザインタフェース部品を編集画面に切り替え表示する手段をさらに備えることを特徴とする請求項１または２に記載のソースコード生成装置。
4. 前記実行環境に応じて、一部のユーザインタフェース部品をソースコードまたはＧＵＩ表示データの出力対象から除外する手段をさらに備えることを特徴とする請求項１〜３のいずれか一項に記載のソースコード生成装置。
5. ユーザインタフェース部品に対する編集操作を、すべての実行環境に共通に適用される共通操作と、特定の実行環境のみに適用される固有操作に区別する手段をさらに備えることを特徴とする請求項１〜４のいずれか一項に記載のソースコード生成装置。
6. 新たな実行環境を追加する手段を有し、実行環境を追加した時点でそれ以前の共通操作の実行結果を反映させる手段をさらに備えることを特徴とする請求項５に記載のソースコード生成装置。
7. 同一の編集操作に対し、当該編集操作が共通操作であるか固有操作であるかの切り分けを、編集操作の都度ユーザが指定する手段を有することを特徴とする請求項５または６に記載のソースコード生成装置。

Images