特開 2023-184589 情報処理装置、情報処理方法およびプログラム

(19)【発行国】日本国特許庁(JP)

(12)【公報種別】公開特許公報(A)

(11)【公開番号】P2023184589

(43)【公開日】2023-12-28

(54)【発明の名称】情報処理装置、情報処理方法およびプログラム

(51)【国際特許分類】

   G06F 8/34 20180101AFI20231221BHJP

   G06F 9/451 20180101ALI20231221BHJP

【ＦＩ】

G06F8/34

G06F9/451

【審査請求】未請求

【請求項の数】9

【出願形態】ＯＬ

(21)【出願番号】P 2023183018

(22)【出願日】2023-10-25

(62)【分割の表示】P 2021007665の分割

【原出願日】2021-01-21

(71)【出願人】

【識別番号】390002761

【氏名又は名称】キヤノンマーケティングジャパン株式会社

(71)【出願人】

【識別番号】592135203

【氏名又は名称】キヤノンＩＴソリューションズ株式会社

(74)【代理人】

【識別番号】100189751

【弁理士】

【氏名又は名称】木村 友輔

(74)【代理人】

【識別番号】100227857

【弁理士】

【氏名又は名称】中山 圭

(72)【発明者】

【氏名】清野 光広

(72)【発明者】

【氏名】高塚 剛

(57)【要約】

【課題】 本発明の目的は、デバイス毎に表示形態を変えたプロトタイプ（試作）のアプリケーションを作成することである。
【解決手段】 本発明は、表示形態に対応する表示サイズを記憶する記憶手段を有する情報処理装置であって、生成するアプリケーションの画面に表示されるアイテムを定義する画面定義と、次の画面へ遷移する手順を定義する画面遷移定義とを定義する定義手段と、前記定義手段により定義された画面と、画面を遷移する手順を再現する動作制御ファイルを生成する動作制御ファイル生成手段と、を備え、前記動作制御ファイル生成手段は、生成された動作制御ファイルを用いて再現する画面の表示形態の設定を受け付け、当該受け付ける表示形態に対応する表示サイズで前記手順による画面の遷移を実行させる動作制御ファイルを生成することを特徴とする。
【選択図】 図４

【特許請求の範囲】

【請求項1】

表示形態に対応する表示サイズを記憶する記憶手段を有する情報処理装置であって、
生成するアプリケーションの画面に表示されるアイテムを定義する画面定義と、次の画面へ遷移する手順を定義する画面遷移定義とを定義する定義手段と、
前記定義手段により定義された画面と、画面を遷移する手順を再現する動作制御ファイルを生成する動作制御ファイル生成手段と、を備え、
前記動作制御ファイル生成手段は、生成された動作制御ファイルを用いて再現する画面の表示形態の設定を受け付け、当該受け付ける表示形態に対応する表示サイズで前記手順による画面の遷移を実行させる動作制御ファイルを生成することを特徴とする情報処理装置。

【請求項2】

前記動作制御ファイル生成手段は、前記再現する画面の表示形態の設定を複数有し、前記複数の設定からの選択を受け付けることを特徴とする請求項１に記載の情報処理装置。

【請求項3】

前記動作制御ファイル生成手段により生成される動作制御ファイルを用いて画面を再現する際に表示される、前記定義手段により定義された画面の前記アイテムに反映するデータを取得するデータ取得手段を更に有し、
前記動作制御ファイル生成手段により生成される動作制御ファイルは、前記データ取得手段で取得したデータを前記アイテムに反映して画面の表示を再現するよう実行することを特徴とする請求項１又は２に記載の情報処理装置。

【請求項4】

前記動作制御ファイルにより実行される画面の表示形態を、動作制御ファイルの実行中に変更できる操作パネル生成手段
を更に有することを特徴とする請求項１乃至３に記載の情報処理装置。

【請求項5】

前記動作制御ファイル生成手段において、前記受け付ける表示形態に対応する表示サイズとは、情報処理装置に接続されるアプリケーションクライアントの表示サイズであることを特徴とする請求項１または２に記載の情報処理装置。

【請求項6】

前記動作制御ファイル生成手段において、前記受け付ける表示形態に対応する表示サイズとは、情報処理装置に接続されるアプリケーションクライアントの表示サイズであり、該アプリケーションクライアントが縦向きと横向きに表示制御できるアプリケーションクライアントの場合、該受け付ける表示形態に対応する表示サイズとは、アプリケーションクライアントの縦向きの表示サイズと横向きの表示サイズを含むことを特徴とする請求項１乃至３に記載の情報処理装置。

【請求項7】

前記アプリケーションクライアントとは、パーソナルコンピュータ、タブレット、スマートフォンであることを特徴とする請求項５または６に記載の情報処理装置。

【請求項8】

表示形態に対応する表示サイズを記憶する記憶手段を有する情報処理装置における情報処理方法であって、
情報処理装置を
生成するアプリケーションの画面に表示されるアイテムを定義する画面定義と、次の画面へ遷移する手順を定義する画面遷移定義とを定義する定義ステップと、
前記定義ステップにより定義された画面と、画面を遷移する手順を再現する動作制御ファイルを生成する動作制御ファイル生成ステップとして制御し、
前記動作制御ファイル生成ステップは、生成された動作制御ファイルを用いて再現する画面の表示形態の設定を受け付け、当該受け付ける表示形態に対応する表示サイズで前記手順による画面の遷移を実行させる動作制御ファイルを生成することを特徴とする情報処理方法。

【請求項9】

表示形態に対応する表示サイズを記憶する記憶手段を有する情報処理装置におけるプログラムであって、
生成するアプリケーションの画面に表示されるアイテムを定義する画面定義と、次の画面へ遷移する手順を定義する画面遷移定義とを定義する定義手段と、
前記定義手段により定義された画面と、画面を遷移する手順を再現する動作制御ファイルを生成する動作制御ファイル生成手段として機能させ、
前記動作制御ファイル生成手段は、生成された動作制御ファイルを用いて再現する画面の表示形態の設定を受け付け、当該受け付ける表示形態に対応する表示サイズで前記手順による画面の遷移を実行させる動作制御ファイルを生成することを特徴とするプログラム。

【発明の詳細な説明】

【技術分野】

【0001】

本発明は、アプリケーションを生成する情報処理装置、情報処理方法およびプログラムに関する。

【背景技術】

【0002】

顧客の為にアプリケーションを作成する際に、まず顧客の要望を汲み取ってアプリケーションを作成すると、手戻りを減らして開発効率を上げることができる。

【0003】

特に、画面や操作手順などは内部ロジックと異なり、ユーザの要望通りに動くことが、顧客満足度を高めることに起因する。

【0004】

特許文献１は、ユーザの要望を聞きながら、要望に沿った要件を確定すると同時に、その場で実機用となりうるアプリケーションプログラムのソースコードを生成し、完成させることで上記課題を解決している。

【先行技術文献】

【特許文献】

【0005】

【特許文献1】特開２０１５－２１０６３９号公報

【発明の概要】

【発明が解決しようとする課題】

【0006】

特許文献１は、アプリケーションのモックアップ用ファイルの生成とモックアップ用画面遷移を実現するモックアップ用アプリケーションのソースコードを生成することが記載されているが、モックアップ用アプリケーションを表示する様々なデバイスに対する考慮がされていない。デバイス毎に画面部品のレイアウトを変えるレスポンシブデザインを採用しているアプリケーションであっても、単一の画面でしか表示できず、たとえば、ユーザである顧客のもとにＰＣ（パーソナルコンピュータ）やタブレットを持参してユーザからの仕様を確認する場合、スマホ画面で表示される画面イメージや画面遷移を再現できず、ユーザ（開発者を含む）の要望を満たすことができない。

【0007】

本発明の目的は、デバイス毎に表示形態を変えたプロトタイプ（試作）のアプリケーションを作成することである。

【課題を解決するための手段】

【0008】

上記課題を解決するために、本発明は、表示形態に対応する表示サイズを記憶する記憶手段を有する情報処理装置であって、生成するアプリケーションの画面に表示されるアイテムを定義する画面定義と、次の画面へ遷移する手順を定義する画面遷移定義とを定義する定義手段と、前記定義手段により定義された画面と、画面を遷移する手順を再現する動作制御ファイルを生成する動作制御ファイル生成手段と、を備え、前記動作制御ファイル生成手段は、生成された動作制御ファイルを用いて再現する画面の表示形態の設定を受け付け、当該受け付ける表示形態に対応する表示サイズで前記手順による画面の遷移を実行させる動作制御ファイルを生成することを特徴とする。

【発明の効果】

【0009】

本発明によれば、デバイス毎に表示形態を変えたプロトタイプのアプリケーションを作成することができる効果を有する。

【図面の簡単な説明】

【0010】

【図1】本発明に係るプログラム開発装置、アプリケーションサーバ、データベースサーバ、アプリケーションクライアントの構成の一例を示すシステム構成図である。

【図2】本発明に係るプログラム開発装置、アプリケーションサーバ、データベースサーバ、アプリケーションクライアントとして適用可能な各ハードウェア構成の一例を示すブロック図である。

【図3】本発明の実施の形態に係るソフトウェア構成の一例を示すブロック図である。

【図4】本発明の実施の形態に係る第一のプログラム開発装置の機能構成の一例を示す図である。

【図5】本発明の実施形態に係るプロトタイプアプリケーション生成のフローチャートの一例を示す図である。

【図6】本発明の実施形態に係る画面定義入力受付処理のフローチャートの一例を示す図である。

【図7】本発明の実施形態に係るプロトタイプデータ入力受付処理のフローチャートの一例を示す図である。

【図8】本発明の実施形態に係るプロトタイプアプリケーションソースコード生成処理のフローチャートの一例を示す図である。

【図9】本発明の実施形態に係るプロトタイプアプリケーション実行時の処理のフローチャートの一例を示す図である。

【図10】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図11】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図12】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図13】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図14】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図15】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図16】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図17】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図18】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図19】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図20】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図21】本発明の実施形態に係る画面定義４０２の一例を示す図である。

【図22】本発明の実施形態に係る画面定義４０２の一例を示す図である。

【図23】本願発明に係るプロトタイプアプリケーション４４２の画面サイズの制御の一例を示す図である。

【図24】本願発明に係るプロトタイプアプリケーション４４２の画面表示の一例を示す図である。

【図25】本発明の実施形態に係るプロトタイプアプリケーション画面とプロトタイプ操作パネルとの関係を説明する図である。

【図26】本発明の実施形態に係るプロトタイプ画面表示アプリケーション実行時のフローチャートの一例を示す図である。

【図27】本発明の実施形態に係るプロトタイプ画面表示アプリケーション実行時のフローチャートの一例を示す図である。

