特許 7536248 マルチデバイス用反応型ページのためのグリッドレイアウトの設定方法及びこれを行うプログラム

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

(12)【公報種別】特許公報(B1)

(11)【特許番号】

(24)【登録日】2024-08-09

(45)【発行日】2024-08-20

(54)【発明の名称】マルチデバイス用反応型ページのためのグリッドレイアウトの設定方法及びこれを行うプログラム

(51)【国際特許分類】

   G06F 8/38 20180101AFI20240813BHJP

【ＦＩ】

G06F8/38

【請求項の数】 6

(21)【出願番号】P 2024076173

(22)【出願日】2024-05-08

【審査請求日】2024-05-13

(31)【優先権主張番号】10-2023-0061502

(32)【優先日】2023-05-12

(33)【優先権主張国・地域又は機関】KR

(31)【優先権主張番号】10-2023-0177203

(32)【優先日】2023-12-08

(33)【優先権主張国・地域又は機関】KR

【早期審査対象出願】

(73)【特許権者】

【識別番号】524040915

【氏名又は名称】インスウェーブ システムズ カンパニー リミテド

【氏名又は名称原語表記】ＩＮＳＷＡＶＥ ＳＹＳＴＥＭＳ ＣＯ．， ＬＴＤ．

【住所又は居所原語表記】１２Ｆ（Ｍａｇｏｋ－ｄｏｎｇ， ｑｕｅｅｎｓｐａｒｋ９） ２４７， Ｇｏｎｇｈａｎｇ－ｄａｅｒｏ， Ｇａｎｇｓｅｏ－ｇｕ， Ｓｅｏｕｌ ０７８０３ Ｒｅｐｕｂｌｉｃ ｏｆ Ｋｏｒｅａ

(74)【代理人】

【識別番号】100127328

【弁理士】

【氏名又は名称】八木澤 史彦

(72)【発明者】

【氏名】イオ セヨン

(72)【発明者】

【氏名】キム ウグレ

【審査官】松平 英

(56)【参考文献】

【文献】特開２０２２－１７９６１４（ＪＰ，Ａ）

【文献】特開２０１２－２３４３５０（ＪＰ，Ａ）

【文献】米国特許第８２４５１４５（ＵＳ，Ｂ１）

(58)【調査した分野】(Int.Cl.，ＤＢ名)

Ｇ０６Ｆ ３／０１

３／０４８－３／０４８９５

８／００－８／３８

８／６０－８／７７

９／４４－９／４４５

９／４５１

(57)【特許請求の範囲】

【請求項1】

マルチデバイス用反応型ページの開発のためのプログラム開発装置で行われるグリッドレイアウトの設定方法において、
（ａ）ユーザ入力に応じてグリッドレイアウトの設定ウィンドウを実行する段階と；
（ｂ）アダプティブ設定の適用を確認する段階と；
（ｃ）上記確認の結果、アダプティブ設定が適用された場合、上記設定ウィンドウ内にマルチデバイスのそれぞれに対する複数のグリッドレイアウト設定画面が表示される段階と；
（ｄ）上記複数のグリッドレイアウト設定画面のうちの第１のグリッドレイアウト設定画面内で、上記マルチデバイスのうちの第１のデバイスに対して複数の第１のグリッド領域を設定し、上記複数の第１のグリッド領域のそれぞれに対して一つずつのグリッドアイテムに相応する複数のグループコンポーネントをマッチングする段階と；
（ｅ）上記複数のグリッドレイアウト設定画面のうちの第２のグリッドレイアウト設定画面内で、上記マルチデバイスのうちの第２のデバイスに対して複数の第２のグリッド領域を設定し、上記複数のグループコンポーネントのうちの一部あるいは全体を上記複数の第２のグリッド領域にそれぞれマッチングする段階と；
（ｆ）上記マルチデバイスに対するグリッドレイアウト設定が完了すると、マルチデバイス別のグリッドテンプレートを生成する段階と、を含み、
上記マルチデバイス別のグリッドテンプレートに相応してマルチデバイス用反応型ページが開発され、
上記段階（ｄ）において、上記第１のデバイスに対する基本グリッドレイアウトに相応する複数のグリッドセルのうちの１つを選択するか、あるいは複数のグリッドセルをマウス入力あるいはタッチによるユーザ操作により統合して上記第１のグリッド領域を設定し、
上記段階（ｅ）において、上記第２のデバイスに対する基本グリッドレイアウトに相応する複数のグリッドセルのうちの１つを選択するか、あるいは複数のグリッドセルをマウス入力あるいはタッチによるユーザ操作により統合して上記第２のグリッド領域を設定し、
上記段階（ｄ）において、上記第１のグリッド領域に対してマッチングされた上記複数のグループコンポーネントは、上記第２のデバイスで隠し項目に基本設定され、
上記段階（ｅ）において、上記隠し項目に基本設定された上記複数のグループコンポーネントのうちの一部あるいは全体を、上記複数の第２のグリッド領域内にマウス入力あるいはタッチによるユーザ操作によりマッチングすることを特徴とする、グリッドレイアウトの設定方法。

【請求項2】

（ｇ）上記マルチデバイスのうち、上記プログラム開発装置の開発画面解像度に相応するマルチデバイスに関する上記グリッドテンプレートを開発画面上に表現してプログラム開発が行われるようにする段階をさらに含む、請求項１に記載のグリッドレイアウトの設定方法。

【請求項3】

前記段階（ｇ）は、上記開発画面の幅が変わるにつれて変化する上記開発画面解像度に相応して、上記開発画面上に表現される上記グリッドテンプレートを変更することを特徴とする請求項２に記載のグリッドレイアウトの設定方法。

【請求項4】

