<第1の実施形態>
図1は、本発明に係わるプログラム開発装置(開発者がWebアプリケーション生成のために使用する情報処理装置)、プログラム開発サーバ、データベースサーバ、アプリケーションクライアント(クライアント装置)、アプリケーションサーバ、Webサーバの構成の一例を示すシステム(情報処理システム)構成図である。
プログラム開発装置101は、開発者の操作に従って画面レイアウト及びデータベース検索指示などを定義する。なお、プログラム開発装置101では、開発者の入力受付を行い、後述するプログラム開発サーバ102に実際のプログラム生成処理、アプリケーション生成処理を行うというように役割を分けてもよいし、プログラム開発装置101単体でプログラム生成、アプリケーション生成までを行ってもよい。
なお、この実施形態においては、プログラム開発装置101で生成するアプリケーションはWebアプリケーションとしたが、これに限定するものではなく、携帯電話・スマートフォン・タブレットなどの情報処理装置で動作するアプリケーションや組込みソフトウェアなど、Web技術による通信を利用したアプリケーションでなくてもよい。
また、本実施形態においては、プログラム開発装置101によってアプリケーションのプログラムを生成するとしたが、プログラムの生成に限定するものではなく、開発者の操作に従って設定された定義を用いて、アプリケーションが動作する環境を構築するとしてもよい。
プログラム開発サーバ102a~102b(情報処理装置)は、プログラム開発装置101により入力された開発者の設定及び指示に従って、プログラムを生成する。プログラム開発サーバ102aはLANなどのネットワーク107内に配置されてもよいし、プログラム開発サーバ102bはインターネット上やクラウド上に配置されてもよい。
データベースサーバ103a~103b(情報処理装置)は、開発されたアプリケーションが使用するデータベースであり、また本発明では開発時にも動作確認などのために利用してもよい。例えば、開発者が利用するためにデータベースサーバ103は、プログラム開発装置101と同一の装置で構成されていてもよいし、LANなどのネットワーク107内に配置されてもよい(データベースサーバ103a)。またインターネット上やクラウド上に配置されてもよい(データベースサーバ103b)。また、プログラム開発装置101が、プログラム開発サーバ102と協調する場合には、プログラム開発サーバ102とデータベースサーバ103が同一の装置内に構成されていてもよい。
アプリケーションサーバ105(情報処理装置)は、プログラム開発装置101で生成されたアプリケーションプログラムを実行する。アプリケーションサーバ105は、LANなどのネットワーク107内に配置されてもよいし、またインターネット上やクラウド上に配置されてもよい(アプリケーションサーバ105)。また、ネットワーク107、インターネット、クラウド上のデータベースサーバ103と接続して動作することが可能である。
アプリケーションクライアント104a~104b(情報処理装置)は、アプリケーションサーバ105と協調してプログラム開発装置101で開発したアプリケーションプログラムを動作させる、ユーザの入力端末である。LANなどのネットワーク107内に配置されてもよい(アプリケーションクライアント104a)し、またインターネット上やクラウド上に配置されてもよい(アプリケーションクライアント104b)。携帯端末などの情報処理装置であってもよい。
Webサーバ106(情報処理装置)は、プログラム開発装置101で生成されたアプリケーションプログラムを実行して、アプリケーションクライアント104からのリクエストに応じて送信する。Webサーバ106は、LANなどのネットワーク107内に配置されてもよいし、またインターネット上やクラウド上等に配置されてもよい。
なお、本実施形態においては、アプリケーションサーバ105とWebサーバ106は別筐体の情報処理装置としたが、これに限定するものではなく、1つの情報処理装置であっても、仮想環境上に構築されてもよい。
図2は、本発明に係わるプログラム開発装置101、プログラム開発サーバ102、データベースサーバ103、アプリケーションクライアント104、アプリケーションサーバ105として適用可能な各ハードウェア構成の一例を示すブロック図である。
図2において、CPU201は、システムバス204に接続される各デバイスを統括的に制御する。
また、ROM203あるいは外部メモリ211には、CPU201の制御プログラムであるオペレーティングシステム(OS)や、各サーバ、クライアント、装置など情報処理装置の後述する各種機能を実現するためのプログラムが記憶されている。
RAM202は、CPU201の主メモリ、ワークエリア、一時待避領域等として機能する。
入力コントローラ205は、入力部209からの入力を制御する。この入力部209としては、情報処理装置では、キーボード、マウス等のポインティングデバイスが挙げられる。
出力コントローラ206は、出力部210の表示を制御する。この出力部210としては、例えば、CRTや液晶ディスプレイ等が挙げられる。
外部メモリコントローラ207は、ブートプログラム、各種のアプリケーション、フォントデータ、ユーザーファイル、編集ファイル、プリンタドライバ等を記憶する外部メモリ211へのアクセスを制御する。加えて、各サーバ、クライアント、装置等の各種機能を実現するための各種テーブル、パラメータが記憶されている。この外部メモリ211としては、ハードディスク(HD)やフレキシブルディスク(FD)、PCMCIAカードスロットにアダプタを介して接続されるコンパクトフラッシュ(登録商標)、スマートメディア等が挙げられる。
通信I/Fコントローラ208は、ネットワークを介して外部機器との通信制御処理を実行する。
本発明を実現するためのプログラム212は外部メモリ211に記録されており、必要に応じてRAM202にロードされることによりCPU201によって実行されるものである。
図3は、本発明の実施の形態のソフトウェア構成を示すブロック図の一例である。
プログラム開発装置101は、以下の機能部を備える。
入出力定義管理部301は、アプリケーションの画面を介して入力される項目を定義する入力定義情報と画面に出力する項目を定義する出力定義情報とを入出力定義情報として管理する機能部である。
プログラム生成部302は、入出力定義情報やデータモデル定義情報、ビジネルモデル定義情報を用いて、アプリケーションとして用いられるプログラムを生成する機能部である。プログラム生成部302は、入出力定義情報から、画面に表示するHTMLファイルを生成し、CSSファイルにブラウザのサイズ毎(表示するデバイスの画面サイズ毎)に表示形態を変えるメディアクエリを生成し、画面サイズ(画面を表示する形態の表示サイズ)によるスタイルの違いを構成することができる。
ブラウザサイズ受付部303は、ユーザからの入力により、プログラム開発装置101のディスプレイ210に表示するブラウザの表示サイズを受け付ける機能部である。図12を参照して後述する。
デバイス受付部304は、ユーザからの入力により、プログラム開発装置101のディスプレイ210に表示するブラウザの表示サイズをデバイス毎に受け付ける機能部である。図12を参照して後述する。
表示形態変更部305は、ブラウザサイズ受付部303で受け付けたブラウザの表示サイズにより、UI部品の表示形態を変更する機能部である。表示形態変更部305は、分類部309で分類されたデバイス毎に、部品のサイズや表示形態を変えることができる。図22や図23を参照して後述する。
設定部306は、プログラム生成部で生成され実行時に表示されるUI部品のサイズを設定する機能部であり、表示するブラウザの表示サイズによって、表示されるUI部品のサイズを、ブラウザの表示サイズの設定された割合で表示させるために、ユーザからの入力を受け付けることもできる。図14を参照して後述する。
表示制御部307は、設定部で受け付けた所定の割合でUI部品を表示したり、ブラウザ上にデバイス毎のブラウザの表示サイズで実行時に表示される画面を表示制御する機能部である。
記憶部308は、複数のデバイスと各デバイスで表示される画面サイズ(画面を表示する形態の表示サイズ)とを対応付けて記憶する機能部である。図12の1210を参照して後述する。
また、記憶部308は、設定部で設定される、実行時に表示されるUI部品のサイズを記憶する。この記憶部308は、外部メモリ211に記憶されていても良いし、RAM202に記憶されていてもよく、DBサーバ103に記憶されていても良い。
分類部309は、複数のデバイスをパーソナルコンピュータ、タブレット、スマートフォンに分類する機能部である。図12の1210を参照して後述する。
生成部310は、設定部306で設定されるUI部品のサイズを、表示するブラウザの表示サイズによって表示制御(表示するブラウザの表示サイズによってUI部品のサイズを変更制御)するための表示制御情報(UI定義)を生成する機能部である。生成部310により生成される表示制御情報を利用して、プログラム生成部302は、CSSファイルにブラウザのサイズ毎(表示するデバイスの画面サイズ毎)に表示形態を変えるメディアクエリを生成する。図21を参照して生成されるUI定義の例を後述する。
画面部品変更部311は、表示制御部307がブラウザ上でデバイス毎のブラウザの表示サイズでプログラム実行時に表示される画面を表示制御している際に、UI部品のサイズ変更を受け付ける機能部である。図16、図18、図20を参照して後述する。
図4は、プログラム開発装置101の構成図である。
プログラム開発装置101は、リポジトリ定義部401、Webアプリケーション生成部415及び画面定義部419を備える。
プログラム開発装置101は、Webアプリケーションを開発する開発者により設定されたリポジトリ定義部401の各定義を用いて、Webアプリケーション生成部415によりWebアプリケーション438を生成する。
また、プログラム開発装置101は、リポジトリ定義部401には、アプリケーション定義402、入出力定義403、データモデル定義404、ビジネスプロセス定義405、画面部品定義406、アクション定義407、デスクトップ(パーソナルコンピュータ)用画面部品定義408、タブレット用画面部品定義409、スマートフォン用画面部品定義410が記憶されている。これら402~410の定義は、Webアプリケーション開発ツールを介して、開発者によって入力設定または配置される。
なお、入出力定義403は、入力項目定義情報及び出力項目定義情報を含む。入力項目定義情報は、生成されたWebアプリケーションの画面を介して当該Webアプリケーションのユーザが入力する入力項目を定義した情報である。出力項目定義情報は、生成されたWebアプリケーションの画面に出力する出力項目を定義した情報である。以降、「入力項目定義情報」及び「出力項目定義情報」をまとめて「入出力項目定義情報」と呼ぶ。
また、画面部品定義406は、Webアプリケーション開発ツールの画面レイアウトエディタ(不図示)を用いて生成された画面レイアウトをHTML等に変換した画面情報である。なお、画面レイアウトエディタによる画面レイアウトの作成は、開発者がたとえば入出力定義画面900(図9)における入出力定義403の設定と並行して行う作業である。画面レイアウトエディタを用いて、入出力項目(キャプション、ボタン、テキストボックス等)の配置を設定しつつ、入出力定義画面900を用いて、その入出力項目の属性1002(図10)を設定する。
デスクトップ用、タブレット用、スマートフォン用のそれぞれの画面部品定義408、409、410は、画面レイアウトエディタを用いて、それぞれの端末における画面部品(UI部品)の表示幅を制御するように指定することができる(図15、図17、図19)。また、画面部品の表示幅は、その入出力項目の属性入力欄1301(図13)にそれぞれ設けられている表示幅割合入力欄1401(図14)で設定されても良い。図14の1401は、デバイス毎の表示制御値の一例を示すものである。
よって、リポジトリ定義部401は、生成されたプログラムの実行によって表示されるアプリケーションの画面を介して入力される項目を定義する入力定義情報と画面に出力する項目を定義する出力定義情報とを入出力定義情報として管理する手段の一例である。
Webアプリケーション生成部415は、Webアプリケーション生成用のリポジトリ定義解析部416を用いてリポジトリ定義部401に記憶されている各定義を解析し、Webアプリケーションコード生成部417及びソースコードコンパイル部418を介し、コンパイル済Java(登録商標)コード439及びHTML/JSP/JavaScript(登録商標)440を含むWebアプリケーション438を生成する。すなわち、入出力定義情報を用いて、前記アプリケーションとして用いられるプログラムを生成する手段の一例である。
画面定義部419は、生成されるべきWebアプリケーションの画面周りを編集するツールを有しており、具体的に画面定義エディタ部420、画面プロパティエディタ部421、部品パレット部423、レスポンシブ部品サイズ変更部424を有している。
画面定義エディタ部420は、図9の902部分に該当し、部品パレット部423である901から部品を903のように配置して生成されるWebアプリケーションの画面周りを編集する。
画面プロパティエディタ部421は、図10の1002にある画面から、入出力項目の属性を設定することができる。
部品パレット部423は、図9の901部分に該当し、画面に配置する様々なUI部品がリストとして登録されている。901内にあるUI部品がユーザのドラッグ&ドロップなどの操作により図9の903の位置に移動されて、Webアプリケーションの構成を成す画面を902(画面定義エディタ部420)に生成できる。
レスポンシブ部品サイズ変更部424は、図12の1200で図示した選択ボタンであるデスクトップ(パーソナルコンピュータ)ボタン1201、タブレットボタン1202、スマートフォンボタン1203によって、ディスプレイ210に表示されるブラウザの表示領域を切り替えた際に、画面部品(UI部品)のサイズを変更して表示する機能を有する。
たとえば、図22の画面定義エディタ部2201に表示されている情報をデスクトップ(パーソナルコンピュータ)モードで表示すると、2202のように表示される。画面定義エディタ部2201で表示されている画面部品(UI部品)2221は、2211のデスクトップ幅に設定された「2」という数字を元に、画面部品(UI部品)2221の表示幅を決定する。具体的には、画面部品(UI部品)2221は、デスクトップモード2202の全画面サイズの横幅の2/12で表示されている(2222)。この様に本実施例では、画面部品(UI部品)の幅サイズを、表示されているモードの全画面サイズの横幅の12等分のいくつかで指定している。なお、この12等分についてはユーザによって6等分や24等分などに変更できても良い。
一方、図22の画面定義エディタ部2201に表示されている情報をタブレットモードで表示する(図12のタブレットボタン1202が押下される)と、2203のようにタブレットサイズで画面が表示され、タブレットサイズで表示できないエリア2213はブランク(表示対象外領域として)表示されている。画面部品(UI部品)2221は、画面サイズの横幅の3/12で表示されている(2223)。
また、図22の画面定義エディタ部2201に表示されている情報をスマートフォンモードで表示する(図12のスマートフォンボタン1203が押下される)と、2204のようにスマートフォンサイズで画面が表示され、スマートフォンサイズで表示できないエリア2214はブランク(表示対象外領域として)表示されている。画面部品(UI部品)2221は、画面サイズの横幅の6/12=1/2の幅で表示されている(2224)。
以上のように、レスポンシブ部品サイズ変更部424は、選択されるデバイスボタン(図12の1200)によりUI部品サイズ(2222、2223、2224)を変更して、プログラムをデプロイする前に表示することができる。その後、画面定義エディタ部420に部品サイズを送信し、図22のように画面定義に反映する。
データベース441は、アプリケーションサーバ442で実行されるアプリケーションにより呼び出されるデータを管理するデータベースサーバ103が有する機能部である。
端末ブラウザ443は、アプリケーションクライアント104のディスプレイ210で表示される機能部であり、アプリケーションサーバ442で実行、送信される情報を表示することができる。
図5は、Webアプリケーション生成のフローチャートの一例を示す図である。
プログラム開発装置101は、リポジトリ定義部401の各定義をファイルとして管理する。なお、本実施形態においては、リポジトリ定義部401の各定義をファイルとして管理するとしたが、これに限定するものではなく、例えば、データベースを用いてリポジトリ定義部401の各定義を管理してもよいし、クラウドなどネットワーク上の記憶装置を用いて管理する等としてもよい。
Webアプリケーション生成のフローチャートについて説明する。
ステップS501において、プログラム開発装置101は、リポジトリ定義部401からアプリケーション定義402を取得する。
ステップS502において、プログラム開発装置101は、リポジトリ定義部401からデータモデル定義404を取得する。
ステップS503において、プログラム開発装置101は、入出力定義情報の入力をユーザ(開発者)から受け付け、リポジトリ定義部401に登録する。詳細は図6で後述する。
ステップS504において、プログラム開発装置101は、リポジトリ定義部401から入出力定義403を取得する。
ステップS505において、プログラム開発装置101は、リポジトリ定義部401からビジネスプロセス定義405を取得する。
ステップS506において、プログラム開発装置101は、リポジトリ定義部401からデータベース定義406を取得する。
ステップS507において、プログラム開発装置101は、Webアプリケーション生成部415を用いて、Webアプリケーション438に用いるプログラムを生成する。ステップS507では、ステップS504で取得した入出力定義から、画面に表示するHTMLファイルを生成し、CSSファイルにブラウザの表示サイズ毎(表示するデバイスの画面サイズ毎)に表示形態を変えるメディアクエリを使って、画面サイズによるスタイルの違いを構成することができる。すなわち、ステップS507は、アプリケーションとして用いられるプログラムを生成し、出力される画面をデバイス毎にレスポンシブに表示させるCSSファイルを生成する処理の一例を示すステップである。
ステップS508において、プログラム開発装置101は、ステップS507にて生成したプログラムをアプリケーションサーバ105に配置(デプロイ)する。
上記処理により、生成されたWebアプリケーション438はアプリケーションサーバ105(442)上で実行されるプログラムとして稼働する。
以上で、図5のWebアプリケーション生成のフローチャートの説明を終了する。
図6は、入出力定義情報受付処理の詳細のフローチャートの一例を示す図である。
ステップS600において、プログラム開発装置101は、Webブラウザに表示するUIをフィックスデザインとするか、レスポンシブデザインとするかの選択を受け付ける。図8を参照して、ステップS600の処理を説明する。
図8は、本発明の実施形態に係る新規UI作成画面の一例を示す模式図である。
図8は、プログラム開発装置101が表示制御する、ユーザ(開発者)からWebブラウザに表示するUIをフィックスデザインとするか、レスポンシブデザインとするかを受け付ける画面のイメージの一例として示した図である。
図8の801にあるチェックボックス801は、表示するUIをレスポンシブデザインとする場合にチェックを入力する項目であり、図8はレスポンシブ(マルチデバイス用)チェックボックス801にチェックが入っているため、“responsive”という画面名の画面802はレスポンシブデザインでUIが作成される。図6のフローチャートの説明に戻る。
図6のステップS601において、プログラム開発装置101は、ユーザ(開発者)からWebブラウザに表示する画面上の部品の配置を受け付ける。図9を参照して、ステップS601の処理を説明する。
図9は、本発明の実施形態に係るデザイン作成画面の一例を示す模式図である。
図9は、プログラム開発装置101が表示制御する、ユーザ(開発者)がUI部品をアプリケーション表示画面に配置させる画面のイメージの一例として示した図である。
図9の900には、画面に配置するUI部品のリストが901(部品パレット部423)のように表示されており、ユーザによりエディタ画面部分902(画面定義エディタ部420)にドラッグ&ドロップされることで、Webアプリケーション生成時のWebブラウザに表示される画面上の部品の配置を受け付ける。
エディタ画面部分902の例では、部品パレット部分901からテキストエリアが選択されて、図示しないマウスなどのドラッグ&ドロップによって、903の位置に配置している。
配置した903のUI部品は、デフォルトでUI部品のサイズ幅情報を持っており、UI部品を配置した当初はそのデフォルト値のUI部品サイズ幅で表示している。
なお、画面部品の配置方法は、部品パレット部423から画面定義エディタ部420へのドラッグ&ドロップに限らず、既に配置した部品を画面定義エディタ部内で移動する方法や、既に配置した部品を画面定義エディタ部内でコピー&ペーストにより複製する方法であってもよい。また、一度配置した部品を削除できてもよい。図6のフローチャートの説明に戻る。
図6のステップS602において、プログラム開発装置101は、ステップS600にて入力されたレスポンシブデザインかどうかの設定により、以降の処理を分ける。ステップS600において、表示するUIをレスポンシブデザインで生成すると設定されている場合は、ステップS606へと処理を遷移し、フィックスデザインで生成すると設定されている(図8の801のチェックボックスが入っていない)場合は、ステップS603へと処理を遷移する。すなわち、ステップS603以降の処理はフィックスデザインで画面UIを生成する場合の処理の流れとなる。
ステップS603へと遷移すると、プログラム開発装置101は、画面上にプロパティ入力部(画面プロパティエディタ部421)を表示し、その中に部品の幅を指定するプロパティの入力欄を表示する。図10、図11を参照して、ステップS603の処理を説明する。
図10は、本発明の実施形態に係るフィックスデザイン作成画面の一例を示す模式図である。
図10は、プログラム開発装置101が表示制御する、ユーザ(開発者)がUI部品の幅を変更するイメージの一例として示した図である。
図10の1002は、指定されているUI部品(1000の場合、1003)のプロパティ入力部(画面プロパティエディタ部421)を表示している。プロパティ入力部1002の中にUI部品の幅を入力する入力欄を表示している。以降、1003のように、四角枠の各辺の中点に黒丸が付いているUI部品は、画面定義エディタ部420(図9の902)において選択されているUI部品を指し示しており、以降に開示されているプロパティ入力部(たとえば、1002や図13の1301など)は、四角枠の各辺の中点に黒丸が付いているUI部品のプロパティの入力を受け付ける。
なお、図10では、画面プロパティエディタ部421を画面右側(1002)に表示しているが、四角枠の各辺の中点に黒丸が付いているUI部品(選択されたUI部品)の画面プロパティエディタ部421を、たとえば図11の1102のようにモーダルダイアログ上に表示してもよい。その場合も、UI部品の幅を入力する入力欄1101を表示している。図6のフローチャートの説明に戻る。
次のステップS604において、プログラム開発装置101は、ステップS603にて表示したUI部品の幅を入力する入力欄1001や1101にユーザからの入力があったかを判断する。ユーザからのUI部品の幅の入力があった場合は、ステップS605へと処理を遷移し、ユーザからの入力がない(すなわち、それぞれのデバイスにおけるUI部品の幅がデフォルト値でよいとユーザが判断した)場合は、図6のフローチャートの処理を終え、ステップS609へと処理を遷移する。
ステップS605へと処理を遷移すると、プログラム開発装置101は、ステップS603にて表示したUI部品の幅の値を取得し、入出力定義に入力する。
その後、ステップS609へと処理を遷移し、プログラム開発装置101は、他の部品の配置が終了したかの入力を受け付ける。他の部品の配置が終了していれば、図6のフローチャートは終了し、図5のステップS504へと遷移する。また、ステップS609で、ユーザが更に他のUI部品を配置するとした場合は、ステップS601へと処理を遷移し、別の部品の配置や既存の部品の位置移動などを受け付ける処理を繰り返す。
一方、ステップS602において、ステップS600にて入力されたレスポンシブデザインかどうかの設定がレスポンシブデザインであった(図8の801にチェックがある)場合、ステップS606へと処理を遷移する。
ステップS606において、プログラム開発装置101は、画面上にプロパティ入力部(画面プロパティエディタ部421)を表示し、その中に部品の幅を指定するプロパティの入力欄を表示する。図13、図14を参照して、ステップS606の処理を説明する。
図13は、本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。
図13は、プログラム開発装置101が表示制御する、ユーザ(開発者)がUI部品の幅を変更するイメージの一例として示した図である。
図13の1301は、指定されているUI部品(1000の場合、1003)のプロパティ入力部(画面プロパティエディタ部421)を表示している。プロパティ入力部1301の中にUI部品の幅をデバイス毎に入力する入力欄1401を有している。プロパティ入力部1301(画面プロパティエディタ部421)は、たとえば、画面定義エディタ部420(図13の1302)内の選択中のUI部品1303への属性情報の入力を受け付ける。なお、入力欄1401は、デバイス毎の表示制御値の一例を示すものである。
なお、画面プロパティエディタ部421は、図11でも説明したようにモーダルダイアログ上に表示してもよい。図6のフローチャートの説明に戻る。
次に図6のステップS607において、プログラム開発装置101は、デバイス毎の部品サイズが変更されたかどうかの判断を行う。デバイス毎の部品サイズが変更されたかどうかは、図14の1401のデバイス毎の幅プロパティの値がユーザにより変更されたかによって判断する。値が変更された場合は、ステップS608へと処理を遷移し、各デバイス毎の部品サイズを変更する処理を行う。詳細は図7を参照して説明する。
なお、図7で説明するように、部品サイズをマウスのドラッグ&ドロップなどによって指定する方法でも良いし、図14の1401の幅プロパティの入力欄へ直接入力、もしくはプルダウンから選択できるようにしても良い。また、部品サイズの変更要求を受け付ける部品は、個々の部品ごとに設定しても良いし、複数の部品をまとめても設定しても良い。
一方、ステップS607において、デバイス毎の部品サイズが変更されていない、すなわち、図14の1401のデバイス毎の部品の幅プロパティの値がユーザにより変更されていない(ユーザがデフォルトのそれぞれの部品サイズで良いと判断した)場合は、デフォルトのデバイス毎のUI部品幅サイズ(1401)は変更せず、ステップS609へと遷移する。
ステップS609へと遷移すると、プログラム開発装置101は、他の部品の配置が終了したかの入力を受け付ける。他の部品の配置が終了していれば、図6のフローチャートは終了し、図5のステップS504へと遷移する。また、ステップS609で、ユーザが更に他のUI部品を配置するという入力を受け付けた場合は、ステップS601へと処理を遷移し、別の部品の配置や既存の部品の位置移動などを受け付ける処理を繰り返す。
図7を参照して、本発明の実施形態に係るレスポンシブ部品サイズ変更処理の流れを説明する。
図7は、本発明のレスポンシブ部品サイズを変更するフローチャートの一例を示す図である。
ステップS700において、プログラム開発装置101は、ユーザから、画面定義エディタ部420のイメージをデスクトップ形式にするか、タブレット形式にするか、スマートフォン形式にするかの選択を受け付ける。
図12の1200を参照して、ユーザのデバイス選択を受け付けるイメージを説明する。
図12の1200には、デスクトップ(パーソナルコンピュータ)ボタン1201、タブレットボタン1202、スマートフォンボタン1203が配置されている。
図12の1200で図示した各選択ボタンが押下されると、各デバイスの形態に対応する表示サイズと設定値を用いて、表示領域を記憶部308に記憶された表示サイズに変更する。表示領域を変更後、画面に表示されている画面部品(UI部品)のサイズを、デバイスごとに変更することで、デバイスごとの画面部品(UI部品)のサイズを編集することができる。以下に各ボタンが押下された際の処理の流れを説明する。
デスクトップ(パーソナルコンピュータ)ボタン1201が押下されると、次のステップS701へと処理を遷移し、プログラム開発装置101は、図15の1502に記載した画面定義エディタ部420を表示する。すなわち、デスクトップ画面イメージである1920×1080の画面を1502の画面定義エディタ部に表示する。
ステップS700において、タブレットボタン1202が押下されると、ステップS704へと処理を遷移し、プログラム開発装置101は、図17の1702に記載したような、タブレットサイズの画面定義エディタ部420を表示する。
また、ステップS700において、スマートフォンボタン1203が押下されると、ステップS707へと処理を遷移し、プログラム開発装置101は、図19の1902に記載したような、スマートフォンサイズの画面定義エディタ部420を表示する。
なお、図17や図19のタブレット表示領域外やスマートフォン表示領域外の領域は表示不可部分として、定義されており、ブラウザの表示領域1702や1902は拡大縮小はできない。拡大縮小できない理由は、開発者によってブラウザのサイズを自由に変えられてしまうと、デバイス毎のブラウザサイズの再現ができなくなってしまうためである。そのために、表示できないエリアを1905のようにブランクエリアとして表示させ、1902の表示エリアの横幅は変更できないことを示唆している。
なお、スマートフォンやタブレット、デスクトップのサイズも図12の1210のように、それぞれのデバイスにも複数のサイズがあるため、それぞれのサイズにブラウザの表示領域を拡大縮小できても良いが、自由に拡大縮小はできず、図12の1210のぞれぞれのデバイス内のブラウザのサイズとして拡大縮小できても良い。
なお、図12の1210には、記憶部306に記憶されているデバイス毎の画面表示サイズ、その分類を示しているが、デバイスの形態とは、デバイスの種類(パーソナルコンピュータ、タブレット、スマートフォン)や具体的なデバイスの機種名など、様々な形態で記憶されていても良い。画面サイズ欄は、画面アスペクトレシオとして記憶されていても良く、また、この記憶部306にあらかじめ記憶されていても良いし、後から追加できるものであっても良い。それぞれのデバイスの種類ごとに1つ又は複数の形態で記憶されていても良い。
次に、それぞれのブラウザのサイズに表示された画面において、ステップS702、S705、S708の処理へと移行し、プログラム開発装置101は、それぞれの画面における部品のサイズを、画面の横幅のサイズの1/12単位の値として受け付ける。もしくは、ユーザのマウスによるドラッグ&ドロップ操作により画面の横幅のサイズの1/12単位の値となる幅になるように画面描画を受け付ける。
図15~図20を参照して、マウスによる横幅のドラッグ&ドロップによるUI部品の幅変更操作を説明する。
図15は、デスクトップ(パーソナルコンピュータ)ボタン1501が押下された際の画面イメージである。1502がデスクトップ画面の表示イメージである。なお、図15、図16の処理はステップS702とステップS703で実行される処理である。
図16は、デスクトップ(パーソナルコンピュータ)ボタン1501が押下された後の画面イメージである(ステップS701)。
図16の1600において、画面定義エディタ部420には部品1601(テキストエリア)が配置されており、デフォルトでは、横幅は画面の横幅の2/12=1/6で表示されている(1606参照)。
次に、ユーザが1601の四角の枠の中点にある丸をドラッグ&ドロップして右に移動させる(ステップS702)と、1602のように、画面の横幅の3/12=1/4に移動する。もっと移動させると、1603のように4/12=1/3の幅に変更される。
マウスのドラッグ&ドロップを1603の場所でリリースすると、1604のように、中のテキストエリアも中点に丸を持つ四角の枠に追随して同じ幅に変異し、その時の値がデスクトップ幅入力欄1605に反映される。1604の場合、1605には「4」の値が反映される(ステップS703)。
なお、図16の画面定義エディタ部420は1600の下部1607にスクロールバーがあるように、全画面が見えているわけではなく、画面定義エディタ部420は画面の右側にはみ出ている。そのため、図16では、画面の横幅と四角枠の横幅1601~1604の割合が異なるように見えるが、実際の画面では、図22の2202内の2222(2202の場合はUI部品2222を2/12の割合で表示)のように所定のX/12の割合で表示する。
図17はタブレットボタン1701が押下される前と後の画面イメージである。なお、図17、図18の処理はステップS705とステップS706で実行される処理である。
タブレットボタン1701が押下されると、画面定義エディタ部420は、タブレットサイズの画面1702を表示する(ステップS704)。
図18はタブレットボタン1701が押下された後、ユーザがUI部品のサイズを変更した際の画面の動きを説明する図である。
図18の1800において、画面定義エディタ部420には部品1801(テキストエリア)が配置されており、デフォルトでは、横幅は画面の横幅の3/12=1/4で表示されている(1806参照)。
次に、ユーザが1801の四角の枠の中点にある丸をドラッグ&ドロップして右に移動させると、1802のように、画面の横幅の5/12に移動する。更に移動させると、1803のように6/12=1/2の幅に変更される。
マウスのドラッグ&ドロップを1803の場所でリリースすると、1804のように、中のテキストエリアも中点に丸を持つ四角の枠に追随して同じ幅に変異し、その時の値がタブレット幅入力欄1805に反映される。1804の場合、1805には「6」の値が反映される(ステップS706)。
図19はスマートフォンボタン1901が押下される前と後の画面イメージである。なお、図19、図20の処理はステップS708とステップS709で実行される処理である。
スマートフォンボタン1901が押下されると、画面定義エディタ部420は、スマートフォンサイズの画面1902を表示する(ステップS707)。
図20はスマートフォンボタン1901が押下された後、ユーザがUI部品のサイズを変更した際の画面の動きを説明する図である。
図20の2000において、画面定義エディタ部420には部品2001(テキストエリア)が配置されており、デフォルトでは、横幅は画面の横幅の6/12=1/2のサイズで表示されている(2006参照)。
次に、ユーザが2001の四角の枠の中点にある丸をドラッグ&ドロップして右に移動させると、2002のように、画面の横幅の7/12に移動する。更に移動させると、2003のように8/12=2/3の幅に変更される。
マウスのドラッグ&ドロップを2003の場所でリリースすると、2004のように、中のテキストエリアも中点に丸を持つ四角の枠に追随して同じ幅に変異し、その時の値がタブレット幅入力欄2005に反映される。2004の場合、2005には「8」の値が反映される(ステップS709)。
以上のように、ステップS702、S705、S708の処理でUI部品の幅の変更をデバイス毎に設定することが容易にできる。また、プログラムのデプロイ前に画面を確認しながらUI部品を配置することができる。
次に、ステップS710へと処理を遷移し、S710において、プログラム開発装置101は、それぞれユーザによりステップS700で選択されたデバイスのブラウザの表示サイズ毎のUI部品の幅の値を入出力定義の部品定義に反映させる。反映させたUI定義の例を図21を参照して説明する。
図21は、ステップS710で反映されたUI定義の一例であり、図3の生成部310により、生成される表示制御情報の一例である。図21は、図16の1604、図18の1804、図20の2004で設定された画面部品(UI部品)のUI定義の一例を示す。
2101には、「item1」というUI部品に、それぞれパーソナルコンピュータ用の幅として「4」、タブレット用に幅として「6」、スマートフォン用の幅として「8」という値が設定されている。この設定された数値は前述のようにブラウザの表示サイズ(横幅)の12等分された内の何割の幅で、UI部品を表示するかを設定する値である。これらの値は、ステップS703、S706、S709でそれぞれ反映された値である。図7のフローチャートの説明に戻る。
次に、図7のステップS711において、他のデバイスの設定も変更するかの確認処理をおこない、他のデバイスでのUI部品サイズを変更しない場合は、図7のフローチャートを終了する。他のデバイスでのUI部品サイズを変更する指示を受け付けると、ステップS700へと処理を遷移し、デバイス選択ボタンの押下処理以降を繰り返す。
以上のように、本願発明の第1の実施形態により、プログラム開発装置101においてデバイス毎に、1つ1つのUI部品のサイズを設定することができ、また、プログラム開発装置101において、プログラムのデプロイ前に、デバイス毎の表示イメージを再現することができる。
<第2の実施形態>
第1の実施形態のように、ステップS700のように画面を切り替えず、図14の1401に直接値を入力して、各デバイス毎のUI部品の幅を設定しても良い。その場合も、図12のデバイス切り替えボタンを押すことで、各デバイスでの表示イメージを表示することができる。図22を参照して、第2の実施形態を説明する。
図22は、本願発明に係るレスポンシブデザイン作成画面の一例を示す模式図である。
図22の2201は、レスポンシブルデザインによる画面生成の例を示しており、2211に各デバイス毎の画面幅に対するUI部品の幅の設定値入力画面が表示されている。この入力欄にUI部品のそれぞれデバイスにおける表示幅の割合の入力をユーザから図示しないキーボードなどから受け付けることで、それぞれのデバイスにおける表示幅を設定する。2211では、UI部品2221は、デスクトップ(パーソナルコンピュータ)で画面横幅の2/12、タブレットで3/12、スマートフォンで6/12と入力されている。
2211のように入力された際の、2201画面の左上にあるデバイス切り替えボタン1200のそれぞれのボタンを押下した際のイメージ画面をそれぞれ2202~2204に示す。
2202は、デスクトップ(パーソナルコンピュータ)ボタン1201が押下された際の画面イメージであり、UI部品2221は、2222のように画面横幅の2/12のサイズで表示されている。
2203は、タブレットボタン1202が押下された際の画面イメージであり、UI部品2221は、2223のように画面2203の横幅の3/12のサイズで表示されている。
2204は、スマートフォンボタン1203が押下された際の画面イメージであり、UI部品2221は、2224のように画面2204の横幅の6/12のサイズで表示されている。
なお、ブランクで表示されている2213や2214は、各デバイスの表示領域外として、何も表示しない領域であり、各デバイスの大きさ表示領域は変えることはできない。なお、各デバイスでも表示領域の大きさは図12の1210のように異なるので、表示領域の大きさを各デバイス内で変更できても良い。たとえば、スマートフォンの場合、スマートフォン2の画面サイズである375×812から、スマートフォン1やスマートフォン3などのスマートフォン内の異なるサイズの画面に切り替えられても良い。その際は画面の所定の位置に1210のデバイスタイプ(デバイスの名前)や画面サイズを表示しても良い。
以上のように、本願発明の第2の実施形態により、プログラム開発装置101においてデバイス毎に、1つ1つのUI部品のサイズを設定することができ、また、プログラム開発装置101において、プログラムをデプロイする前に、デバイス毎の表示イメージを再現することができる。
<第3の実施形態>
第1の実施形態や第2の実施形態は、デバイス毎にUI部品の横幅を制御していたが、他の実施形態として、デバイス毎に表示する形態を変える処理について、図23を参照して説明する。
図23は、本願発明に係るレスポンシブデザイン作成画面の一例を示す模式図である。
図23は、デスクトップ(パーソナルコンピュータ)表示の際に表示される2313の部分について、デバイス毎に表示形態を変える例である。
2301と2302は、デバイス毎の表示結果を設定している画面イメージであり、2311には、デスクトップ(パーソナルコンピュータ)表示とタブレット表示の際に、2313のUI部品をテーブル形式(結果テーブル)で表示する指定がされている。テーブル形式とは、リスト形式で表示することを示しており、リストの一段目には2313のように、項目名(商品イメージ、商品コード、商品名、メーカー、価格、数量)が表示され、二段目以降にそれぞれの項目の値が表示されている。
一方、2312には、スマートフォン表示の場合、2313のUI部品の内容をカード形式(結果カード)で表示する指定がされている。カード形式とは、1枚の単票として完結するような表示を示しており、カードには、2315のように、たとえば、予め設定されているフォーマットで各項目名(商品名、価格、数量など)と各項目の値(デスクトップXXX、160,000)を全てのカードに記載して表示している。
デバイス切り替えボタン1200のそれぞれのボタンを押下すると、それぞれの画面を2303~2305のように表示する。
2311で設定されているように、2313のUI部品は、デスクトップ(パーソナルコンピュータ)表示やタブレット表示では2313や2314のようにテーブル形式で1つの項目をリスト形式で表示することができる。
一方、2312での設定を反映し、スマートフォン表示で設定されたカード形式表示の場合は、2315のように、予め設定されたカード形式として表示することができる。
これらの設定はユーザにより変更することができ、たとえばタブレットの場合にもカード形式(結果カード)で表示するように指定されれば、タブレット表示の場合も、所定のフォーマットでのカード形式で表示することができる。
以上にように、本願発明の第3の実施形態により、プログラム開発装置101においてデバイス毎に、1つ1つのUI部品のサイズを設定することができ、横幅だけでなく、表示形態をも設定ことができる。また、プログラム開発装置101において、プログラムをデプロイする前に、デバイス毎の表示イメージを再現することができる。
以上のように、前述した実施形態の機能を実現するプログラムを記録した記録媒体を、システムあるいは装置に供給し、そのシステムあるいは装置のコンピュータ(又はCPUやMPU)が記録媒体に格納されたプログラムを読み出し、実行することによっても本発明の目的が達成されることは言うまでもない。
この場合、記録媒体から読み出されたプログラム自体が本発明の新規な機能を実現することになり、そのプログラムを記録した記録媒体は本発明を構成することになる。
プログラムを供給するための記録媒体としては、例えば、フレキシブルディスク、ハードディスク、光ディスク、光磁気ディスク、CD-ROM、CD-R、DVD-ROM、磁気テープ、不揮発性のメモリカード、ROM、EEPROM、シリコンディスク等を用いることが出来る。
また、コンピュータが読み出したプログラムを実行することにより、前述した実施形態の機能が実現されるだけでなく、そのプログラムの指示に基づき、コンピュータ上で稼働しているOS(オペレーティングシステム)等が実際の処理の一部又は全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。
さらに、記録媒体から読み出されたプログラムが、コンピュータに挿入された機能拡張ボードやコンピュータに接続された機能拡張ユニットに備わるメモリに書き込まれた後、そのプログラムコードの指示に基づき、その機能拡張ボードや機能拡張ユニットに備わるCPU等が実際の処理の一部又は全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。
また、本発明は、複数の機器から構成されるシステムに適用しても、ひとつの機器から成る装置に適用しても良い。また、本発明は、システムあるいは装置にプログラムを供給することによって達成される場合にも適応できることは言うまでもない。この場合、本発明を達成するためのプログラムを格納した記録媒体を該システムあるいは装置に読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。
上記プログラムの形態は、オブジェクトコード、インタプリタにより実行されるプログラムコード、OS(オペレーティングシステム)に供給されるスクリプトデータ等の形態から成ってもよい。
さらに、本発明を達成するためのプログラムをネットワーク上のサーバ、データベース等から通信プログラムによりダウンロードして読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。なお、上述した各実施形態及びその変形例を組み合わせた構成も全て本発明に含まれるものである。