【図28】本発明の実施形態に係るプロトタイプ画面表示アプリケーション実行時のフローチャートの一例を示す図である。

【図29】本発明の実施形態に係るプロトタイプ画面表示アプリケーション実行時のフローチャートの一例を示す図である。

【図30】本発明の実施形態に係るブラウザで表示できるデバイスの一例を示す図である。

【図31】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図32】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図33】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図34】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図35】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図36】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図37】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図38】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図39】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図40】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図41】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図42】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図43】本発明の実施形態に係る出力部２１０に表示される画面イメージの一例を示す図である。

【図44】本実施形態に係るプロトタイプアプリケーションソースコードの一部の例を示す図である。

【図45】本実施形態に係るプロトタイプアプリケーションソースコードの一部の例を示す図である。

【図46】本実施形態に係るプロトタイプアプリケーションソースコードの一部の例を示す図である。

【図47】本実施形態に係るプロトタイプアプリケーションソースコードの一部の例を示す図である。

【発明を実施するための形態】

【0011】

以下、図面を参照して本発明の実施形態を詳細に説明する。
＜第一実施形態＞
図１は、本発明に係わるプログラム開発装置（開発者がＷｅｂアプリケーション生成のために操作する情報処理装置）、アプリケーションサーバ、データベースサーバ、アプリケーションクライアントの構成の一例を示すシステム（情報処理システム）構成図である。

【0012】

プログラム開発装置１０１は、開発者の操作に従って画面レイアウト及びデータベース検索指示などを定義する。プログラム開発装置１０１は、プログラム生成、アプリケーション生成を行う。

【0013】

なお、この実施形態においては、プログラム開発装置１０１で生成するアプリケーションはＷｅｂアプリケーションとしたが、これに限定するものではなく、携帯電話・スマートフォン・タブレットなどの情報処理装置で動作するアプリケーションや組込みソフトウェアなど、Ｗｅｂ技術による通信を利用したアプリケーションでなくてもよい。

【0014】

アプリケーションサーバ１０２は、プログラム開発装置１０１で開発されたアプリケーションを実行する。また、データベースサーバ１０３と接続して動作することが可能である。

【0015】

データベースサーバ１０３は、開発されたアプリケーションが使用するデータベースであり、また本発明では開発時にも動作確認などのために利用してもよい。例えば、開発者が利用するためにデータベースサーバ１０３は、プログラム開発装置１０１や、アプリケーションサーバ１０２と同一の装置で構成されていてもよいし、ＬＡＮなどのネットワーク１０５内に配置されてもよい。

【0016】

アプリケーションクライアント１０４（情報処理装置）は、アプリケーションサーバ１０２と協調してプログラム開発装置１０１で開発したアプリケーションプログラムを動作させる、エンドユーザの入力端末である。この、アプリケーションクライアント１０４は、携帯端末などの情報処理装置であってもよいこととする。

【0017】

なお、プログラム開発装置１０１、アプリケーションサーバ１０２、データベースサーバ１０３、および、アプリケーションクライアント１０４の何れかを、クラウドなどのインターネット上に配置してもよいし、いくつかの情報処理装置を一つの筐体としてもよい。

【0018】

図２は、本発明に係わるプログラム開発装置１０１、アプリケーションサーバ１０２、データベースサーバ１０３、アプリケーションクライアント１０４として適用可能な各ハードウェア構成の一例を示すブロック図である。

【0019】

図２において、ＣＰＵ２０１は、システムバス２０４に接続される各デバイスを統括的に制御する。

【0020】

また、ＲＯＭ２０３あるいは外部メモリ２１１には、ＣＰＵ２０１の制御プログラムであるオペレーティングシステム（ＯＳ）や、各サーバ、クライアント、装置など情報処理装置の後述する各種機能を実現するためのプログラムが記憶されている。

【0021】

ＲＡＭ２０２は、ＣＰＵ２０１の主メモリ、ワークエリア、一時待避領域等として機能する。

【0022】

入力コントローラ２０５は、入力部２０９からの入力を制御する。この入力部２０９としては、情報処理装置では、キーボード、マウス等のポインティングデバイス、タッチパネルが挙げられる。

【0023】

なお、入力部２０９がタッチパネルの場合、ユーザがタッチパネルに表示されたアイコンやカーソルやボタンに合わせて押下（指等でタッチ）することにより、各種の指示を行うことができることとする。

【0024】

また、タッチパネルは、マルチタッチスクリーン等の、複数の指でタッチされた位置を検出することが可能なタッチパネルであってもよい。

【0025】

出力コントローラ２０６は、出力部２１０の表示を制御する。この出力部２１０としては、例えば、ＣＲＴや液晶ディスプレイ等が挙げられる。尚、本体と一体になったノート型パソコンのディスプレイも含まれるものとする。また、プロジェクタであってもよいこととする。

【0026】

外部メモリコントローラ２０７は、ブートプログラム、各種のアプリケーション、フォントデータ、ユーザーファイル、編集ファイル、プリンタドライバ等を記憶する外部メモリ２１１へのアクセスを制御する。外部メモリ２１１には、各サーバ、クライアント、装置等の各種機能を実現するための各種テーブル、パラメータが記憶されている。この外部メモリ２１１としては、ハードディスク（ＨＤ）やフレキシブルディスク（ＦＤ）、ＰＣＭＣＩＡカードスロットにアダプタを介して接続されるコンパクトフラッシュ（登録商標）、スマートメディア等が挙げられる。

【0027】

なお、ＣＰＵ２０１は、例えばＲＡＭ２０２内の表示情報用領域へアウトラインフォント展開（ラスタライズ）処理を実行することにより、出力部２１０上での表示を可能としている。また、ＣＰＵ２０１は、出力部２１０上の不図示のマウスカーソル等での開発者指示を可能とする。

【0028】

通信Ｉ／Ｆコントローラ２０８は、ネットワークを介して外部機器との通信制御処理を実行する。例えば、ＴＣＰ／ＩＰを用いた通信等が可能である。

【0029】

本発明を実現するためのプログラム２１２は外部メモリ２１１に記録されており、必要に応じてＲＡＭ２０２にロードされることによりＣＰＵ２０１によって実行されるものである。

【0030】

図３は、本発明の実施の形態のソフトウェア構成を示すブロック図の一例である。

【0031】

プログラム開発装置１０１は、以下の機能部を備える。

【0032】

定義部３０１は、アプリケーションに表示される画面やアイテム（入出力項目）の配置などの画面定義情報と、アプリケーションの画面が次の画面に遷移する手順を定義する画面遷移定義情報と、を開発者から受け付ける機能部であり、具体的には図６のフローチャートや図１０～図１４の説明図が該当する。

【0033】

動作制御ファイル生成部３０２は、定義部３０１で定義された画面と、画面を遷移する手順を再現するためのプロトタイプアプリケーション(動作制御ファイル)を生成する機能部であり、具体的には図８のフローチャートの処理が該当する。

【0034】

記憶部３０３は、アプリケーションクライアント１０４にプロトタイプアプリケーションを表示する際の画面サイズを記憶した機能部であり、具体的には図２３の２３１０などが該当する。

【0035】

データ取得部３０４は、ユーザからプロトタイプアプリケーション上のアイテム（入出力項目）に表示するデータを取得する機能部であり、具体的には図７のステップＳ７０６や図１５、図１８の説明図が該当する。

【0036】

操作パネル生成部３０５は、プロトタイプアプリケーションの画面環境や遷移方法などを制御するプロトタイプ操作パネルを生成する機能部であり、具体的には図８の８１０、生成されるプロトタイプ操作パネルは図３１の３１０２などである。

【0037】

図４は、プログラム開発装置１０１、アプリケーションサーバ１０２及びアプリケーションクライアント１０４の構成図である。

【0038】

プログラム開発装置１０１は、リポジトリ定義部４００、プロトタイプアプリケーション生成部４１０、リポジトリ定義エディタ部４２０を備える。なお、本発明のプロトタイプアプリケーションとは、本番環境のようにデータベースからデータを検索したり、算出したデータ結果から作図をしたりするアプリケーションとは異なり、予め設定された値や予め作図された図などを表示し、画面遷移や表示変更などを実際のアプリケーションのように模倣するモックアップとしてのアプリケーションである。

【0039】

アプリケーションサーバ１０２は、図４ではアプリケーションサーバ部４３０に該当し、アプリケーションクライアント１０４は、アプリケーションクライアント部４３５を備える。

【0040】

プログラム開発装置１０１は、プロトタイプ生成部４１０によりプロトタイプ表示画面（親画面）４４０を生成する。本発明での開発者とは、アプリケーションの受託開発者に限らず、ビジネスユーザや営業担当者などの広くプログラム開発装置１０１を使用する者を指す。

【0041】

リポジトリ定義部４００には、アプリケーション定義４０１、画面定義４０２、画面部品定義４０３、画面遷移定義４０４、画面部品定義４０２に紐づくアクション４０５、アクション４０５に紐づくプロトタイプデータ４０６が記憶されている。プロトタイプデータとは、プロトタイプアプリケーションを実行する際にアプリケーション画面に表示されるデータを指し、本番環境のようにデータベースからデータを検索したり、算出したデータ結果から作図をしたりするものではなく、開発者により予め設定されている値や図を指す。これら４０１～４０６の定義は、アプリケーション開発ツールを介して、開発者によって入力設定または配置される。

【0042】

アプリケーション定義４０１は、開発者が開発するアプリケーション全体の設定を保持する。

【0043】

画面定義４０２は、アプリケーションに含まれる各画面に配置される各種画面部品定義４０３及び画面遷移定義４０４の情報を保持する。画面定義４０２は、各種部品に設定されるアクション４０５及びアクション４０５に紐づくプロトタイプデータ４０６の情報を含む。

【0044】

プロトタイプアプリケーション生成部４１０は、開発者により設定されたリポジトリ定義部４００を解析し、プロトタイプ表示画面（親画面）４４０を生成する。また、プロトタイプアプリケーション生成後にプロトタイプ表示画面（親画面）４４０をアプリケーションサーバ部４３０にデプロイする。

【0045】

リポジトリ定義解析部４１１は、開発者により設定されたリポジトリ定義部４００を解析する。

【0046】

プロトタイプコード生成部４１２は、リポジトリ定義解析部４１１の解析結果に応じたプロトタイプアプリケーションのソースコードを生成する。

【0047】

ソースコードコンパイル部４１３は、プロトタイプコード生成部４１２の生成したソースコードをコンパイルし、コンパイル済Ｊａｖａ（登録商標）コード及びＨＴＭＬ／ＪＳＰ／ＪａｖａＳｃｒｉｐｔ（登録商標）を含むプロトタイプ表示画面（親画面）４４０をアプリケーションサーバ部４３０にデプロイする。

【0048】