マルチデバイス用反応型ページ開発のためのプログラム開発装置で行われるグリッドレイアウトの設定方法を行うようにするためにコンピュータ読取可能な媒体に格納されたコンピュータプログラムであって、上記コンピュータプログラムは、コンピュータが以下の段階を行うようにし、上記段階は、
（ａ）ユーザ入力に応じてグリッドレイアウトの設定ウィンドウを実行する段階と；
（ｂ）アダプティブ設定の適用を確認すると；
（ｃ）上記確認結果、アダプティブ設定が適用された場合、上記設定ウィンドウ内にマルチデバイスのそれぞれに対する複数のグリッドレイアウト設定画面が表示される段階と；
（ｄ）上記複数のグリッドレイアウト設定画面のうちの第１のグリッドレイアウト設定画面内で、上記マルチデバイスのうちの第１のデバイスに対して複数の第１のグリッド領域を設定し、上記複数の第１のグリッド領域のそれぞれに対して一つずつのグリッドアイテムに相応する複数のグループコンポーネントをマッチングする段階と；
（ｅ）上記複数のグリッドレイアウト設定画面のうちの第２のグリッドレイアウト設定画面内で、上記マルチデバイスのうちの第２のデバイスに対して複数の第２のグリッド領域を設定し、上記複数のグループコンポーネントのうちの一部あるいは全体を上記複数の第２のグリッド領域にそれぞれマッチングする段階と；
（ｆ）上記マルチデバイスに対するグリッドレイアウト設定が完了すると、マルチデバイス別のグリッドテンプレートを生成する段階と、を含み、
上記マルチデバイス別のグリッドテンプレートに相応してマルチデバイス用反応型ページが開発され、
上記段階（ｄ）において、上記第１のデバイスに対する基本グリッドレイアウトに相応する複数のグリッドセルのうちの１つを選択するか、あるいは複数のグリッドセルをマウス入力あるいはタッチによるユーザ操作により統合して上記第１のグリッド領域を設定し、
上記段階（ｅ）において、上記第２のデバイスに対する基本グリッドレイアウトに相応する複数のグリッドセルのうちの１つを選択するか、あるいは複数のグリッドセルをマウス入力あるいはタッチによるユーザ操作により統合して上記第２のグリッド領域を設定し、
上記段階（ｄ）において、上記第１のグリッド領域に対してマッチングされた上記複数のグループコンポーネントは、上記第２のデバイスで隠し項目に基本設定され、
上記段階（ｅ）において、上記隠し項目に基本設定された上記複数のグループコンポーネントのうちの一部あるいは全体を、上記複数の第２のグリッド領域内にマウス入力あるいはタッチによるユーザ操作によりマッチングすることを特徴とする、コンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項5】

（ｇ）上記マルチデバイスのうち、上記プログラム開発装置の開発画面解像度に相応するマルチデバイスに関する上記グリッドテンプレートを開発画面上に表現してプログラム開発が行われるようにすることをさらに含む、請求項４に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項6】

前記段階（ｇ）は、上記開発画面の幅が変わるにつれて変化する上記開発画面解像度に相応して、上記開発画面上に表現される上記グリッドテンプレートを変更することを特徴とする、請求項５に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【発明の詳細な説明】

【技術分野】

【0001】

本発明は、マルチデバイス用の反応型ページのためのグリッドレイアウトの設定方法及びこれを行うプログラムに関する。

【背景技術】

【0002】

コンピュータ技術の発展に伴い、現在様々なソフトウェアが開発されてきている。ソフトウェアを開発するためには、一般的にプログラム開発装置を使用することになるが、以前は開発者が手作業でコーディングする作業が多かったが、現在はグラフィカルユーザインタフェース（GUI）を用いてより簡便にソフトウェアを開発している。

【0003】

プログラム開発時にグラフィックで画面の特定の位置に置かれるボタン、ボックス、グリッド、スクロールビューなどのオブジェクトについては、随時その位置を変更させたり、親オブジェクトを変更したり、兄弟オブジェクト間の順序を変更しなければならない場合が頻繁に発生するが、従来のプログラム開発装置では、このようなオブジェクト編集が容易でないという限界があった。

【0004】

関連特許としては、本出願人が特許出願して登録された韓国登録特許第１０－１２８２９７０号に、プログラム開発時の画面オブジェクトの状況認知位置決め装置及びその方法が開示されている。

【0005】

本発明の背景技術に記載された事項は、発明の背景を理解するためのものであり、この技術が属する分野で通常の知識を有する者に既に知られている従来技術とは断定できない。

【先行技術文献】

【特許文献】

【0006】

韓国登録特許第１０－１２８７９７０号公報

【発明の概要】

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

【0007】

本発明の目的は、ワンソースマルチユース（OSMU、One Source Multi Use）でマルチブラウザ、マルチデバイス及びマルチOSを支援する上で、画面構成の基本レイアウトであるグリッドレイアウトを、グラフィカルユーザインタフェースを通じてユーザが直観的に設定できるようにするマルチデバイス用反応型（responsive）ページのためのグリッドレイアウトの設定方法及びこれを行うプログラムを提供することにある。

【0008】

本発明の他の目的は、以下に述べられる好ましい実施例に基づいて更に明確になるであろう。

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

【0009】

上記の目的を達成するために、本発明の一態様によれば、マルチデバイス用反応型ページの開発のためのプログラム開発装置で行われるグリッドレイアウトの設定方法において、（ａ）ユーザ入力に応じてグリッドレイアウトの設定ウィンドウを実行する段階と；（ｂ）アダプティブ設定の適用を確認する段階と；（ｃ）上記確認の結果、アダプティブ設定が適用された場合、上記設定ウィンドウ内にマルチデバイスのそれぞれに対するグリッドレイアウト設定画面が表示される段階と；（ｄ）上記マルチデバイスのうちの第１のデバイスに対して複数の第１のグリッド領域を設定し、上記複数の第１のグリッド領域のそれぞれに対して一つずつのグリッドアイテムに相応する複数のグループコンポーネントをマッチングする段階と；（ｅ）上記マルチデバイスのうちの第２のデバイスに対して複数の第２のグリッド領域を設定し、上記複数のグループコンポーネントのうちの一部あるいは全体を上記複数の第２のグリッド領域にそれぞれマッチングする段階と；（ｆ）上記マルチデバイスに対するグリッドレイアウト設定が完了すると、マルチデバイス別のグリッドテンプレートを生成する段階と、を含み、上記マルチデバイス別のグリッドテンプレートに相応してマルチデバイス用反応型ページが開発されることを特徴とするグリッドレイアウトの設定方法が提供される。

【0010】

上記段階（ｄ）において、上記第１のデバイスに対する基本グリッドレイアウトに相応する複数のグリッドセルのうちの１つを選択するか、あるいは複数のグリッドセルをマウス入力あるいはタッチによるユーザ操作により統合して上記第１のグリッド領域を設定することができる。

