特開 2022-101740 情報処理装置と、その処理方法及びプログラム

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

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

(11)【公開番号】P2022101740

(43)【公開日】2022-07-07

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

(51)【国際特許分類】

   G06F 8/34 20180101AFI20220630BHJP

   G06F 3/14 20060101ALI20220630BHJP

【ＦＩ】

G06F8/34

G06F3/14 310E

G06F3/14 310C

【審査請求】未請求

【請求項の数】11

【出願形態】ＯＬ

(21)【出願番号】P 2020215988

(22)【出願日】2020-12-25

(71)【出願人】

【識別番号】390002761

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

(71)【出願人】

【識別番号】592135203

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

(74)【代理人】

【識別番号】100189751

【弁理士】

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

(72)【発明者】

【氏名】辻 健太

(72)【発明者】

【氏名】高塚 剛

【テーマコード（参考）】

5B069

5B376

【Ｆターム（参考）】

5B069BB16

5B069CA06

5B069KA03

5B376BC07

5B376BC42

(57)【要約】

【課題】 デバイスの形態に応じたアプリケーション画面を容易に設計できる仕組みを提供すること
【解決手段】
アプリケーションで利用される画面の設定をする情報処理装置であって、画面を表示する形態の表示サイズを記憶する記憶手段と、前記画面に配置する画面部品に対して、前記記憶手段に記憶されている前記形態に対応する任意の表示制御値を設定する設定手段と、前記記憶手段に記憶されている表示サイズと前記設定手段に依り設定されている表示制御値を用いて、前記画面の表示において画面部品のサイズを制御する表示制御情報を生成する生成手段を有することを特徴とする。
【選択図】 図１

【特許請求の範囲】

【請求項1】

アプリケーションで利用される画面の設定をする情報処理装置であって、
画面を表示する形態の表示サイズを記憶する記憶手段と、
前記画面に配置する画面部品に対して、前記記憶手段に記憶されている前記形態に対応する任意の表示制御値を設定する設定手段と、
前記記憶手段に記憶されている表示サイズと前記設定手段に依り設定されている表示制御値を用いて、前記画面の表示において画面部品のサイズを制御する表示制御情報を生成する生成手段
を有することを特徴とする情報処理装置。

【請求項2】

前記設定手段は、前記表示制御値を、前記記憶手段に記憶されている前記形態により異なる値を設定することが可能であることを特徴とする請求項１に記載の情報処理装置。

【請求項3】

前記記憶手段に記憶された形態の表示サイズは、複数の形態の表示サイズを有し、
前記記憶手段により記憶されている複数の形態の表示サイズは、前記生成手段で生成される表示制御情報を表示制御するデバイスに依存する表示サイズとすることを特徴とする請求項１又は２に記載の情報処理装置。

【請求項4】

前記記憶手段は、前記アプリケーションで利用される画面の情報を入出力定義情報として記憶しており、
前記生成手段は、前記記憶手段に記憶されている入出力定義情報に基づいて、画面部品を表示制御情報として生成することを特徴とする請求項１乃至３に記載の情報処理装置。

【請求項5】

前記生成手段により生成される表示制御情報を、前記記憶手段で記憶されている形態の表示サイズで表示制御する表示制御手段を更に有することを特徴とする請求項１乃至４に記載の情報処理装置。

【請求項6】

前記表示制御手段により、前記形態の表示サイズで表示制御している際に、設定手段により設定される表示制御値の変更を受け付ける画面部品変更手段を有し、
前記設定手段は、前記画面部品変更手段により変更を受け付けた表示制御値は、前記表示制御手段で表示制御されている形態の表示サイズで表示制御しているときの表示制御値として設定することを特徴とする請求項５に記載の情報処理装置。

【請求項7】

前記記憶手段により記憶された複数の形態の表示サイズを、分類する分類手段と、
前記設定手段は、前記分類手段により分類された複数の形態の表示サイズ毎に、前記形態に対応する任意の表示制御値を設定することを特徴とする請求項１乃至６に記載の情報処理装置。

【請求項8】

前記分類手段は、前記生成手段で生成される表示制御情報を表示制御するデバイスの種類ごとにグループ化することを特徴とする請求項７に記載の情報処理装置。

【請求項9】

前記分類手段は、前記生成手段で生成される表示制御情報を表示制御するデバイスをパーソナルコンピュータ、タブレット、スマートフォンの何れかの表示サイズに分類することを特徴とする請求項７又は８に記載の情報処理装置。

【請求項10】

アプリケーションで利用される画面の設定をする、画面を表示する形態の表示サイズを記憶する記憶手段を有する情報処理装置における情報処理方法であって、
前記画面に配置する画面部品に対して、前記記憶手段に記憶されている前記形態に対応する任意の表示制御値を設定する設定ステップと、
前記記憶手段に記憶されている表示サイズと前記設定ステップに依り設定されている表示制御値を用いて、前記画面の表示において画面部品のサイズを制御する表示制御情報を生成する生成ステップ
を有することを特徴とする情報処理方法。