リポジトリ定義エディタ部４２０は、ユーザがリポジトリ定義４００を設定するための手順の一例である。リポジトリ定義エディタ部４２０は、画面定義エディタ部４２１、画面遷移定義エディタ部４２２、部品パレット部４２３、アクション選択部４２４、プロトタイプデータ入力部４２５を含む。

【0049】

画面定義エディタ部４２１は、開発者が所望の画面レイアウトを直観的に作成するためのグラフィカルエディタである。

【0050】

画面遷移定義エディタ部４２２は、開発者が配置した各画面部品に対するプロパティを設定するエディタである。

【0051】

レスポンシブ部品制御部４２３は、開発者がクライアントの画面幅毎に画面部品の表示形式（画面の配置や部品幅）を制御させる機能部である。

【0052】

レスポンシブ部品制御部４２３の例を図２３、図２４を参照して説明する。

【0053】

図２３は、本願発明におけるプロトタイプアプリケーション４４２の画面サイズ（表示サイズ）の制御を説明する模式図である。

【0054】

たとえば、図２３の２３００のように、アプリケーション生成画面にパーソナルコンピュータ画面ボタン２３０１、タブレット画面ボタン２３０２，スマートフォン画面ボタン２３０３のように複数の種類のクライアントの表示画面を切り替えるボタンを表示する。

【0055】

２３００の切り替えるボタンを押下した際に、アプリケーションクライアント１０４に表示される画面サイズを記憶したデータが２３１０である（記憶部）。たとえば、パーソナルコンピュータ画面ボタン２３０１が押下されると、表示される画面サイズは１９２０×１０８０（２３１１）であり、タブレット画面ボタン２３０２が押下されると、表示される画面サイズは１０２３×１３６６（２３１２）、スマートフォン画面ボタン２３０３が押下されると、表示される画面サイズは４１４×８９６となる。それぞれのボタンを押下した画面の例を図２４を参照して説明する。

【0056】

図２４は、本願発明におけるプロトタイプアプリケーション４４２の画面表示の一例を示す模式図である。

【0057】

たとえば図２４の２４０２は、パーソナルコンピュータ画面の表示イメージ、２４０３はタブレット画面の表示イメージ、２４０４はスマートフォン画面の表示イメージである。それぞれの部品サイズ、たとえば、パーソナルコンピュータ画面２４０２の部品２４２２は、タブレット画面２４０３では２４２３であり、スマートフォン画面２４０４では２４２４である。レスポンシブ部品制御部４２３は、同じ部品である２４２２、２４２３、２４２４を、図２４のようにそれぞれ画面全体（２４０２、２４０３、２４０４）の横幅の所定の割合で表示されるように制御する。すなわち、パーソナルコンピュータ画面では２４２２は２４０２（画面全体）の２／１２、タブレット画面では２４２３は２４０３（画面全体）の３／１２、スマートフォン画面画面では２４２４は２４０４（画面全体）の６／１２の割合で２４０２の部品は表示されるように制御されている。図４の構成図の説明に戻る。

【0058】

アクション選択部４２４は、開発者がプロトタイプデータ４０６を設定する対象のアクションを選択するためのアクション（アクションイベント）を選択する機能部である。

【0059】

プロトタイプデータ入力部４２５は、特定のアクション４０５に紐づくプロトタイプデータ４０６を直観的に設定するためのグラフィカルエディタである。

【0060】

アプリケーションサーバ部４３０（１０２）は、プロトタイプアプリケーション生成部４１０が生成したプロトタイプ表示画面（親画面）４４０を記憶し、アプリケーションクライアント１０４に送信する機能部である。

【0061】

プロトタイプ表示画面（親画面）４４０は、プロトタイプアプリケーション生成部４１０が生成したアプリケーションである。プロトタイプ表示画面（親画面）４４０は、ビジネスユーザ（顧客の意思決定者）や顧客に提案を行う営業担当者などがアプリケーション開発時に、プログラム開発装置１０１が生成するアプリケーションの表示内容や動作等を制御して表示させるためのアプリケーションである。プロトタイプ表示画面（親画面）４４０は、プロトタイプ操作パネル４４１、プロトタイプアプリケーション４４２を含む。

【0062】

プロトタイプ操作パネル４４１は、プロトタイプ表示画面（親画面）４４０のうちユーザインタフェースの機能を持つモジュールであり、アプリケーションクライアント１０４の画面サイズでの再現やユーザ権限毎の表示イメージの再現、サーバでの処理待ち時間の再現、サーバでのエラー時の表示画面再現などの設定を開発者から受け付けるパネル（画面）である。

【0063】

プロトタイプアプリケーション４４２は、ビジネスユーザ（顧客の意思決定者）や顧客に提案を行う営業担当者などがアプリケーション開発時に、プログラム開発装置１０１の生成するアプリケーションの表示内容や動作等を再現するためのモックアップアプリケーションである。

【0064】

アプリケーションクライアント部４３５は、アプリケーションサーバ部４３０からプロトタイプ表示画面（親画面）４４０をダウンロードし、Ｗｅｂブラウザ４５０において、プロトタイプ表示画面（親画面）４４０はＳＰＡ（シングルページアプリケーション）で構成されるプロトタイプ表示画面（親画面）４４０を起動する。

【0065】

また、図示はしないが、プロトタイプアプリケーションではなく、実際に動作するアプリケーションコード生成部も有している。アプリケーションコード生成部は、リポジトリ定義解析部４１１により、リポジトリ定義部４００から、アプリケーション定義４０１、画面定義４０２、別に定義されたデータベース定義、データモデル定義、ビジネスプロセス定義、を読み込み解析する。Ｗｅｂアプリケーションコード生成部は、外部メモリ２１１に記憶されているコード生成ルールと、リポジトリ定義解析部４１１によって解析された内容とを用いて、ソースコードコンパイル部４１３を介し、コンパイル済Ｊａｖａ（登録商標）コード及びＨＴＭＬ／ＪＳＰ／ＪａｖａＳｃｒｉｐｔ（登録商標）を含むＷｅｂアプリケーションモジュールを生成する。

【0066】

図５は、Ｗｅｂアプリケーションのプロトタイプアプリケーション生成のフローチャートの一例を示す図である。なお、以下のフローチャートの各ステップは、各装置のＣＰＵ２０１が実行する。

【0067】

図５のフローチャートは、開発者がプロトタイプアプリケーションを生成しようとする際にプログラム開発装置１０１で開始される処理の流れである。なお、ステップＳ５０１～Ｓ５０６の処理は、プロトタイプアプリケーション４４２を生成するための情報取得処理である。ステップＳ５０７の処理は、プロトタイプ操作パネル４４１のための情報取得ならびにプロトタイプ表示画面４４０を含むプロトタイプアプリケーションのソースコードの生成を行う処理である。具体的に各ステップの処理を以下で説明する。

【0068】

まず、ステップＳ５０１において、プログラム開発装置１０１は、画面定義入力を受付ける。ステップＳ５０１の処理の詳細は図６を参照して後述する。

【0069】

次に、ステップＳ５０２において、プログラム開発装置１０１は、プロトタイプデータ４４３の入力要求があったかを判定する。具体的には、アクション選択部４２４の一例である図１２の１２０１及び１２０２、もしくは１２０３及び図１３の１３０１が押下されたかを判定する。

【0070】

アクション制御モジュール４４２は、開発者によって設定された複数のプロトタイプデータのうち、プロトタイプ表示画面（親画面）４４０実行時のどのタイミングでどのデータを表示するかを制御する。また、アクション制御モジュール４４２は、画面に配置された部品が持つ各アクションに紐づいた動作を制御する。すなわち、プロトタイプデータはアクション（アクションイベント）に紐づく。

【0071】

プログラム開発装置１０１は、開発者がこれから入力するプロトタイプデータが、どのアクションに紐づくものかを指定させるために、該押下を受付ける。

【0072】

ステップＳ５０２において、プロトタイプデータ入力要求があったと判定した場合には、ステップＳ５０３に遷移する。

【0073】

一方、ステップＳ５０２において、プロトタイプデータ入力要求がなかった場合には、ステップＳ５０４に遷移する。

【0074】

なお、１２０１が押下された場合の、アクション選択部の一例を１２０２に示す。また、１２０３が押下された場合の、アクション選択部の一例を１３０１に示す。１３０１の例では、表示中の画面定義に含まれるアクション一覧を表示しているが、アプリケーション定義に含まれるアクション一覧を表示してもよい。

【0075】

ステップＳ５０３に遷移すると、プログラム開発装置１０１は、開発者からのプロトタイプデータの入力を受付ける。ステップＳ５０３の処理の詳細は図７を参照して後述する。その後、ステップＳ５０４へと処理を遷移する。

【0076】

ステップＳ５０４において、プログラム開発装置１０１は、画面定義保存要求があったかを判定する。画面定義保存要求があったと判定した場合には、ステップＳ５０５に遷移し、画面定義保存要求がなかった場合には、ステップＳ５０６へと遷移する。

【0077】

ステップＳ５０５に遷移すると、プログラム開発装置１０１は、画面定義をリポジトリ定義部４００に保存する。その後、ステップＳ５０６へと処理を遷移する。

【0078】

ステップＳ５０６に遷移すると、プログラム開発装置１０１は、プロトタイプ生成要求があったかを判定する。プロトタイプ生成要求があったと判定した場合には、ステップＳ５０７に遷移する。一方、プロトタイプ生成要求がなかった場合には、ステップＳ５０１に遷移する。

【0079】

ステップＳ５０７へと遷移すると、プログラム開発装置１０１は、プロトタイプアプリケーションのソースコードを生成する。ステップＳ５０７の処理の詳細は図７を参照して後述する。

【0080】

次に、ステップＳ５０８において、プログラム開発装置１０１は、ステップＳ５０７において生成したソースコードのコンパイルを行う。

【0081】

ステップＳ５０９において、プログラム開発装置１０１は、ステップＳ５０８においてコンパイルしたプロトタイプアプリケーションをアプリケーションサーバ１０２（４３０）にデプロイする。

【0082】

以降は、プログラム開発装置１０１と、アプリケーションサーバ１０２、アプリケーションクライアント１０４が同じ情報処理装置で実施されている例で説明するが、それぞれが別の情報処理装置の場合は、それぞれの情報処理装置が、各アプリケーション（プロトタイプアプリケーションやＷｅｂブラウザなど）を起動して処理を実行する。

【0083】

ステップＳ５１０において、プログラム開発装置１０１は、アプリケーションサーバ１０２（４３０）にデプロイされたプロトタイプアプリケーションを起動する。

【0084】

