JP7381900B2 - Information processing system, its control method and program - Google Patents
Information processing system, its control method and program Download PDFInfo
- Publication number
- JP7381900B2 JP7381900B2 JP2020215988A JP2020215988A JP7381900B2 JP 7381900 B2 JP7381900 B2 JP 7381900B2 JP 2020215988 A JP2020215988 A JP 2020215988A JP 2020215988 A JP2020215988 A JP 2020215988A JP 7381900 B2 JP7381900 B2 JP 7381900B2
- Authority
- JP
- Japan
- Prior art keywords
- display
- screen
- input
- size
- displayed
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims description 50
- 230000010365 information processing Effects 0.000 title claims description 29
- 230000008859 change Effects 0.000 claims description 13
- 230000008569 process Effects 0.000 description 41
- 238000013461 design Methods 0.000 description 40
- 238000010586 diagram Methods 0.000 description 40
- 238000012545 processing Methods 0.000 description 19
- 230000006870 function Effects 0.000 description 13
- 230000007704 transition Effects 0.000 description 6
- 238000013499 data model Methods 0.000 description 4
- 238000011161 development Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 238000012790 confirmation Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- KNMAVSAGTYIFJF-UHFFFAOYSA-N 1-[2-[(2-hydroxy-3-phenoxypropyl)amino]ethylamino]-3-phenoxypropan-2-ol;dihydrochloride Chemical compound Cl.Cl.C=1C=CC=CC=1OCC(O)CNCCNCC(O)COC1=CC=CC=C1 KNMAVSAGTYIFJF-UHFFFAOYSA-N 0.000 description 1
- XUIMIQQOPSSXEZ-UHFFFAOYSA-N Silicon Chemical compound [Si] XUIMIQQOPSSXEZ-UHFFFAOYSA-N 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 238000012508 change request Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 229910052710 silicon Inorganic materials 0.000 description 1
- 239000010703 silicon Substances 0.000 description 1
Images
Landscapes
- Stored Programmes (AREA)
- Digital Computer Display Output (AREA)
Description
本発明は、ソフトウェアを生成するための情報処理システムと、その制御方法及びプログラムに関する。 The present invention relates to an information processing system for generating software , a control method thereof, and a program.
従来から、入出力定義やデータモデル定義などを設定し、Ｗｅｂアプリケーションのプログラムを生成するアプリケーション開発ツールが存在する。 Conventionally, there have been application development tools that set input/output definitions, data model definitions, etc. and generate Web application programs.
Ｗｅｂアプリケーションのプログラムを生成する際に、Ｗｅｂデザインをする方法として大きく二つに分けると、レスポンシブデザインと、フィックスデザインに分かれる。 When generating a program for a web application, the web design methods can be roughly divided into two: responsive design and fixed design.
フィックスデザインは、Ｗｅｂサイトの横幅・部品の横幅を固定してデザインする事でレイアウトが崩れる事を防ぐ手法である。 Fixed design is a method of fixing the width of a website and the widths of its components to prevent the layout from collapsing.
レスポンシブデザインは、画面サイズに応じて、各部品の表示内容を変える事でレイアウトを行う手法である。 Responsive design is a layout method that changes the display content of each component depending on the screen size.
レスポンシブデザインは、メディアクエリ技術を使う事が一般的である。 Responsive design generally uses media query technology.
メディアクエリは、各部品にデバイス毎のＣＳＳの設定を行う事で、１つのＨＴＭＬソースからデバイス毎にレイアウト表示を行う技術である。 Media query is a technology that displays a layout for each device from a single HTML source by setting CSS for each device for each component.
特許文献１には、表示装置の表示領域に対して表示する複数の情報のそれぞれについて、表示領域におけるサイズを計算し、複数の情報のそれぞれのサイズと表示領域のサイズとに基づいて表示領域に対する複数の情報の配置の可否を判定、配置できない場合に、複数の情報を、それぞれが表示領域に収まる複数の画面に分散させて割り当てて複数の情報の出力内容を生成することが記載されている。 Patent Document 1 discloses that the size in the display area of each of a plurality of pieces of information to be displayed in the display area of a display device is calculated, and the size of the display area is calculated based on the size of each piece of information and the size of the display area. It is described that it is possible to determine whether or not multiple pieces of information can be arranged, and if it is not possible to arrange the pieces of information, to generate output content of multiple pieces of information by distributing and allocating the pieces of information to multiple screens that each fit within the display area. .
しかしながら、特許文献１の技術を利用しても、メディアクエリを作成するには困難な部分があった。たとえば、次のような課題が存在する。
１．各部品に対してデバイス毎のＣＳＳ設定を行う必要があり、部品の作りこみが必要である。
２．Ｗｅｂデザインの知識・スキルが無い人には難しく作成に時間がかかる。
３．作成したレイアウト内容を確認する為に、それぞれのデバイスにアプリケーションをビルド・デプロイする必要がある。
However, even if the technology of Patent Document 1 is used, there are some difficulties in creating media queries. For example, the following issues exist:
1. It is necessary to perform CSS settings for each device for each component, and it is necessary to create the components.
2. It is difficult and time-consuming to create for people without web design knowledge and skills.
3. In order to check the created layout contents, it is necessary to build and deploy the application to each device.
本発明の目的は、デバイスの形態に応じたソフトウェアの画面を容易に設計できる仕組みを提供することである。 An object of the present invention is to provide a mechanism that allows easy design of software screens depending on the type of device.
特定の画面に表示される表示要素について、該表示要素の表示サイズに係る値をデバイスのタイプ毎に入力を受け付けるための入力領域を表示制御する表示制御手段と、
前記入力領域で受け付けた値であって、前記特定の画面を表示するデバイスのタイプに対応する値に基づく表示サイズで、前記表示要素が表示されるように制御するソフトウェアが生成されるように制御する制御手段と、
を有することを特徴とする。
Display control means for display-controlling an input area for accepting input of a value related to a display size of a display element displayed on a specific screen for each device type;
Control software is generated that controls the display element to be displayed at a display size based on a value accepted in the input area and that corresponds to a type of device displaying the specific screen. control means for;
It is characterized by having the following.
本発明によれば、デバイスの形態に応じたソフトウェアの画面を容易に設計できる仕組みを提供することができる。 According to the present invention, it is possible to provide a mechanism for easily designing a software screen according to the type of device.
＜第１の実施形態＞
図１は、本発明に係わるプログラム開発装置（開発者がＷｅｂアプリケーション生成のために使用する情報処理装置）、プログラム開発サーバ、データベースサーバ、アプリケーションクライアント（クライアント装置）、アプリケーションサーバ、Ｗｅｂサーバの構成の一例を示すシステム（情報処理システム）構成図である。
<First embodiment>
FIG. 1 shows the configuration of a program development device (an information processing device used by a developer to generate a Web application), a program development server, a database server, an application client (client device), an application server, and a Web server according to the present invention. FIG. 1 is a system (information processing system) configuration diagram showing an example.
プログラム開発装置１０１は、開発者の操作に従って画面レイアウト及びデータベース検索指示などを定義する。なお、プログラム開発装置１０１では、開発者の入力受付を行い、後述するプログラム開発サーバ１０２に実際のプログラム生成処理、アプリケーション生成処理を行うというように役割を分けてもよいし、プログラム開発装置１０１単体でプログラム生成、アプリケーション生成までを行ってもよい。
The
なお、この実施形態においては、プログラム開発装置１０１で生成するアプリケーションはＷｅｂアプリケーションとしたが、これに限定するものではなく、携帯電話・スマートフォン・タブレットなどの情報処理装置で動作するアプリケーションや組込みソフトウェアなど、Ｗｅｂ技術による通信を利用したアプリケーションでなくてもよい。
In this embodiment, the application generated by the
また、本実施形態においては、プログラム開発装置１０１によってアプリケーションのプログラムを生成するとしたが、プログラムの生成に限定するものではなく、開発者の操作に従って設定された定義を用いて、アプリケーションが動作する環境を構築するとしてもよい。
In addition, in this embodiment, the
プログラム開発サーバ１０２ａ～１０２ｂ（情報処理装置）は、プログラム開発装置１０１により入力された開発者の設定及び指示に従って、プログラムを生成する。プログラム開発サーバ１０２ａはＬＡＮなどのネットワーク１０７内に配置されてもよいし、プログラム開発サーバ１０２ｂはインターネット上やクラウド上に配置されてもよい。
The
データベースサーバ１０３ａ～１０３ｂ（情報処理装置）は、開発されたアプリケーションが使用するデータベースであり、また本発明では開発時にも動作確認などのために利用してもよい。例えば、開発者が利用するためにデータベースサーバ１０３は、プログラム開発装置１０１と同一の装置で構成されていてもよいし、ＬＡＮなどのネットワーク１０７内に配置されてもよい（データベースサーバ１０３ａ）。またインターネット上やクラウド上に配置されてもよい（データベースサーバ１０３ｂ）。また、プログラム開発装置１０１が、プログラム開発サーバ１０２と協調する場合には、プログラム開発サーバ１０２とデータベースサーバ１０３が同一の装置内に構成されていてもよい。
The
アプリケーションサーバ１０５（情報処理装置）は、プログラム開発装置１０１で生成されたアプリケーションプログラムを実行する。アプリケーションサーバ１０５は、ＬＡＮなどのネットワーク１０７内に配置されてもよいし、またインターネット上やクラウド上に配置されてもよい（アプリケーションサーバ１０５）。また、ネットワーク１０７、インターネット、クラウド上のデータベースサーバ１０３と接続して動作することが可能である。
The application server 105 (information processing device) executes the application program generated by the
アプリケーションクライアント１０４ａ～１０４ｂ（情報処理装置）は、アプリケーションサーバ１０５と協調してプログラム開発装置１０１で開発したアプリケーションプログラムを動作させる、ユーザの入力端末である。ＬＡＮなどのネットワーク１０７内に配置されてもよい（アプリケーションクライアント１０４ａ）し、またインターネット上やクラウド上に配置されてもよい（アプリケーションクライアント１０４ｂ）。携帯端末などの情報処理装置であってもよい。
The
Ｗｅｂサーバ１０６（情報処理装置）は、プログラム開発装置１０１で生成されたアプリケーションプログラムを実行して、アプリケーションクライアント１０４からのリクエストに応じて送信する。Ｗｅｂサーバ１０６は、ＬＡＮなどのネットワーク１０７内に配置されてもよいし、またインターネット上やクラウド上等に配置されてもよい。
The web server 106 (information processing device) executes the application program generated by the
なお、本実施形態においては、アプリケーションサーバ１０５とＷｅｂサーバ１０６は別筐体の情報処理装置としたが、これに限定するものではなく、１つの情報処理装置であっても、仮想環境上に構築されてもよい。
Note that in this embodiment, the
図２は、本発明に係わるプログラム開発装置１０１、プログラム開発サーバ１０２、データベースサーバ１０３、アプリケーションクライアント１０４、アプリケーションサーバ１０５として適用可能な各ハードウェア構成の一例を示すブロック図である。
FIG. 2 is a block diagram showing an example of each hardware configuration applicable to the
図２において、ＣＰＵ２０１は、システムバス２０４に接続される各デバイスを統括的に制御する。
In FIG. 2, a
また、ＲＯＭ２０３あるいは外部メモリ２１１には、ＣＰＵ２０１の制御プログラムであるオペレーティングシステム（ＯＳ）や、各サーバ、クライアント、装置など情報処理装置の後述する各種機能を実現するためのプログラムが記憶されている。
Further, the
ＲＡＭ２０２は、ＣＰＵ２０１の主メモリ、ワークエリア、一時待避領域等として機能する。
The
入力コントローラ２０５は、入力部２０９からの入力を制御する。この入力部２０９としては、情報処理装置では、キーボード、マウス等のポインティングデバイスが挙げられる。
出力コントローラ２０６は、出力部２１０の表示を制御する。この出力部２１０としては、例えば、ＣＲＴや液晶ディスプレイ等が挙げられる。
The
外部メモリコントローラ２０７は、ブートプログラム、各種のアプリケーション、フォントデータ、ユーザーファイル、編集ファイル、プリンタドライバ等を記憶する外部メモリ２１１へのアクセスを制御する。加えて、各サーバ、クライアント、装置等の各種機能を実現するための各種テーブル、パラメータが記憶されている。この外部メモリ２１１としては、ハードディスク（ＨＤ）やフレキシブルディスク（ＦＤ）、ＰＣＭＣＩＡカードスロットにアダプタを介して接続されるコンパクトフラッシュ（登録商標）、スマートメディア等が挙げられる。
An
通信Ｉ／Ｆコントローラ２０８は、ネットワークを介して外部機器との通信制御処理を実行する。
The communication I/
本発明を実現するためのプログラム２１２は外部メモリ２１１に記録されており、必要に応じてＲＡＭ２０２にロードされることによりＣＰＵ２０１によって実行されるものである。
A
図３は、本発明の実施の形態のソフトウェア構成を示すブロック図の一例である。 FIG. 3 is an example of a block diagram showing the software configuration of the embodiment of the present invention.
プログラム開発装置１０１は、以下の機能部を備える。
The
入出力定義管理部３０１は、アプリケーションの画面を介して入力される項目を定義する入力定義情報と画面に出力する項目を定義する出力定義情報とを入出力定義情報として管理する機能部である。
The input/output
プログラム生成部３０２は、入出力定義情報やデータモデル定義情報、ビジネルモデル定義情報を用いて、アプリケーションとして用いられるプログラムを生成する機能部である。プログラム生成部３０２は、入出力定義情報から、画面に表示するＨＴＭＬファイルを生成し、ＣＳＳファイルにブラウザのサイズ毎（表示するデバイスの画面サイズ毎）に表示形態を変えるメディアクエリを生成し、画面サイズ（画面を表示する形態の表示サイズ）によるスタイルの違いを構成することができる。 The program generation unit 302 is a functional unit that generates a program used as an application using input/output definition information, data model definition information, and business model definition information. The program generation unit 302 generates an HTML file to be displayed on the screen from the input/output definition information, generates a media query in the CSS file that changes the display format for each browser size (for each display device screen size), and Differences in styles can be configured based on size (display size of screen display format).
ブラウザサイズ受付部３０３は、ユーザからの入力により、プログラム開発装置１０１のディスプレイ２１０に表示するブラウザの表示サイズを受け付ける機能部である。図１２を参照して後述する。
The browser
デバイス受付部３０４は、ユーザからの入力により、プログラム開発装置１０１のディスプレイ２１０に表示するブラウザの表示サイズをデバイス毎に受け付ける機能部である。図１２を参照して後述する。
The device reception unit 304 is a functional unit that accepts the display size of the browser to be displayed on the
表示形態変更部３０５は、ブラウザサイズ受付部３０３で受け付けたブラウザの表示サイズにより、ＵＩ部品の表示形態を変更する機能部である。表示形態変更部３０５は、分類部３０９で分類されたデバイス毎に、部品のサイズや表示形態を変えることができる。図２２や図２３を参照して後述する。
The display
設定部３０６は、プログラム生成部で生成され実行時に表示されるＵＩ部品のサイズを設定する機能部であり、表示するブラウザの表示サイズによって、表示されるＵＩ部品のサイズを、ブラウザの表示サイズの設定された割合で表示させるために、ユーザからの入力を受け付けることもできる。図１４を参照して後述する。
The
表示制御部３０７は、設定部で受け付けた所定の割合でＵＩ部品を表示したり、ブラウザ上にデバイス毎のブラウザの表示サイズで実行時に表示される画面を表示制御する機能部である。 The display control unit 307 is a functional unit that displays UI parts at a predetermined ratio accepted by the setting unit and controls the display of a screen displayed on the browser at the display size of the browser for each device during execution.
記憶部３０８は、複数のデバイスと各デバイスで表示される画面サイズ（画面を表示する形態の表示サイズ）とを対応付けて記憶する機能部である。図１２の１２１０を参照して後述する。 The storage unit 308 is a functional unit that associates and stores a plurality of devices and the screen size displayed by each device (the display size of the form in which the screen is displayed). This will be described later with reference to 1210 in FIG.
また、記憶部３０８は、設定部で設定される、実行時に表示されるＵＩ部品のサイズを記憶する。この記憶部３０８は、外部メモリ２１１に記憶されていても良いし、ＲＡＭ２０２に記憶されていてもよく、ＤＢサーバ１０３に記憶されていても良い。
Furthermore, the storage unit 308 stores the size of the UI component to be displayed during execution, which is set by the setting unit. This storage unit 308 may be stored in the
分類部３０９は、複数のデバイスをパーソナルコンピュータ、タブレット、スマートフォンに分類する機能部である。図１２の１２１０を参照して後述する。 The classification unit 309 is a functional unit that classifies multiple devices into personal computers, tablets, and smartphones. This will be described later with reference to 1210 in FIG.
生成部３１０は、設定部３０６で設定されるＵＩ部品のサイズを、表示するブラウザの表示サイズによって表示制御（表示するブラウザの表示サイズによってＵＩ部品のサイズを変更制御）するための表示制御情報（ＵＩ定義）を生成する機能部である。生成部３１０により生成される表示制御情報を利用して、プログラム生成部３０２は、ＣＳＳファイルにブラウザのサイズ毎（表示するデバイスの画面サイズ毎）に表示形態を変えるメディアクエリを生成する。図２１を参照して生成されるＵＩ定義の例を後述する。
The
画面部品変更部３１１は、表示制御部３０７がブラウザ上でデバイス毎のブラウザの表示サイズでプログラム実行時に表示される画面を表示制御している際に、ＵＩ部品のサイズ変更を受け付ける機能部である。図１６、図１８、図２０を参照して後述する。 The screen component changing unit 311 is a functional unit that accepts changes in the size of UI components when the display control unit 307 is controlling the display of the screen displayed during program execution on the browser at the display size of the browser for each device. . This will be described later with reference to FIGS. 16, 18, and 20.
図４は、プログラム開発装置１０１の構成図である。
FIG. 4 is a configuration diagram of the
プログラム開発装置１０１は、リポジトリ定義部４０１、Ｗｅｂアプリケーション生成部４１５及び画面定義部４１９を備える。
The
プログラム開発装置１０１は、Ｗｅｂアプリケーションを開発する開発者により設定されたリポジトリ定義部４０１の各定義を用いて、Ｗｅｂアプリケーション生成部４１５によりＷｅｂアプリケーション４３８を生成する。
The
また、プログラム開発装置１０１は、リポジトリ定義部４０１には、アプリケーション定義４０２、入出力定義４０３、データモデル定義４０４、ビジネスプロセス定義４０５、画面部品定義４０６、アクション定義４０７、デスクトップ（パーソナルコンピュータ）用画面部品定義４０８、タブレット用画面部品定義４０９、スマートフォン用画面部品定義４１０が記憶されている。これら４０２～４１０の定義は、Ｗｅｂアプリケーション開発ツールを介して、開発者によって入力設定または配置される。
The
なお、入出力定義４０３は、入力項目定義情報及び出力項目定義情報を含む。入力項目定義情報は、生成されたＷｅｂアプリケーションの画面を介して当該Ｗｅｂアプリケーションのユーザが入力する入力項目を定義した情報である。出力項目定義情報は、生成されたＷｅｂアプリケーションの画面に出力する出力項目を定義した情報である。以降、「入力項目定義情報」及び「出力項目定義情報」をまとめて「入出力項目定義情報」と呼ぶ。
Note that the input/
また、画面部品定義４０６は、Ｗｅｂアプリケーション開発ツールの画面レイアウトエディタ（不図示）を用いて生成された画面レイアウトをＨＴＭＬ等に変換した画面情報である。なお、画面レイアウトエディタによる画面レイアウトの作成は、開発者がたとえば入出力定義画面９００（図９）における入出力定義４０３の設定と並行して行う作業である。画面レイアウトエディタを用いて、入出力項目（キャプション、ボタン、テキストボックス等）の配置を設定しつつ、入出力定義画面９００を用いて、その入出力項目の属性１００２（図１０）を設定する。
Further, the
デスクトップ用、タブレット用、スマートフォン用のそれぞれの画面部品定義４０８、４０９、４１０は、画面レイアウトエディタを用いて、それぞれの端末における画面部品（ＵＩ部品）の表示幅を制御するように指定することができる（図１５、図１７、図１９）。また、画面部品の表示幅は、その入出力項目の属性入力欄１３０１（図１３）にそれぞれ設けられている表示幅割合入力欄１４０１（図１４）で設定されても良い。図１４の１４０１は、デバイス毎の表示制御値の一例を示すものである。
よって、リポジトリ定義部４０１は、生成されたプログラムの実行によって表示されるアプリケーションの画面を介して入力される項目を定義する入力定義情報と画面に出力する項目を定義する出力定義情報とを入出力定義情報として管理する手段の一例である。
Therefore, the
Ｗｅｂアプリケーション生成部４１５は、Ｗｅｂアプリケーション生成用のリポジトリ定義解析部４１６を用いてリポジトリ定義部４０１に記憶されている各定義を解析し、Ｗｅｂアプリケーションコード生成部４１７及びソースコードコンパイル部４１８を介し、コンパイル済Ｊａｖａ（登録商標）コード４３９及びＨＴＭＬ／ＪＳＰ／ＪａｖａＳｃｒｉｐｔ（登録商標）４４０を含むＷｅｂアプリケーション４３８を生成する。すなわち、入出力定義情報を用いて、前記アプリケーションとして用いられるプログラムを生成する手段の一例である。
The web
画面定義部４１９は、生成されるべきＷｅｂアプリケーションの画面周りを編集するツールを有しており、具体的に画面定義エディタ部４２０、画面プロパティエディタ部４２１、部品パレット部４２３、レスポンシブ部品サイズ変更部４２４を有している。
The
画面定義エディタ部４２０は、図９の９０２部分に該当し、部品パレット部４２３である９０１から部品を９０３のように配置して生成されるＷｅｂアプリケーションの画面周りを編集する。
The screen
画面プロパティエディタ部４２１は、図１０の１００２にある画面から、入出力項目の属性を設定することができる。
The screen
部品パレット部４２３は、図９の９０１部分に該当し、画面に配置する様々なＵＩ部品がリストとして登録されている。９０１内にあるＵＩ部品がユーザのドラッグ＆ドロップなどの操作により図９の９０３の位置に移動されて、Ｗｅｂアプリケーションの構成を成す画面を９０２（画面定義エディタ部４２０）に生成できる。
The
レスポンシブ部品サイズ変更部４２４は、図１２の１２００で図示した選択ボタンであるデスクトップ（パーソナルコンピュータ）ボタン１２０１、タブレットボタン１２０２、スマートフォンボタン１２０３によって、ディスプレイ２１０に表示されるブラウザの表示領域を切り替えた際に、画面部品（ＵＩ部品）のサイズを変更して表示する機能を有する。
When the responsive component
たとえば、図２２の画面定義エディタ部２２０１に表示されている情報をデスクトップ（パーソナルコンピュータ）モードで表示すると、２２０２のように表示される。画面定義エディタ部２２０１で表示されている画面部品（ＵＩ部品）２２２１は、２２１１のデスクトップ幅に設定された「２」という数字を元に、画面部品（ＵＩ部品）２２２１の表示幅を決定する。具体的には、画面部品（ＵＩ部品）２２２１は、デスクトップモード２２０２の全画面サイズの横幅の２／１２で表示されている（２２２２）。この様に本実施例では、画面部品（ＵＩ部品）の幅サイズを、表示されているモードの全画面サイズの横幅の１２等分のいくつかで指定している。なお、この１２等分についてはユーザによって６等分や２４等分などに変更できても良い。
For example, when the information displayed in the screen
一方、図２２の画面定義エディタ部２２０１に表示されている情報をタブレットモードで表示する（図１２のタブレットボタン１２０２が押下される）と、２２０３のようにタブレットサイズで画面が表示され、タブレットサイズで表示できないエリア２２１３はブランク（表示対象外領域として）表示されている。画面部品（ＵＩ部品）２２２１は、画面サイズの横幅の３／１２で表示されている（２２２３）。
On the other hand, when the information displayed in the screen
また、図２２の画面定義エディタ部２２０１に表示されている情報をスマートフォンモードで表示する（図１２のスマートフォンボタン１２０３が押下される）と、２２０４のようにスマートフォンサイズで画面が表示され、スマートフォンサイズで表示できないエリア２２１４はブランク（表示対象外領域として）表示されている。画面部品（ＵＩ部品）２２２１は、画面サイズの横幅の６／１２＝１／２の幅で表示されている（２２２４）。
Furthermore, when the information displayed in the screen
以上のように、レスポンシブ部品サイズ変更部４２４は、選択されるデバイスボタン（図１２の１２００）によりＵＩ部品サイズ（２２２２、２２２３、２２２４）を変更して、プログラムをデプロイする前に表示することができる。その後、画面定義エディタ部４２０に部品サイズを送信し、図２２のように画面定義に反映する。
As described above, the responsive component
データベース４４１は、アプリケーションサーバ４４２で実行されるアプリケーションにより呼び出されるデータを管理するデータベースサーバ１０３が有する機能部である。
The
端末ブラウザ４４３は、アプリケーションクライアント１０４のディスプレイ２１０で表示される機能部であり、アプリケーションサーバ４４２で実行、送信される情報を表示することができる。
The
図５は、Ｗｅｂアプリケーション生成のフローチャートの一例を示す図である。 FIG. 5 is a diagram illustrating an example of a flowchart for generating a web application.
プログラム開発装置１０１は、リポジトリ定義部４０１の各定義をファイルとして管理する。なお、本実施形態においては、リポジトリ定義部４０１の各定義をファイルとして管理するとしたが、これに限定するものではなく、例えば、データベースを用いてリポジトリ定義部４０１の各定義を管理してもよいし、クラウドなどネットワーク上の記憶装置を用いて管理する等としてもよい。
The
Ｗｅｂアプリケーション生成のフローチャートについて説明する。 A flowchart for generating a web application will be described.
ステップＳ５０１において、プログラム開発装置１０１は、リポジトリ定義部４０１からアプリケーション定義４０２を取得する。
In step S501, the
ステップＳ５０２において、プログラム開発装置１０１は、リポジトリ定義部４０１からデータモデル定義４０４を取得する。
In step S502, the
ステップＳ５０３において、プログラム開発装置１０１は、入出力定義情報の入力をユーザ（開発者）から受け付け、リポジトリ定義部４０１に登録する。詳細は図６で後述する。
In step S503, the
ステップＳ５０４において、プログラム開発装置１０１は、リポジトリ定義部４０１から入出力定義４０３を取得する。
In step S504, the
ステップＳ５０５において、プログラム開発装置１０１は、リポジトリ定義部４０１からビジネスプロセス定義４０５を取得する。
In step S505, the
ステップＳ５０６において、プログラム開発装置１０１は、リポジトリ定義部４０１からデータベース定義４０６を取得する。
In step S506, the
ステップＳ５０７において、プログラム開発装置１０１は、Ｗｅｂアプリケーション生成部４１５を用いて、Ｗｅｂアプリケーション４３８に用いるプログラムを生成する。ステップＳ５０７では、ステップＳ５０４で取得した入出力定義から、画面に表示するＨＴＭＬファイルを生成し、ＣＳＳファイルにブラウザの表示サイズ毎（表示するデバイスの画面サイズ毎）に表示形態を変えるメディアクエリを使って、画面サイズによるスタイルの違いを構成することができる。すなわち、ステップＳ５０７は、アプリケーションとして用いられるプログラムを生成し、出力される画面をデバイス毎にレスポンシブに表示させるＣＳＳファイルを生成する処理の一例を示すステップである。
In step S507, the
ステップＳ５０８において、プログラム開発装置１０１は、ステップＳ５０７にて生成したプログラムをアプリケーションサーバ１０５に配置（デプロイ）する。
In step S508, the
上記処理により、生成されたＷｅｂアプリケーション４３８はアプリケーションサーバ１０５（４４２）上で実行されるプログラムとして稼働する。
Through the above processing, the generated
以上で、図５のＷｅｂアプリケーション生成のフローチャートの説明を終了する。 This concludes the explanation of the flowchart of Web application generation in FIG. 5.
図６は、入出力定義情報受付処理の詳細のフローチャートの一例を示す図である。 FIG. 6 is a diagram showing an example of a detailed flowchart of the input/output definition information reception process.
ステップＳ６００において、プログラム開発装置１０１は、Ｗｅｂブラウザに表示するＵＩをフィックスデザインとするか、レスポンシブデザインとするかの選択を受け付ける。図８を参照して、ステップＳ６００の処理を説明する。
In step S600, the
図８は、本発明の実施形態に係る新規ＵＩ作成画面の一例を示す模式図である。 FIG. 8 is a schematic diagram showing an example of a new UI creation screen according to the embodiment of the present invention.
図８は、プログラム開発装置１０１が表示制御する、ユーザ（開発者）からＷｅｂブラウザに表示するＵＩをフィックスデザインとするか、レスポンシブデザインとするかを受け付ける画面のイメージの一例として示した図である。
FIG. 8 is a diagram showing an example of an image of a screen that is controlled by the
図８の８０１にあるチェックボックス８０１は、表示するＵＩをレスポンシブデザインとする場合にチェックを入力する項目であり、図８はレスポンシブ（マルチデバイス用）チェックボックス８０１にチェックが入っているため、“ｒｅｓｐｏｎｓｉｖｅ”という画面名の画面８０２はレスポンシブデザインでＵＩが作成される。図６のフローチャートの説明に戻る。
The
図６のステップＳ６０１において、プログラム開発装置１０１は、ユーザ（開発者）からＷｅｂブラウザに表示する画面上の部品の配置を受け付ける。図９を参照して、ステップＳ６０１の処理を説明する。
In step S601 in FIG. 6, the
図９は、本発明の実施形態に係るデザイン作成画面の一例を示す模式図である。 FIG. 9 is a schematic diagram showing an example of a design creation screen according to an embodiment of the present invention.
図９は、プログラム開発装置１０１が表示制御する、ユーザ（開発者）がＵＩ部品をアプリケーション表示画面に配置させる画面のイメージの一例として示した図である。
FIG. 9 is a diagram illustrating an example of a screen that is display-controlled by the
図９の９００には、画面に配置するＵＩ部品のリストが９０１（部品パレット部４２３）のように表示されており、ユーザによりエディタ画面部分９０２（画面定義エディタ部４２０）にドラッグ＆ドロップされることで、Ｗｅｂアプリケーション生成時のＷｅｂブラウザに表示される画面上の部品の配置を受け付ける。 In 900 of FIG. 9, a list of UI components to be placed on the screen is displayed as 901 (parts palette section 423), and the list is dragged and dropped by the user to the editor screen section 902 (screen definition editor section 420). By doing so, the arrangement of components on the screen displayed on the Web browser when the Web application is generated is accepted.
エディタ画面部分９０２の例では、部品パレット部分９０１からテキストエリアが選択されて、図示しないマウスなどのドラッグ＆ドロップによって、９０３の位置に配置している。
In the example of the
配置した９０３のＵＩ部品は、デフォルトでＵＩ部品のサイズ幅情報を持っており、ＵＩ部品を配置した当初はそのデフォルト値のＵＩ部品サイズ幅で表示している。
The placed
なお、画面部品の配置方法は、部品パレット部４２３から画面定義エディタ部４２０へのドラッグ＆ドロップに限らず、既に配置した部品を画面定義エディタ部内で移動する方法や、既に配置した部品を画面定義エディタ部内でコピー＆ペーストにより複製する方法であってもよい。また、一度配置した部品を削除できてもよい。図６のフローチャートの説明に戻る。
Note that the method for arranging screen components is not limited to drag and drop from the
図６のステップＳ６０２において、プログラム開発装置１０１は、ステップＳ６００にて入力されたレスポンシブデザインかどうかの設定により、以降の処理を分ける。ステップＳ６００において、表示するＵＩをレスポンシブデザインで生成すると設定されている場合は、ステップＳ６０６へと処理を遷移し、フィックスデザインで生成すると設定されている（図８の８０１のチェックボックスが入っていない）場合は、ステップＳ６０３へと処理を遷移する。すなわち、ステップＳ６０３以降の処理はフィックスデザインで画面ＵＩを生成する場合の処理の流れとなる。
In step S602 of FIG. 6, the
ステップＳ６０３へと遷移すると、プログラム開発装置１０１は、画面上にプロパティ入力部（画面プロパティエディタ部４２１）を表示し、その中に部品の幅を指定するプロパティの入力欄を表示する。図１０、図１１を参照して、ステップＳ６０３の処理を説明する。
When the process moves to step S603, the
図１０は、本発明の実施形態に係るフィックスデザイン作成画面の一例を示す模式図である。 FIG. 10 is a schematic diagram showing an example of a fixed design creation screen according to an embodiment of the present invention.
図１０は、プログラム開発装置１０１が表示制御する、ユーザ（開発者）がＵＩ部品の幅を変更するイメージの一例として示した図である。
FIG. 10 is a diagram illustrating an example of an image in which a user (developer) changes the width of a UI component whose display is controlled by the
図１０の１００２は、指定されているＵＩ部品（１０００の場合、１００３）のプロパティ入力部（画面プロパティエディタ部４２１）を表示している。プロパティ入力部１００２の中にＵＩ部品の幅を入力する入力欄を表示している。以降、１００３のように、四角枠の各辺の中点に黒丸が付いているＵＩ部品は、画面定義エディタ部４２０（図９の９０２）において選択されているＵＩ部品を指し示しており、以降に開示されているプロパティ入力部（たとえば、１００２や図１３の１３０１など）は、四角枠の各辺の中点に黒丸が付いているＵＩ部品のプロパティの入力を受け付ける。
1002 in FIG. 10 displays the property input section (screen property editor section 421) of the specified UI component (1003 in the case of 1000). An input field for inputting the width of the UI component is displayed in the
なお、図１０では、画面プロパティエディタ部４２１を画面右側（１００２）に表示しているが、四角枠の各辺の中点に黒丸が付いているＵＩ部品（選択されたＵＩ部品）の画面プロパティエディタ部４２１を、たとえば図１１の１１０２のようにモーダルダイアログ上に表示してもよい。その場合も、ＵＩ部品の幅を入力する入力欄１１０１を表示している。図６のフローチャートの説明に戻る。
In addition, in FIG. 10, the screen
次のステップＳ６０４において、プログラム開発装置１０１は、ステップＳ６０３にて表示したＵＩ部品の幅を入力する入力欄１００１や１１０１にユーザからの入力があったかを判断する。ユーザからのＵＩ部品の幅の入力があった場合は、ステップＳ６０５へと処理を遷移し、ユーザからの入力がない（すなわち、それぞれのデバイスにおけるＵＩ部品の幅がデフォルト値でよいとユーザが判断した）場合は、図６のフローチャートの処理を終え、ステップＳ６０９へと処理を遷移する。
In the next step S604, the
ステップＳ６０５へと処理を遷移すると、プログラム開発装置１０１は、ステップＳ６０３にて表示したＵＩ部品の幅の値を取得し、入出力定義に入力する。
When the process transitions to step S605, the
その後、ステップＳ６０９へと処理を遷移し、プログラム開発装置１０１は、他の部品の配置が終了したかの入力を受け付ける。他の部品の配置が終了していれば、図６のフローチャートは終了し、図５のステップＳ５０４へと遷移する。また、ステップＳ６０９で、ユーザが更に他のＵＩ部品を配置するとした場合は、ステップＳ６０１へと処理を遷移し、別の部品の配置や既存の部品の位置移動などを受け付ける処理を繰り返す。
Thereafter, the process transitions to step S609, and the
一方、ステップＳ６０２において、ステップＳ６００にて入力されたレスポンシブデザインかどうかの設定がレスポンシブデザインであった（図８の８０１にチェックがある）場合、ステップＳ６０６へと処理を遷移する。
On the other hand, in step S602, if the setting for responsive design input in step S600 is responsive design (
ステップＳ６０６において、プログラム開発装置１０１は、画面上にプロパティ入力部（画面プロパティエディタ部４２１）を表示し、その中に部品の幅を指定するプロパティの入力欄を表示する。図１３、図１４を参照して、ステップＳ６０６の処理を説明する。
In step S606, the
図１３は、本発明の実施形態に係るレスポンシブデザイン作成画面の一例を示す模式図である。 FIG. 13 is a schematic diagram showing an example of a responsive design creation screen according to an embodiment of the present invention.
図１３は、プログラム開発装置１０１が表示制御する、ユーザ（開発者）がＵＩ部品の幅を変更するイメージの一例として示した図である。
FIG. 13 is a diagram illustrating an example of an image in which a user (developer) changes the width of a UI component whose display is controlled by the
図１３の１３０１は、指定されているＵＩ部品（１０００の場合、１００３）のプロパティ入力部（画面プロパティエディタ部４２１）を表示している。プロパティ入力部１３０１の中にＵＩ部品の幅をデバイス毎に入力する入力欄１４０１を有している。プロパティ入力部１３０１（画面プロパティエディタ部４２１）は、たとえば、画面定義エディタ部４２０（図１３の１３０２）内の選択中のＵＩ部品１３０３への属性情報の入力を受け付ける。なお、入力欄１４０１は、デバイス毎の表示制御値の一例を示すものである。
1301 in FIG. 13 displays the property input section (screen property editor section 421) of the specified UI component (1003 in the case of 1000). The property input section 1301 includes an
なお、画面プロパティエディタ部４２１は、図１１でも説明したようにモーダルダイアログ上に表示してもよい。図６のフローチャートの説明に戻る。
Note that the screen
次に図６のステップＳ６０７において、プログラム開発装置１０１は、デバイス毎の部品サイズが変更されたかどうかの判断を行う。デバイス毎の部品サイズが変更されたかどうかは、図１４の１４０１のデバイス毎の幅プロパティの値がユーザにより変更されたかによって判断する。値が変更された場合は、ステップＳ６０８へと処理を遷移し、各デバイス毎の部品サイズを変更する処理を行う。詳細は図７を参照して説明する。
Next, in step S607 of FIG. 6, the
なお、図７で説明するように、部品サイズをマウスのドラッグ＆ドロップなどによって指定する方法でも良いし、図１４の１４０１の幅プロパティの入力欄へ直接入力、もしくはプルダウンから選択できるようにしても良い。また、部品サイズの変更要求を受け付ける部品は、個々の部品ごとに設定しても良いし、複数の部品をまとめても設定しても良い。
As explained in Fig. 7, the component size can be specified by dragging and dropping with the mouse, or it can be entered directly into the width
一方、ステップＳ６０７において、デバイス毎の部品サイズが変更されていない、すなわち、図１４の１４０１のデバイス毎の部品の幅プロパティの値がユーザにより変更されていない（ユーザがデフォルトのそれぞれの部品サイズで良いと判断した）場合は、デフォルトのデバイス毎のＵＩ部品幅サイズ（１４０１）は変更せず、ステップＳ６０９へと遷移する。 On the other hand, in step S607, the component size for each device has not been changed, that is, the value of the component width property for each device in 1401 in FIG. ), the default UI component width size (1401) for each device is not changed and the process moves to step S609.
ステップＳ６０９へと遷移すると、プログラム開発装置１０１は、他の部品の配置が終了したかの入力を受け付ける。他の部品の配置が終了していれば、図６のフローチャートは終了し、図５のステップＳ５０４へと遷移する。また、ステップＳ６０９で、ユーザが更に他のＵＩ部品を配置するという入力を受け付けた場合は、ステップＳ６０１へと処理を遷移し、別の部品の配置や既存の部品の位置移動などを受け付ける処理を繰り返す。
When the process moves to step S609, the
図７を参照して、本発明の実施形態に係るレスポンシブ部品サイズ変更処理の流れを説明する。 With reference to FIG. 7, the flow of responsive component size change processing according to the embodiment of the present invention will be described.
図７は、本発明のレスポンシブ部品サイズを変更するフローチャートの一例を示す図である。 FIG. 7 is a diagram showing an example of a flowchart for changing the responsive component size of the present invention.
ステップＳ７００において、プログラム開発装置１０１は、ユーザから、画面定義エディタ部４２０のイメージをデスクトップ形式にするか、タブレット形式にするか、スマートフォン形式にするかの選択を受け付ける。
In step S700, the
図１２の１２００を参照して、ユーザのデバイス選択を受け付けるイメージを説明する。 An image of accepting a user's device selection will be described with reference to 1200 in FIG.
図１２の１２００には、デスクトップ（パーソナルコンピュータ）ボタン１２０１、タブレットボタン１２０２、スマートフォンボタン１２０３が配置されている。
At 1200 in FIG. 12, a desktop (personal computer)
図１２の１２００で図示した各選択ボタンが押下されると、各デバイスの形態に対応する表示サイズと設定値を用いて、表示領域を記憶部３０８に記憶された表示サイズに変更する。表示領域を変更後、画面に表示されている画面部品（ＵＩ部品）のサイズを、デバイスごとに変更することで、デバイスごとの画面部品（ＵＩ部品）のサイズを編集することができる。以下に各ボタンが押下された際の処理の流れを説明する。 When each selection button illustrated at 1200 in FIG. 12 is pressed, the display area is changed to the display size stored in the storage unit 308 using the display size and setting value corresponding to the type of each device. After changing the display area, by changing the size of the screen parts (UI parts) displayed on the screen for each device, it is possible to edit the size of the screen parts (UI parts) for each device. The flow of processing when each button is pressed will be explained below.
デスクトップ（パーソナルコンピュータ）ボタン１２０１が押下されると、次のステップＳ７０１へと処理を遷移し、プログラム開発装置１０１は、図１５の１５０２に記載した画面定義エディタ部４２０を表示する。すなわち、デスクトップ画面イメージである１９２０×１０８０の画面を１５０２の画面定義エディタ部に表示する。
When the desktop (personal computer)
ステップＳ７００において、タブレットボタン１２０２が押下されると、ステップＳ７０４へと処理を遷移し、プログラム開発装置１０１は、図１７の１７０２に記載したような、タブレットサイズの画面定義エディタ部４２０を表示する。
In step S700, when the tablet button 1202 is pressed, the process transitions to step S704, and the
また、ステップＳ７００において、スマートフォンボタン１２０３が押下されると、ステップＳ７０７へと処理を遷移し、プログラム開発装置１０１は、図１９の１９０２に記載したような、スマートフォンサイズの画面定義エディタ部４２０を表示する。
Further, when the smartphone button 1203 is pressed in step S700, the process transitions to step S707, and the
なお、図１７や図１９のタブレット表示領域外やスマートフォン表示領域外の領域は表示不可部分として、定義されており、ブラウザの表示領域１７０２や１９０２は拡大縮小はできない。拡大縮小できない理由は、開発者によってブラウザのサイズを自由に変えられてしまうと、デバイス毎のブラウザサイズの再現ができなくなってしまうためである。そのために、表示できないエリアを１９０５のようにブランクエリアとして表示させ、１９０２の表示エリアの横幅は変更できないことを示唆している。
Note that the areas outside the tablet display area and the smartphone display area in FIGS. 17 and 19 are defined as non-displayable areas, and the
なお、スマートフォンやタブレット、デスクトップのサイズも図１２の１２１０のように、それぞれのデバイスにも複数のサイズがあるため、それぞれのサイズにブラウザの表示領域を拡大縮小できても良いが、自由に拡大縮小はできず、図１２の１２１０のぞれぞれのデバイス内のブラウザのサイズとして拡大縮小できても良い。 Note that each device has multiple sizes, such as the size of smartphones, tablets, and desktops, as shown in 1210 in Figure 12, so it may be possible to enlarge or reduce the browser display area to each size, but you can enlarge or reduce it freely. It may not be possible to reduce the size, but it may be possible to enlarge or reduce the size of the browser in each device as shown in 1210 in FIG.
なお、図１２の１２１０には、記憶部３０６に記憶されているデバイス毎の画面表示サイズ、その分類を示しているが、デバイスの形態とは、デバイスの種類（パーソナルコンピュータ、タブレット、スマートフォン）や具体的なデバイスの機種名など、様々な形態で記憶されていても良い。画面サイズ欄は、画面アスペクトレシオとして記憶されていても良く、また、この記憶部３０６にあらかじめ記憶されていても良いし、後から追加できるものであっても良い。それぞれのデバイスの種類ごとに１つ又は複数の形態で記憶されていても良い。
Note that 1210 in FIG. 12 shows the screen display size and its classification for each device stored in the
次に、それぞれのブラウザのサイズに表示された画面において、ステップＳ７０２、Ｓ７０５、Ｓ７０８の処理へと移行し、プログラム開発装置１０１は、それぞれの画面における部品のサイズを、画面の横幅のサイズの１／１２単位の値として受け付ける。もしくは、ユーザのマウスによるドラッグ＆ドロップ操作により画面の横幅のサイズの１／１２単位の値となる幅になるように画面描画を受け付ける。
Next, on the screen displayed in the size of each browser, the process moves to steps S702, S705, and S708, and the
図１５～図２０を参照して、マウスによる横幅のドラッグ＆ドロップによるＵＩ部品の幅変更操作を説明する。 The operation of changing the width of a UI component by dragging and dropping the width using a mouse will be described with reference to FIGS. 15 to 20.
図１５は、デスクトップ（パーソナルコンピュータ）ボタン１５０１が押下された際の画面イメージである。１５０２がデスクトップ画面の表示イメージである。なお、図１５、図１６の処理はステップＳ７０２とステップＳ７０３で実行される処理である。
FIG. 15 is a screen image when the desktop (personal computer)
図１６は、デスクトップ（パーソナルコンピュータ）ボタン１５０１が押下された後の画面イメージである（ステップＳ７０１）。
FIG. 16 is a screen image after the desktop (personal computer)
図１６の１６００において、画面定義エディタ部４２０には部品１６０１（テキストエリア）が配置されており、デフォルトでは、横幅は画面の横幅の２／１２＝１／６で表示されている（１６０６参照）。
At 1600 in FIG. 16, a component 1601 (text area) is arranged in the screen
次に、ユーザが１６０１の四角の枠の中点にある丸をドラッグ＆ドロップして右に移動させる（ステップＳ７０２）と、１６０２のように、画面の横幅の３／１２＝１／４に移動する。もっと移動させると、１６０３のように４／１２＝１／３の幅に変更される。
Next, when the user drags and drops the circle at the midpoint of the
マウスのドラッグ＆ドロップを１６０３の場所でリリースすると、１６０４のように、中のテキストエリアも中点に丸を持つ四角の枠に追随して同じ幅に変異し、その時の値がデスクトップ幅入力欄１６０５に反映される。１６０４の場合、１６０５には「４」の値が反映される（ステップＳ７０３）。 When you release the mouse drag and drop at 1603, the text area inside will follow the square frame with a circle in the middle and change to the same width, as shown in 1604, and the value at that time will be displayed in the desktop width input field. 1605. In the case of 1604, a value of "4" is reflected in 1605 (step S703).
なお、図１６の画面定義エディタ部４２０は１６００の下部１６０７にスクロールバーがあるように、全画面が見えているわけではなく、画面定義エディタ部４２０は画面の右側にはみ出ている。そのため、図１６では、画面の横幅と四角枠の横幅１６０１～１６０４の割合が異なるように見えるが、実際の画面では、図２２の２２０２内の２２２２（２２０２の場合はＵＩ部品２２２２を２／１２の割合で表示）のように所定のＸ／１２の割合で表示する。
Note that the entire screen of the screen
図１７はタブレットボタン１７０１が押下される前と後の画面イメージである。なお、図１７、図１８の処理はステップＳ７０５とステップＳ７０６で実行される処理である。
FIG. 17 shows screen images before and after the
タブレットボタン１７０１が押下されると、画面定義エディタ部４２０は、タブレットサイズの画面１７０２を表示する（ステップＳ７０４）。
When the
図１８はタブレットボタン１７０１が押下された後、ユーザがＵＩ部品のサイズを変更した際の画面の動きを説明する図である。
FIG. 18 is a diagram illustrating the movement of the screen when the user changes the size of the UI component after pressing the
図１８の１８００において、画面定義エディタ部４２０には部品１８０１（テキストエリア）が配置されており、デフォルトでは、横幅は画面の横幅の３／１２＝１／４で表示されている（１８０６参照）。
At 1800 in FIG. 18, a component 1801 (text area) is placed in the screen
次に、ユーザが１８０１の四角の枠の中点にある丸をドラッグ＆ドロップして右に移動させると、１８０２のように、画面の横幅の５／１２に移動する。更に移動させると、１８０３のように６／１２＝１／２の幅に変更される。
Next, when the user drags and drops the circle at the midpoint of the
マウスのドラッグ＆ドロップを１８０３の場所でリリースすると、１８０４のように、中のテキストエリアも中点に丸を持つ四角の枠に追随して同じ幅に変異し、その時の値がタブレット幅入力欄１８０５に反映される。１８０４の場合、１８０５には「６」の値が反映される（ステップＳ７０６）。 When you release the mouse drag and drop at 1803, the text area inside will follow the square frame with a circle in the middle and change to the same width, as shown in 1804, and the value at that time will be displayed in the tablet width input field. 1805. In the case of 1804, a value of "6" is reflected in 1805 (step S706).
図１９はスマートフォンボタン１９０１が押下される前と後の画面イメージである。なお、図１９、図２０の処理はステップＳ７０８とステップＳ７０９で実行される処理である。
FIG. 19 shows screen images before and after the
スマートフォンボタン１９０１が押下されると、画面定義エディタ部４２０は、スマートフォンサイズの画面１９０２を表示する（ステップＳ７０７）。
When the
図２０はスマートフォンボタン１９０１が押下された後、ユーザがＵＩ部品のサイズを変更した際の画面の動きを説明する図である。
FIG. 20 is a diagram illustrating the movement of the screen when the user changes the size of the UI component after the
図２０の２０００において、画面定義エディタ部４２０には部品２００１（テキストエリア）が配置されており、デフォルトでは、横幅は画面の横幅の６／１２＝１／２のサイズで表示されている（２００６参照）。
In 2000 of FIG. 20, a component 2001 (text area) is arranged in the screen
次に、ユーザが２００１の四角の枠の中点にある丸をドラッグ＆ドロップして右に移動させると、２００２のように、画面の横幅の７／１２に移動する。更に移動させると、２００３のように８／１２＝２／３の幅に変更される。
Next, when the user drags and drops the circle at the midpoint of the
マウスのドラッグ＆ドロップを２００３の場所でリリースすると、２００４のように、中のテキストエリアも中点に丸を持つ四角の枠に追随して同じ幅に変異し、その時の値がタブレット幅入力欄２００５に反映される。２００４の場合、２００５には「８」の値が反映される（ステップＳ７０９）。 If you release the mouse drag and drop at the location of 2003, the text area inside will follow the square frame with a circle in the middle and mutate to the same width as in 2004, and the value at that time will be displayed in the tablet width input field. It will be reflected in 2005. In the case of 2004, a value of "8" is reflected in 2005 (step S709).
以上のように、ステップＳ７０２、Ｓ７０５、Ｓ７０８の処理でＵＩ部品の幅の変更をデバイス毎に設定することが容易にできる。また、プログラムのデプロイ前に画面を確認しながらＵＩ部品を配置することができる。 As described above, changing the width of a UI component can be easily set for each device through the processing in steps S702, S705, and S708. Additionally, UI components can be placed while checking the screen before deploying the program.
次に、ステップＳ７１０へと処理を遷移し、Ｓ７１０において、プログラム開発装置１０１は、それぞれユーザによりステップＳ７００で選択されたデバイスのブラウザの表示サイズ毎のＵＩ部品の幅の値を入出力定義の部品定義に反映させる。反映させたＵＩ定義の例を図２１を参照して説明する。
Next, the process transitions to step S710, and in step S710, the
図２１は、ステップＳ７１０で反映されたＵＩ定義の一例であり、図３の生成部３１０により、生成される表示制御情報の一例である。図２１は、図１６の１６０４、図１８の１８０４、図２０の２００４で設定された画面部品（ＵＩ部品）のＵＩ定義の一例を示す。
FIG. 21 is an example of the UI definition reflected in step S710, and is an example of display control information generated by the
２１０１には、「ｉｔｅｍ１」というＵＩ部品に、それぞれパーソナルコンピュータ用の幅として「４」、タブレット用に幅として「６」、スマートフォン用の幅として「８」という値が設定されている。この設定された数値は前述のようにブラウザの表示サイズ（横幅）の１２等分された内の何割の幅で、ＵＩ部品を表示するかを設定する値である。これらの値は、ステップＳ７０３、Ｓ７０６、Ｓ７０９でそれぞれ反映された値である。図７のフローチャートの説明に戻る。 In 2101, a value of "4" as a width for a personal computer, "6" as a width for a tablet, and "8" as a width for a smartphone are set for a UI component called "item1". As described above, this set numerical value is a value that sets the width of the UI component to be displayed in what percentage of the 12 equal parts of the display size (width) of the browser. These values are the values reflected in steps S703, S706, and S709, respectively. Returning to the explanation of the flowchart in FIG. 7.
次に、図７のステップＳ７１１において、他のデバイスの設定も変更するかの確認処理をおこない、他のデバイスでのＵＩ部品サイズを変更しない場合は、図７のフローチャートを終了する。他のデバイスでのＵＩ部品サイズを変更する指示を受け付けると、ステップＳ７００へと処理を遷移し、デバイス選択ボタンの押下処理以降を繰り返す。 Next, in step S711 of FIG. 7, a confirmation process is performed to see if the settings of other devices are also changed, and if the UI component size of the other devices is not to be changed, the flowchart of FIG. 7 is ended. When an instruction to change the UI component size in another device is received, the process transitions to step S700, and the process after pressing the device selection button is repeated.
以上のように、本願発明の第１の実施形態により、プログラム開発装置１０１においてデバイス毎に、１つ１つのＵＩ部品のサイズを設定することができ、また、プログラム開発装置１０１において、プログラムのデプロイ前に、デバイス毎の表示イメージを再現することができる。
＜第２の実施形態＞
第１の実施形態のように、ステップＳ７００のように画面を切り替えず、図１４の１４０１に直接値を入力して、各デバイス毎のＵＩ部品の幅を設定しても良い。その場合も、図１２のデバイス切り替えボタンを押すことで、各デバイスでの表示イメージを表示することができる。図２２を参照して、第２の実施形態を説明する。
As described above, according to the first embodiment of the present invention, the size of each UI component can be set for each device in the
<Second embodiment>
As in the first embodiment, the width of the UI component for each device may be set by directly inputting a value into 1401 in FIG. 14 without switching the screen as in step S700. In that case as well, by pressing the device switching button in FIG. 12, the display image on each device can be displayed. The second embodiment will be described with reference to FIG. 22.
図２２は、本願発明に係るレスポンシブデザイン作成画面の一例を示す模式図である。 FIG. 22 is a schematic diagram showing an example of a responsive design creation screen according to the present invention.
図２２の２２０１は、レスポンシブルデザインによる画面生成の例を示しており、２２１１に各デバイス毎の画面幅に対するＵＩ部品の幅の設定値入力画面が表示されている。この入力欄にＵＩ部品のそれぞれデバイスにおける表示幅の割合の入力をユーザから図示しないキーボードなどから受け付けることで、それぞれのデバイスにおける表示幅を設定する。２２１１では、ＵＩ部品２２２１は、デスクトップ（パーソナルコンピュータ）で画面横幅の２／１２、タブレットで３／１２、スマートフォンで６／１２と入力されている。
2201 in FIG. 22 shows an example of screen generation using responsive design, and 2211 displays a setting value input screen for the width of the UI component with respect to the screen width for each device. The display width of each device is set by receiving an input from the user using a keyboard (not shown) or the like to input the ratio of the display width of each UI component in this input field. In 2211, the
２２１１のように入力された際の、２２０１画面の左上にあるデバイス切り替えボタン１２００のそれぞれのボタンを押下した際のイメージ画面をそれぞれ２２０２～２２０４に示す。
2202 to 2204 respectively show image screens when each button of the
２２０２は、デスクトップ（パーソナルコンピュータ）ボタン１２０１が押下された際の画面イメージであり、ＵＩ部品２２２１は、２２２２のように画面横幅の２／１２のサイズで表示されている。
2202 is a screen image when the desktop (personal computer)
２２０３は、タブレットボタン１２０２が押下された際の画面イメージであり、ＵＩ部品２２２１は、２２２３のように画面２２０３の横幅の３／１２のサイズで表示されている。
2203 is a screen image when the tablet button 1202 is pressed, and the
２２０４は、スマートフォンボタン１２０３が押下された際の画面イメージであり、ＵＩ部品２２２１は、２２２４のように画面２２０４の横幅の６／１２のサイズで表示されている。
2204 is a screen image when the smartphone button 1203 is pressed, and the
なお、ブランクで表示されている２２１３や２２１４は、各デバイスの表示領域外として、何も表示しない領域であり、各デバイスの大きさ表示領域は変えることはできない。なお、各デバイスでも表示領域の大きさは図１２の１２１０のように異なるので、表示領域の大きさを各デバイス内で変更できても良い。たとえば、スマートフォンの場合、スマートフォン２の画面サイズである３７５×８１２から、スマートフォン１やスマートフォン３などのスマートフォン内の異なるサイズの画面に切り替えられても良い。その際は画面の所定の位置に１２１０のデバイスタイプ（デバイスの名前）や画面サイズを表示しても良い。
Note that 2213 and 2214, which are displayed blank, are areas in which nothing is displayed outside the display area of each device, and the size display area of each device cannot be changed. Note that since the size of the display area differs for each device as shown in 1210 in FIG. 12, the size of the display area may be changed within each device. For example, in the case of a smartphone, the screen size of
以上のように、本願発明の第２の実施形態により、プログラム開発装置１０１においてデバイス毎に、１つ１つのＵＩ部品のサイズを設定することができ、また、プログラム開発装置１０１において、プログラムをデプロイする前に、デバイス毎の表示イメージを再現することができる。
＜第３の実施形態＞
第１の実施形態や第２の実施形態は、デバイス毎にＵＩ部品の横幅を制御していたが、他の実施形態として、デバイス毎に表示する形態を変える処理について、図２３を参照して説明する。
As described above, according to the second embodiment of the present invention, the size of each UI component can be set for each device in the
<Third embodiment>
In the first embodiment and the second embodiment, the width of the UI parts is controlled for each device, but as another embodiment, the process of changing the display format for each device will be explained with reference to FIG. 23. explain.
図２３は、本願発明に係るレスポンシブデザイン作成画面の一例を示す模式図である。 FIG. 23 is a schematic diagram showing an example of a responsive design creation screen according to the present invention.
図２３は、デスクトップ（パーソナルコンピュータ）表示の際に表示される２３１３の部分について、デバイス毎に表示形態を変える例である。
FIG. 23 is an example in which the display format of the
２３０１と２３０２は、デバイス毎の表示結果を設定している画面イメージであり、２３１１には、デスクトップ（パーソナルコンピュータ）表示とタブレット表示の際に、２３１３のＵＩ部品をテーブル形式（結果テーブル）で表示する指定がされている。テーブル形式とは、リスト形式で表示することを示しており、リストの一段目には２３１３のように、項目名（商品イメージ、商品コード、商品名、メーカー、価格、数量）が表示され、二段目以降にそれぞれの項目の値が表示されている。 2301 and 2302 are screen images where display results are set for each device, and 2311 shows the UI parts of 2313 displayed in table format (result table) when displayed on a desktop (personal computer) or on a tablet. It is specified that Table format indicates display in list format, where item names (product image, product code, product name, manufacturer, price, quantity) are displayed in the first row of the list, such as 2313, and the second row is displayed in list format. The values of each item are displayed in the following rows.
一方、２３１２には、スマートフォン表示の場合、２３１３のＵＩ部品の内容をカード形式（結果カード）で表示する指定がされている。カード形式とは、１枚の単票として完結するような表示を示しており、カードには、２３１５のように、たとえば、予め設定されているフォーマットで各項目名（商品名、価格、数量など）と各項目の値（デスクトップＸＸＸ、１６０，０００）を全てのカードに記載して表示している。 On the other hand, in 2312, in the case of smartphone display, the content of the UI component in 2313 is specified to be displayed in a card format (result card). The card format refers to a display that can be completed as a single sheet, and the card includes each item name (product name, price, quantity, etc.) in a preset format such as 2315. ) and the value of each item (desktop XXX, 160,000) are written and displayed on all cards.
デバイス切り替えボタン１２００のそれぞれのボタンを押下すると、それぞれの画面を２３０３～２３０５のように表示する。
When each button of the
２３１１で設定されているように、２３１３のＵＩ部品は、デスクトップ（パーソナルコンピュータ）表示やタブレット表示では２３１３や２３１４のようにテーブル形式で１つの項目をリスト形式で表示することができる。
As set in 2311, the
一方、２３１２での設定を反映し、スマートフォン表示で設定されたカード形式表示の場合は、２３１５のように、予め設定されたカード形式として表示することができる。 On the other hand, in the case of the card format display set in the smartphone display, reflecting the setting at 2312, it can be displayed as a preset card format as shown at 2315.
これらの設定はユーザにより変更することができ、たとえばタブレットの場合にもカード形式（結果カード）で表示するように指定されれば、タブレット表示の場合も、所定のフォーマットでのカード形式で表示することができる。 These settings can be changed by the user; for example, if you specify that the results should be displayed in card format (result cards) even on tablets, the results will be displayed in card format in the specified format even on tablets. be able to.
以上にように、本願発明の第３の実施形態により、プログラム開発装置１０１においてデバイス毎に、１つ１つのＵＩ部品のサイズを設定することができ、横幅だけでなく、表示形態をも設定ことができる。また、プログラム開発装置１０１において、プログラムをデプロイする前に、デバイス毎の表示イメージを再現することができる。
As described above, according to the third embodiment of the present invention, the size of each UI component can be set for each device in the
以上のように、前述した実施形態の機能を実現するプログラムを記録した記録媒体を、システムあるいは装置に供給し、そのシステムあるいは装置のコンピュータ（又はＣＰＵやＭＰＵ）が記録媒体に格納されたプログラムを読み出し、実行することによっても本発明の目的が達成されることは言うまでもない。 As described above, a recording medium recording a program that implements the functions of the embodiments described above is supplied to a system or device, and the computer (or CPU or MPU) of the system or device reads the program stored in the recording medium. It goes without saying that the object of the present invention can also be achieved by reading and executing.
この場合、記録媒体から読み出されたプログラム自体が本発明の新規な機能を実現することになり、そのプログラムを記録した記録媒体は本発明を構成することになる。 In this case, the program itself read from the recording medium will realize the novel function of the present invention, and the recording medium on which the program is recorded constitutes the present invention.
プログラムを供給するための記録媒体としては、例えば、フレキシブルディスク、ハードディスク、光ディスク、光磁気ディスク、ＣＤ－ＲＯＭ、ＣＤ－Ｒ、ＤＶＤ－ＲＯＭ、磁気テープ、不揮発性のメモリカード、ＲＯＭ、ＥＥＰＲＯＭ、シリコンディスク等を用いることが出来る。 Examples of recording media for supplying programs include flexible disks, hard disks, optical disks, magneto-optical disks, CD-ROMs, CD-Rs, DVD-ROMs, magnetic tapes, non-volatile memory cards, ROMs, EEPROMs, and silicon A disk or the like can be used.
また、コンピュータが読み出したプログラムを実行することにより、前述した実施形態の機能が実現されるだけでなく、そのプログラムの指示に基づき、コンピュータ上で稼働しているＯＳ（オペレーティングシステム）等が実際の処理の一部又は全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。 In addition, by executing a program read by a computer, not only the functions of the above-described embodiments are realized, but also the OS (operating system) etc. running on the computer are realized based on the instructions of the program. It goes without saying that this also includes a case where part or all of the processing is performed and the functions of the embodiments described above are realized by the processing.
さらに、記録媒体から読み出されたプログラムが、コンピュータに挿入された機能拡張ボードやコンピュータに接続された機能拡張ユニットに備わるメモリに書き込まれた後、そのプログラムコードの指示に基づき、その機能拡張ボードや機能拡張ユニットに備わるＣＰＵ等が実際の処理の一部又は全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。 Furthermore, after the program read from the recording medium is written into the memory of the function expansion board inserted into the computer or the function expansion unit connected to the computer, the function expansion board It goes without saying that this also includes a case where a CPU or the like provided in a function expansion unit performs part or all of the actual processing, and the functions of the above-described embodiments are realized by the processing.
また、本発明は、複数の機器から構成されるシステムに適用しても、ひとつの機器から成る装置に適用しても良い。また、本発明は、システムあるいは装置にプログラムを供給することによって達成される場合にも適応できることは言うまでもない。この場合、本発明を達成するためのプログラムを格納した記録媒体を該システムあるいは装置に読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。 Moreover, the present invention may be applied to a system made up of a plurality of devices, or to a device made up of one device. It goes without saying that the present invention can also be applied to cases where the present invention is achieved by supplying a program to a system or device. In this case, by reading a recording medium storing a program for achieving the present invention into the system or device, the system or device can enjoy the effects of the present invention.
上記プログラムの形態は、オブジェクトコード、インタプリタにより実行されるプログラムコード、ＯＳ（オペレーティングシステム）に供給されるスクリプトデータ等の形態から成ってもよい。 The program may be in the form of an object code, a program code executed by an interpreter, script data supplied to an OS (operating system), or the like.
さらに、本発明を達成するためのプログラムをネットワーク上のサーバ、データベース等から通信プログラムによりダウンロードして読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。なお、上述した各実施形態及びその変形例を組み合わせた構成も全て本発明に含まれるものである。 Further, by downloading and reading a program for achieving the present invention from a server, database, etc. on a network using a communication program, the system or device can enjoy the effects of the present invention. Note that all configurations that are combinations of the above-described embodiments and their modifications are also included in the present invention.
１０１ プログラム開発装置
１０２ プログラム開発サーバ
１０３ データベースサーバ
１０４ アプリケーションクライアント
１０５ アプリケーションサーバ
１０６ Ｗｅｂサーバ
１０７ ネットワーク
101 Program development device 102 Program development server 103 Database server 104
Claims (12)
前記入力領域で受け付けた値であって、前記特定の画面を表示するデバイスのタイプに対応する値に基づく表示サイズで、前記表示要素が表示されるように制御するソフトウェアが生成されるように制御する制御手段と、
を有することを特徴とする情報処理システム。 Display control means for display-controlling an input area for accepting input of a value related to a display size of a display element displayed on a specific screen for each device type;
Control software is generated that controls the display element to be displayed at a display size based on a value accepted in the input area and that corresponds to a type of device displaying the specific screen. control means for;
An information processing system comprising:
前記選択肢のうち選択された選択肢に対応するタイプにおける前記表示要素の表示サイズを入力する操作を受け付ける受付手段
をさらに有することを特徴とする請求項１に記載の情報処理システム。 The display control means controls to display options corresponding to each type of device ,
reception means for accepting an operation for inputting a display size of the display element in a type corresponding to the selected option among the options;
The information processing system according to claim 1 , further comprising :
前記受付手段は、前記複数の入力領域のいずれかに対する表示サイズの入力操作があった場合には、該入力操作が行われた入力領域に対応するタイプにおける前記表示要素の表示サイズの設定として受け付けることを特徴とする請求項２に記載の情報処理システム。 The display control means controls to display a plurality of input areas each corresponding to the type of the device on one screen,
When there is a display size input operation for any of the plurality of input areas, the reception means accepts the display size setting of the display element in the type corresponding to the input area in which the input operation is performed. The information processing system according to claim 2, characterized in that:
前記受付手段は、前記エディタ画面に表示された前記表示要素を操作する表示サイズの変更操作あった場合には、前記選択された選択肢に対応するタイプにおける前記表示要素の表示サイズの設定として受け付けることを特徴とする請求項２または３に記載の情報処理システム。 The display control means controls to display an editor screen corresponding to the type of device ,
When there is a display size change operation for operating the display element displayed on the editor screen, the accepting means accepts the display size setting of the display element in the type corresponding to the selected option. The information processing system according to claim 2 or 3, characterized in that:
前記入力領域で受け付けた値であって、前記特定の画面を表示するデバイスのタイプに対応する値に基づく表示サイズで、前記表示要素が表示されるように制御するソフトウェアが生成されるように制御する制御ステップと、
を有することを特徴とする情報処理システムの制御方法。 a display control step of display-controlling an input area for accepting input of a value related to a display size of a display element displayed on a specific screen for each device type;
Control software is generated that controls the display element to be displayed at a display size based on a value accepted in the input area and that corresponds to a type of device displaying the specific screen. a control step to
A method for controlling an information processing system, comprising:
A program for causing at least one computer to function as each means of the information processing system according to any one of claims 1 to 10.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2020215988A JP7381900B2 (en) | 2020-12-25 | 2020-12-25 | Information processing system, its control method and program |
| JP2023187642A JP2023181435A (en) | 2020-12-25 | 2023-11-01 | Information processing apparatus, information processing method, and program |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2020215988A JP7381900B2 (en) | 2020-12-25 | 2020-12-25 | Information processing system, its control method and program |
Related Child Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2023187642A Division JP2023181435A (en) | 2020-12-25 | 2023-11-01 | Information processing apparatus, information processing method, and program |
Publications (3)
| Publication Number | Publication Date |
|---|---|
| JP2022101740A JP2022101740A (en) | 2022-07-07 |
| JP2022101740A5 JP2022101740A5 (en) | 2022-07-29 |
| JP7381900B2 true JP7381900B2 (en) | 2023-11-16 |
Family
ID=82273095
Family Applications (2)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2020215988A Active JP7381900B2 (en) | 2020-12-25 | 2020-12-25 | Information processing system, its control method and program |
| JP2023187642A Pending JP2023181435A (en) | 2020-12-25 | 2023-11-01 | Information processing apparatus, information processing method, and program |
Family Applications After (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2023187642A Pending JP2023181435A (en) | 2020-12-25 | 2023-11-01 | Information processing apparatus, information processing method, and program |
Country Status (1)
| Country | Link |
|---|---|
| JP (2) | JP7381900B2 (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2000231543A (en) | 1999-02-10 | 2000-08-22 | Sumitomo Metal Ind Ltd | Information providing method, information providing device and information providing system |
| US20170357424A1 (en) | 2016-06-10 | 2017-12-14 | Apple Inc. | Editing inherited configurations |
| JP2019021255A (en) | 2017-07-21 | 2019-02-07 | チャン ホー イン マイケル | Digital publishing system, digital publishing method and computer program |
| JP2020170530A (en) | 2016-03-09 | 2020-10-15 | キヤノンマーケティングジャパン株式会社 | Information processing apparatus, processing method thereof, and program |
| WO2020234881A1 (en) | 2019-05-20 | 2020-11-26 | Wix.Com Ltd. | System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20200097138A1 (en) * | 2018-09-24 | 2020-03-26 | Salesforce.Com, Inc. | Application builder |
-
2020
- 2020-12-25 JP JP2020215988A patent/JP7381900B2/en active Active
-
2023
- 2023-11-01 JP JP2023187642A patent/JP2023181435A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2000231543A (en) | 1999-02-10 | 2000-08-22 | Sumitomo Metal Ind Ltd | Information providing method, information providing device and information providing system |
| JP2020170530A (en) | 2016-03-09 | 2020-10-15 | キヤノンマーケティングジャパン株式会社 | Information processing apparatus, processing method thereof, and program |
| US20170357424A1 (en) | 2016-06-10 | 2017-12-14 | Apple Inc. | Editing inherited configurations |
| JP2019021255A (en) | 2017-07-21 | 2019-02-07 | チャン ホー イン マイケル | Digital publishing system, digital publishing method and computer program |
| WO2020234881A1 (en) | 2019-05-20 | 2020-11-26 | Wix.Com Ltd. | System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout |
Non-Patent Citations (1)
| Title |
|---|
| 佐藤 好彦 ほか４名，ドリル式 やさしくはじめる Ｗｅｂデザインの学校 ，初版，株式会社マイナビ出版，2016年08月10日，第6頁,第187-190頁,第212-213頁，ISBN:978-4-8399-5854-1 |
Also Published As
| Publication number | Publication date |
|---|---|
| JP2022101740A (en) | 2022-07-07 |
| JP2023181435A (en) | 2023-12-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP4144883B2 (en) | Information processing apparatus, control method therefor, and program | |
| JP4332477B2 (en) | Layout adjusting method, apparatus and program | |
| US11048484B2 (en) | Automated responsive grid-based layout design system | |
| CN100399332C (en) | Template document layout | |
| JP4912139B2 (en) | Information processing device | |
| CN101278252A (en) | Command user interface for displaying selectable functionality controls in a database application | |
| EP1221651A2 (en) | Device environment configuration system, device environment configuration method, and data storage medium therefor | |
| JP2006221582A (en) | Information processor, method of controlling the same, and program | |
| JP2002509630A (en) | Multimedia project management and control system | |
| JP2012064207A (en) | Host device and content display method of the same | |
| KR101892699B1 (en) | Apparatus and method for authoring app of providing itergrated development environment | |
| JP5404969B1 (en) | Electronic manual browsing device and system | |
| JP6594359B2 (en) | Information processing apparatus, information processing method, and program | |
| JP7381900B2 (en) | Information processing system, its control method and program | |
| JP7014960B2 (en) | Information processing equipment, servers, their processing methods and programs | |
| KR101546359B1 (en) | Web page making system and method for maintaining compatibility of web browser and font | |
| JP2022101746A (en) | Information processing apparatus, information processing method, and program | |
| JP2007249431A (en) | Information processor, its control method, and program | |
| JP2018181073A (en) | Information processing apparatus, processing method thereof, and program | |
| JP6836077B2 (en) | Information processing device and its processing method and program | |
| CN112256257A (en) | Interface construction method, readable storage medium and electronic device | |
| JP2008257468A (en) | Information processor, control method therefor and computer program | |
| JP7421137B2 (en) | Information processing device, information processing method and program | |
| JP2018116750A (en) | Information processing apparatus, control method for information processing apparatus, and program | |
| JP2014026473A (en) | Information processing device, control method for information processing device, program, and recording medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20220720 |
|
| A621 | Written request for application examination |
Free format text: JAPANESE INTERMEDIATE CODE: A621 Effective date: 20220720 |
|
| A131 | Notification of reasons for refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A131 Effective date: 20230425 |
|
| A977 | Report on retrieval |
Free format text: JAPANESE INTERMEDIATE CODE: A971007 Effective date: 20230428 |
|
| A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20230623 |
|
| TRDD | Decision of grant or rejection written | ||
| A01 | Written decision to grant a patent or to grant a registration (utility model) |
Free format text: JAPANESE INTERMEDIATE CODE: A01 Effective date: 20231003 |
|
| A61 | First payment of annual fees (during grant procedure) |
Free format text: JAPANESE INTERMEDIATE CODE: A61 Effective date: 20231016 |
|
| R151 | Written notification of patent or utility model registration |
Ref document number: 7381900 Country of ref document: JP Free format text: JAPANESE INTERMEDIATE CODE: R151 |