以下、図面を参照して本発明の実施形態を詳細に説明する。
<第一実施形態>
図1は、本実施形態のプログラム開発装置(開発者がWebアプリケーションソフトウェア生成のために操作する情報処理装置)、実行サーバ、データベースサーバ、クライアント装置の構成の一例を示すシステム(情報処理システム)構成図である。
プログラム開発装置101は、開発者の操作に従って画面レイアウト及びデータベース検索指示などを定義する。プログラム開発装置101は、プログラムを含むアプリケーションソフトウェアの生成を行う。
なお、この実施形態においては、プログラム開発装置101で生成するアプリケーションソフトウェアはWeb上のアプリケーションソフトウェアとしたが、これに限定するものではなく、携帯電話・スマートフォン・タブレットなどの情報処理装置で動作するアプリケーションソフトウェアや組込みソフトウェアなど、Web技術による通信を利用したアプリケーションソフトウェアでなくてもよい。
実行サーバ102は、プログラム開発装置101で開発されたアプリケーションソフトウェア(アプリケーションソフトウェアに含まれるアプリケーションプログラム)を実行する。また、データベースサーバ103と接続して動作することが可能である。
データベースサーバ103は、開発されたアプリケーションソフトウェアが使用するデータベースであり、また本実施形態では開発時にも動作確認などのために利用してもよい。例えば、開発者が利用するためにデータベースサーバ103は、プログラム開発装置101や、実行サーバ102と同一の装置で構成されていてもよいし、LANなどのネットワーク105内に配置されてもよい。
クライアント装置104(情報処理装置)は、実行サーバ102と協調してプログラム開発装置101で開発したアプリケーションプログラムを動作させる、エンドユーザの入力端末である。この、クライアント装置104は、携帯電話端末などの情報処理装置であってもよいこととする。
なお、プログラム開発装置101、実行サーバ102、データベースサーバ103、および、クライアント装置104の何れかを、クラウドなどのインターネット上に配置してもよいし、いくつかの情報処理装置を一つの筐体としてもよい。
図2は、本実施形態のプログラム開発装置101、実行サーバ102、データベースサーバ103、クライアント装置104として適用可能な各ハードウェア構成の一例を示すブロック図である。
図2において、CPU201は、少なくとも1つのプロセッサであり、システムバス204に接続される各デバイスを統括的に制御する。
また、ROM203あるいは外部メモリ211には、CPU201の制御プログラムであるオペレーティングシステム(OS)や、各サーバ、クライアント、装置など情報処理装置の後述する各種機能を実現するためのプログラムが記憶されている。ROM203あるいは外部メモリ211は、少なくとも1つのメモリである。
RAM202は、CPU201の主メモリ、ワークエリア、一時待避領域等として機能する。
入力コントローラ205は、入力部209からの入力を制御する。この入力部209としては、情報処理装置では、キーボード、マウス等のポインティングデバイス、タッチパネルが挙げられる。
なお、入力部209がタッチパネルの場合、ユーザがタッチパネルに表示されたアイコンやカーソルやボタンに合わせて押下(指等でタッチ)することにより、各種の指示を行うことができることとする。
また、タッチパネルは、マルチタッチスクリーン等の、複数の指でタッチされた位置を検出することが可能なタッチパネルであってもよい。
出力コントローラ206は、出力部210の表示を制御する。この出力部210としては、例えば、CRTや液晶ディスプレイ等が挙げられる。尚、本体と一体になったノート型パソコンのディスプレイも含まれるものとする。また、プロジェクタであってもよいこととする。
外部メモリコントローラ207は、ブートプログラム、各種のアプリケーションソフトウェア、フォントデータ、ユーザファイル、編集ファイル、プリンタドライバ等を記憶する外部メモリ211へのアクセスを制御する。外部メモリ211には、各サーバ、クライアント装置等の各種機能を実現するための各種テーブル、パラメータが記憶されている。この外部メモリ211としては、ハードディスク(HD)やフレキシブルディスク(FD)、PCMCIAカードスロットにアダプタを介して接続されるコンパクトフラッシュ(登録商標)、スマートメディア等が挙げられる。
なお、CPU201は、例えばRAM202内の表示情報用領域へアウトラインフォント展開(ラスタライズ)処理を実行することにより、出力部210上での表示を可能としている。また、CPU201は、出力部210上の不図示のマウスカーソル等での開発者指示を可能とする。
通信I/Fコントローラ208は、ネットワークを介して外部機器との通信制御処理を実行する。例えば、TCP/IPを用いた通信等が可能である。
本実施形態を実現するためのプログラム212は外部メモリ211に記録されており、必要に応じてRAM202にロードされることによりCPU201によって実行されるものである。
図3は、本実施形態のソフトウェア構成を示すブロック図の一例である。
プログラム開発装置101は、以下の機能部を備える。
定義部301は、アプリケーションソフトウェアに表示される画面やアイテム(入出力項目)の配置などの画面定義情報と、アプリケーションソフトウェアの画面が次の画面に遷移する手順を定義する画面遷移定義情報と、を開発者から受け付ける機能部であり、具体的には図6のフローチャートや図10~図14の説明図が該当する。
動作制御ファイル生成部302は、定義部301で定義された画面と、画面を遷移する手順を仮想的に再現(プレビュー)するためのプロトタイプアプリケーション(動作制御ファイル)を生成する機能部であり、具体的には図8のフローチャートの処理が該当する。
データ取得部304は、ユーザからプロトタイプアプリケーション上のアイテム(入出力項目)に表示するデータを取得する機能部であり、具体的には図7のステップS706や図15、図18の説明図が該当する。
操作パネル生成部305は、プロトタイプアプリケーションの画面環境や遷移方法などを制御するプロトタイプ操作パネルを生成する機能部であり、具体的には図8のS810の処理を行う機能部である。生成されるプロトタイプ操作パネルは図31のプロトタイプ操作パネル3102などである。
図4は、プログラム開発装置101、実行サーバ102及びクライアント装置104の構成図である。
プログラム開発装置101は、リポジトリ定義部400、プロトタイプアプリケーション生成部410、リポジトリ定義エディタ部420を備える。なお、本実施形態のプロトタイプアプリケーションとは、本番環境のようにデータベースからデータを検索したり、算出したデータ結果から作図をしたりするアプリケーションソフトウェアとは異なり、予め設定された値や予め作図された図などを表示し、画面遷移や表示変更などを実際のアプリケーションソフトウェアのように模倣するモックアップとしてのアプリケーションソフトウェアである。
実行サーバ102は、図4では実行サーバ部430に該当し、クライアント装置104は、クライアント装置部435を備える。
プログラム開発装置101は、プロトタイプアプリケーション生成部410によりプロトタイプ表示画面440(プロトタイプアプリケーションによる表示画面)を表示するためのソフトウェアのソースコード(プロトタイプアプリケーション)を生成する。本実施形態での開発者とは、アプリケーションソフトウェアの受託開発者に限らず、ビジネスユーザや営業担当者などの広くプログラム開発装置101を使用する者を指す。
リポジトリ定義部400には、アプリケーション定義401、画面定義402、画面部品定義403、画面遷移定義404、画面部品定義403に紐づくアクション405、アクション405に紐づくプロトタイプデータ406が記憶されている。プロトタイプデータとは、プロトタイプアプリケーションを実行する際にアプリケーションソフトウェア画面に表示されるデータを指し、本番環境のようにデータベースからデータを検索したり、算出したデータ結果から作図をしたりするものではなく、開発者により予め設定されている値や図を指す。これら401~406の定義は、アプリケーションソフトウェア開発ツールを介して、開発者によって入力設定または配置される。
アプリケーション定義401は、開発者が開発するアプリケーションソフトウェア全体の設定を保持する。
画面定義402は、アプリケーションソフトウェアに含まれる各画面に配置される各種画面部品定義403及び画面遷移定義404の情報を保持する。画面定義402は、各種部品に設定されるアクション405及びアクション405に紐づくプロトタイプデータ406の情報を含む。
プロトタイプアプリケーション生成部410は、開発者により設定されたリポジトリ定義部400を解析し、プロトタイプ表示画面440を表示するためのソフトウェア(プロトタイプアプリケーション)のソースコードを生成する。また、プロトタイプアプリケーション生成後にプロトタイプ表示画面440表示するためのソフトウェア(プロトタイプアプリケーション)のソースコードを実行サーバ部430にデプロイする。
リポジトリ定義解析部411は、開発者により設定されたリポジトリ定義部400を解析する。
プロトタイプコード生成部412は、リポジトリ定義解析部411の解析結果に応じたプロトタイプアプリケーションのソースコードを生成する。
ソースコードコンパイル部413は、プロトタイプコード生成部412の生成したソースコードをコンパイルし、コンパイル済Java(登録商標)コード及びHTML/JSP/JavaScript(登録商標)を含むプロトタイプ表示画面440を表示するための指示情報を実行サーバ部430にデプロイする。
リポジトリ定義エディタ部420は、ユーザがリポジトリ定義部400を設定するための手順の一例である。リポジトリ定義エディタ部420は、画面定義エディタ部421、画面遷移定義エディタ部422、レスポンシブ部品制御部423、アクション選択部424、プロトタイプデータ入力部425を含む。
画面定義エディタ部421は、開発者が所望の画面レイアウトを直観的に作成するためのグラフィカルエディタである。
画面遷移定義エディタ部422は、開発者が配置した各画面部品に対するプロパティを設定するエディタである。
レスポンシブ部品制御部423は、開発者がクライアントの画面幅毎に画面部品の表示形式(画面の配置や部品幅)を制御させる機能部である。
レスポンシブ部品制御部423の例を図23、図24を参照して説明する。
図23は、本実施形態のプロトタイプアプリケーション画面442の画面サイズの制御を説明する模式図である。
たとえば、図23の表示例2300のように、アプリケーションソフトウェアの生成画面にパーソナルコンピュータ(PC)画面ボタン2301、タブレット画面ボタン2302,スマートフォン画面ボタン2303のように複数の種類のクライアントの表示画面を切り替える切替ボタンを表示する。
表示例2300の切替ボタンを押下した際に、クライアント装置104に表示される画面サイズを記憶したデータが情報2310である。たとえば、PC画面ボタン2301が押下されると、表示される画面サイズは1920×1080(2311)であり、タブレット画面ボタン2302が押下されると、表示される画面サイズは1023×1366(2312)、スマートフォン画面ボタン2303が押下されると、表示される画面サイズは414×896となる。それぞれのボタンを押下したことに応じて表示される画面の表示例を図24を参照して説明する。
図24は、本実施形態のプロトタイプアプリケーション画面442の画面表示の一例を示す表示例である。
たとえば図24の画面領域2402は、PC画面の表示例、画面領域2403はタブレット画面の表示例、画面領域2404はスマートフォン画面の表示例である。画面領域2402は本番用のアプリケーションプログラムがPCで実行された場合の表示画面をシミュレーションしたものであり、クライアント装置104のディスプレイの全領域の少なくとも一部であって、情報2310でPCの画面サイズとして定義された横1920ピクセル×縦1080ピクセルの領域である。画面領域2403は本番用のアプリケーションプログラムがタブレットで実行された場合の表示画面をシミュレーションしたものであり、クライアント装置104のディスプレイの全領域の少なくとも一部であって、情報2310でPCの画面サイズとして定義された横1023ピクセル×縦1366ピクセル×1080ピクセルの領域である。画面領域2404は本番用のアプリケーションプログラムがスマートフォンで実行された場合の表示画面をシミュレーションしたものであり、クライアント装置104のディスプレイの全領域の少なくとも一部であって、情報2310でスマートフォンの画面サイズとして定義された横414×縦896ピクセルの領域である。それぞれの部品サイズ、たとえば、PC画面を表す画面領域2402の部品2422(表示部品)は、タブレット画面を表す画面領域2403では部品2423であり、スマートフォン画面を表す画面領域2404では部品2424である。レスポンシブ部品制御部423は、同じ部品である部品2422、2423、2424を、図24のようにそれぞれの画面領域(2402、2403、2404)の全体の横幅に対する所定の割合で表示されるように制御する。すなわち、PC画面では部品2422は画面領域2402の全体の2/12、タブレット画面では部品2423は画面領域2403の全体の3/12、スマートフォン画面画面では部品2424は画面領域2404の全体の6/12の割合で2402の部品は表示されるように制御されている。図4の構成図の説明に戻る。
アクション選択部424は、開発者がプロトタイプデータ406を設定する対象のアクションを選択するためのアクション(アクションイベント)を選択する機能部である。
プロトタイプデータ入力部425は、特定のアクション405に紐づくプロトタイプデータ406を直観的に設定するためのグラフィカルエディタである。
実行サーバ部430(102)は、プロトタイプアプリケーション生成部410が生成したプロトタイプ表示画面440を表示するための指示情報(プロトタイプアプリケーション)を記憶し、クライアント装置104に送信する機能部である。
プロトタイプ表示画面440は、プロトタイプアプリケーション生成部410が生成したプロトタイプアプリケーションによる表示画面である。プロトタイプ表示画面440は、ビジネスユーザ(顧客の意思決定者)や顧客に提案を行う営業担当者などのユーザが、アプリケーションソフトウェア開発時に、プログラム開発装置101が生成するアプリケーションソフトウェアの表示内容や動作等を再現して表示させるためのプロトタイプアプリケーションによる表示画面である。プロトタイプ表示画面440は、プロトタイプ操作パネル441、プロトタイプアプリケーション画面442を含む。
プロトタイプ操作パネル441は、プロトタイプ表示画面440のうちユーザインタフェースの機能を持つモジュールであり、クライアント装置104の画面サイズでの再現やユーザ権限毎の表示イメージの再現、サーバでの処理待ち時間の再現、サーバでのエラー時の表示画面再現などの設定を開発者から受け付けるパネル(画面)である。
プロトタイプアプリケーション画面442は、プログラム開発装置101の生成するアプリケーションソフトウェアの表示内容や動作等を再現して表示する領域である。
クライアント装置部435は、実行サーバ部430からプロトタイプ表示画面440を表示するためのデータをダウンロードする。クライアント装置部435は、Webブラウザ450を用いて、SPA(シングルページアプリケーション)で構成されるプロトタイプ表示画面440を表示する。
また、図示はしないが、プロトタイプアプリケーションではなく、実際に動作するアプリケーションコード生成部も有している。実際に動作するアプリケーションコードとは、本番用のアプリケーションソフトウェアのコードである。アプリケーションコード生成部は、リポジトリ定義解析部411により、リポジトリ定義部400から、アプリケーション定義401、画面定義402、別に定義されたデータベース定義、データモデル定義、ビジネスプロセス定義、を読み込み解析する。Webアプリケーションコード生成部は、外部メモリ211に記憶されているコード生成ルールと、リポジトリ定義解析部411によって解析された内容とを用いて、ソースコードコンパイル部413を介し、コンパイル済Java(登録商標)コード及びHTML/JSP/JavaScript(登録商標)を含むWebアプリケーションモジュールを生成する。
図5は、Webアプリケーションソフトウェアのプロトタイプアプリケーション生成のフローチャートの一例を示す図である。なお、以下のフローチャートの各ステップは、プログラム開発装置101のCPU201が実行する。
図5のフローチャートは、開発者がプロトタイプアプリケーションを生成しようとする際にプログラム開発装置101で開始される処理の流れである。
まず、ステップS501において、プログラム開発装置101は、画面定義入力を受付ける。ステップS501の処理の詳細は図6を参照して後述する。
次に、ステップS502において、プログラム開発装置101は、プロトタイプデータ443の入力要求があったかを判定する。具体的には、アクション選択部424の一例である図12の表示要素1201(アイコン)及び表示要素1202(選択項目)、もしくは表示要素1203(アイコン)及び図13の表示要素1301(選択項目)が押下されたかを判定する。
プロトタイプアプリケーションに含まれるアクション制御モジュールは、開発者によって設定された複数のプロトタイプデータのうち、プロトタイプ表示画面440の表示の実行時のどのタイミングでどのデータを表示するかを制御する。また、アクション制御モジュールは、画面に配置された部品が持つ各アクションに紐づいた動作を制御する。すなわち、プロトタイプデータはアクション(アクションイベント)に紐づく。
プログラム開発装置101は、開発者がこれから入力するプロトタイプデータが、どのアクションに紐づくものかを指定させるために、該押下を受付ける。
ステップS502において、プロトタイプデータ入力要求があったと判定した場合には、ステップS503に遷移する。
一方、ステップS502において、プロトタイプデータ入力要求がなかった場合には、ステップS504に遷移する。
なお、表示要素1201が押下された場合の、アクション選択部の一例を表示要素1202に示す。また、表示要素1203が押下された場合の、アクション選択部の一例を表示要素1301に示す。表示要素1301は、表示中の画面定義に含まれるアクション一覧を表示しているが、アプリケーション定義に含まれるアクション一覧を表示してもよい。
ステップS503に遷移すると、プログラム開発装置101は、開発者からのプロトタイプデータの入力を受付ける。ステップS503の処理の詳細は図7を参照して後述する。その後、ステップS504へと処理を遷移する。
ステップS504において、プログラム開発装置101は、画面定義保存要求があったかを判定する。画面定義保存要求があったと判定した場合には、ステップS505に遷移し、画面定義保存要求がなかった場合には、ステップS506へと遷移する。
ステップS505に遷移すると、プログラム開発装置101は、画面定義をリポジトリ定義部400に保存する。その後、ステップS506へと処理を遷移する。
ステップS506に遷移すると、プログラム開発装置101は、プロトタイプ生成要求があったかを判定する。プロトタイプ生成要求があったと判定した場合には、ステップS507に遷移する。一方、プロトタイプ生成要求がなかった場合には、ステップS501に遷移する。
ステップS507へと遷移すると、プログラム開発装置101は、プロトタイプアプリケーションのソースコードを生成する。ステップS507の処理の詳細は図7を参照して後述する。
次に、ステップS508において、プログラム開発装置101は、ステップS507において生成したソースコードのコンパイルを行う。
ステップS509において、プログラム開発装置101は、ステップS508においてコンパイルしたプロトタイプアプリケーションを実行サーバ102(430)にデプロイする。
以降は、プログラム開発装置101と、実行サーバ102、クライアント装置104が同じ情報処理装置で実施されている例で説明するが、それぞれが別の情報処理装置の場合は、それぞれの情報処理装置が、各アプリケーションソフトウェア(プロトタイプアプリケーションやWebブラウザなど)を起動して処理を実行する。
ステップS510において、プログラム開発装置101は、実行サーバ102にデプロイされたプロトタイプアプリケーションを起動する。
ステップS511において、プログラム開発装置101は、Webブラウザを起動し、プロトタイプアプリケーションのURLアクセスを開始する。なお。ステップS510やS511の処理は、プログラム開発装置101が、実行サーバ102とクライアント装置104とを併用している場合の例であり、それぞれ別の筐体の場合は、ステップS510の処理は実行サーバ102が実行し、ステップS511の処理はクライアント装置104が実行する処理となる。
以上で、図5の説明を終了する。以降の処理は図9を参照して後述する。なお、図9以降の説明では、プロトタイプアプリケーションは、プログラム開発装置101ではなく、Webブラウザを起動したクライアント装置104で実行されるものとして説明するが、クライアント装置104と同様にWebブラウザを起動したプログラム開発装置101で実行されても良い。
次に、ステップS501の処理の詳細を図6を参照して説明する。
図6は、Webアプリケーションソフトウェアの画面定義の入力を受け付けるフローチャートの一例を示す図である。なお、以下のフローチャートの各ステップは、プログラム開発装置101のCPU201が実行する。
図6のフローチャートは、図5のフローチャートにおいて、ステップS501へと処理が遷移した際に開始される処理の流れである。
まず、ステップS601において、プログラム開発装置101は、開発者による画面部品の配置を受付ける。具体的には、図10の領域1001(レスポンシブ部品制御部423の一例)から、領域1002(画面定義エディタ部421の一例)へのドラッグ&ドロップ1003による部品の配置を受付ける。図10は、レスポンシブ部品制御部からボタン部品を画面定義エディタ部にドラッグ&ドロップした例を示している。画面部品の配置方法は、レスポンシブ部品制御部423から画面定義エディタ部421へのドラッグ&ドロップに限らず、既に配置した部品を移動する方法や、既に配置した部品をコピー&ペーストにより複製する方法であってもよい。また、一度配置した部品を削除できてもよい。
図10の場合は、配置例1004のように、2つのテキスト入力欄(ID入力欄と名前入力欄)と、IDと名前を登録する登録ボタンを設けた画面(生成されるアプリケーションソフトウェアにおける画面)が作成されている例である。
次に、ステップS602において、プログラム開発装置101は、アクションイベントを含む部品が配置されたかを判定する。アクションイベントを含む部品が配置されたと判定した場合には、ステップS603に遷移し、アクションイベントを含む部品が配置されていない場合には、ステップS604に遷移する。
ステップS603に遷移すると、プログラム開発装置101は、アクションイベントを含む部品に設定されたアクションを登録する。具体的には、部品のソースコードにonClickというアクションを持つ部品の場合にアクションを登録する。画面定義402の一例である図21の定義情報2100(ソースコード)には、本番環境に対応した“actions”の定義2102と、プロトタイプアプリケーションに対応した“examples”の定義2103を書き出す。なお、図21の例では、実施手段の一例としてデータ保持の形式をjsonファイルとしているが、データ保持の形式は他形式ファイルであってもデータベースであってもよい。その後、ステップS604へと遷移する。
次に、ステップS604において、プログラム開発装置101は、プロパティ入力要求のあったかを判定する。具体的には、選択された部品のプロパティ入力要求ボタンの一例である図11の表示要素1101(アイコン)が押下されたかを判定する。
プロパティ入力要求のあったと判定した場合、ステップS605に遷移し、プロパティ入力要求のなかった場合、画面定義入力受付処理を終了する。
ステップS605へと遷移すると、プログラム開発装置101は、開発者による画面部品に対するプロパティの入力を受付ける。具体的には、画面プロパティエディタの一例である図11の表示要素1102(ダイアログボックス)を表示し、該画面部品が持つプロパティへの設定の入力を受付ける。図11の例では、開発者による直観的な操作を実現するために画面プロパティエディタを該部品付近に表示しているが、画面内の特定の領域を画面プロパティエディタとして確保してもよい。また、画面プロパティエディタをモーダルダイアログで表示してもよい。
以上で、図6の説明を終了する。
次に、ステップS503の処理の詳細を図7を参照して説明する。
図7は、Webアプリケーションソフトウェアのプロトタイプアプリケーションを生成する際に画面に表示するプロトタイプデータの入力を受け付けるフローチャートの一例を示す図である。なお、以下のフローチャートの各ステップは、プログラム開発装置101のCPU201が実行する。
図7のフローチャートは、図5のフローチャートにおいて、ステップS503へと処理が遷移した際に開始される処理の流れである。
まず、ステップS701において、プログラム開発装置101は、図5のステップS502において開発者が指定したアクションアイテムの設定を読込む。具体的には、次の二つを実施する。まず、開発者が選択した画面部品の画面部品定義403の一例である図10の配置例1004を定義し、図21の定義2101を読込む。定義2101のデータは、図6のフローチャートのステップS605で、図11の1102から入力されたものとする。次に、開発者に選択された画面部品の本番環境に対応した“actions”の定義2102と、プロトタイプアプリケーションに対応した“examples”の定義2103を読込む。
次に、ステップS702において、プログラム開発装置101は、ステップS701で読込んだアクションアイテムの設定が画面遷移を伴うかを判定する。具体的には、画面部品定義403の一例である定義2101の画面遷移定義404の一例である”nextUi”プロパティ(1102内の次画面プロパティ)に値が設定されているかを判定する。本実施例では、プログラム開発装置101は、画面遷移定義404を画面部品定義403に保持しているが、アクション405に保持してもよい。
ステップS701で読込んだアクションアイテムの設定が画面遷移を伴うと判定した場合には、ステップS703に遷移し、ステップS701で読込んだアクションアイテムの設定が画面遷移を伴わない場合には、ステップS704に遷移する。
ステップS703へと遷移すると、プログラム開発装置101は、ステップS701で読込んだアクションアイテムの設定に伴う画面遷移の遷移先画面を表示する。具体的には、定義2101の”nextUi”に設定された画面である図13の画面1300を表示する。なお、図13の遷移先画面のプロトタイプデータ表示部品1302も、開発者の操作(ステップS601)により事前に設定されているものとする。なお、プロトタイプデータ表示部品1302のような画面は、現在表示されている画面定義エディタ部421を書き換える表示方法であっても、新たな画面定義エディタ部421を起動する表示方法であってもよい。
画面定義エディタ部421に表示される画面(遷移先画面)の初期表示アクションを読込み、これを開発者が指定したアクションとする。この処理後、ステップS704へと処理を遷移する。
ステップS704において、プログラム開発装置101は、S701で読込んだアクション、もしくはS703で読込んだアクションに既に設定されているプロトタイプデータ(たとえば、図22のプロトタイプデータ2201のようなデータが既に設定されている場合はそのデータ)を画面上に表示する。
次に、ステップS705において、プログラム開発装置101は、開発者による、プロトタイプデータ表示部品の選択を受け付ける。ここでプロトタイプデータ表示部品とは、プロトタイプアプリケーションを動作させる際に予めデータ(プロトタイプデータ)を表示させておく部品のことを示す。具体的には、画面定義エディタ部421に表示された図13の遷移先画面のプロトタイプデータ表示部品1302のような一覧表の中にプロトタイプデータを表示する例である。同じ図である図14のプロトタイプデータ表示部品1402において、たとえば「Name」欄で図示しないマウスを右クリックし、編集ボタン1403が押下されることで、プロトタイプデータ表示部品の選択を受け付けることができる。また、図17のプロトタイプデータ表示部品1701のように一覧全体を選択後、表入力ボタン1702が押下されると、プロトタイプデータ表示部品の選択として、プロトタイプデータ表示部品1701の一覧全体を選択することができる。
次のステップS706において、プログラム開発装置101は、開発者によるプロトタイプデータの入力を受付ける。具体的には、プロトタイプデータ入力部425の一例である図15のプロトタイプデータ入力ダイアログ1501を表示する。プロトタイプデータ入力ダイアログ1501は、図14のポップアップアイテム1401において、「Name」欄で編集ボタン1403が押下された際に表示するプロトタイプデータ入力ダイアログである。プロトタイプデータ入力ダイアログ1501の場合、開発者から「Name」欄に「谷川 則之」というプロトタイプデータが入力されている例である。開発者からの値の入力後、プロトタイプデータ入力ダイアログ1501内の「OK」ボタンの押下により、ステップS707の入力確定か否かの判断を行う。
また、ステップS706の別の例として、プロトタイプデータ入力部425の一例を図18を参照して説明する。
図18のプロトタイプデータ入力ダイアログ1801は、図17において表入力ボタン1702が押下されると表示されるダイアログである。プロトタイプデータ入力ダイアログ1801のテキスト入力欄には、プロトタイプデータ表示部品1701に表示する一覧表に表示されるデータ群の入力を受け付ける。プロトタイプデータ入力ダイアログ1801の場合は、1行目に「(空欄)」、「谷川 則之」、「(空欄)」、2行目に「1001」、「堀 亜衣」、「2019/10/10」、3行目に「1002」、山村 るり子」、「2019/09/18」というデータが入力されている。これらのデータ入力はファイル選択ボタン1802の押下により表示される図示しないファイル選択画面からCSVファイルや表計算ファイルが選択されることにより、そのファイルの内容を適応させても良い。
開発者からテキスト入力欄への値の入力、もしくはファイル選択後のデータ反映後、「OK」ボタン1803の押下により、ステップS707の入力確定か否かの判断を行う。
ステップS706では、言語によって表示するプロトタイプデータを切り替えるために、ロケールの指定を受付けてもよい。また、プロトタイプデータ入力受付方法として、モーダルダイアログを表示する方法を示しているが、該入力受付方法は、S705で開発者が選択した表示部品に対して直接入力を受付ける方法であってもよいし、外部ファイルによる一括入力であってもよい。
次のステップS707において、プログラム開発装置101は、開発者によるプロトタイプデータ入力が確定したかを判定する。具体的には、図15のプロトタイプデータ入力ダイアログ1501内の「OK」ボタンや図18の「OK」ボタン1803が押下されたかを判定する。なお、ステップS706の入力受付方法において、部品に対する直接入力を受付けた場合は、該部品からフォーカスが外れたかにより判定する。
プロトタイプデータ入力が確定したと判定された(「OK」ボタンが押下された)場合は、ステップS708に遷移し、プロトタイプデータ入力が確定していないと判定した場合は、ステップS706に遷移する。
ステップS708において、プログラム開発装置101は、開発者によって入力されたプロトタイプデータを画面定義402に書き出す。具体的には、画面定義402のアクション405に紐づくプロトタイプデータ406の一例であるプロトタイプデータ2201に書き出す。
なお、この方法では、実行するアクションによる遷移後画面で表示するデータの変更ができない。プロトタイプデータを遷移後画面の初期表示アクションに保持しているためであるが、遷移後画面で表示するプロトタイプデータを、実行するアクション側で保持することで、実行するアクションによる遷移後画面で表示するデータの変更を可能としてもよい。具体的には、プロトタイプデータ2201の“onLoad”以下のオブジェクトを定義2103の“onClick”以下に保持することにより、画面を遷移する元のボタン(たとえば、図10の画面1000に配置された「登録」ボタンに遷移後画面で表示するデータを持たせてもよい。
このように、プロトタイプデータを表示させた画面をアクションイベントごとに画面を遷移させてプロトタイプアプリケーション上で表示することにより、実際に動作するアプリケーションソフトウェア(たとえばデータベースから検索したり、取り出したデータから作図したりする)を作る前に、モックアップとしてどのような動作をするのかの概要を掴むことができる
以上で、図7の説明を終了する。
次に、ステップS507の処理の詳細を図8を参照して説明する。
図8は、Webアプリケーションソフトウェアのプロトタイプアプリケーションのソースコードを生成する処理の流れを説明するフローチャートの一例である。なお、以下のフローチャートの各ステップは、プログラム開発装置100のCPU201が実行する。
図8のフローチャートは、図5のフローチャートにおいて、ステップS507へと処理が遷移した際に開始される処理の流れである。
まず、ステップS801において、プログラム開発装置101は、リポジトリ定義部400から開発者が指定したアプリケーション定義401を読み込む。リポジトリ定義解析部411は、読み込んだ定義を解析したうえでROM203に記憶しておき、解析された定義は各生成部から適宜参照される。
ステップS802において、プログラム開発装置101は、リポジトリ定義部400からステップS801で読込んだアプリケーション定義401に含まれる画面定義402を読み込む。
ステップS802において、画面定義を読み込む際に、画面表示項目(アイテム)のそれぞれに定義されている表示権限の情報も取得する。図34の例を参照して説明する。図34において、ユーザの権限により表示項目(アイテム)を変える行を下線3402の部分と定義している場合、図8の表示権限のデータ820におけるユーザの権限名821と、それに対する入出力表示許可項目822とを紐付ける情報などを取得する。図8の表示権限のデータ820は、図34の画面に含まれる画面表示項目(アイテム)の1つである「出欠確認」に定義されている表示権限の情報である。図8の表示権限のデータ820の場合、ユーザ権限として「User(ユーザ)」、「Admin(管理者)」、「Guest(ゲスト)」の権限名と、それぞれの権限名に対応する入出力表示許可項目が定義されている。入出力許可項目としては、図34の画面表示項目「出欠確認」に含まれる要素項目群(備考、出欠確認(User)、出欠確認(Admin)、更新ボタン)の中から、権限に対応して表示すべき要素項目が定義されている。なお、この表示項目定義情報は、入出力表示許可(「出欠確認」の欄に含まれる要素項目群(備考、出欠確認(User)、出欠確認(Admin)、更新ボタン)のうち権限に対応して表示すべき要素項目)を定義したものでも良い。また、この表示項目定義情報は、入出力表示禁止項目(「出欠確認」の欄に含まれる要素項目群(備考、出欠確認(User)、出欠確認(Admin)、更新ボタン)のうち権限に対応して表示すべきでない要素項目)を定義していても良い。また、表示項目はまとめて表示権限を定義されていても良いし、表示権限のデータ820のように表示項目ごとに個別に定義されていても良い。
ステップS803において、プログラム開発装置101は、リポジトリ定義部400からステップS802で読込んだ画面定義402に含まれる画面部品定義403を読込む。
ステップS804において、プログラム開発装置101は、リポジトリ定義部400からステップS802で読込んだ画面定義402に含まれる画面遷移定義404を読込む。
ステップS805において、プログラム開発装置101は、ステップS802で取得した表示項目に紐付けられた権限(役割・ロール)を収集する。例えばユーザ権限データ830を取得する。
ステップS806において、プログラム開発装置101は、リポジトリ定義部400からステップS802で読込んだ画面定義402に含まれるプロトタイプデータ406を読込む。ここで読み込む画面定義402内のデータは、プロトタイプデータに対応した図21や図22の「examples」のデータであり、「actions」すなわち本番環境用のデータは使用しない。この2つのデータを持つことで、プロトタイプデータの画面定義と本番環境の画面定義を共通で作成可能になり、モックアップ用に作成したアプリケーションソフトウェア画面をそのままアプリケーションソフトウェアの画面として定義することができる。
ステップS807において、プログラム開発装置101は、ステップS801~ステップS806で読込んだ情報を元に、プロトタイプコード生成部412でプロトタイプアプリケーションのソースコードを生成する。生成するソースコードには、プロトタイプアプリケーションを起動時に表示するプロトタイプ操作パネル(図31のプロトタイプ操作パネル3102など)のソースコードも含む。
図31は、本実施形態におけるプロトタイプ表示画面(プロトタイプアプリケーションによる表示画面)の一例である。図31は、S807で生成されたソースコードに従ってプロトタイプアプリケーションを起動した場合の初期画面に表示されるプロトタイプ操作パネルの表示例である。プロトタイプ操作パネルは、プロトタイプアプリケーションによって表示される、本番環境のアプリケーションソフトウェアの画面遷移を模したプロトタイプアプリケーション画面442をどのように表示をするかを設定する操作パネルである。
図31を参照して、プロトタイプ操作パネルについて説明する。図31のプロトタイプ操作パネル3102は、プロトタイプ画面を表示する際、あるいはプロトタイプ)画面を遷移させて表示する際の、表示設定や遷移時の設定の指示をユーザ(例えば開発中のアブリケーションソフトウェアのプロトタイプによるデモンストレーションを顧客向けに行う開発者)から受け付けるパネル画面である。プロトタイプ操作パネル3102は、表示デバイス(PCやタブレット、スマートフォンなど)や表示デバイスの画面の向き、ユーザのアクセス権(Admin権限(管理者権限)やUser権限(一般ユーザ権限)など)、サーバでの処理時間の表示の有無、エラーが生じた場合の表示の有無などを設定することができる。プロトタイプ操作パネルにおいてユーザからの操作に応じて設定されるこれらの設定に応じて、プロトタイプアプリケーションでの表示が次のように変わる。すなわち、表示デバイスと表示デバイスの画面の向きの設定に応じて、画面のサイズと向きが変わる。ユーザのアクセス権の設定に応じて、プロトタイプアプリケーションで表示される表示内容が変わる。サーバでの処理時間の表示の有無の設定に応じて、サーバでの処理時間を仮想した表示が行われるか否かが変わる。エラーが生じた場合の表示の有無の設定に応じて、エラーが生じたと仮想した表示が行湧得るか否かが変わる。表示デバイスの設定は表示デバイス設定アイテム3111、ユーザ権限の設定は権限設定アイテム3121、処理待ち時間の設定は処理時間設定アイテム3131,エラー表示の設定はエラー設定アイテム3141でそれぞれ設定することができる。例えば、画面のサイズをPCに設定にするためのボタン3112を押下(クリック)する操作によって、表示デバイスの設定(画面サイズの設定)をPCに設定することができる。
プロトタイプ操作パネル3102を開いている場合のプロトタイプアプリケーション画面とプロトタイプ操作パネル3102との関係を図25と図31を参照して説明する。
図25は、プロトタイプアプリケーション画面とプロトタイプ操作パネルとの関係を説明する図である。
親画面としてベースとなるプロトタイプ表示画面2501がブラウザ上に表示される親画面であり、親画面の中にiFrameでプロトタイプアプリケーション画面2502を表示している。更にプロトタイプアプリケーション画面2502の上に重畳して、プロトタイプ操作パネル2503(図31のプロトタイプ操作パネル3102と同じもの)を表示し、プロトタイプアプリケーション画面2502の一部とプロトタイプ操作パネル2503が同時に確認できるようにプロトタイプ表示画面2501に表示している。
プロトタイプ操作パネル3102(2503)を非表示としてプロトタイプ表示画面2501の大部分をプロトタイプアプリケーション画面2502とすることができる。図31のようなプロトタイプ操作パネル3102においてユーザからの設定操作を受け付け、ユーザからたとえば縮小アイコン3103に対する操作によってプロトタイプ操作パネル3102(2503)を縮小する操作(非表示とする操作)を受け付けると、プロトタイプ操作パネル3102を非表示とした画面である図32のようなプロトタイプアプリケーション画面3201を表示する。この場合は、図25のプロトタイプ表示画面2521に対応し、図32のプロトタイプアプリケーション画面3201は図25のプロトタイプアプリケーション画面2502に対応する。プロトタイプアプリケーション画面3201(2522)から、プロトタイプ操作パネル3102(2503)を表示している画面に戻る場合は、プロトタイプ操作パネル表示ボタンとして機能するボタンアイコンであるボタン3202(2523)を押下して、プロトタイプ操作パネル3102が表示されている図31のプロトタイプアプリケーション画面3101に遷移する。すなわち、プロトタイプアプリケーション画面3201(図25のプロトタイプアプリケーション画面2502)に表示されたボタン3202(図25のアイコン2523)が操作されると、図31の表示状態(図25のプロトタイプ表示画面2501の表示状態)に戻り、プロトタイプ操作パネル3102(図25のプロトタイプ操作パネル2503)が再表示される。図8のフローチャートの説明に戻る。
ステップS807において生成されるソースコードは、プロトタイプ操作パネルが操作され、操作が記憶されたブラウザの記憶領域(Web StorageやCookieの情報)が変更されると開始されるTypeScriptのソースコードである。
次に、ステップS808において、プログラム開発装置101は、ユーザの権限毎に画面表示を変更させるためのソースコードを生成する。生成されるソースコードは、ユーザ権限の判定を行い、ユーザ権限が適用された画面部品の表示・非表示を制御するプログラムのソースコードである。すなわち、ステップS808は、ユーザ権限を設定した場合のプロトタイプ(試作)画面を表示するためのプログラムを生成する処理である。
ステップS809において、プログラム開発装置101は、サーバと接続する際に生じる画面表示を再現するためのソースコードを生成する。生成されるソースコードは、プロトタイプ操作パネル3102のオプション設定欄の処理時間設定アイテム3131やエラー設定アイテム3141で設定された内容を反映してプロトタイプ表示画面を表示させるプログラム部分のソースコードである。処理時間設定アイテム3131に処理時間(処理待ち時間)の値が入力された場合、もしくはエラー設定アイテム3141でエラー設定がオンに設定された場合に実行されるソースコードの例であり、ブラウザの記憶領域から取得する疑似サーバの処理設定を反映したプロトタイプ(試作)画面を表示させるプログラムである。すなわち、ステップS809は、サーバと通信する際の疑似的な通信やサーバの状況を再現するためのプログラムを生成する処理である。
ステップS810において、プログラム開発装置101は、プロトタイプアプリケーション画面2502(iFrame)をプロトタイプ操作パネル2503(3102)の表示デバイス設定アイテム3111で設定された内容を反映して表示するためのプログラムを生成する。生成されるソースコードは、たとえば、プロトタイプ操作パネル3102の表示デバイス設定アイテム3111において、PCに設定されたか、スマートフォンに設定されたかなどに応じて異なるサイズおよびレイアウトでプロトタイプアプリケーション画面2502を表示するためのTypeScriptのソースコードである。
以上のソースコードを生成して、図8のフローチャートの処理を終える。なお、S807~S810で生成するソースコードはTypeScriptを例としているが、他の言語のソースコードでもよく、JavaScriptなどで書かれたソースコードであっても良い。
以上で、図8の説明を終了する。
次に、図5のステップS509でデプロイされたプロトタイプアプリケーションを実行し、クライアント装置104のWebブラウザ(450)と通信を開始する際の処理の流れを図9を参照して説明する。なお、図5のようにプログラム開発装置101のステップS511で起動されたWebブラウザがデプロイされたプロトタイプ表示画面アプリケーションと通信を開始しても良いし、図9のようにクライアント装置104において起動されたWebブラウザが、デプロイされた実行サーバ102と通信を開始するとしても良い。
図9は、図5のステップS509でデプロイされたプロトタイプ表示画面440を表示するための情報がクライアント装置104にダウンロードされて実行される動作の一例を示すフローチャートである。なお、以下のフローチャートの各ステップは、クライアント装置104のCPU201が実行する。
図9のフローチャートは、プロトタイプ表示画面440が実行サーバ102(430)にデプロイされた後、クライアント装置104のWebブラウザ450からユーザがプロトタイプ表示画面440にアクセスした際に開始される処理の流れである。
ステップS901において、クライアント装置104は、まずブラウザのロケール情報を読込む。このロケール情報により、プロトタイプデータの表示言語を切り替えることができる。
ステップS902において、クライアント装置104は、実行サーバ102(430)から、プロトタイプ表示画面(図8のステップS807~S810で生成したアプリケーションソフトウェア)が動作するSPA(シングルページアプリケーション)をダウンロードする。なお、本実施形態では、プロトタイプ表示画面440はSPAとして説明するが、必ずしもSPAである必要はなく、画面遷移命令により実行サーバ102と通信をする仕様でも良く、その場合はプロトタイプアプリケーションの初期画面情報をダウンロードする。
また、ステップS902において、クライアント装置104は、プロトタイプアプリケーションでのユーザ権限情報を取得する。
更に、ステップS902において、クライアント装置104は、実行サーバ102(430)から取得したプログラムからプロトタイプ表示画面2501(プロトタイプ表示画面440)を起動(表示)する。すなわち、ステップS902は、図31のプロトタイプアプリケーション画面3101のような画面を表示するためのプログラムをダウンロードし、起動する処理を行うステップである。
ステップS903において、クライアント装置104は、プロトタイプ表示画面2501のiFrame部のプロトタイプアプリケーション画面2502を起動する。起動している画面の表示例は図32のプロトタイプアプリケーション画面3201である。ただし、次のステップS904でプロトタイプ操作パネル3102が上層に表示(図25のプロトタイプアプリケーション画面2502とプロトタイプ操作パネル2503のような関係)される。
ステップS904において、クライアント装置104は、プロトタイプ表示画面2501のiFrame部のプロトタイプ操作パネル(iFrame)2503を起動する。これによって、図31のように、プロトタイプアプリケーション画面3101にプロトタイプ操作パネル3102が重畳して表示され。このプロトタイプ操作パネル3102に表示されている設定を変更することにより、プロトタイプアプリケーションの表示設定や画面の遷移設定を制御することができる。
ステップS905において、クライアント装置104は、プロトタイプ操作パネル3102に入力されたそれぞれの設定によって、プロトタイプアプリケーション画面3201(442)の表示画面を変更もしくは遷移画面を変更する表示を行う。それぞれの設定によるプロトタイプ表示画面440の画面表示もしくは遷移画面表示の処理はそれぞれ図26~図29において後述する。
次にステップS906において、クライアント装置104は、プロトタイプアプリケーションによるアプリケーションソフトウェアの再現を終了するか開発者の指示を待つ。、アプリケーションソフトウェアの再現を終了する場合は、このフローチャートを終了し、もう一度再現する指示を受け付けた場合は、ステップS902へと処理を戻す。
次に、ステップS905の処理の詳細として、プロトタイプ操作パネル3102に入力されたそれぞれの設定によって、プロトタイプアプリケーション画面3201(442)の表示画面を変更もしくは遷移画面を変更する表示する処理の流れを図26~図29を参照して説明する。図26~図29の処理は、図8の処理で生成されたソースコードに基づくプログラム(すなわち、プロトタイプアプリケーション)によって実現する。なお、それぞれの設定とは、表示デバイスの切り替え、ユーザ権限の変更、サーバとの処理時間の再現、ならびにエラー発生時の再現である。
図26は、表示デバイスを切り替える際の処理の流れを示すフローチャートである。なお、以下のフローチャートの各ステップは、クライアント装置104のCPU201が実行する。
図26のフローチャートは、クライアント装置104のWebブラウザ450を介してユーザからのアクセスがあり、プロトタイプ表示画面440のSPAがWebブラウザ450にダウンロードされた際に開始されるフローチャートである。なお、図26~図29の一部の説明は図9の説明と一部重なっている。
ステップS2601、S2602の処理は、図9のステップS902,S903の処理と同様である。
ステップS2603において、クライアント装置104は、プロトタイプ表示画面2501のiFrame部のプロトタイプ操作パネル(iFrame)2503を起動する。ここまでは、図9のステップS904の処理と同様である。この先が、図9のS905の処理の詳細である。
プロトタイプ操作パネル3102が表示されている状態で、ユーザから表示デバイス設定アイテム3111に対する操作があり、表示デバイスの設定(画面サイズの設定)が変更された場合に、次のステップS2604の処理へと遷移する。表示デバイス設定アイテム3111には、画面サイズが予め定義された各端末(PC、タブレット(縦向き)、タブレット(横向き)、スマートフォン(縦向き)、スマートフォン(横向き))が設定可能な選択肢として表示される。タブレットやスマートフォンに関しては、縦向きと横向きのいずれかを選択して設定できる。縦向きと横向きを設定可能とするのは、タブレットやスマートフォンが縦向きでも横向きでも表示制御可能であるためである。
図26のフローチャートの説明に戻って、次のステップS2604へと処理を遷移すると、クライアント装置104は、プロトタイプ操作パネル3102において変更されたデバイスの画面サイズに変更する指示を受け付ける。
ステップS2605において、クライアント装置104は、プロトタイプアプリケーション画面2502をステップS2604で受け付けたデバイスのサイズにiFrame部を合わせて表示する。スマートフォン(縦向き)に設定された場合のプロトタイプアプリケーション画面2502の表示例を図33に示す。
図33のプロトタイプアプリケーション画面3301はスマートフォンサイズである領域3302の範囲内に表示される。スマートフォンサイズで表示された画面であっても、試作としてのプロトタイプアプリケーションの処理は実行され、たとえば、所定のボタンが押下されると、そのアクションに応じたプロトタイプデータを反映した遷移先の画面を表示することができる。
以上の処理により、デバイス毎に表示形態を変えたプロトタイプのアプリケーションを容易に作成することができる。
次に、図27を参照して、ユーザ権限を変更した際に画面表示を変更する処理の流れを説明する。
図27は、ユーザ権限を切り替えた際の処理の流れを示すフローチャートである。なお、以下のフローチャートの各ステップは、クライアント装置104のCPU201が実行する。
図27のフローチャートは、クライアント装置104のWebブラウザ450を介してユーザからのアクセスがあり、プロトタイプ表示画面440のSPAがWebブラウザ450にダウンロードされた際に開始されるフローチャートである。
ステップS2701、S2702の処理は、図9のステップS902,S903の処理と同様である。
なお、ステップS2701において、クライアント装置104は、プロトタイプアプリケーションでのユーザ権限情報を取得する。取得するデータの例が、たとえばユーザ権限データ2710のようなデータである。このデータはプロトタイプアプリケーション生成時のステップS805において取得したユーザ権限データ830と一緒である。
ステップS2703において、クライアント装置104は、プロトタイプ表示画面2501のiFrame部のプロトタイプ操作パネル(iFrame)2503を起動する。ここまでは、図9のステップS904の処理と同様である。この先が、図9のS905の処理の詳細である。なお、図31の権限設定アイテム3121のうち、、ユーザ権限を設定するチェックボックスは、ステップS2710で取得したユーザ権限データ830に基づいて生成される。
プロトタイプ操作パネル3102が表示されている状態で、ユーザから権限設定アイテム3121に対する操作があり、権限の設定が変更された場合に、次のステップS2704の処理へと遷移する。
ステップS2704へと処理を遷移すると、クライアント装置104は、プロトタイプ操作パネル3102において変更された権限設定アイテム3121の値をブラウザのローカルストレージに記憶する。
ステップS2705において、クライアント装置104は、プロトタイプアプリケーション画面2502をステップS2704で記憶したユーザ権限設定で表示する。権限設定アイテム3121において「user」に設定された場合のプロトタイプアプリケーション画面2502の表示例を図34に示す。
図34のプロトタイプアプリケーション画面3401は、図32のプロトタイプアプリケーション画面3201とは異なり、下線3402が示す部分に新たに出欠確認(User)が追加表示されている。これは、プロトタイプアプリケーション生成時に、ステップS802で取得したユーザ権限毎の入出力許可項目のデータ820を反映したイメージ図である。すなわち、権限設定アイテム3521が「user」に設定変更されているため、ユーザ権限データ830の「user」に対応する権限名(Name)が「User」であり、「User」権限で入出力許可項目は、「出欠確認(User)」と「備考」である。そのため、図34のプロトタイプアプリケーション画面3401には、下線3402のように、出欠確認(User)欄と備考欄とが表示される。
別の例も説明する。
一方、図31の権限設定アイテム3121で、「guest」、「user」、「admin」の3つにチェックを入れることも可能である。3つにチェックを入れた場合、図8のデータ820とユーザ権限データ830によると、「備考」欄、出欠確認(User)欄、出欠確認(Admin)欄、更新ボタンが入出力許可項目である。
図35は、権限設定アイテム3121で「guest」、「user」、「admin」の3つにチェックを入れた設定にした場合に表示される表示例である。
図35のプロトタイプアプリケーション画面3501は、図32のプロトタイプアプリケーション画面3201とは異なり、下線3502の部分に新たに出欠確認(Admin)と出欠確認(User)3503が追加表示されており、更に画面右の更新ボタン3504も追加で表示されている。
以上の処理により、ユーザの役割に依存して画面遷移を行うプロトタイプのアプリケーションソフトウェアを作成することができる効果を有する。すなわち、通常の画面遷移だけをさせる試作型アプリケーションソフトウェアを生成すると、ユーザ権限など関係なく、所定の画面表示や所定の画面遷移しかできないパターンとなるが、本実施形態では、ユーザ権限を切り替えるプロトタイプ操作パネルの設定を有しており、ユーザ権限の切り替えにより、表示される画面がユーザ権限毎に切り替わることを再現するができる。
次に、図28を参照して、サーバでの処理時間の再現を表示する処理の流れを説明する。
図28は、仮想のサーバでの処理時間を変更した際の処理の流れを示すフローチャートである。なお、以下のフローチャートの各ステップは、クライアント装置104のCPU201が実行する。
図28のフローチャートは、クライアント装置104のWebブラウザ450を介してユーザからのアクセスがあり、プロトタイプ表示画面440のSPAがWebブラウザ450にダウンロードされた際に開始されるフローチャートである。
ステップS2801、S2802の処理は、図9のステップS902,S903の処理と同様である。
ステップS2803において、クライアント装置104は、プロトタイプ表示画面2501のiFrame部のプロトタイプ操作パネル(iFrame)2503を起動する。ここまでは、図9のステップS904の処理と同様である。この先が、図9のS905の処理の詳細である。
プロトタイプ操作パネル3102が表示されている状態で、ユーザから処理時間設定アイテム3131に対する操作があり、処理時間の設定が変更された場合に、次のステップS2804の処理へと遷移する。処理時間設定アイテム3131は、サーバでの処理時間を考慮してプロトタイプアプリケーション画面2502の画面遷移の表示を再現する設定欄である。
例えば、図31のプロトタイプ操作パネル3102の処理時間設定アイテム3131では「0.2秒」に設定されているものを、ユーザの操作に応じて「2秒」に変更できる。
ステップS2804へと処理を遷移すると、クライアント装置104は、プロトタイプ操作パネル3902において変更されたサーバの処理時間設定アイテム3131の値(例えば2秒)をブラウザのローカルストレージに記憶する。。
次のステップS2805において、クライアント装置104は、プロトタイプアプリケーション画面2502をステップS2804で記憶した処理時間分待つ設定に変えて、次の画面に遷移するように再現するプロトタイプアプリケーションに変更する。
処理時間設定アイテム3131で処理時間が「2秒」と設定された場合、たとえば図16のプロトタイプアプリケーション画面1601の検索ボタン1602を押下すると、図19に示す表示例のように中央に、あたかもサーバで処理中であるかのような表示アイテム1902を2秒間表示する。この処理中を示す表示アイテム1902を表示する時間が処理時間設定アイテム3131で設定された時間である。設定時間だけ表示アイテム1902を表示した後、次の遷移先の画面である図32などを表示する。
以上の処理により、画面遷移時の待ち時間を仮想的に再現するプロトタイプのアプリケーションソフトウェアを作成することができる効果を有する。すなわち、本番環境のアプリケーションソフトウェア(プロダクトアプリケーション)を動作させた時にサーバ側で生じる処理時間を再現することができる。たとえば、ビジネスユーザや営業担当者が一般ユーザにプロトタイプアプリケーションをデモンストレーションする際に、実際に処理時間がかかるであろうサーバとの処理の時間を再現し、サーバとの処理時間にはどういう画面が表示されるのかを再現することができる。このプロトタイプアプリケーションはSPAで構成されているため、実際のサーバとの通信は必要ない。そのため、プロトタイプアプリケーションを実行(画面遷移)するだけであれば、処理時間はかからず、ユーザの操作に応じて次々とプロトタイプアプリケーションは画面遷移する。本番環境のアプリケーションソフトウェア(プロダクトアプリケーション)の動作でサーバでの処理時間が考慮されていないため、サーバでの処理時間が考慮されていないデモンストレーションのみを見て納得している一般ユーザは、開発納品物の性能に関する食い違いを感じる可能性がある。本実施形態のデモンストレーションであれば、サーバの処理時間を自由に設定できるので、開発納品物の性能に関する齟齬などが発生するリスクが少なくなる。また、プロトタイプ操作パネルを表示することにより、プロトタイプアプリケーションを実行中でもサーバでの仮想処理時間を変更することができる。
本実施形態によれば、プロトタイプアプリケーションによる表示画面(例えば図16のプロトタイプアプリケーション画面1601)でも、本番環境で表示されるアプリケーションソフトウェアと同じ画面定義情報を用いて表示を行うため、本番環境の画面と同様の画面を表示することができる。
アプリケーションソフトウェアによる本番環境の画面では、検索ボタンを押下(クリック)する操作、すなわち検索を指示する操作があると、検索キーワード(「セルフケア」)に基づいてインターネット上のデータベースから処理時間を要する検索処理が行われ、検索処理の完了後に、検索結果に基づく表示が行われる。
一方、プロトタイプアプリケーションによる表示画面(例えば図16)においては、本番環境での検索指示操作に対応する、検索ボタン1602の押下(クリック)が行われたことに応じて、インターネット上のデータベースを検索することなく、また、インターネットと通信することなく、図32のように予め定められた表示内容であるプロトタイプデータが表示される。図32で表示されるプロトタイプデータは、検索処理の結果に基づく表示を模した表示内容である。このとき、処理時間設定アイテム3131によって処理時間がゼロより大きい値に設定されていれば(表示アイテム1902を表示する設定となっていれば)、図16で検索ボタン1602が押下されると、図32の表示に遷移する前に、検索処理の待ち時間であることを仮想的に示す表示アイテム1902が、設定された時間だけ表示される。その後に、図32の表示(予め定められた表示内容であるプロトタイプデータの表示)が行われる。
プロトタイプデータは検索処理の結果に基づいて表示されるものではない。
また、表示アイテム1902を表示する時間は、処理時間設定アイテム3131に対してユーザが設定した時間であって、検索処理に要する時間にかかわらない時間である。
また、表示アイテム1902を表示する時間は、検索処理に要する時間を仮想的に再現するための時間である。
なお、処理時間設定アイテム3131によって処理時間がゼロに設定されている、あるいは表示アイテム1902を表示しない設定となっている場合は、図16で検索ボタン1602が押下されると、表示アイテム1902を表示することなく、図16から図32の表示に直接遷移する。この際、所定時間待つということはしない。
なお、プロトタイプアプリケーション画面において、検索処理よりも処理に要する時間が長い処理(例えば画像処理処理)の実行指示に対応する操作(例えば「画像処理ボタン(不図示)」のクリック)が行われた場合、処理により時間がかかる(待ち時間が大きくなる)ことを体感できるように、処理時間設定アイテム3131によって設定された時間よりも長い時間、表示アイテム1902を表示するようにしてもよい。例えば、処理時間設定アイテム3131によって設定された時間よりも5秒長く表示アイテム1902を表示する。その後、画像処理の実行結果の表示を模した予め定められた表示内容を表示する。この場合も、プロトタイプアプリケーションであるため画像処理は実行しない。
次に、図29を参照して、サーバでのエラーや通信エラーなどの発生時の再現を表示する処理の流れを説明する。
なお、以下のフローチャートの各ステップは、クライアント装置104のCPU201が実行する。
図29のフローチャートは、クライアント装置104のWebブラウザ450を介してユーザからのアクセスがあり、プロトタイプ表示画面440のSPAがWebブラウザ450にダウンロードされた際に開始されるフローチャートである。
ステップS2901、S2902の処理は、図9のステップS902,S903の処理と同様である。
ステップS2903において、クライアント装置104は、プロトタイプ表示画面2501のiFrame部のプロトタイプ操作パネル(iFrame)2503を起動する。ここまでは、図9のステップS904の処理と同様である。この先が、図9のS905の処理の詳細である。
プロトタイプ操作パネル3102が表示されている状態で、ユーザからエラー設定アイテム3141に対する操作があり、仮想エラーの発生の設定が「オフ」から「オン」に変更された場合に、次のステップS2904の処理へと遷移する。
ステップS2904へと処理を遷移すると、クライアント装置104は、プロトタイプ操作パネルにおいて変更されたエラー設定アイテム3141の「オン」値をエラー設定状態として、ブラウザのローカルストレージに記憶する。
ステップS2905において、クライアント装置104は、プロトタイプアプリケーション画面2502をステップS2904で記憶したエラー設定状態を取得する。
次に、ユーザから、プロトタイプアプリケーション画面における画面遷移指示を受け付ける。図16の場合、検索ボタン1602の押下(クリック)がされると画面遷移指示を受け付ける。画面遷移指示を受け付けると、次のステップS2806へと処理を遷移する。
次のステップS2906において、クライアント装置104は、取得したエラー設定状態がオン(有効)かオフ(無効)かによって処理を分ける。エラー設定状態がオンであった場合は、ステップS2907へと処理を遷移し、エラー設定状態がオフであった場合は、ステップS2908へと処理を遷移する。ステップS2908へと処理を遷移すると、エラー設定状態はオフであったため、クライアント装置104は、プロトタイプアプリケーションの通常の遷移画面である図32に遷移する。
一方、ステップS2907へと処理を遷移すると、クライアント装置104は、プロトタイプアプリケーションでエラーが生じたと仮定して処理をすすめる。具体的には、図16の画面から図20の画面へ遷移させる。
図20では、検索ボタン1602の押下による処理でエラーが発生した場合のエラー表示として、エラー通知2002を表示している。エラー通知2002には、警告アイコンと「サーバ処理でエラーが発生しました」というメッセージが含まれる。
以上の処理により、画面遷移に失敗した場合のエラー画面を仮想的に再現することができるプロトタイプアプリケーションを作成することができる。すなわち、本番環境のアプリケーションソフトウェア(プロダクトアプリケーション)の実行時にサーバ側や通信時に生じるエラーを仮想的に再現することができる。このプロトタイプアプリケーションはSPAで構成されているため、実際のサーバとの通信は必要ない。そのため、プロトタイプアプリケーションを実行(画面遷移)するだけであれば、サーバでのエラーや通信エラーは発生しない。エラーが生じた際の、表示画面を再現したい開発者や一般ユーザの需要をSPAで実施することができる。また、エラー表示をより現実的に再現させる方法として、図28でサーバでの仮想的な処理時間の再現と組み合わせている。
以上のようなプロトタイプ表示画面は、各種端末のブラウザ内で起動可能なSPAで構成されているため、図30のプロトタイプ表示画面2501のように生成されたプロトタイプアプリケーションをPCやタブレットにダウンロードさせれば、それぞれの端末でプロトタイプアプリケーション画面2502を再現することができる。たとえば、タブレット3001にプロトタイプアプリケーションをダウンロードさせると、タブレット上でプロトタイプ操作パネル2503やプロトタイプアプリケーション画面2502を操作することができる。営業担当者がPCを持っていかなくても、タブレットでプロトタイプ表示画面アプリケーションを動作させることができる。タブレット上でもサーバでの処理時間を再現するプロトタイプアプリケーションを動作させることができ、タブレットでの表示(3002)で、スマートフォンサイズの表示(3003)を再現させることができる。そのため、顧客へのデモンストレーション時も1台の端末を持参すればあらゆる端末で表示させる画面や、画面遷移のパターンを再現することができる。
以上のように、前述した実施形態の機能を実現するプログラムを記録した記録媒体を、システムあるいは装置に供給し、そのシステムあるいは装置のコンピュータ(またはCPUやMPU)が記録媒体に格納されたプログラムを読み出し、実行することによっても本発明の目的が達成されることは言うまでもない。
この場合、記録媒体から読み出されたプログラム自体が本発明の新規な機能を実現することになり、そのプログラムを記録した記録媒体は本発明を構成することになる。
プログラムを供給するための記録媒体としては、例えば、フレキシブルディスク、ハードディスク、光ディスク、光磁気ディスク、CD-ROM、CD-R、DVD-ROM、磁気テープ、不揮発性のメモリカード、ROM、EEPROM、シリコンディスク等を用いることが出来る。
また、コンピュータが読み出したプログラムを実行することにより、前述した実施形態の機能が実現されるだけでなく、そのプログラムの指示に基づき、コンピュータ上で稼働しているOS(オペレーティングシステム)等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。
さらに、記録媒体から読み出されたプログラムが、コンピュータに挿入された機能拡張ボードやコンピュータに接続された機能拡張ユニットに備わるメモリに書き込まれた後、そのプログラムコードの指示に基づき、その機能拡張ボードや機能拡張ユニットに備わるCPU等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。
また、本発明は、複数の機器から構成されるシステムに適用しても、ひとつの機器から成る装置に適用しても良い。また、本発明は、システムあるいは装置にプログラムを供給することによって達成される場合にも適応できることは言うまでもない。この場合、本発明を達成するためのプログラムを格納した記録媒体を該システムあるいは装置に読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。
上記プログラムの形態は、オブジェクトコード、インタプリタにより実行されるプログラムコード、OS(オペレーティングシステム)に供給されるスクリプトデータ等の形態から成ってもよい。
さらに、本発明を達成するためのプログラムをネットワーク上のサーバ、データベース等から通信プログラムによりダウンロードして読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。なお、上述した各実施形態およびその変形例を組み合わせた構成も全て本発明に含まれるものである。