【0011】

上記段階（ｅ）において、上記第２のデバイスに対する基本グリッドレイアウトに相応する複数のグリッドセルのうちの１つを選択するか、あるいは複数のグリッドセルをマウス入力あるいはタッチによるユーザ操作により統合して上記第２のグリッド領域を設定することができる。

【0012】

上記段階（ｄ）において、上記第１のグリッド領域に対してマッチングされた上記複数のグループコンポーネントは、上記第２のデバイスで隠し項目に基本設定され、上記段階（ｅ）において、上記隠し項目に基本設定された上記複数のグループコンポーネントのうちの一部あるいは全体を、上記複数の第２のグリッド領域内にマウス入力あるいはタッチによるユーザ操作によりマッチングすることができる。

【0013】

（ｇ）上記マルチデバイスのうち、上記プログラム開発装置の開発画面解像度に相応するマルチデバイスに関する上記グリッドテンプレートを開発画面上に表現してプログラム開発が行われるようにする段階をさらに含むことができる。

【0014】

上記段階（ｇ）は、上記開発画面の幅が変わるにつれて変化する上記開発画面解像度に相応して、上記開発画面上に表現される上記グリッドテンプレートを変更することができる。

【0015】

一方、本発明の他の態様によれば、マルチデバイス用反応型ページ開発のためのプログラム開発装置で行われるグリッドレイアウトの設定方法を行うようにするためにコンピュータ読取可能な媒体に格納されたコンピュータプログラムであって、上記コンピュータプログラムは、コンピュータが以下の段階を行うようにし、上記段階は、（ａ）ユーザ入力に応じてグリッドレイアウトの設定ウィンドウを実行する段階と；（ｂ）アダプティブ設定の適用を確認する段階と；（ｃ）上記確認結果、アダプティブ設定が適用された場合、上記設定ウィンドウ内にマルチデバイスのそれぞれに対するグリッドレイアウト設定画面が表示される段階と；（ｄ）上記マルチデバイスのうちの第１のデバイスに対して複数の第１のグリッド領域を設定し、上記複数の第１のグリッド領域のそれぞれに対して一つずつのグリッドアイテムに相応する複数のグループコンポーネントをマッチングする段階と；（ｅ）上記マルチデバイスのうちの第２のデバイスに対して複数の第２のグリッド領域を設定し、上記複数のグループコンポーネントのうちの一部あるいは全体を上記複数の第２のグリッド領域にそれぞれマッチングする段階と；（ｆ）上記マルチデバイスに対するグリッドレイアウト設定が完了すると、マルチデバイス別のグリッドテンプレートを生成する段階と、を含み、上記マルチデバイス別のグリッドテンプレートに相応してマルチデバイス用反応型ページが開発されることを特徴とするコンピュータ読取可能な媒体に格納されたコンピュータプログラムが提供される。

【0016】

上記以外の他の態様、特徴、利点は、以下の図面、請求の範囲、及び発明の詳細な説明から明らかになるであろう。

【発明の効果】

【0017】

本発明によれば、ワンソースマルチユースでマルチブラウザ、マルチデバイス、マルチOSを支援する上で、画面構成の基本レイアウトであるグリッドレイアウトをグラフィカルユーザインタフェースを通じてユーザが直観的に設定できるようにする効果がある。

【0018】

本発明で得られる効果は、以上で言及した効果に限定されず、言及しないさらに他の効果は、以下の記載から本発明が属する技術分野において通常の知識を有する者であれば明らかに理解できるだろう。

【図面の簡単な説明】

【0019】

【図1】本発明の一実施形態に係るユーザインタフェースプラットフォーム開発システムのアーキテクチャを示す図である。

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

【図3】本発明の一実施形態に係るグリッドレイアウトの設定方法のフローチャートである。

【図4】グリッドの構成を示す概念図である。

【図5】グリッドギャップを示す概念図である。

【図6】グリッドレイアウト設定ウィンドウの例示画面である。

【図7】グリッドレイアウト設定ウィンドウの例示画面である。

【図8】グリッドレイアウト設定ウィンドウの例示画面である。

【図9】グリッドレイアウト設定ウィンドウの例示画面である。

【図10】グリッドレイアウト設定ウィンドウの例示画面である。

【図11】グリッドレイアウト設定ウィンドウの例示画面である。

【図12】プログラム開発装置でグリッドレイアウトが表示されてページ画面開発を行うことができる基本開発画面の例示図である。

【図13】設定ウィンドウによりマルチデバイスに対するグリッドレイアウトが設定された場合、開発画面の大きさに応じて表示される適応的グリッドレイアウトの変化を示す図である。

【図14】設定ウィンドウによりマルチデバイスに対するグリッドレイアウトが設定された場合、開発画面の大きさに応じて表示される適応的グリッドレイアウトの変化を示す図である。

【図15】設定ウィンドウによりマルチデバイスに対するグリッドレイアウトが設定された場合、開発画面の大きさに応じて表示される適応的グリッドレイアウトの変化を示す図である。

【図16】本発明の一実施形態に係るシステムの構成を示す図である。

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

【0020】

本発明は、様々な変換を加えることができ、複数の実施形態を有することができるので、特定の実施形態を図面に例示し、詳しく説明しようとする。しかしながら、これは、本発明を特定の実施形態について限定しようとするものではなく、本発明の思想及び技術範囲に含まれるあらゆる変更、均等物ないし代替物を含むものと理解されるべきである。

【0021】

ある構成要素が他の構成要素に“連結されている”又は“接続されている”と言及されている場合、その他の構成要素に直接連結されているか、又は接続されていることもできるが、その間に他の構成要素が存在することもできると理解されるべきである。一方、ある構成要素が他の構成要素に“直接連結されている”又は“直接接続されている”と言及されている場合、その間に他の構成要素が存在しないと理解されるべきである。

【0022】

第１、第２などの用語は、様々な構成要素を説明するために使用することができるが、上記構成要素は、上記用語によって限定されてはならない。上記用語は、１つの構成要素を他の構成要素から区別する目的のみで使用される。

【0023】