ステップＳ５１１において、プログラム開発装置１０１は、Ｗｅｂブラウザを起動し、プロトタイプアプリケーションのＵＲＬアクセスを開始する。なお。ステップＳ５１０やＳ５１１の処理は、プログラム開発装置１０１が、アプリケーションサーバ１０２とアプリケーションクライアント１０４とを併用している場合の例であり、それぞれ別の筐体の場合は、ステップＳ５１０の処理はアプリケーションサーバ１０２が実行し、ステップＳ５１１の処理はアプリケーションクライアント１０４が実行する処理となる。

【0085】

以上で、図５の説明を終了する。以降の処理は図９を参照して後述する。なお、図９以降の説明では、プロトタイプアプリケーションは、プログラム開発装置１０１ではなく、Ｗｅｂブラウザを起動したアプリケーションクライアント１０４で実行されるとして説明するが、アプリケーションクライアント１０４と同様にＷｅｂブラウザを起動したプログラム開発装置１０１で実行されても良い。

【0086】

次に、ステップＳ５０１の処理の詳細を図６を参照して説明する。

【0087】

図６は、Ｗｅｂアプリケーションの画面定義の入力を受け付けるフローチャートの一例を示す図である。なお、以下のフローチャートの各ステップは、各装置のＣＰＵ２０１が実行する。

【0088】

図６のフローチャートは、図５のフローチャートにおいて、ステップＳ５０１へと処理が遷移した際に開始される処理の流れである。

【0089】

まず、ステップＳ６０１において、プログラム開発装置１０１は、開発者による画面部品の配置を受付ける。具体的には、部品パレット部４２３の一例である図１０の１００１から、画面定義エディタ部４２１の一例である１００２へのドラッグ＆ドロップ１００３による部品の配置を受付ける。図１０は、部品パレット部からボタン部品を画面定義エディタ部にドラッグ＆ドロップした例を示している。画面部品の配置方法は、部品パレット部４２３から画面定義エディタ部４２１へのドラッグ＆ドロップに限らず、既に配置した部品を移動する方法や、既に配置した部品をコピー＆ペーストにより複製する方法であってもよい。また、一度配置した部品を削除できてもよい。

【0090】

図１０の場合は、１００４のように、２つのテキスト入力欄（ＩＤ入力欄と名前入力欄）と、ＩＤと名前を登録する登録ボタンを設けた画面イメージが作成されているイメージである。

【0091】

次に、ステップＳ６０２において、プログラム開発装置１０１は、アクションイベントを含む部品が配置されたかを判定する。アクションイベントを含む部品が配置されたと判定した場合には、ステップＳ６０３に遷移し、アクションイベントを含む部品が配置されていない場合には、ステップＳ６０４に遷移する。

【0092】

ステップＳ６０３に遷移すると、プログラム開発装置１０１は、アクションイベントを含む部品に設定されたアクションを登録する。具体的には、部品のソースコードにｏｎＣｌｉｃｋというアクションを持つ部品の場合にアクションを登録する。画面定義４０２の一例である図２１の２１００には、本番環境に対応した“ａｃｔｉｏｎｓ”の定義２１０２と、プロトタイプアプリケーションに対応した“ｅｘａｍｐｌｅｓ”の定義２１０３を書き出す。なお、図２１の例では、実施手段の一例としてデータ保持の形式をｊｓｏｎファイルとしているが、データ保持の形式は他形式ファイルであってもデータベースであってもよい。その後、ステップＳ６０４へと遷移する。

【0093】

次に、ステップＳ６０４において、プログラム開発装置１０１は、プロパティ入力要求のあったかを判定する。具体的には、選択された部品のプロパティ入力要求ボタンの一例である図１１の１１０１が押下されたかを判定する。

【0094】

プロパティ入力要求のあったと判定した場合、ステップＳ６０５に遷移し、プロパティ入力要求のなかった場合、画面定義入力受付処理を終了する。

【0095】

ステップＳ６０５へと遷移すると、プログラム開発装置１０１は、開発者による画面部品に対するプロパティの入力を受付ける。具体的には、画面プロパティエディタの一例である図１１の１１０２を表示し、該画面部品が持つプロパティへの設定の入力を受付ける。図１１の例では、開発者による直観的な操作を実現するために画面プロパティエディタを該部品付近に表示しているが、画面内の特定の領域を画面プロパティエディタとして確保してもよい。また、画面プロパティエディタをモーダルダイアログで表示してもよい。

【0096】

以上で、図６の説明を終了する。

【0097】

次に、ステップＳ５０３の処理の詳細を図７を参照して説明する。

【0098】

図７は、Ｗｅｂアプリケーションのプロトタイプアプリケーションを生成する際に画面に表示するプロトタイプデータの入力を受け付けるフローチャートの一例を示す図である。なお、以下のフローチャートの各ステップは、各装置のＣＰＵ２０１が実行する。

【0099】

図７のフローチャートは、図５のフローチャートにおいて、ステップＳ５０３へと処理が遷移した際に開始される処理の流れである。

【0100】

まず、ステップＳ７０１において、プログラム開発装置１０１は、図５ステップＳ５０２において開発者が指定したアクションアイテムの設定を読込む。具体的には、次の二つを実施する。まず、開発者が選択した画面部品の画面部品定義４０３の一例である図１０の１００４の例である図２１の２１０１を読込む。２１０１のデータは、図６のフローチャートのステップＳ６０５で、図１１の１１０２から入力されたものとする。次に、開発者に選択された画面部品の本番環境に対応した“ａｃｔｉｏｎｓ”の定義２１０２と、プロトタイプアプリケーションに対応した“ｅｘａｍｐｌｅｓ”の定義２１０３を読込む。

【0101】

次に、ステップＳ７０２において、プログラム開発装置１０１は、ステップＳ７０１で読込んだアクションアイテムの設定が画面遷移を伴うかを判定する。具体的には、画面部品定義４０３の一例である２１０１の画面遷移定義４０４の一例である”ｎｅｘｔＵｉ”プロパティ（１１０２内の次画面プロパティ）に値が設定されているかを判定する。本実施例では、プログラム開発装置１０１は、画面遷移定義４０４を画面部品定義４０３に保持しているが、アクション定義４０５に保持してもよい。

【0102】

ステップＳ７０１で読込んだアクションアイテムの設定が画面遷移を伴うと判定した場合には、ステップＳ７０３に遷移し、ステップＳ７０１で読込んだアクションアイテムの設定が画面遷移を伴わない場合には、ステップＳ７０４に遷移する。

【0103】

ステップＳ７０３へと遷移すると、プログラム開発装置１０１は、ステップＳ７０１で読込んだアクションアイテムの設定に伴う画面遷移の遷移先画面を表示する。具体的には、２１０１の”ｎｅｘｔＵｉ”に設定された画面である図１３の１３００を表示する。なお、図１３の遷移先画面１３０２も、開発者の操作（ステップＳ６０１）により事前に設定されているものとする。なお、１３０２のような画面は、現在表示されている画面定義エディタ部４２１を書き換える表示方法であっても、新たな画面定義エディタ部４２１を起動する表示方法であってもよい。

【0104】

画面定義エディタ部４２１に表示される画面イメージ（遷移先画面）の初期表示アクションを読込み、これを開発者が指定したアクションとする。この処理後、ステップＳ７０４へと処理を遷移する。

【0105】

ステップＳ７０４において、プログラム開発装置１０１は、Ｓ７０１で読込んだアクション、もしくはＳ７０３で読込んだアクションに既に設定されているプロトタイプデータ（たとえば、図２２の２２０１のようなデータが既に設定されている場合はそのデータ）を画面上に表示する。

【0106】

次に、ステップＳ７０５において、プログラム開発装置１０１は、開発者による、プロトタイプデータ表示部品の選択を受け付ける。ここでプロトタイプデータ表示部品とは、プロトタイプアプリケーションを動作させる際に予めデータ（プロトタイプデータ）を表示させておく部品のことを示す。具体的には、画面定義エディタ部４２１に表示された図１３の１３０２のような一覧表の中にプロトタイプデータを表示する例である。同じ図である図１４のプロトタイプデータ表示部品１４０２において、たとえば「Ｎａｍｅ」欄で図示しないマウスを右クリックし、１４０３の編集ボタンが押下されることで、プロトタイプデータ表示部品の選択を受け付けることができる。また、図１７の１７０１のように一覧全体を選択後、表入力ボタン１７０２が押下されると、プロトタイプデータ表示部品の選択として、１７０１の一覧全体を選択することができる。

【0107】

次のステップＳ７０６において、プログラム開発装置１０１は、開発者によるプロトタイプデータの入力を受付ける。具体的には、プロトタイプデータ入力部４２５の一例である図１５のプロトタイプデータ入力ダイアログ１５０１を表示する。１５０１は、図１４の１４０１において、「Ｎａｍｅ」欄で編集ボタンが押下された際に表示するプロトタイプデータ入力ダイアログである。１５０１の場合、開発者から「Ｎａｍｅ」欄に「谷川 則之」というプロトタイプデータが入力されている例である。開発者からの値の入力後、１５０１内の「ＯＫ」ボタンの押下により、ステップＳ７０７の入力確定か否かの判断を行う。

【0108】

また、ステップＳ７０６の別の例として、プロトタイプデータ入力部４２５の一例を図１８を参照して説明する。

【0109】

図１８のプロトタイプデータ入力ダイアログ１８０１は、図１７において表入力ボタン１７０２が押下されると表示される画面イメージである。１８０１のテキスト入力欄には、１７０１に表示する一覧表に表示されるデータ群の入力を受け付ける。１８０１の場合は、１行目に「（空欄）」、「谷川 則之」、「（空欄）」、２行目に「１００１」、「堀 亜衣」、「２０１９／１０／１０」、３行目に「１００２」、山村 るり子」、「２０１９／０９／１８」というデータが入力されている。これらのデータ入力はファイル選択ボタン１８０２の押下により表示される図示しないファイル選択画面からＣＳＶファイルや表計算ファイルが選択されることにより、そのファイルの内容を適応させても良い。

【0110】

開発者からテキスト入力欄への値の入力、もしくはファイル選択後のデータ反映後、１８０３の「ＯＫ」ボタンの押下により、ステップＳ７０７の入力確定か否かの判断を行う。

【0111】

ステップＳ７０６では、言語によって表示するプロトタイプデータを切り替えるために、ロケールの指定を受付けてもよい。また、プロトタイプデータ入力受付方法として、モーダルダイアログを表示する方法を示しているが、該入力受付方法は、Ｓ７０５で開発者が選択した表示部品に対して直接入力を受付ける方法であってもよいし、外部ファイルによる一括入力であってもよい。

【0112】

次のステップＳ７０７において、プログラム開発装置１０１は、開発者によるプロトタイプデータ入力が確定したかを判定する。具体的には、図１５のプロトタイプデータ入力ダイアログ１５０１内の「ＯＫ」ボタンや図１８の「ＯＫ」ボタン１８０３が押下されたかを判定する。なお、ステップＳ７０６の入力受付方法において、部品に対する直接入力を受付けた場合は、該部品からフォーカスが外れたかにより判定する。