【請求項11】

アプリケーションで利用される画面の設定をする情報処理装置で動作可能なプログラムであって、
前記情報処理装置を
画面を表示する形態の表示サイズを記憶する記憶手段と、
前記画面に配置する画面部品に対して、前記記憶手段に記憶されている前記形態に対応する任意の表示制御値を設定する設定手段と、
前記記憶手段に記憶されている表示サイズと前記設定手段に依り設定されている表示制御値を用いて、前記画面の表示において画面部品のサイズを制御する表示制御情報を生成する生成手段
として動作させることを特徴とするプログラム。

【発明の詳細な説明】

【技術分野】

【0001】

本発明は、プログラムを生成するための情報処理装置と、その処理方法及びプログラムに関する。

【背景技術】

【0002】

従来から、入出力定義やデータモデル定義などを設定し、Ｗｅｂアプリケーションのプログラムを生成するアプリケーション開発ツールが存在する。

【0003】

Ｗｅｂアプリケーションのプログラムを生成する際に、Ｗｅｂデザインをする方法として大きく二つに分けると、レスポンシブデザインと、フィックスデザインに分かれる。

【0004】

フィックスデザインは、Ｗｅｂサイトの横幅・部品の横幅を固定してデザインする事でレイアウトが崩れる事を防ぐ手法である。

【0005】

レスポンシブデザインは、画面サイズに応じて、各部品の表示内容を変える事でレイアウトを行う手法である。

【0006】

レスポンシブデザインは、メディアクエリ技術を使う事が一般的である。

【0007】

メディアクエリは、各部品にデバイス毎のＣＳＳの設定を行う事で、１つのＨＴＭＬソースからデバイス毎にレイアウト表示を行う技術である。

【0008】

特許文献１には、表示装置の表示領域に対して表示する複数の情報のそれぞれについて、表示領域におけるサイズを計算し、複数の情報のそれぞれのサイズと表示領域のサイズとに基づいて表示領域に対する複数の情報の配置の可否を判定、配置できない場合に、複数の情報を、それぞれが表示領域に収まる複数の画面に分散させて割り当てて複数の情報の出力内容を生成することが記載されている。

【先行技術文献】

【特許文献】

【0009】

【特許文献1】特開２０２０－６０８０４号公報

【発明の概要】

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

【0010】

しかしながら、特許文献１の技術を利用しても、メディアクエリを作成するには困難な部分があった。たとえば、次のような課題が存在する。
１．各部品に対してデバイス毎のＣＳＳ設定を行う必要があり、部品の作りこみが必要である。
２．Ｗｅｂデザインの知識・スキルが無い人には難しく作成に時間がかかる。
３．作成したレイアウト内容を確認する為に、それぞれのデバイスにアプリケーションをビルド・デプロイする必要がある。

【0011】

本発明の目的は、デバイスの形態に応じたアプリケーション画面を容易に設計できる仕組みを提供することである。

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

【0012】

アプリケーションで利用される画面の設定をする情報処理装置であって、画面を表示する形態の表示サイズを記憶する記憶手段と、前記画面に配置する画面部品に対して、前記記憶手段に記憶されている前記形態に対応する任意の表示制御値を設定する設定手段と、前記記憶手段に記憶されている表示サイズと前記設定手段に依り設定されている表示制御値を用いて、前記画面の表示において画面部品のサイズを制御する表示制御情報を生成する生成手段を有することを特徴とする。

【発明の効果】

【0013】

本発明によれば、デバイスの形態に応じたアプリケーション画面を容易に設計できる仕組みを提供することができる。

【図面の簡単な説明】

【0014】

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

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

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

【図4】本発明の実施形態に係るプログラム開発装置の構成図である。

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

【図6】本発明の実施形態に係る入出力定義情報受付処理ならびに入出力定義取得処理の一部のフローチャートの一例を示す図である。

【図7】本発明の実施形態に係るレスポンシブ部品サイズ変更処理のフローチャートの一例を示す図である。

【図8】本発明の実施形態に係る新規ＵＩ作成画面の一例を示す模式図である。

【図9】本発明の実施形態に係るデザイン作成画面の一例を示す模式図である。

【図10】本発明の実施形態に係るフィックスデザイン作成画面の一例を示す模式図である。

【図11】本発明の実施形態に係るフィックスデザイン作成画面の一例を示す模式図である。

【図12】本発明の実施形態に係るレスポンシブデザイン作成画面の一例とデバイスタイプと画面サイズの対応を示す模式図である。

【図13】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

【図14】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

【図15】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

【図16】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

【図17】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

【図18】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

【図19】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

【図20】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

【図21】本発明の実施形態に係るＵＩ定義の一例を示す図である。

【図22】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

【図23】本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。

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

【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】

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

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】

【図11】

【図12】

【図13】

【図14】

【図15】

【図16】

【図17】

【図18】

【図19】

【図20】

【図21】

【図22】

【図23】