本出願で使用した用語は、単に特定の実施例を説明するために使用されたものであり、本発明を限定しようとする意図ではない。単数の表現は、文脈上明白に異なる意味でない限り、複数の表現を含む。本出願において、“含む”又は“有する”などの用語は、明細書上に記載されている特徴、数字、段階、動作、構成要素、部品、又はこれらを組み合わせたものが存在することを指定しようとするだけであり、１つ又はそれ以上の他の特徴や数字、段階、動作、構成要素、部品、又はこれらを組み合わせたものの存在又は付加可能性を予め排除するわけではないと理解されるべきである。

【0024】

本明細書において“部”とは、ハードウェアによって実現されるユニット（unit）、ソフトウェアによって実現されるユニット、及び両方を用いて実現されるユニットを含む。また、１つのユニットが２つ以上のハードウェアを用いて実現されてもよく、２つ以上のユニットが１つのハードウェアによって実現されてもよい。一方、“～部”は、ソフトウェア又はハードウェアに限定される意味ではなく、“～部”は、アドレス可能な記録媒体にあるように構成されてもよく、１つ又はそれ以上のプロセッサを再生させるように構成され得る。したがって、一例として、“～部”は、ソフトウェアの構成要素、オブジェクト指向ソフトウェアの構成要素、クラスの構成要素、タスクの構成要素などの構成要素、プロセス、関数、属性、プロシージャ、サブルーチン、プログラムコードのセグメント、ドライバ、ファームウェア、マイクロコード、回路、データ、データベース、データ構造、テーブル、アレイ、及び変数を含む。構成要素と“～部”の中で提供される機能は、より少ない数の構成要素と“～部”により結合されるか、又は追加の構成要素と“～部”にさらに分離されてもよい。さらに、構成要素と“～部”は、デバイス内の１つ又はそれ以上のCPUを再生させるように具現されてもよい。

【0025】

また、各図面を参照して説明する実施形態の構成要素が、当該実施形態にのみ制限的に適用されるものではなく、本発明の技術的思想が維持される範囲内で他の実施形態に含まれるように具現されてもよく、また、別の説明が省略されても、複数の実施形態が統合された１つの実施形態として再具現されてもよいことは当然である。

【0026】

また、添付の図面を参照して説明するに当たり、図面符号に関係なく、同一の構成要素は、同一又は関連する参照番号を付し、これに対する重複する説明は省略する。本発明を説明するに当たり、関連する公知技術に対する具体的な説明が本発明の要旨を不要に曖昧にすると判断される場合、その詳細な説明を省略する。

【0027】

図１は、本発明の一実施形態に係るユーザインタフェースプラットフォーム開発システムのアーキテクチャを示す図である。

【0028】

本発明の一実施形態に係るユーザインタフェースプラットフォーム開発システム１は、クライアントの様々なスマートデバイス及びウェブブラウザ環境を支援し、サーバ環境は、J２EE（Java ２ Enterprise Edition）を支援する任意のウェブアプリケーションサーバ（WAS、Web Application Server）、任意のフレームワーク（Framework）、任意のOSなどに対してもプラットフォームの独立性を支援する。

【0029】

以下では、本実施形態に係るユーザインタフェースプラットフォーム開発ソフトウェアを本出願人が開発して販売するウェブスクエア（WebSquare）と称する。

【0030】

ユーザインタフェースプラットフォーム開発システム１は、ユーザが使用するクライアント３０と、開発者が使用する開発ツール２０（‘スタジオ’とも称する）と、クライアント３０の要求に応じて、開発ツール２０でウェブスクエア画面ファイルの開発を可能にするサーバ１０と、を含む。

【0031】

開発ツール２０は、開発者が業務システムに関するウェブスクエア画面ファイルを開発できる環境を提供する。クライアント３０には、クライアントエンジンがインストールされ、クライアントエンジンは、ウェブスクエア画面ファイルをブラウザに表示する。

【0032】

クライアント３０は、ジャバスクリプトで作られており、AJAXアーキテクチャをベースとする。グリッド、チャートなどのUIコンポーネントを動的に実行されるように支援する。通信及び他のUIに関連するユーティリティを含むことができる。

【0033】

クライアント３０に含まれるクライアントエンジンは、単一ページアプリケーション（SPA、Single Page Application）構造を有することができる。

【0034】

クライアントエンジンには、UDC、ページコンポーネント、プロジェクトコンポーネント、MSAコンポーネント、グリッドレイアウト、UIコンポーネント、MSAメッセージハブ、クロスMSAリソース共有、データコレクション、モジュールローダ、プラミスワークフロー、ロギング/デバッギングなどのモジュールが含まれてもよい。

【0035】

コンポーネントは基本ファイルであり、ページ（Page）、プロジェクトUDC、MSA UDC、UDC、TTCを開発するために使用することができる。業務システムのすべての画面を構造化されたコンポーネントで構成し、どこでも再利用可能な効率的な運営を支援することができる。

【0036】

ウェブスクエアページコンポーネントは、コンポーネントの形で使用される基本画面ファイルである。新しく追加されたプロジェクトUDC、MSA UDC、UDC、TTCを支援する。拡張子は、xmlを使用する。

【0037】

UDCは、User Defined Componentの略であり、スタジオのパレットに登録されたユーザ定義コンポーネントである。

【0038】

TTCは、Trust Third-Part Componentの略であり、外部ソリューションをウェブスクエアページコンポーネントとして使用できるように支援する。

【0039】

プロジェクトUDC（Project UDC）は、プロジェクト全体で使用される共通機能を含む共通機能ファイルである。ウェブスクエア環境設定に定義され、ウェブスクエアエンジンのロード時に自動的にロードされる。

【0040】

MSA UDCは、マイクロフロントエンド（Micro Frontend）を支援するための共通機能が含まれる共通機能ファイルである。ウェブスクエア環境設定に定義され、関連するウェブスクエアエンジンのロード時にマイクロサービスが動作するサーバでリソースをロードする。

【0041】

コンポーネントは、大きく内装コンポーネント、SP４ UDCコンポーネント、及びウェブスクエアコンポーネントを含む。

【0042】

内蔵コンポーネントには、グリッドビュー（gridView）があり、グリッド（Grid）、テーブル（Table）、コンボ（Combo）、入力（Input）、タブコントロール（tabControl）などが含まれる。ウェブスクエアで基本的に提供されるコンポーネントである。