【0113】

プロトタイプデータ入力が確定したと判定された（「ＯＫ」ボタンが押下された）場合は、ステップＳ７０８に遷移し、プロトタイプデータ入力が確定していないと判定した場合は、ステップＳ７０６に遷移する。

【0114】

ステップＳ７０８において、プログラム開発装置１０１は、開発者によって入力されたプロトタイプデータを画面定義４０２に書き出す。具体的には、画面定義４０２のアクション４０５に紐づくプロトタイプデータ４０６の一例である２２０１に書き出す。

【0115】

なお、この方法では、実行するアクションによる遷移後画面で表示するデータの変更ができない。プロトタイプデータを遷移後画面の初期表示アクションに保持しているためであるが、遷移後画面で表示するプロトタイプデータを、実行するアクション側で保持することで、実行するアクションによる遷移後画面で表示するデータの変更を可能としてもよい。具体的には、２２０１の“ｏｎＬｏａｄ”以下のオブジェクトを２１０３の“ｏｎＣｌｉｃｋ”以下に保持することにより、画面を遷移する元のボタン（たとえば、図１０の１０００に配置された「登録」ボタン１００３）に遷移後画面で表示するデータを持たせてもよい。

【0116】

このように、プロトタイプデータを表示させた画面イメージをアクションイベントごとに画面を遷移させてプロトタイプアプリケーション上で表示することにより、実際に動作するアプリケーション（たとえばデータベースから検索したり、取り出したデータから作図したりする）を作る前に、モックアップとしてどのような動作をするのかのイメージを掴むことができる
以上で、図７の説明を終了する。

【0117】

次に、ステップＳ５０７の処理の詳細を図８を参照して説明する。

【0118】

図８は、Ｗｅｂアプリケーションのプロトタイプアプリケーションのソースコードを生成する処理の流れを説明するフローチャートの一例である。なお、以下のフローチャートの各ステップは、各装置のＣＰＵ２０１が実行する。

【0119】

図８のフローチャートは、図５のフローチャートにおいて、ステップＳ５０７へと処理が遷移した際に開始される処理の流れである。

【0120】

まず、ステップＳ８０１において、プログラム開発装置１０１は、リポジトリ定義部４００から開発者が指定したアプリケーション定義４０１を読み込む。リポジトリ定義解析部４１１は、読み込んだ定義を解析したうえでＲＯＭ２０３に記憶しておき、解析された定義は各生成部から適宜参照される。

【0121】

ステップＳ８０２において、プログラム開発装置１０１は、リポジトリ定義部４００からステップＳ８０１で読込んだアプリケーション定義４０１に含まれる画面定義４０２を読み込む。

【0122】

ステップＳ８０２において、画面定義を読み込む際に、画面表示項目（アイテム）のそれぞれ定義されている表示権限の情報も取得する。図３５の例を参照して説明する。図３５において、ユーザの権限により表示項目（アイテム）を変える行を２行目（３５０１）と定義している場合、ユーザの権限名８２１と、それに対する入出力表示許可項目８２２とを紐付ける情報などを取得する。図８の８２０の場合、図３５に描かれているユーザ権限として「Ｕｓｅｒ（ユーザ）」、「Ａｄｍｉｎ（管理者）」、「Ｇｕｅｓｔ（ゲスト）」の権限名を持ち、入出力表示許可項目として、図３５の「出欠確認」項目が定義されている。なお、この表示項目定義情報は、入出力表示許可を定義したものでも良いし、入出力表示禁止項目を定義していても良く、また、表示項目はまとめて表示権限を定義されていても良いし、８２０のように個別に定義されていても良い。

【0123】

ステップＳ８０３において、プログラム開発装置１０１は、リポジトリ定義部４００からステップＳ８０２で読込んだ画面定義４０２に含まれる画面部品定義４０３を読込む。

【0124】

ステップＳ８０４において、プログラム開発装置１０１は、リポジトリ定義部４００からステップＳ８０２で読込んだ画面定義４０２に含まれる画面遷移定義４０４を読込む。

【0125】

ステップＳ８０５において、プログラム開発装置１０１は、ステップＳ８０２で取得した表示項目に紐付けられた権限（役割・ロール）を収集する。

【0126】

ステップＳ８０６において、プログラム開発装置１０１は、リポジトリ定義部４００からステップＳ８０２で読込んだ画面定義４０２に含まれるプロトタイプデータ４０６を読込む。ここで読み込む画面定義４０２内のデータは、プロトタイプデータに対応した図２１や図２２の「ｅｘａｍｐｌｅｓ」のデータであり、「ａｃｔｉｏｎｓ」すなわち本番環境用のデータは使用しない。この２つのデータを持つことで、プロトタイプデータの画面定義と本番環境の画面定義を共通で作成可能になり、モックアップ用に作成したアプリケーション画面をそのままアプリケーションの画面として定義することができる。

【0127】

ステップＳ８０７において、プログラム開発装置１０１は、ステップＳ８０１～ステップＳ８０６で読込んだ情報を元に、プロトタイプコード生成部４１２でプロトタイプアプリケーションのソースコードを生成する。生成するソースコードには、プロトタイプアプリケーションを起動時に表示するプロトタイプ操作パネル（図３１の３１０２など）のソースコードも含む。

【0128】

図３１は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0129】

図３１を参照して、プロトタイプ操作パネルについて説明する。プロトタイプ操作パネルとは、プロトタイプ（試作）画面を表示する際、あるいはプロトタイプ（試作）画面を遷移させて表示する際の、表示設定や遷移時の設定の指示を開発者から受け付けるパネル画面である。プロトタイプ操作パネルは、表示デバイス（パーソナルコンピュータやタブレット、スマートフォンなど）や表示デバイスの画面の向きを再現させたり、ユーザのアクセス権（Ａｄｍｉｎ権限（管理者権限）やＵｓｅｒ権限（一般ユーザ権限）など）別の画面表示の再現、サーバでの処理時間の表示の再現、エラーが生じた場合の表示の再現などを設定することができる。表示デバイスの設定は３１０２の３１１１、ユーザ権限の設定は３１０２の３１２１、処理待ち時間の設定は、３１０２の３１３１，エラー表示の設定は３１０２の３１４１でそれぞれ設定することができる。

【0130】

プロトタイプ操作パネル３１０２を開いている場合のプロトタイプアプリケーション画面とプロトタイプ操作パネル３１０２との関係を図２５と図３１を参照して説明する。

【0131】

図２５は、プロトタイプアプリケーション画面とプロトタイプ操作パネルとの関係を説明する図である。

【0132】

親画面としてベースとなるプロトタイプ表示画面２５０１がブラウザ上に表示される親画面であり、親画面の中にｉＦｒａｍｅでプロトタイプアプリケーション画面２５０２を表示している。更にプロトタイプアプリケーション画面２５０２の上に、プロトタイプ操作パネル２５０３を表示し、プロトタイプアプリケーション２５０２の一部とプロトタイプ操作パネル２５０３が同時に確認できるように親画面２５０１に表示している。

【0133】

図３１のようなプロトタイプ操作パネル３１０２に開発者から設定を受け付け、開発者からたとえば３１０３のようなプロトタイプ操作パネル３１０２（２５０３）を縮小するような操作を受け付けると、図３２のようなプロトタイプアプリケーション画面３２０１（２５２２）を表示する（２５２１の表示イメージ）。プロトタイプアプリケーション画面３２０１（２５２２）から、プロトタイプ操作パネル３１０２（２５０３）を表示している画面に戻る場合は、プロトタイプ操作パネル表示ボタンである３２０２（２５２３）を押下して、プロトタイプ操作パネル３１０２が表示されている図３１の画面イメージ３１０１に遷移する。図８のフローチャートの説明に戻る。

【0134】

ステップＳ８０７において、生成されるソースコードの例を図４４に示す。図４４は、プロトタイプ操作パネルが操作され、操作が記憶されたブラウザの記憶領域（Ｗｅｂ ＳｔｏｒａｇｅやＣｏｏｋｉｅの情報）が変更されると開始されるＴｙｐｅＳｃｒｉｐｔのソースコードの例である。

【0135】

次に、ステップＳ８０８において、プログラム開発装置１０１は、ユーザの権限毎に画面表示を変更させるためのソースコードを生成する。生成されるソースコードの例を図４５に示す。図４５は、たとえば、図３５のプロトタイプ操作パネル３５２１や図３７のプロトタイプ操作パネル３７２１のようにユーザ権限を変更された際に実行されるソースコードの例である。図４５のソースコードは、ユーザ権限が変更された際に図４５の前半のソースコードでユーザ権限の判定を行い、後半のソースコードでユーザ権限が適用された画面部品の表示・非表示を制御している。すなわち、ステップＳ８０８は、ユーザ権限を設定した場合のプロトタイプ（試作）画面を表示するためのプログラムを生成するしょりである。

【0136】

ステップＳ８０９において、プログラム開発装置１０１は、サーバと接続する際に生じる画面表示を再現するためのソースコードを生成する。生成されるソースコードの例を図４６に示す。図４６は、たとえば、プロトタイプ操作パネル３１０２のオプション設定欄３１３１や３１４１に図３９の３９３１のように、処理時間（処理待ち時間）の値が入力された場合、もしくは図４２の４２４１のようにエラー設定がオンに変更された場合に実行されるソースコードの例であり、ブラウザの記憶領域から取得する疑似サーバの処理設定を反映したプロトタイプ（試作）画面を表示している。すなわち、ステップＳ８０９は、サーバと通信する際の疑似的な通信やサーバの状況を再現するためのプログラムを生成する処理である。

【0137】

ステップＳ８１０において、プログラム開発装置１０１は、プロトタイプ操作パネル画面２５０３の描画後、配下のプロトタイプアプリケーション（ｉＦｒａｍｅ）画面２５０２の画面の設定をプロトタイプ操作パネル２５０３（３１０２）の設定に反映させるためのプログラムを生成する。生成されるソースコードの例を図４７に示す。図４７は、たとえば、プロトタイプ操作パネル３１０２のデバイス設定欄３１１１をＰＣ（パーソナルコンピュータ設定）のイメージで設定するボタン３１１２に設定するか、図３３の３３１１のイメージのようにスマートフォンの設定にするかなどにより、プロトタイプ（試作）画面の表示を再現するＴｙｐｅＳｃｒｉｐｔのソースコードである。

【0138】

以上のソースコードを生成して、図８のフローチャートの処理を終える。なお、プロトタイプ操作パネル画面３１０２やプロトタイプ操作パネル画面操作後の処理を実行するソースコード（図４４～図４７）はＴｙｐｅＳｃｒｉｐｔを例としているが、他の言語のソースコードでもよく、ＪａｖａＳｃｒｉｐｔなどで書かれたソースコードであっても良い。