【0043】

SP４ UDCコンポーネントは、SP４ UDCとSPC TTCとがある。ユーザ定義コンポーネント標準で、開発者が直接追加できるUDCである。そして、コンポーネント製品をソリューションメーカーとのコラボレーションを通じて追加したTTCである。

【0044】

ウェブスクエアコンポーネントには、UDC、TTC、プロジェクトUDC、MSA UDCがある。UDCとTTCは、開発者が開発したUI要素（Page)の再利用性を高めるために導入されたPageベースのユーザ定義コンポーネントである。既存のPage（XML）を単純化/構造化することで、すべてのPageをコンポーネントとして開発することができる。ページ間の結合度を下げてモジュール化することができる。

【0045】

プロジェクトUDCは、全域UDCであり、すべての画面で呼び出すことができるコンポーネントである。共通業務UDCの開発に使用して再利用を最大化することができる。

【0046】

MSA UDCは、マイクロフロントエンドを具現するためのUDCであり、MSAを適用してクロスドメイン処理を可能にする。

【0047】

データコレクション（Data Collection）は、テーブル形態の直観的なデータ管理と一貫性のある便利なデータ管理のためのモジュールである。グリッドコンポーネントに似ているAPIを提供して、開発者が容易にグリッド形態で操作することができる。

【0048】

プラミスワークフロー（Promise Workflow）は、HTML５で開発する際に複雑で難しかった非同期処理プログラミングを、直観的なGUI方式により単純で容易にプログラミングができるようにする。

【0049】

サーバ１０は、アプリケーションリソース（イメージ、HTML、JS、CSS、XMLなど）を保持する。サーバーアーキテクチャは、アダプタ、ファイルのアップロード/ダウンロード、アクセルI/E（import/export）、及びライセンス管理などのためのユーティリティを含む。また、フレームワークインターフェースのためのモジュールとして、ビジネス共通、ビジネスモジュール、DBIO、及びシステム共通モジュールを含むことができる。

【0050】

サーバ１０は、OS、DBMS、WASに独立的に具現され、プラットフォームの独立性を支援することができる。

【0051】

開発ツール２０は、ウィジウィグ（WYSIWYG）方式の統合開発環境を提供し、開発者に容易な開発を支援することができる。開発者は、開発ツール２０を通じてコンポーネントの描画、スクリプトの追加、画面の確認、デバッギングなどを一度に行うことができる。

【0052】

また、開発ツール２０は、SVN/CVS/Gitなどで形状管理（SCM、Software Configuration Management）を行うことができる。商用形状管理ソリューションは、ベンダーが提供するベンダープラグインすることができる。

【0053】

開発ツール２０には、W-Pack（ソースコンパイラ)、デザインシステム、スニペット（Snippet）、Git/SVN、MSAメッセージハブエディタ、WRMコンポーネント、グリッドレイアウトエディタ、レイアウトマネージャ、ページコンポーネントエディタ、デザインエディタ、コードエディタ、及びメッセージインタフェースなどのモジュールが含まれ得る。また、再利用が可能な共通業務UDCを支援する。

【0054】

様々なデバイス（PC、タブレット、スマートフォン、スマートTVなど）にインストールされているクライアント３０でウェブサーバ１０に要請（HTTP REST API（JSON/XML))する場合、ウェブサーバ１０でリソースを見つけて、ウェブアプリケーションサーバとデータをやり取りし、クライアント３０に要請に相応する応答（HTTP REST API（JSON/XML))を伝送することができる。ウェブサーバ１０と開発ツール２０との間の連結関係でJS画面ソースが配布され得る。

【0055】

本実施形態では、マイクロサービスアーキテクチャ（MSA）に対応するために、MSAメッセージブローカ、クロスMSAリソース共有（Cross MSA Resource Sharing)機能のマイクロフロントエンドアーキテクチャを有することができる。

【0056】

また、シングルページアプリケーション（SPA）、エンジン最適化（Engine Optimizer）、リソース最適化（W-Pack）、大容量データ処理支援などを通じて性能向上を図ることができる。

【0057】

オープンアーキテクチャを通じて任意のウェブアプリケーションサーバー、任意のフレームワーク、任意のOSを支援し、オープンソースリサイクルによる開発生産性の向上を支援することができる。また、様々なオープン/商用ライブラリの容易な連携を支援し、様々なセキュリティソリューション連携も支援することができる。

【0058】

図２は、本発明の一実施形態に係るプログラム開発装置の構成ブロック図であり、図３は、本発明の一実施形態に係るグリッドレイアウトの設定方法のフローチャートであり、図４は、グリッドの構成を示す概念図であり、図５は、グリッドギャップを示す概念図であり、図６から図１１は、グリッドレイアウト設定ウィンドウの例示的な画面である。

【0059】

本発明の一実施形態に係るプログラム開発装置は、開発者がプログラムを開発する際に使用するソフトウェアであり、上述した開発ツールに対応する。グラフィカルユーザインタフェース（GUI）により、オブジェクトの生成、選択、移動、リサイズ、順序変更、親変更などの編集作業を直観的に行うことができる。

【0060】

本実施形態に係るオブジェクトは、プログラム開発時にグラフィックで画面の特定の位置に置かれるコンポーネントである。例えば、ボタン、リストボックス、コンボボックス、エディットボックス、グリッド、テーブル、スクロールビュー、ウィンドウ（窓）などがなり得る。下位オブジェクト（子オブジェクト）は、上位オブジェクト（親オブジェクト）に置かれて、その位置が特定されるオブジェクトであり得る。

【0061】

特に本実施形態では、オブジェクトの中でもグリッドレイアウトコンポーネントを選択してページに初めて描く場合、相対座標あるいは反応型ページを容易にデザインできるようにして、パブリッシャーあるいは開発者の使用性を改善したことを特徴とする。

【0062】

図２を参照すると、本実施形態に係るプログラム開発装置１００は、画面構成部１１０、グリッドレイアウト設定部１２０、GUI提供部１３０、プログラム生成部１４０、及び制御部１５０を含むことができる。

【0063】

画面構成部１１０は、ユーザ端末からディスプレイ部に出力されるプログラム開発装置の画面（開発画面）を構成する。表示する内容が画面より大きい場合は、スクロールを用いて内容を表すことができる。

【0064】

ユーザ端末は、ハンドヘルドPC（Hand-held PC）、ノートパソコン、ラップトップコンピュータ、パッド、サーバ、スマートフォンなどの汎用又は特化された用途のコンピューティング装置であり、マルチメディア再生機能を行えるマイクロプロセッサを搭載することにより、一定の演算動作を行える端末を含むこともできる。

【0065】

また、ユーザ端末は、本実施形態に係るプログラム開発時にグリッドレイアウトの設定方法を提供するアプリケーションあるいはこれに相応する機能のプログラムモュールが動作可能であるように基本搭載されるか、ネットワークを介してダウンロードが可能な端末であり得る。

【0066】

ユーザ端末のディスプレイ部は、LCD、OLED、CRT、３Dディスプレイ、その他のフレキシブルディスプレイなど、様々な具現方式によってイメージ、テキストなどのグラフィック情報を出力することができる装置になり得る。

【0067】

本実施形態に係るユーザ端末のディスプレイ部は、画面ズームイン、ズームアウト、画面移動、スクロールなどの機能を含むことができる。

【0068】

ユーザ端末の画面に出力される内容は、プログラム開発装置内に格納されたデータあるいはネットワーク連結部によってインターネットを介してダウンロードされたデータであり得る。

【0069】

また、ユーザ端末のディスプレイ部は、タッチスクリーンで具現されてもよく、この場合、タッチ情報処理部が画面中のタッチポイントをセンシングして該当位置で発生するイベント情報を処理することができる。

【0070】

グリッドレイアウト設定部１２０は、開発プログラムが実行されるデバイスの画面に相応するページの構成に関するグリッドレイアウトコンポーネントの生成及び修正が可能な設定ウィンドウを提供し、ユーザが簡単な操作だけでも多種のマルチデバイスに対する相対性が反映された反応型ページ用グリッドレイアウトを容易に設定できるようにする。例えば、設定ウィンドウは、ポップアップウィンドウの形態で表現することができる。

【0071】

本実施形態に係るプログラム開発装置によって開発されたプログラムの画面は、多数のグループに区分されるグリッドで具現され得る。グリッドの区画された各領域は、任意の１つのグループに属することになる。任意の１つのグループは、少なくとも１つ以上の領域を含むことができる。

【0072】

グリッドレイアウト設定部１２０は、現在開発中のプログラムが実行されるマルチデバイスの種類に応じて適用されるグリッドレイアウトをデバイス別に区分して作製することができる。この場合、各デバイス別に同一グループの場合には同一オブジェクトが配置され、同一内容が表示されるように相互連動させることができる。

【0073】

GUI提供部１３０は、ユーザにプログラム開発装置をグラフィカルに提供することができる。

【0074】

プログラム生成部１４０は、設定されたグリッドレイアウトに従って開発されたプログラムをコンパイルすることによって実行可能なファイルとして生成することができる。

【0075】

制御部１５０は、上述した画面構成部１１０、グリッドレイアウト設定部１２０、GUI提供部１３０、及びプログラム生成部１４０が互いに連動しながら、自分固有の機能を行うように各機能部を制御する。

【0076】

図４及び図５を参照すると、プログラム画面を構成するグリッドに主な構成が示されている。

【0077】

グリッドは、横及び縦方向のグリッドラインで区画された多数のグリッドセルを含む画面構成コンポーネントである。

【0078】

グリッドコンテナは、すべてのグリッドアイテムの親要素である。

【0079】

グリッドアイテムは、グリッドコンテナの子要素である。

【0080】

グリッドラインは、グリッドを構成する分割線である。

【0081】

グリッドトラックは、２つのグリッドライン間の空間であり、グリッドの列又は行であり得る。

【0082】

グリッドセルは、グリッドの最小構成単位である。

【0083】

グリッド領域は、４つのグリッドラインで囲まれた空間であり、いくつかのグリッドセルから構成され得る。

【0084】

グリッド番号は、グリッドラインの各番号である。

【0085】

グリッドギャップは、グリッドセル間の間隔である（図４及び図５を参照）。

【0086】

１つのグリッドセル自体あるいは２つ以上のグリッドセルが統合されたグリッド領域のそれぞれは、１つの属性を有するグループにグループ化され、各グループ内には１つ以上のオブジェクトが配置され得る。多数のセルからなるグリッド内に多数のグループが配置された形状をグリッドレイアウトという。ここで、１つのグループが一つのグリッドアイテムに対応することができる。

【0087】

本実施形態では、異なる画面解像度を有するマルチデバイスでの円滑な適用のために、マルチデバイスのそれぞれに対するグリッドレイアウトを１つのダイアログウィンドウで開発者が直観的に編集して設定できるようにする。

【0088】

グリッドコンテナの属性は、次の表のとおりである。

【表1】

【0089】

グリッドレイアウトを設定するためには、上記の表に記載されている各属性の値を一々に指定するコーディング(coding)が要求される。また、このようにコーディングされたグリッドレイアウトは、一つのデバイスに従属するものであり、他のディスプレイ解像度のデバイスに対して別のグリッドレイアウトを適用しようとする場合には、完全に新たにコーディングしなければならないという不便さがあった。したがって、本実施形態では、別途のコーディングなしに１つの設定ウィンドウでマルチデバイス別に特定されるグリッドレイアウトをマウス操作あるいはタッチ操作で開発者が簡単に設定し、マルチデバイス間で相互連動する同一グループコンポーネントに対して容易に確認できるようにする。

【0090】

従来のプログラム開発装置によれば、グリッドレイアウトの設定作業時に直観的な選択が困難であり、グリッドレイアウトを設定するためには、グリッドアイテムの各属性値を直接入力しなければならないという不便さがあった。しかし、本実施形態によれば、グラフィカルユーザインタフェースを介してマウスクリック/ドラッグあるいはタッチ処理のような直観的なユーザ入力によってもグリッドレイアウトの生成、編集などの設定を容易で自由に行うことができ、反応型ページの制作作業効率が高まり、生産性が向上することできる。

【0091】

図３を参照すると、グリッドレイアウトの設定方法が示されており、図６から図１１には、設定ウィンドウを通じたグリッドレイアウトの設定過程が示されている。