【0139】

以上で、図８の説明を終了する。

【0140】

次に、図５のステップＳ５０９でデプロイされたプロトタイプアプリケーションを実行し、アプリケーションクライアント１０４のＷｅｂブラウザ（４５０）と通信を開始する際の処理の流れを図９を参照して説明する。なお、図５のようにプログラム開発装置１０１のステップＳ５１１で起動されたＷｅｂブラウザがデプロイされたプロトタイプ表示画面アプリケーションと通信を開始しても良いし、図９のようにアプリケーションクライアント１０４において起動されたＷｅｂブラウザが、デプロイされたアプリケーションサーバ１０２と通信を開始するとしても良い。

【0141】

図９は、図５ステップＳ５０９でデプロイされたプロトタイプ表示画面（親画面）４４０がアプリケーションクライアント１０４にダウンロードされて実行される動作の一例を示すフローチャートである。なお、以下のフローチャートの各ステップは、アプリケーションクライアント１０４のＣＰＵ２０１が実行する。

【0142】

図９のフローチャートは、プロトタイプ表示画面（親画面）４４０がアプリケーションサーバ１０２（４３０）にデプロイされ、アプリケーションクライアント１０４のＷｅｂブラウザ４５０から開発者のアクセスがあった際に開始される処理の流れである。

【0143】

ステップＳ９０１において、アプリケーションクライアント１０４は、まずブラウザのロケール情報を読込む。このロケール情報により、プロトタイプデータの表示言語を切り替えることができる。

【0144】

ステップＳ９０２において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から、プロトタイプ表示画面（図８のステップＳ８０７～Ｓ８１０で生成したアプリケーション）が動作するＳＰＡ（シングルページアプリケーション）をダウンロードする。なお、本発明の実施形態では、プロトタイプ表示画面（親画面）４４０はＳＰＡとして説明するが、必ずしもＳＰＡである必要はなく、画面遷移命令によりアプリケーションサーバ１０２と通信をする仕様でも良く、その場合はプロトタイプアプリケーションの初期画面情報をダウンロードする。

【0145】

また、ステップＳ９０２において、アプリケーションクライアント１０４は、プロトタイプアプリケーションでのユーザ権限情報を取得する。

【0146】

更に、ステップＳ９０２において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から取得したプログラムからプロトタイプ表示画面２５０１（プロトタイプアプリケーションの親画面）を起動する。すなわち、ステップＳ９０２は、図３１の３１０１のような画面イメージのプロトタイプアプリケーションを表示するためのプログラムをダウンロードし、起動する処理を行うステップである。

【0147】

次のステップＳ９０３において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプアプリケーション（ｉＦｒａｍｅ）２５０２を起動する。起動している画面イメージは図３２の３２０１であるが、次のステップＳ９０４以降で表示されるプロトタイプ操作パネル３１０２が上層に表示（図２５の２５０２と２５０３のような関係）されているため、起動当初は、図３１の３１０１のような表示画面となる。

【0148】

次のステップＳ９０４において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプ操作パネル（ｉＦｒａｍｅ）２５０３を起動する。起動している画面イメージは図３１の３１０２のイメージである。このプロトタイプ操作パネルに表示されている設定を変更することにより、プロトタイプ（試作）アプリケーションの表示設定や画面の遷移設定を制御することができる。

【0149】

次のステップＳ９０５において、アプリケーションクライアント１０４は、プロトタイプ操作パネル３１０２に入力されたそれぞれの設定によって、プロトタイプアプリケーション３２０１（４４２）の表示画面を変更もしくは遷移画面を変更する表示を行う。それぞれの設定によるプロトタイプアプリケーション４４０の画面表示もしくは遷移画面表示の処理はそれぞれ図２６～図２９において後述する。

【0150】

次にステップＳ９０６において、アプリケーションクライアント１０４は、プロトタイプアプリケーションによるアプリケーションの再現を終了するか開発者の指示を待ち、アプリケーションの再現を終了する場合は、このフローチャートを終了し、もう一度再現する指示を受け付けた場合は、ステップＳ９０２へと処理を戻す。

【0151】

次に、ステップＳ９０５において、プロトタイプ操作パネル３１０２に入力されたそれぞれの設定によって、プロトタイプアプリケーション３２０１（４４２）の表示画面を変更もしくは遷移画面を変更する表示する処理の流れを図２６～図２９を参照して説明する。なお、それぞれの設定とは、表示デバイスの切り替え、ユーザ権限の変更、サーバとの処理時間の再現、ならびにエラー発生時の再現である。

【0152】

図２６は、表示デバイスを切り替える際の処理の流れを示すフローチャートである。なお、以下のフローチャートの各ステップは、アプリケーションクライアント１０４のＣＰＵ２０１が実行する。

【0153】

図２６のフローチャートは、アプリケーションクライアント１０４のＷｅｂブラウザ４５０から開発者のアクセスがあり、プロトタイプ表示画面（親画面）４４０のＳＰＡがＷｅｂブラウザ４５０にダウンロードされた際に開始されるフローチャートである。なお、図２６～図２９の一部の説明は図９の説明と一部重なっている。

【0154】

まず、ステップＳ２６０１において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から、プロトタイプ表示画面（図８のステップＳ８０７～Ｓ８１０で生成したアプリケーション）が動作するＳＰＡをダウンロードする。

【0155】

また、ステップＳ２６０１において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から取得したプログラムからプロトタイプ表示画面２５０１を起動する。すなわち、ステップＳ２６０１は、図３１の３１０１のような画面イメージのプロトタイプアプリケーションを表示するためのプログラムをダウンロードし、起動する処理を行うステップである。

【0156】

次のステップＳ２６０２において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプアプリケーション（ｉＦｒａｍｅ）２５０２を起動する。起動している画面イメージは図３２の３２０１であるが、次のステップＳ２６０３以降で表示されるプロトタイプ操作パネル３１０２が上層に表示（図２５の２５０２と２５０３のような関係）されているため、起動当初は、図３１の３１０１のような表示画面となる。

【0157】

次のステップＳ２６０３において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプ操作パネル（ｉＦｒａｍｅ）２５０３を起動する。起動している画面イメージは図３１の３１０２のイメージである。このプロトタイプ操作パネルに表示されている設定を変更することにより、プロトタイプ（試作）アプリケーションの表示設定や画面の遷移設定を制御することができる。

【0158】

プロトタイプ操作パネル３１０２が表示されている状態で、開発者からデバイス入力欄３１１１が変更された場合に、次のステップＳ２６０４の処理へと遷移する。開発者によりデバイス入力欄３１１１が変更された場合の画面イメージを図３３を参照して説明する。なお、デバイス入力欄３１１１は、各端末（パーソナルコンピュータ、タブレット、スマートフォン）の画面サイズが予め設定されているものであり、タブレットやスマートフォンに関しては、縦向きと横向きで表示形態を変えることができる入力欄である。縦向きと横向きの表示形態を表示するのは、タブレットやスマートフォンが縦向きでも横向きでも表示制御可能であるためである。

【0159】

図３３は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0160】

図３３のプロトタイプ操作パネル３３０２のデバイス選択欄３３１１は、図３１のプロトタイプ操作パネル３１０２と異なり、スマートフォン画面ボタン３３１２が押下されている例である。

【0161】

図２６のフローチャートの説明に戻って、次のステップＳ２６０４へと処理を遷移すると、アプリケーションクライアント１０４は、プロトタイプ操作パネル３３０２において変更されたデバイスの画面サイズに変更する指示を受け付ける。図３１の３１０１を表示後にのステップＳ２６０３とＳ２６０４の処理を実行するソースコードの例を図４７に示す。

【0162】

次のステップＳ２６０５において、アプリケーションクライアント１０４は、プロトタイプアプリケーション２５０２をステップＳ２６０４で受け付けたデバイスのサイズにｉＦｒａｍｅ部を合わせて表示する。図３３のプロトタイプ操作パネル３３０２のような設定を受け付けた場合のプロトタイプアプリケーション画面のイメージを図３４を参照して説明する。

【0163】

図３４は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0164】

図３４のプロトタイプアプリケーション画面３４０１はスマートフォンサイズである３４０２のサイズとして表示される。スマートフォンサイズで表示された画面であっても、試作としてのプロトタイプアプリケーションの処理は実行され、たとえば、所定のボタンが押下されると、そのアクションに応じたプロトタイプデータを反映した遷移先の画面を表示することができる。

【0165】

なお、図３３のプロトタイプ操作パネル３３０２が前面に表示されているプロトタイプ表示画面３３０１（図２５の２５０１）から、図３４のようなプロトタイプアプリケーション画面３４０１が前面に出ている画面（図２５の２５２１）への遷移は、たとえば、図３１の下矢印ボタン３１０３の押下などでも良いし、他のボタンによる遷移でもよい。また、図３４のようなプロトタイプアプリケーション画面３４０１が前面に出ている画面（図２５の２５２１）から、図３３のプロトタイプ操作パネル３３０２が前面に表示されているプロトタイプ表示画面３３０１（図２５の２５０１）への遷移（すなわち、プロトタイプ操作パネル３３０２の画面に戻る）は、たとえば、図３２の右下にある半透明なボタン３２０２の押下などで実行されても良い。

【0166】

以上の処理により、デバイス毎に表示形態を変えたプロトタイプのアプリケーションを容易に作成することができる。また、プロトタイプ操作パネルを有することにより、プロトタイプアプリケーションを実行中でも表示形態を変えることができる。

【0167】

次に、図２７を参照して、ユーザ権限を変更した際に画面表示を変更する処理の流れを説明する。

【0168】

図２７は、ユーザ権限を切り替えた際の処理の流れを示すフローチャートである。なお、以下のフローチャートの各ステップは、アプリケーションクライアント１０４のＣＰＵ２０１が実行する。

【0169】

図２７のフローチャートは、アプリケーションクライアント１０４のＷｅｂブラウザ４５０から開発者のアクセスがあり、プロトタイプ表示画面（親画面）４４０のＳＰＡがＷｅｂブラウザ４５０にダウンロードされた際に開始されるフローチャートである。

【0170】

まず、ステップＳ２７０１において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から、プロトタイプ表示画面（図８のステップＳ８０７～Ｓ８１０で生成したアプリケーション）が動作するＳＰＡをダウンロードする。

【0171】

また、ステップＳ２７０１において、アプリケーションクライアント１０４は、プロトタイプアプリケーションでのユーザ権限情報を取得する。取得するデータの例が、たとえば２７１０のようなデータである。このデータはプロトタイプ表示画面アプリケーション生成時のステップＳ８０５において取得したデータ８３０と一緒である。

【0172】