【0092】

グリッドレイアウト設定部１２０は、ユーザ入力に応じてグリッドレイアウト設定プログラムを実行する（段階Ｓ２００）。プログラムの実行により、開発者が命令を入力できる設定ウィンドウ３００が実行され得る。

【0093】

アダプティブ（adaptive) 設定の適用を確認する（段階Ｓ２１０）。アダプティブが適用された場合には、多数のデバイスが相互連動する適応型あるいは反応型ページの開発ができる。

【0094】

アダプティブ適用は、基本的にはチェックされていない状態にあり得る。そして、ユーザ入力によってアダプティブ適用がチェックされると、config.xmlのメディア（media)項目に定義されたレイアウトが設定ウィンドウ３００内に表現され得る。本実施形態では、メディア項目にデスクトップ（desktop）、タブレット（tablet）、モバイル（mobile）のような３種類のデバイスが定義されている場合を仮定する。

【0095】

設定ウィンドウ内には、メディア項目に定義されたマルチデバイスに対するページ（反応型ページ）構成を示すグリッドレイアウト設定画面がマルチデバイスの数量に相応する数だけ一列に配置されて表示され得る（段階Ｓ２２０）。マルチデバイスには、上述したように、デスクトップ、タブレット、モバイルのうちの１つ以上が含まれ得、各デバイスに対する設定部３１０a、３１０ｂ、３１０cが設定ウィンドウ３００内に表現され得る。

【0096】

マルチデバイスのそれぞれに対してグリッドレイアウトの行、列、グリッド間隔などを設定することによって、基本グリッドレイアウト構成が作られる。m個の行とn個の列に対しては、m×n個のグリッドセルを持つ基本グリッドレイアウト構成が作られることになる。

【0097】

図６では、基本的に全てのマルチデバイスに対して３×３構成の基本グリッドレイアウトが設定された場合が示されている。

【0098】

コンテナのサイズが固定されていない場合、アイテムのサイズを比率で指定しようとする際に、メンテナンスなどを考慮して柔軟な単位で指定する場合、fr単位を使用する。

【0099】

fr（fraction、空間比率）単位は、使用可能な空間の一定の割合を示す。

【0100】

例えば、１つの列に対して、[２fr １fr １fr;]のように指定されると、空間を４つに分かり（２+１+１=４）、１番目の列は２/４だけ取り、残りの１/２を２番目と３番目の列が一つずつ占めることになる。もしコンテナの幅が１０００pxであれば、それぞれ５００px、２５０px、２５０pxとなる。コンテナ幅が流動的であれば、ブラウザがそれに合わせてアイテムのサイズを調節することになる。

【0101】

その後、タブレットに対しては２×４構成に、モバイルに対しては４×１構成に変更した状態が図７に示されている。

【0102】

次に、第１のデバイスに対して選択された１つのグリッドセル自体あるいは２つ以上のグリッドセルを統合したグリッド領域に対して、１つずつのグリッドアイテムをマッチング（matching）するグループを設定する（段階Ｓ２３０）。

【0103】

グリッドセル自体に対する選択は、空セルに対するマウスのダブルクリックあるいはタッチ入力方式で行われる。選択されたグリッドセルは、１つのグループコンポーネントとして指定され得る。

【0104】

２つ以上のグリッドセルに対する統合は、マウスクリックアンドドラッグあるいはタッチアンドドラッグ方式で行われる。又は、マウスクリックあるいはタッチ入力方式で選択されたグリッドセルの周りに表示されるグリッド領域に対するリサイズハンドラを操作してグリッド領域のサイズを拡張することにより、周辺の他のグリッドセルを拡張されたグリッド領域内に含めることにより、当該グリッド領域内部に含まれるグリッドセルを統合して１つのグループコンポーネントとして指定することができる（図８を参照）。

【0105】

第１のデバイスに対して複数のグループコンポーネントが設定される場合、他のデバイスに対しては、第１のデバイスに設定された複数のグループコンポーネントと同じコンポーネントが隠し(hidden)項目に基本設定され得る。隠し項目は、当該デバイスでは表示されない属性を持つグループコンポーネントを示す。

【0106】

隠し項目に配置されたグループコンポーネントは、指定された方法で１つのグリッドセルからなるグリッド領域あるいは２つ以上のグリッドセルが統合されたグリッド領域に配置されるようにすることによって、当該デバイスで当該グループコンポーネントの配置を決定することができる。

【0107】

図９を参照すると、タブレットの場合、０グループから５グループのうち、１行には０グループ、１グループ、２グループ、以後４グループが配置されるようにすることができる。この場合、４グループに該当するコンポーネントを選択して、配置したいグリッドセルにドラッグすることで、グリッドレイアウト設定を行うことができる。

【0108】

図１０及び図１１を参照すると、３グループは２行に配置され、複数のグリッドセルが統合されたグリッド領域にマッチングされ得る。この場合、グリッド領域のリサイズハンドラの操作により、３グループがマッチングされるグリッド領域のサイズを調整することができる。

【0109】

配置完了後、隠し項目に残っているグループコンポーネントは、該当デバイスでは表示されないように設定されたグループコンポーネントとなる。

【0110】

マルチデバイスのそれぞれに対するグリッド領域の指定とグループコンポーネントの配置が完了すると、マルチデバイス別にグリッドテンプレートが生成され得る。

【0111】

マルチデバイス別のグリッドテンプレートにおいて、同じ番号のグループコンポーネントは、同じコンテンツが表現される部分であり、マルチデバイスのそれぞれの特性を反映して適応的に配置することができる。

【0112】

本実施形態では、図１１に示すように、１つの設定ウィンドウで多数のマルチデバイスに対して互いに対応するグループコンポーネントの相対座標を設定して、容易に反応型ページの開発を可能にすることができる。

【0113】

図１２は、プログラム開発装置においてグリッドレイアウトが表示されてページ画面開発を行うことができる基本開発画面の例示図であり、図１３から図１５は、設定ウィンドウによりマルチデバイスに対するグリッドレイアウトが設定された場合、開発画面のサイズに応じて表示される適応的グリッドレイアウトの変化を示す図である。

【0114】

図１２を参照すると、プログラム開発装置１００では、開発画面を通じてユーザ（パブリッシャあるいは開発者）が開発しようとするページの基本グリッドレイアウト構成を表示する。