更に、ステップＳ２７０１において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から取得したプログラムからプロトタイプ表示画面２５０１を起動する。すなわち、ステップＳ２７０１は、図３１の３１０１のような画面イメージのプロトタイプアプリケーションを表示するためのプログラムをダウンロードし、起動する処理を行うステップである。

【0173】

次のステップＳ２７０２において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプアプリケーション（ｉＦｒａｍｅ）２５０２を起動する。起動している画面イメージは当初は図３２の３２０１であるが、次のステップＳ２７０３以降で表示されるプロトタイプ操作パネル３１０２が上層に表示（図２５の２５０２と２５０３のような関係）されているため、起動当初は、図３１の３１０１のような表示画面となる。

【0174】

次のステップＳ２７０３において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプ操作パネル（ｉＦｒａｍｅ）２５０３を起動する。起動している画面イメージは図３１の３１０２のイメージである。このプロトタイプ操作パネルに表示されている設定を変更することにより、プロトタイプ（試作）アプリケーションの表示設定や画面の遷移設定を制御することができる。図３１のユーザ権限設定欄３１２１のように、ユーザ権限設定のチェックボックスは、ステップＳ８０５で取得したユーザ権限のデータ８３０から生成されている。

【0175】

プロトタイプ操作パネル３１０２が表示されている状態で、ユーザ権限設定欄３１２１が開発者から変更された場合に、次のステップＳ２７０４の処理へと遷移する。開発者によりユーザ権限設定欄３１２１が変更された場合の画面イメージを図３５を参照して説明する。

【0176】

図３５は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0177】

図３５のプロトタイプ操作パネル３５０２のユーザ権限設定欄３５２１は、図３１のプロトタイプ操作パネル３１０２と異なり、ユーザ権限設定欄３５２１の「ｇｕｅｓｔ」ではなく、「ｕｓｅｒ」にチェックが入っている例である。

【0178】

図２７のフローチャートの説明に戻って、次のステップＳ２７０４へと処理を遷移すると、アプリケーションクライアント１０４は、プロトタイプ操作パネル３５０２において変更されたユーザ権限設定欄３５２１の値をブラウザのローカルストレージに記憶する。図３１の３１０１を表示後にユーザ権限設定欄が変更された場合のステップＳ２７０４とＳ２７０５の処理を実行するソースコードの例を図４４と図４５に示す。

【0179】

次のステップＳ２７０５において、アプリケーションクライアント１０４は、プロトタイプアプリケーション２５０２をステップＳ２７０４で記憶したユーザ権限設定で表示する。図３５のプロトタイプ操作パネル３５０２のユーザ権限設定欄３５２１を受け付けた場合のプロトタイプアプリケーション画面のイメージを図３６を参照して説明する。

【0180】

図３６は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0181】

図３６のプロトタイプアプリケーション画面３６０１は、図３２のプロトタイプアプリケーション画面３２０１とは異なり、下線部分３６０２の部分に新たに出欠確認（Ｕｓｅｒ）が追加表示されている。これは、プロトタイプ表示画面生成時に、ステップＳ８０２で取得したユーザ権限毎の入出力許可項目のデータ８２０を反映したイメージ図である。すなわち、ユーザ権限設定欄３５２１が「ｕｓｅｒ」に設定変更されているため、８３０の「ｕｓｅｒ」に対応する権限名（Ｎａｍｅ）が「Ｕｓｅｒ」であり、「Ｕｓｅｒ」権限で入出力許可項目は、「出欠確認（Ｕｓｅｒ）」と「備考」である。そのため、図３６のプロトタイプアプリケーション画面３６０１は、下線部分３６０２のように、出欠確認（Ｕｓｅｒ）欄と備考欄とが表示されている。

【0182】

別の例も説明する。

【0183】

図３７は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0184】

図３７のプロトタイプ操作パネル３７０２のユーザ権限設定欄３７２１は、図３１のプロトタイプ操作パネル３１０２と異なり、ユーザ権限設定欄３７２２のように「ｇｕｅｓｔ」も「ｕｓｅｒ」も「ａｄｍｉｎ」にもチェックが入っている例である。この場合、図８のユーザ権限毎の入出力許可項目のデータ８２０とユーザ権限データ８３０によると、「備考」欄、出欠確認（Ｕｓｅｒ）欄、出欠確認（Ａｄｍｉｎ）欄、更新ボタンが入出力許可項目である。

【0185】

図３８は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図であり、図３７のプロトタイプ操作パネル３７０２のユーザ権限設定を受けて表示される画面イメージである。

【0186】

図３８のプロトタイプアプリケーション画面３８０１は、図３２のプロトタイプアプリケーション画面３２０１とは異なり、下線部分３８０２の部分に新たに出欠確認（Ａｄｍｉｎ）と出欠確認（Ｕｓｅｒ）３８０３が追加表示されており、更に画面右の更新ボタン３８０４も追加で表示されている。

【0187】

以上の処理により、ユーザの役割に依存して画面遷移を行うプロトタイプのアプリケーションを作成することができる効果を有する。すなわち、通常の画面遷移だけをさせる試作型プアプリケーションを生成すると、ユーザ権限など関係なく、所定の画面表示や所定の画面遷移しかできないパターンとなるが、本願発明では、ユーザ権限を切り替えるプロトタイプ操作パネルの設定を有しており、ユーザ権限の切り替えにより、表示される画面イメージがユーザ権限毎に切り替わることを再現するができる。

【0188】

次に、図２８を参照して、サーバでの処理時間の再現を表示する処理の流れを説明する。

【0189】

図２８は、仮想のサーバでの処理時間を変更した際の処理の流れを示すフローチャートである。なお、以下のフローチャートの各ステップは、アプリケーションクライアント１０４のＣＰＵ２０１が実行する。

【0190】

図２８のフローチャートは、アプリケーションクライアント１０４のＷｅｂブラウザ４５０から開発者のアクセスがあり、プロトタイプ表示画面（親画面）４４０のＳＰＡがＷｅｂブラウザ４５０にダウンロードされた際に開始されるフローチャートである。

【0191】

まず、ステップＳ２８０１において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から、プロトタイプ表示画面（図８のステップＳ８０７～Ｓ８１０で生成したアプリケーション）が動作するＳＰＡをダウンロードする。

【0192】

また、ステップＳ２８０１において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から取得したプログラムからプロトタイプ表示画面２５０１を起動する。すなわち、ステップＳ２８０１は、図３９の３９０１のような画面イメージのプロトタイプアプリケーションを表示するためのプログラムをダウンロードし、起動する処理を行うステップである。サーバの処理時間の再現を表示する画面例として、図３９～図４１、図３２を参照して説明する。

【0193】

図３９は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0194】

図３９は、プロトタイプ表示画面起動後の画面イメージであり、ステップＳ２８０３に遷移した際に表示される画面例である。ステップＳ２８０１では、この画面のプロトタイプ表示画面の親画面（２５０１）を起動する。

【0195】

次のステップＳ２８０２において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプアプリケーション（ｉＦｒａｍｅ）２５０２を起動する。図４０を参照して説明する。

【0196】

図４０は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0197】

ステップＳ２８０２では、ステップＳ２８０１で起動された親画面の上に、プロトタイプアプリケーション画面４００１が起動されるが、次のステップＳ２８０３以降で表示されるプロトタイプ操作パネル３９０２が上層に表示（図２５の２５０２と２５０３のような関係）されるため、起動当初は、図３９の３９０１のような表示画面となる。

【0198】

次のステップＳ２８０３において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプ操作パネル（ｉＦｒａｍｅ）２５０３を起動する。起動している画面イメージは図３９の３９０２のイメージである。このプロトタイプ操作パネルに表示されている設定を変更することにより、プロトタイプ（試作）アプリケーションの表示設定や画面の遷移設定を制御することができる。図３９のプロトタイプ操作パネル３９０２には、処理時間設定欄３９３１のように、サーバでの処理時間を考慮してプロトタイプアプリケーション２５０２の画面遷移の表示を再現する設定欄を有する。

【0199】

プロトタイプ操作パネル３９０２が表示されている状態で、処理時間設定欄３９３１が開発者から変更された場合に、次のステップＳ２８０４の処理へと遷移する。

【0200】

処理時間設定欄３９３１は、起動時当初は、図３１の処理時間設定欄３１３１のように「０．２秒」であるが、処理時間設定欄３９３１では「２秒」に変更されている例である。

【0201】

次のステップＳ２８０４へと処理を遷移すると、アプリケーションクライアント１０４は、プロトタイプ操作パネル３９０２において変更されたサーバの処理時間設定欄３９３１の値をブラウザのローカルストレージに記憶する。図３９の３９０１を表示後に処理時間設定欄が変更された場合のステップＳ２８０４の処理で実行するソースコードの例を図４４に示す。

【0202】

次のステップＳ２８０５において、アプリケーションクライアント１０４は、プロトタイプアプリケーション２５０２をステップＳ２８０４で記憶した処理時間分待つ設定に変えて、次の画面に遷移するように再現するプロトタイプアプリケーションに変更する。図４６は、ステップＳ２８０５で実行されるソースコードの一部である。変更した後のプロトタイプアプリケーションの動きを図４１を参照して説明する。

【0203】

図４１は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0204】

たとえば、図３９のプロトタイプ表示画面３９０１のように、プロトタイプ操作パネル３９０２において、処理時間設定欄３９３１が「２秒」と設定されている場合、たとえば３９０３のプロトタイプアプリケーション画面への遷移ボタンを押下すると、図４０の４００１のような画面を表示する。次にユーザが動作を再現するため、検索ボタン４００２を押下すると、図４１の画面イメージのように中央にさもサーバで処理中であるかのような表示画面４１０２を表示する。この処理中であるかを表示している時間が処理時間設定欄３９３１で設定された時間である。設定時間だけ表示画面４１０２を表示した後、次の画面遷移である図３２などを表示する。

【0205】

以上の処理により、画面遷移時の待ち時間を再現するプロトタイプのアプリケーションを作成することができる効果を有する。すなわち、本番環境のプアプリケーション（プロダクトアプリケーション）を生成時にサーバ側で生じる処理時間を再現することができる。たとえば、ビジネスユーザや営業担当者が一般ユーザにプロトタイプアプリケーションをデモンストレーションする際に、実際に処理時間がかかるであろうサーバとの処理の時間を再現し、サーバとの処理時間にはどういう画面が表示されるのかを再現することができる。このプロトタイプ表示画面アプリケーションはＳＰＡで構成されているため、実際のサーバとの通信は必要ない。そのため、プロトタイプアプリケーションを実行（画面遷移）するだけであれば、処理時間はかからず、次々とプロトタイプアプリケーションは画面遷移する。本番環境のアプリケーション（プロダクトアプリケーション）の動作でサーバでの処理時間が考慮されていないため、サーバでの処理時間が考慮されていないデモンストレーションのみを見て納得している一般ユーザは、開発納品物の性能に関する食い違いが感じる可能性がある。本願発明のデモンストレーションであれば、サーバの処理時間を自由に設定できるので、開発納品物の性能に関する齟齬などが発生するリスクも少なくなる。