【0115】

図１２では、３×３構成を有する場合が例示されている。表示された各グリッドセル内にボタン、リストボックス、コンボボックス、エディットボックス、テーブル、スクロールビュー、ウィンドウ（窓）などのオブジェクトを配置してプログラムのページを開発することになる。

【0116】

右側には、現在表示される開発画面に関するコードに相応するスクリプトが表示され得る。

【0117】

先だってグリッドレイアウト設定部１２０を通じてマルチデバイスに関するグリッドテンプレートを完成した場合、開発者がプログラム開発装置１００を通じて開発画面を表示した場合、開発画面の解像度に相応するマルチデバイスのグリッドテンプレートに関するグリッドレイアウトを画面に表示させることができる。

【0118】

図１３では、開発画面がW１の幅を有しており、デスクトップに該当するため、デスクトップのグリッドテンプレートに相応する［３；１；２] 構成のグリッドレイアウトが表現されている。

【0119】

図１４では、開発画面がW２の幅を有しており、タブレットに該当するため、タブレットのグリッドテンプレートに相応する［４；１］構成のグリッドレイアウトが表現されている。

【0120】

図１５では、開発画面がW３の幅を有しており、モバイルに該当するため、モバイルのグリッドテンプレートに相応する［１；１；１；１] 構成のグリッドレイアウトが表現されている。

【0121】

このように開発画面の幅を調整する簡単な操作（例えば、マウスドラッグあるいはタッチドラッグ）によって開発画面内に表現されるグリッドテンプレートが、当該開発画面の解像度に相応するマルチデバイスに合うように自動調整されることにより、ユーザは、容易に現在開発中の反応型ページの具現結果を目で確認して修正補完できるようになる。

【0122】

図１６は、本発明の一実施形態に係るシステムの構成を示す図である。

【0123】

図１６を参照すると、プログラム開発装置１００は、プロセッサ５１０とメモリ５２０とを含む。メモリ５２０は、プロセッサ５１０によって実行可能な１つ以上の命令語を格納する。プロセッサ５１０は、メモリ５２０に格納された１つ以上の命令語を実行する。プロセッサ５１０は、命令語を実行することによって、図３から図１５に関連して上述した１つ以上の動作を実行することができる。さらに、図２を参照して上述した本発明の構成は、プロセッサ５１０によって実行される命令語によって具現される構成であり得る。

【0124】

以上で説明した実施形態は、ハードウェア構成要素、ソフトウェア構成要素、及び／又はハードウェア構成要素及びソフトウェア構成要素の組み合わせで具現され得る。例えば、実施形態で説明した装置、方法、及び構成要素は、例えば、プロセッサ、コントローラ、中央処理装置（Central Processing Unit; CPU）、グラフィックプロセッシングユニット（Graphics Processing Unit; GPU）、ALU（arithmetic logic unit)、デジタル信号プロセッサ（digital signal processor)、マイクロコンピュータ、FPGA（field programmable gate array)、PLU（programmable logic unit)、マイクロプロセッサ、注文型集積回路（Application Specific Integrated Circuits;ASICS)、又は命令（instruction）を実行し応答することができる他のいずれの装置のように、１つ以上の汎用コンピュータ又は特殊目的コンピュータを用いて具現され得る。

【0125】

上述したグリッドレイアウトの設定方法は、コンピュータによって実行されるアプリケーション又はプログラムモジュールのようなコンピュータによって実行可能な命令語を含む記録媒体の形態でも具現され得る。コンピュータ読取可能な媒体は、コンピュータによってアクセス可能な任意の可用媒体であり得、揮発性及び不揮発性媒体、分離型及び非分離型媒体のすべてを含む。さらに、コンピュータ読取可能な媒体はコンピュータ記憶媒体を含むことができる。コンピュータ記憶媒体は、コンピュータ読取可能な命令語、データ構造、プログラムモジュール、又は他のデータのような情報を記憶するための任意の方法又は技術で具現された揮発性及び不揮発性、分離型及び非分離型媒体のすべてを含む。

【0126】

上述したグリッドレイアウトの設定方法は、端末に基本的にインストールされたアプリケーション（これは、端末に基本的に搭載されたプラットフォームやオペレーティングシステムなどに含まれているプログラムを含むことができる）によって実行され得、ユーザがアプリケーションストアサーバ、アプリケーション又は該当サービスに関連するウェブサーバなどのアプリケーション提供サーバを介してマスター端末に直接インストールしたアプリケーション（すなわち、プログラム）によって実行されてもよい。このような意味から、上述したグリッドレイアウトの設定方法は、端末に基本的にインストールされるか、又はユーザによって直接インストールされたアプリケーション（すなわち、プログラム）で具現され、端末などのコンピュータで読み取り可能な記録媒体に記録され得る。

【0127】

以上では、本発明の実施形態を参照して説明したが、当該技術分野で通常の知識を有する者であれば、下記の特許請求の範囲に記載された本発明の思想及び領域から逸脱しない範囲内で、本発明を多様に修正及び変更することができることが理解できるだろう。

【符号の説明】

【0128】

１００：プログラム開発装置
１１０：画面構成部
１２０：グリッドレイアウト設定部
１３０：GUI提供部
１４０：プログラム生成部
１５０：制御部

【要約】      （修正有）

【課題】画面構成の基本レイアウトであるグリッドレイアウトを、グラフィカルユーザインタフェースを通じてユーザが直観的に設定できるようにするグリッドレイアウトの設定方法及びこれを行うプログラムを提供する。
【解決手段】グリッドレイアウトの設定方法は、ユーザ入力に応じてグリッドレイアウトの設定ウィンドウを実行してアダプティブ設定の適用を確認し、アダプティブ設定が適用された場合、設定ウィンドウ内にマルチデバイスのそれぞれに対するグリッドレイアウト設定画面が表示され、グリッド領域のそれぞれに対して複数のグループコンポーネントをマッチングさせ、第２のデバイスに対して複数の第２のグリッド領域を設定し、グループコンポーネントのうちの一部あるいは全体を第２のグリッド領域にそれぞれマッチングさせる。
【選択図】図３

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】

【図11】

【図12】

【図13】

【図14】

【図15】

【図16】