【0206】

次に、図２９を参照して、サーバでのエラーや通信エラーなどの発生時の再現を表示する処理の流れを説明する。

【0207】

図２９は、仮想のサーバでエラーが生じた場合の処理の流れを示すフローチャートである。なお、以下のフローチャートの各ステップは、アプリケーションクライアント１０４のＣＰＵ２０１が実行する。

【0208】

図２９のフローチャートは、アプリケーションクライアント１０４のＷｅｂブラウザ４５０から開発者のアクセスがあり、プロトタイプ表示画面（親画面）４４０のＳＰＡがＷｅｂブラウザ４５０にダウンロードされた際に開始されるフローチャートである。

【0209】

まず、ステップＳ２９０１において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から、プロトタイプ表示画面（図８のステップＳ８０７～Ｓ８１０で生成したアプリケーション）が動作するＳＰＡをダウンロードする。

【0210】

また、ステップＳ２９０１において、アプリケーションクライアント１０４は、アプリケーションサーバ１０２（４３０）から取得したプログラムからプロトタイプ表示画面２５０１を起動する。すなわち、ステップＳ２９０１は、図４２の４２０１のような画面イメージのプロトタイプアプリケーションを表示するためのプログラムをダウンロードし、起動する処理を行うステップである。サーバでエラーが生じた場合の再現を表示する画面例として、図４０、図４２、図４３を参照して説明する。

【0211】

図４２は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0212】

図４２は、プロトタイプ表示画面起動後の画面イメージであり、ステップＳ２９０３に遷移した際に表示される画面例である。ステップＳ２９０１では、この画面のプロトタイプ表示画面の親画面（２５０１）を起動する。

【0213】

次のステップＳ２９０２において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプアプリケーション（ｉＦｒａｍｅ）２５０２を起動する。起動されるプロトタイプアプリケーション画面の例が図４０である。

【0214】

ステップＳ２９０２では、ステップＳ２９０１で起動された親画面の上に、プロトタイプアプリケーション画面４００１が起動されるが、次のステップＳ２９０３以降で表示されるプロトタイプ操作パネル４２０２が上層に表示（図２５の２５０２と２５０３のような関係）されるため、起動当初は、図４２の４２０１のような表示画面となる。

【0215】

次のステップＳ２９０３において、アプリケーションクライアント１０４は、プロトタイプ表示画面２５０１のｉＦｒａｍｅ部のプロトタイプ操作パネル（ｉＦｒａｍｅ）２５０３を起動する。起動している画面イメージは図４２の４２０２のイメージである。このプロトタイプ操作パネルに表示されている設定を変更することにより、プロトタイプ（試作）アプリケーションの表示設定や画面の遷移設定を制御することができる。図４２のプロトタイプ操作パネル３９０２には、サーバとの通信時に仮想のエラーを生じさせるかのエラー発生トグルボタン４２４１を有しており、サーバにおけるエラー発生時を考慮してプロトタイプアプリケーション２５０２の画面遷移の表示を再現する設定欄を有する。

【0216】

プロトタイプ操作パネル４２０２が表示されている状態で、エラー発生トグルボタン４２４１が開発者により「オン」にされた場合に、次のステップＳ２９０４の処理へと遷移する。

【0217】

エラー発生トグルボタン４２４１は、起動時当初は、図３１のエラー発生トグルボタン３１４１のように「オフ」であるが、エラー発生トグルボタン４２４１では「オン」に変更されている例である。

【0218】

次のステップＳ２９０４へと処理を遷移すると、アプリケーションクライアント１０４は、プロトタイプ操作パネル４２０２において変更されたサーバのエラー発生トグルボタン４２４１の「オン」値をエラー設定状態として、ブラウザのローカルストレージに記憶する。図４２の４２０１を表示後にエラー設定状態が変更された場合のステップＳ２９０４の処理で実行するソースコードの例を図４４に示す。

【0219】

次のステップＳ２９０５以降は、ユーザによって図４２のプロトタイプアプリケーションへの遷移ボタン４２０３などが押下された後の処理である。遷移ボタン４２０３が押下された後の画面イメージは図４０の４００１である。

【0220】

ステップＳ２９０５において、アプリケーションクライアント１０４は、プロトタイプアプリケーション２５０２をステップＳ２９０４で記憶したエラー設定状態を取得する。図４６は、ステップＳ２９０５以降で実行されるソースコードの一部である。

【0221】

次に、ユーザからたとえば、図４０からの画面遷移指示を受け付ける。図４０の場合、画面遷移指示である検索ボタン４００２などが押下される。画面遷移指示を受け付けると、次のステップＳ２８０６へと処理を遷移する。

【0222】

次のステップＳ２９０６において、アプリケーションクライアント１０４は、取得したエラー設定状態がオン（有効）かオフ（無効）かによって処理を分ける。エラー設定状態がオンであった場合は、ステップＳ２９０７へと処理を遷移し、エラー設定状態がオフであった場合は、ステップＳ２９０８へと処理を遷移する。ステップＳ２９０８へと処理を遷移すると、エラー設定状態はオフであったため、アプリケーションクライアント１０４は、プロトタイプアプリケーションの通常の遷移画面である図３２に遷移する。

【0223】

一方、ステップＳ２９０７へと処理を遷移すると、アプリケーションクライアント１０４は、プロトタイプアプリケーションでエラーが生じたと仮定して処理をすすめる。具体的には、たとえば図４３の画面のようなイメージの画面を表示させても良い。

【0224】

図４３は、本実施形態におけるプロトタイプ表示画面の一例を説明する模式図である。

【0225】

図４３では、具体的に、検索ボタン４００２による処理でエラーが発生した場合のエラー表示として４３０２のようなエラー表示項目が表示されている。

【0226】

以上の処理により、画面遷移に失敗した場合のエラー画面を再現することができるプロトタイプのアプリケーションを作成することができる。すなわち、本番環境のプアプリケーション（プロダクトアプリケーション）を生成時にサーバ側や通信時に生じるエラーを再現することができる。このプロトタイプ表示画面アプリケーションはＳＰＡで構成されているため、実際のサーバとの通信は必要ない。そのため、プロトタイプアプリケーションを実行（画面遷移）するだけであれば、サーバでのエラーや通信エラーは発生しない。エラーが生じた際の、表示画面を再現したい開発者や一般ユーザの需要をＳＰＡで実施することができる。また、エラー表示をより現実的に再現させる方法として、図２８でサーバでの仮想的な処理時間の再現と組み合わせても良い。

【0227】

以上のようなプロトタイプ表示画面は、各種端末のブラウザ内で起動可能なＳＰＡで構成されているため、図３０の２５０１のように生成されたプロトタイプ表示画面アプリケーションをパーソナルコンピュータ（ＰＣ）やタブレットにダウンロードさせれば、それぞれの端末でプロトタイプアプリケーション２５０２を再現することができる。たとえば、タブレット３００１にプロトタイプ表示画面アプリケーションをダウンロードさせると、タブレット上でプロトタイプ操作パネル２５０３やプロトタイプアプリケーション２５０２を操作することができる。営業担当者がパーソナルコンピュータ（ＰＣ）を持っていかなくても、タブレットでプロトタイプ表示画面アプリケーションを動作させることができる。タブレット上でもサーバでの処理時間を再現するプロトタイプアプリケーションを動作させたり、タブレットでの表示（３００２）で、スマートフォンサイズの表示（３００３）を再現させることができるため、顧客へのデモンストレーション時も１台の端末を持参すればあらゆる端末で表示させる画面や、画面遷移のパターンを再現することができる。

【0228】

以上のように、前述した実施形態の機能を実現するプログラムを記録した記録媒体を、システムあるいは装置に供給し、そのシステムあるいは装置のコンピュータ（またはＣＰＵやＭＰＵ）が記録媒体に格納されたプログラムを読み出し、実行することによっても本発明の目的が達成されることは言うまでもない。

【0229】

この場合、記録媒体から読み出されたプログラム自体が本発明の新規な機能を実現することになり、そのプログラムを記録した記録媒体は本発明を構成することになる。

【0230】

プログラムを供給するための記録媒体としては、例えば、フレキシブルディスク、ハードディスク、光ディスク、光磁気ディスク、ＣＤ－ＲＯＭ、ＣＤ－Ｒ、ＤＶＤ－ＲＯＭ、磁気テープ、不揮発性のメモリカード、ＲＯＭ、ＥＥＰＲＯＭ、シリコンディスク等を用いることが出来る。

【0231】

また、コンピュータが読み出したプログラムを実行することにより、前述した実施形態の機能が実現されるだけでなく、そのプログラムの指示に基づき、コンピュータ上で稼働しているＯＳ（オペレーティングシステム）等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。

【0232】

さらに、記録媒体から読み出されたプログラムが、コンピュータに挿入された機能拡張ボードやコンピュータに接続された機能拡張ユニットに備わるメモリに書き込まれた後、そのプログラムコードの指示に基づき、その機能拡張ボードや機能拡張ユニットに備わるＣＰＵ等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。

【0233】

また、本発明は、複数の機器から構成されるシステムに適用しても、ひとつの機器から成る装置に適用しても良い。また、本発明は、システムあるいは装置にプログラムを供給することによって達成される場合にも適応できることは言うまでもない。この場合、本発明を達成するためのプログラムを格納した記録媒体を該システムあるいは装置に読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。

【0234】

上記プログラムの形態は、オブジェクトコード、インタプリタにより実行されるプログラムコード、ＯＳ（オペレーティングシステム）に供給されるスクリプトデータ等の形態から成ってもよい。

【0235】

さらに、本発明を達成するためのプログラムをネットワーク上のサーバ、データベース等から通信プログラムによりダウンロードして読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。なお、上述した各実施形態およびその変形例を組み合わせた構成も全て本発明に含まれるものである。

【符号の説明】

【0236】

１０１ プログラム開発装置
１０２ アプリケーションサーバ
１０３ データベースサーバ
１０４ アプリケーションクライアント
１０５ ネットワーク

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】

【図11】

【図12】

【図13】

【図14】

【図15】

【図16】

【図17】

【図18】

【図19】

【図20】

【図21】

【図22】

【図23】

【図24】

【図25】

【図26】

【図27】

【図28】

【図29】

【図30】

【図31】

【図32】

【図33】

【図34】

【図35】

【図36】

【図37】

【図38】

【図39】

【図40】

【図41】

【図42】

【図43】

【図44】

【図45】

【図46】

【図47】