特許 7508058 ワンソースマルチユース支援プラットフォームでのビジュアルスクリプト提供方法とこれを行うプログラム

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

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

(11)【特許番号】

(24)【登録日】2024-06-21

(45)【発行日】2024-07-01

(54)【発明の名称】ワンソースマルチユース支援プラットフォームでのビジュアルスクリプト提供方法とこれを行うプログラム

(51)【国際特許分類】

   G06F 8/38 20180101AFI20240624BHJP

【ＦＩ】

G06F8/38

【請求項の数】 12

(21)【出願番号】P 2024076174

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

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

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

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

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

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

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

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

【早期審査対象出願】

(73)【特許権者】

【識別番号】524040915

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

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

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

(74)【代理人】

【識別番号】100127328

【弁理士】

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

(72)【発明者】

【氏名】イオ セヨン

(72)【発明者】

【氏名】キム ウグレ

【審査官】円子 英紀

(56)【参考文献】

【文献】韓国公開特許第２０１５－００９９３１８（ＫＲ，Ａ）

【文献】米国特許出願公開第２０２２／０３８２９６３（ＵＳ，Ａ１）

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

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

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

Ｇ０６Ｆ ８／３８

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

【請求項1】

ワンソースマルチユース用プログラム開発装置で行われるビジュアルスクリプト提供方法を行うようにするためにコンピュータ読取可能な媒体に格納されたコンピュータプログラムであって、前記コンピュータプログラムは、コンピュータが以下の段階を行うようにし、前記段階は、
（ａ）第１ユーザ入力に相応して、前記プログラム開発装置の実行による開発ツール実行画面のページエディタ領域を区切り線により分割する段階と；
（ｂ）前記区切り線により分割された領域のうちの１つを、開発対象となるプログラム画面のページ構成を直観的に表すデザインエディタ領域に設定し、他の一つを前記プログラム画面の構成に関するスクリプトソースを示すスクリプトエディタ領域に設定する段階と、を含み、
前記開発ツールの実行画面に前記デザインエディタ領域と前記スクリプトエディタ領域とが一緒に出力され、前記デザインエディタ領域と前記スクリプトエディタ領域のそれぞれには、相互に関連付けられるコンポーネントとスクリプトソースとが表示され、
前記デザインエディタ領域でスクロール動作が発生した場合、前記デザインエディタ領域に表示されるページ構成画面内のコンポーネントに対して優先順位を付ける段階と；
最も高い優先順位を有するコンポーネントに関するスクリプトソースが前記スクリプトエディタ領域に表示されるようにスクリプトフォーカスが移動する段階とを、さらに含む、コンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項2】

前記区切り線は、第２のユーザ入力に応じて移動され、前記デザインエディタ領域と前記スクリプトエディタ領域とが占める割合が調整されることを特徴とする請求項１に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項3】

スクリプトエディタ領域の下部には、マウスオーバー時だけ表示されるデザインエディタ領域隠しボタンが具現されており、前記デザインエディタ領域隠しボタンをクリックすると、前記デザインエディタ領域が見えず、前記スクリプトエディタ領域が上記ページエディタ領域の全体に表示されることを特徴とする請求項１に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項4】

前記優先順位は、前記コンポーネントのオブジェクト属性に従って付与されることを特徴とする請求項１に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項5】

前記優先順位は、前記コンポーネントが上記デザインエディタ領域内に入った時点を基準にして付与されることを特徴とする請求項１に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項6】

（ｃ）前記スクリプトエディタ領域でスクロール動作が発生した場合、前記スクリプトエディタ領域に表示されるスクリプトソースが変更される段階と；
（ｄ）現在、前記スクリプトエディタ領域に表示されるスクリプトソースによって具現されるコンポーネントが画面中心になるように、前記デザインエディタ領域のページ構成画面がフォーカスされる段階と、をさらに含む、請求項１に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項7】

（ｃ）ユーザイベントを感知する段階と；
（ｄ）ユーザイベントによって選択された第１の対象を識別する段階と；
（ｅ）イベント発生領域以外の他の領域において、前記ユーザイベントに対応する第２の対象にフォーカスを移動させる段階と；
（ｆ）前記第２の対象の表現方式を変更する段階と、をさらに含む、請求項１に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項8】

前記イベント発生領域がデザインエディタ領域である場合、
前記第１の対象はコンポーネントであり、前記第２の対象はスクリプトソースラインであることを特徴とする請求項７に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項9】

前記イベント発生領域が前記スクリプトエディタ領域である場合、
前記第１の対象はスクリプトソースラインであり、前記第２の対象はコンポーネントであることを特徴とする請求項７に記載のコンピュータ読取可能な媒体に格納されたコンピュータプログラム。

【請求項10】

ワンソースマルチユース用プログラム開発装置で行われるビジュアルスクリプト提供方法において、
（ａ）第１ユーザ入力に相応して、前記プログラム開発装置の実行による開発ツール実行画面のページエディタ領域を区切り線により分割する段階と；
（ｂ）前記区切り線により分割された領域のうちの１つを、開発対象となるプログラム画面のページ構成を直観的に表すデザインエディタ領域に設定し、他の一つを前記プログラム画面の構成に関するスクリプトソースを示すスクリプトエディタ領域に設定する段階と、を含み、
前記開発ツールの実行画面に前記デザインエディタ領域と前記スクリプトエディタ領域とが一緒に出力され、前記デザインエディタ領域と前記スクリプトエディタ領域のそれぞれには、相互に関連付けられるコンポーネントとスクリプトソースとが表示され、
前記デザインエディタ領域でスクロール動作が発生した場合、前記デザインエディタ領域に表示されるページ構成画面内のコンポーネントに対して優先順位を付ける段階と；
最も高い優先順位を有するコンポーネントに関するスクリプトソースが前記スクリプトエディタ領域に表示されるようにスクリプトフォーカスが移動する段階と、をさらに含む、ビジュアルスクリプト提供方法。

【請求項11】

（ｃ）前記スクリプトエディタ領域でスクロール動作が発生した場合、前記スクリプトエディタ領域に表示されるスクリプトソースが変更される段階と；
（ｄ）現在、前記スクリプトエディタ領域に表示されるスクリプトソースによって具現されるコンポーネントが画面中心になるように、前記デザインエディタ領域のページ構成画面がフォーカスされる段階と、をさらに含む、請求項１０に記載のビジュアルスクリプト提供方法。

【請求項12】

（ｃ）ユーザイベントを感知する段階と；
（ｄ）ユーザイベントによって選択された第１の対象を識別する段階と；
（ｅ）イベント発生領域以外の他の領域において、前記ユーザイベントに対応する第２の対象にフォーカスを移動させる段階と；
（ｆ）前記第２の対象の表現方式を変更する段階と、をさらに含む、請求項１０に記載のビジュアルスクリプト提供方法。

【発明の詳細な説明】

【技術分野】

【0001】

本発明は、ワンソースマルチユース支援プラットフォームでのビジュアルスクリプト提供方法及びこれを行うプログラムに関する。

【背景技術】

【0002】

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

【0003】

プログラム開発時にグラフィックで画面の特定の位置に置かれるボタン、ボックス、グリッド、スクロールビューなどのオブジェクトを選択して配置することができるが、開発中のプログラム画面に対するソースコードに該当するスクリプトを確認するためには、別のタブ選択による画面の切り替えが要求された。この場合、現在デザインされたプログラム画面とスクリプトとを同時に確認し難しいという問題点があった。

【0004】

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

【0005】

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

【先行技術文献】

【特許文献】

【0006】

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

【発明の概要】

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

【0007】

本発明の目的は、ワンソースマルチユース（OSMU、One Source Multi Use）でマルチブラウザ、マルチデバイス、マルチOSを支援する上で、プログラム画面開発過程で開発中のプログラム画面とそれに対応するスクリプトを同時に確認できるようにするワンソースマルチユース支援プラットフォームでのビジュアルスクリプト提供方法とこれを行うプログラムを提供することにある。

【0008】

本発明の他の目的は、開発中のプログラム画面とそれに対応するスクリプトの同時出力中にユーザ入力によって選択されたプログラム画面上のコンポーネントに対応するスクリプトのソースコードをフォーカスするか、ユーザ入力によって選択されたスクリプトのソースコードに対応するプログラム画面上のコンポーネントをフォーカスして、開発者がプログラム画面上の各コンポーネントに対応するソースコードを容易に確認できるようにするワンソースマルチユース支援プラットフォームでのビジュアルスクリプト提供方法及びこれを行うプログラムを提供することにある。

【0009】

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

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

【0010】

上記の目的を達成するために、本発明の一態様によれば、ワンソースマルチユース用プログラム開発装置で行われるビジュアルスクリプト提供方法を行うようにするためにコンピュータ読取可能な媒体に格納されたコンピュータプログラムであって、上記コンピュータプログラムは、コンピュータが以下の段階を行うようにし、上記の段階は、ワンソースマルチユース用プログラム開発装置で行われるビジュアルスクリプト提供方法において、（ａ）第１のユーザ入力に相応して、上記プログラム開発装置の実行による開発ツール実行画面のページエディタ領域を区切り線により分割する段階と；（ｂ）上記区切り線により分割された領域のうちの１つをデザインエディタ領域に設定し、他の一つをスクリプトエディタ領域に設定する段階と、を含み、上記開発ツールの実行画面に上記デザインエディタ領域とスクリプトエディタ領域とが一緒に出力され、上記デザインエディタ領域とスクリプトエディタ領域のそれぞれには、相互に関連付けられるコンポーネントとスクリプトソースとが表示されることを特徴とするコンピュータ読取可能な媒体に格納されたコンピュータプログラムが提供される。

【0011】

上記区切り線は、第２のユーザ入力に応じて移動され、上記デザインエディタ領域と上記スクリプトエディタ領域とが占める割合を調整することができる。

【0012】

上記スクリプトエディタ領域の下部には、マウスオーバー時だけ表示されるデザインエディタ領域隠しボタンが具現されており、上記デザインエディタ領域隠しボタンをクリックすると、上記デザインエディタ領域が見えず、上記スクリプトエディタ領域が上記ページエディタ領域の全体に表示され得る。

【0013】

（ｃ）上記デザインエディタ領域でスクロール動作が発生した場合、上記デザインエディタ領域に表示されるページ構成画面内のコンポーネントに対して優先順位を付ける段階と；（ｄ）最も高い優先順位を有するコンポーネントに関するスクリプトソースがスクリプトエディタ領域に表示されるようにスクリプトフォーカスを移動する段階と、さらに含むことができる。

【0014】

上記優先順位は、上記コンポーネントのオブジェクト属性に従って付与され得る。あるいは、上記優先順位は、上記コンポーネントが上記デザインエディタ領域内に入った時点を基準にして付与され得る。

【0015】

（ｃ）上記スクリプトエディタ領域でスクロール動作が発生した場合、上記スクリプトエディタ領域に表示されるスクリプトソースが変更される段階と；（ｄ）現在上記スクリプトエディタ領域に表示されるスクリプトソースによって具現されるコンポーネントが画面の中心になるように、上記デザインエディタ領域のページ構成画面がフォーカスされる段階と、をさらに含むことができる。

【0016】

（ｃ）ユーザイベントを感知する段階と；（ｄ）上記ユーザイベントによって選択された第１の対象を識別する段階と、（ｅ）イベント発生領域以外の他の領域において、ユーザイベントに対応する第２の対象にフォーカスを移動させる段階と、（ｆ）上記第２の対象の表現方式を変更する段階と、をさらに含むことができる。

【0017】

上記イベント発生領域が上記デザインエディタ領域である場合、上記第１の対象はコンポーネントであり、上記第２の対象はスクリプトソースラインであり得る。

【0018】

上記イベント発生領域が上記スクリプトエディタ領域である場合、上記第１の対象はスクリプトソースラインであり、上記第２の対象はコンポーネントであり得る。

【0019】

一方、本発明の他の態様によれば、ワンソースマルチユース用プログラム開発装置で行われるビジュアルスクリプト提供方法において、（ａ）第１のユーザ入力に相応して上記プログラム開発装置の実行による開発ツール実行画面のページエディタ領域を区切り線により分割する段階と；（ｂ）上記区切り線により分割された領域のうちの１つをデザインエディタ領域に設定し、他の一つをスクリプトエディタ領域に設定する段階と、を含み、上記開発ツール実行画面に上記デザインエディタ領域と上記スクリプトエディタ領域が一緒に出力され、上記デザインエディタ領域と上記スクリプトエディタ領域のそれぞれに、相互に関連付けられるコンポーネントとスクリプトソースとが表示されることを特徴とするビジュアルスクリプト提供方法が提供される。

【0020】

（ｃ）上記デザインエディタ領域でスクロール動作が発生した場合、上記デザインエディタ領域に表示されるページ構成画面内のコンポーネントに対して優先順位を付ける段階と；（ｄ）最も高い優先順位を有するコンポーネントに関するスクリプトソースが上記スクリプトエディタ領域に表示されるようにスクリプトフォーカスが移動する段階と、をさらに含むことができる。

【0021】

又は、（ｃ）上記スクリプトエディタ領域でスクロール動作が発生した場合、上記スクリプトエディタ領域に表示されるスクリプトソースが変更される段階と；（ｄ）現在上記スクリプトエディタ領域に表示されるスクリプトソースによって具現されるコンポーネントが画面中心になるように、デザインエディタ領域のページ構成画面がフォーカスされる段階と、をさらに含むことができる。

【0022】

又は、（ｃ）ユーザイベントを感知する段階と；（ｄ）上記ユーザイベントによって選択された第１の対象を識別する段階と；（ｅ）イベント発生領域以外の他の領域において、上記ユーザイベントに対応する第２の対象にフォーカスを移動させる段階と、（ｆ）上記第２の対象の表現方式を変更する段階と、をさらに含むことができる。

【0023】

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

【発明の効果】

【0024】

本発明の実施形態によれば、ワンソースマルチユースでマルチブラウザ、マルチデバイス、マルチOSを支援する上で、プログラム画面開発過程で開発中のプログラム画面とそれに対応するスクリプトを同時に確認できるようにする効果がある。

【0025】

また、開発中のプログラム画面とそれに対応するスクリプトの同時出力中にユーザ入力により選択されたプログラム画面上のコンポーネントに対応するスクリプトのソースコードをフォーカスするか、ユーザ入力により選択されたスクリプトのソースコードに対応するプログラム画面上のコンポーネントをフォーカスして、開発者がプログラム画面上の各コンポーネントに対応するソースコードを容易に確認できるようにする効果もある。

【0026】

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

【図面の簡単な説明】

【0027】

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

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

【図3】本発明の一実施形態に係るビジュアルスクリプト提供方法のフローチャートである。

【図4】本発明の一実施形態に係るビジュアルスクリプト提供方法のフローチャートである。

【図5】ビジュアルスクリプト機能のうちトグル機能が適用された開発ツール画面を示す図である。

【図6】ビジュアルスクリプト機能のうちインタラクション機能が適用された開発ツール画面を示す図である。

【図7】ビジュアルスクリプト機能のうちインタラクション機能が適用された開発ツール画面を示す図である。

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

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

【0028】

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

【0029】

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

【0030】

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

【0031】

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

【0032】

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

【0033】

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

【0034】

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

【0035】

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

【0036】

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

【0037】

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

【0038】

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

【0039】

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

【0040】

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

【0041】

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

【0042】

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

【0043】

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

【0044】

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

【0045】

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

【0046】

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

【0047】

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

【0048】

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

【0049】

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

【0050】

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

【0051】

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

【0052】

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

【0053】

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

【0054】

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

【0055】

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

【0056】

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

【0057】

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

【0058】

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

【0059】

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

【0060】

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

【0061】

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

【0062】

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

【0063】

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

【0064】

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

【0065】

図２は、本発明の一実施形態に係るプログラム開発装置の構成ブロック図であり、図３及び図４は、本発明の一実施形態に係るビジュアルスクリプト提供方法のフローチャートであり、図５は、ビジュアルスクリプト機能のうちのトグル機能が適用された開発ツール画面を示す図であり、図６及び図７は、ビジュアルスクリプト機能のうちのインタラクション機能が適用された開発ツール画面を示す図である。

【0066】

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

【0067】

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

【0068】

特に、本実施形態では、開発ツールを用いて開発中のプログラム画面のページ構成を直観的に示すデザインエディタ領域と、当該プログラム画面の構成に関するスクリプトソースを示すスクリプト領域とを同時に表示して、開発者がプログラム画面のページ構成とソースコードを一緒に確認できるようにして開発の利便性を向上させたことを特徴とする。

【0069】

図２を参照すると、本実施形態に係るプログラム開発装置１００は、画面構成部１１０、ビジュアルスクリプト提供部１２０、プログラム生成部１３０、及び制御部１４０を含むことができる。

【0070】

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

【0071】

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

【0072】

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

【0073】

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

【0074】

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

【0075】

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

【0076】

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

【0077】

プログラム開発装置で提供する開発ツール画面は、プロジェクト検索領域、パレット領域、デザインエディタ領域、インフォ領域、スクリプトエディタ領域、ソースビュー領域、及び属性ビュー領域に区分され得る。

【0078】

プロジェクトナビゲーション領域では、ワークスペースにあるプロジェクトとファイルを確認することができる。スイッチ（Switch）ワークスペースのメニューを通じてワークスペースを確認して変更することができる。

【0079】

パレット領域では、プログラム開発装置から提供するコンポーネント、UDC、TTC、スニペットなどを一目で確認することができる。検索ボックスにコンポーネント名を入力してコンポーネントを検索することもできる。

【0080】

デザインエディタ領域は、開発者が開発したいプログラム画面、すなわちページに対応する領域である。ウィジウィグ（WYSIWYG）方式のコンポーネントデザイン空間であり、パレット領域で選択したコンポーネントを描くことができる。

【0081】

コンポーネントをデザインする手順は、次のとおりである。

【0082】

パレット領域でコンポーネントを選択する。デザインエディタ領域の目的の位置に選択したコンポーネントを描く。該当コンポーネントの属性、構成、スタイルを相応するビューで編集する。

【0083】

インフォ領域は、開発した画面をページコンポーネントとして登録して使用する場合、関連情報を登録する領域である。一般、コンポーネント、属性、API、「イベントなどのタブを活用して、当該画面及びページコンポーネントの一般的な情報を登録し、ページコンポーネントの属性、関数、イベントを追加することができる。

【0084】

スクリプトエディタ領域は、ジャバスクリプト（JavaScript）文法（例えば、ES6、ES２０２０など）を支援するエディタ領域である。開発者は、直接イベント及び関数を使用して複雑な機能を具現できる。マウスオーバー（mouse over）の際に関数形式に関するツールチップが提供され得る。又は、コンテキストメニューを用いて検索/コピー/フォーマットなどの機能を使用することもできる。

【0085】

また、スクリプトエディタ領域でスクリプトを作成する際に、特定のキーあるいはキーの組み合わせを押すと、オートコンプリート（AutoComplete）機能が提供され得る。

【0086】

ソースビュー領域は、デザインエディタ領域で作業した内容に対して自動的にソースコード（例えば、XMLソース）が生成され表示される空間である。ソースビュー領域は、ソースコードエディタとして機能して、開発者が直接XMLソースを確認し、追加に編集ができるようにする。

【0087】

属性ビュー領域は、デザインエディタ領域で選択されたコンポーネントの属性が表示される空間である。属性ビュー領域で各属性を選択すると、当該属性に関する情報がツールチップとして表示され得る。

【0088】

開発ツール画面のうち、ページに対応するページエディタ領域には、上述したデザインエディタ領域、スクリプトエディタ領域、ソースビュー領域をタブビュー方式で選択的に表示することができる。ただし、この場合、開発者が現在開発中のページに対してデザイン的な側面とともにスクリプトに関する内容を確認するためには、別のタブを切り替えなければならず、一目で見えない不便さがあった。

【0089】

したがって、本実施形態では、ビジュアルスクリプト提供部１２０は、開発プログラムが実行されるデバイスの画面に対応するページの構成に関するプログラム画面デザインと当該ページの構成に相応するスクリプトを一画面で見ることができるように一緒に表示するビジュアルスクリプトを提供できる。

【0090】

ビジュアルスクリプトを通じてデザインエディタ領域のコンポーネントを確認した状態で、画面切り替えなしですぐにスクリプトを作成できるように支援することができる。

【0091】

ビジュアルスクリプトの詳細機能には、トグル機能とインタラクション機能が含まれ得、これについては関連する図面を参照して詳細に後述する。

【0092】

プログラム生成部１３０は、ビジュアルスクリプト機能を通じて開発されたプログラムをコンパイルすることによって実行可能なファイルとして生成することができる。

【0093】

制御部１４０は、上述した画面構成部１１０、ビジュアルスクリプト提供部１２０、及びプログラム生成部１３０が互いに連動しながら自分固有の機能を行うように各機能部を制御する。

【0094】

図３を参照すると、ビジュアルスクリプト機能のうちトグル機能が適用される場合のビジュアルスクリプト提供方法が示されている。

【0095】

プログラム開発装置１００が実行され（段階Ｓ２００）、ビジュアルスクリプト提供部１２０によってビジュアルスクリプトが活性化された状態を仮定する（段階Ｓ２１０）。

【0096】

トグル機能を活性化したいユーザ入力が受信されると（段階Ｓ２２０）、ビジュアルスクリプト提供部１２０は、開発ツール実行ウィンドウ４００のうちページエディタ領域４１０を分割することができる（段階Ｓ２３０）。

【0097】

ページエディタ領域４１０は、区切り線４１２によって２つの領域に分割され得る。いずれか一つの領域は、デザインエディタ領域４２０に割り当てられ、他の領域は、スクリプトエディタ領域４３０に割り当てられ得る。

【0098】

したがって、デザインエディタ領域４２０とスクリプトエディタ領域４３０とが一画面に一緒に出力され得る（段階Ｓ２４０）。

【0099】

図５では、区切り線４１２が垂直線で具現され、左側の領域がデザインエディタ領域４２０に割り当てられ、右側の領域がスクリプトエディタ領域４３０に割り当てられた場合が示されている。しかしながら、区切り線は、垂直線以外に水平線で具現されてもよいことは言うまでもない。

【0100】

その後、ユーザ入力に相応して、以下のトグル機能をさらに実行することができる（段階Ｓ２５０）。

【0101】

区切り線４１２は、マウスクリックアンドドラッグあるいはタッチドラッグのようなユーザ入力によって移動することができる。区切り線４１２が移動する場合、区切り線４１２によって分割された２つの領域の大きさ、すなわち２つの領域が占める割合が調整され得る。したがって、開発者は、１画面に一緒に表示されるデザインエディタ領域４２０とスクリプトエディタ領域４３０のいずれか一つに対してより大きな画面を割り当てることができる。

【0102】

トグル機能が活性化された状態で、スクリプトエディタ領域４３０の下端には、特定の機能のボタンあるいはアイコン（以下、‘ボタン’と呼ぶ）が設けられる。当該ボタン４１４は、デザインエディタ領域４２０を隠す役割を果たすデザインエディタ領域隠しボタンであり、該当ボタンが選択されると、デザインエディタ領域４２０を隠し、スクリプトエディタ領域４３０がページエディタ領域４１０の全体を占めるようにして、スクリプトの内容のみが見えるように処理することができる。

【0103】

デザインエディタ領域隠しボタン４１４は、マウスオーバー（mouseover）時にのみ見えるように具現することができる。

【0104】

次に、図４を参照すると、ビジュアルスクリプト機能のうちインタラクション（interaction）機能が適用される場合のビジュアルスクリプト提供方法が示されている。

【0105】

ビジュアルスクリプトが活性化されると（段階Ｓ３１０）、デザインエディタ領域４２０とスクリプトエディタ領域４３０とが一画面に一緒に出力され得る（段階Ｓ３２０）。

【0106】

デザインエディタ領域４２０とスクリプトエディタ領域４３０のそれぞれには、相互に関連付けられるコンポーネントとスクリプトソースとが表示され得る。したがって、デザインエディタ領域４２０に描かれたコンポーネントとスクリプトエディタ領域４３０に表示されるスクリプトソースラインとが互いに対応して、開発者が相互関係を視覚的に容易に把握できるようになる。

【0107】

デザインエディタ領域４２０がスクロール動作によって現在表示されるページ構成画面がスクロールアップあるいはスクロールダウンされる場合、現在のデザインエディタ領域４２０内に表示されるコンポーネントに関するスクリプトソースをスクリプトエディタ領域４３０内に表示させることができる。

【0108】

この場合、デザインエディタ領域４２０内に表示されるページ構成画面に含まれるコンポーネントに対して優先順位を付与し、最も高い優先順位を有するコンポーネントに関するスクリプトソースがスクリプトエディタ領域４３０に表示されるようにスクリプトフォーカスが移動できる。

【0109】

優先順位は、コンポーネントが持つオブジェクト属性に従って付与できる。すなわち、親オブジェクトが高い優先順位を有し、子オブジェクトが低い優先順位を有することができる。

【0110】

又は、優先順位は、デザインエディタ領域４２０内に入った時点を基準にして付与され得る。スクロール動作により、新たにデザインエディタ領域４２０内に入ったコンポーネントに対して高い優先順位を付与し、当該コンポーネントに関するスクリプトソースをスクリプトエディタ領域４３０に表示させることができる。

【0111】

これは、逆の場合にも同様に適用することができる。すなわち、スクリプトエディタ領域４３０がスクロール動作によって現在表示されるスクリプトソースが変更される場合、現在スクリプトエディタ領域４３０内に表示されるスクリプトソースによって具現されるコンポーネントが画面中心となるようにデザインエディタ領域４２０のページ構成画面がフォーカスされ得る。

【0112】

次に、ビジュアルスクリプト提供部１２０は、ユーザイベントを感知する（段階Ｓ３３０）。ユーザイベントは、マウスクリック、タッチなどのユーザ入力であり得る。

【0113】

分割された２つの領域のうち、ユーザイベントが発生した領域を識別する（段階Ｓ３４０）。ページエディタ領域４１０がデザインエディタ領域４２０とスクリプトエディタ領域４３０とに分けられているので、２つの領域のいずれか一つの領域でユーザイベントが発生したかを識別することができる。

【0114】

さらに、ユーザイベントによって選択された第１の対象を識別する。デザインエディタ領域４２０でユーザイベントが発生した場合（第１のイベント）第１の対象はコンポーネントとなり、スクリプトエディタ領域４３０でユーザイベントが発生した場合（第２のイベント）、第１の対象はスクリプトソースラインとなる。

【0115】

イベント発生領域以外の他の領域において、ユーザイベントに対応する第２の対象にフォーカスを移動させる（段階Ｓ３５０）。そして、第２の対象に対する表現方式を変更して、開発者が第１の対象に関連付けられる第２の対象を一目で把握可能にすることができる。

【0116】

第２の対象は、第１の対象に関連する部分である。第１の対象がコンポーネントである場合、第２の対象はスクリプトソースラインとなり、第１の対象がスクリプトソースラインである場合、第２の対象はコンポーネントとなる。

【0117】

第１のイベントのようにデザインエディタ領域４２０に描かれたコンポーネントのいずれか一つのコンポーネントが選択される場合（マウスクリック、タッチなどの方式で）、当該コンポーネントに関連するスクリプトソースラインの１つあるいは関数にスクリプトフォーカスが移動できる。ここで、スクリプトフォーカスはカーソルであり得る。又は、スクリプトフォーカスは、当該ラインあるいは該当関数に対するハイライトであり得る。

【0118】

スクリプトフォーカスが移動するラインは、当該コンポーネントに関連する関数に関するスクリプトソースラインの一番目のラインである。もし関数に関するスクリプトソースに注釈が含まれている場合は、注釈を除いて実際のプログラムコードに該当するコーディングラインのうち一番目のラインにスクリプトフォーカスが移動することもできる。

【0119】

また、当該コンポーネントに関するコンポーネントIDを含むスクリプトソースラインが２つ以上である場合は、基本的にコンポーネントIDが最初に登場したスクリプトソースラインにスクリプトフォーカスが移動する。その後、ユーザ入力によって、当該コンポーネントIDが登場する他のスクリプトソースラインにスクリプトフォーカスを移動させることもできる。

【0120】

図６を参照すると、ページエディタ領域４１０内の分割された２つの領域のうち、デザインエディタ領域４２０で［Editor ID］.getHTML()ボタンコンポーネントを選択した場合、スクリプトエディタ領域４３０で当該ボタンコンポーネントに関するライン（ライン１９）にスクリプトフォーカス４３５が移動する。

【0121】

次に、第２のイベントのようにスクリプトエディタ領域４３０に表示されるスクリプトソースのいずれか一つのラインが選択される場合（マウスクリック、タッチなどの方式で）、デザインエディタ領域４２０のコンポーネントのうち当該ソースラインに関連するコンポーネントがフォーカスされ得る。

【0122】

選択されたスクリプトソースラインを分析して、当該ソースラインに含まれているコンポーネントIDを読み出すことで、フォーカスされるコンポーネントを識別できる。又は、選択されたスクリプトソースラインを含む機能ブロックが処理するイベントに関連するコンポーネントに関する情報を見つけることによって、フォーカスされるコンポーネントを識別することもできる。

【0123】

図７を参照すると、ページエディタ領域４１０内の分割された２つの領域のうち、スクリプトエディタ領域４３０でSpinnerコンポーネントのうち日付の文字列に関するラインを選択した場合、デザインエディタ領域４２０でSpinnerコンポーネントのうち日付の文字列に関するコンポーネント４２５が他のコンポーネントとは区別される方式で表現され得る。

【0124】

関連するコンポーネントの表現方式としては、あらかじめ指定された色への変更、フォントタイプ変更、点滅効果、ネオン効果、影効果、回転効果など様々な効果が適用できる。

【0125】

本実施形態に係るプログラム開発装置は、開発者が開発しようとするプログラム画面に関する画面デザインとスクリプトを一画面で見ることができるようにすることで、デザインのコンポーネントを確認するとともにスクリプト作成も可能に支援して、開発者の使用性を改善することで、容易で直観的な開発を可能にする。

【0126】

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

【0127】

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

【0128】

以上で説明した実施形態は、ハードウェア構成要素、ソフトウェア構成要素、及び/又はハードウェア構成要素及びソフトウェア構成要素の組み合わせで具現され得る。例えば、実施形態で説明した装置、方法、及び構成要素は、例えば、プロセッサ、コントローラ、中央処理装置（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）を実行し応答することができる他のいずれの装置のように、１つ以上の汎用コンピュータ又は特殊目的コンピュータを用いて具現され得る。

【0129】

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

【0130】

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

【0131】

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

【符号の説明】

【0132】

１００：プログラム開発装置
１１０：画面構成部
１２０：ビジュアルスクリプト提供部
１３０：プログラム生成部
１４０：制御部
４００：開発ツール
４１０：ページエディタ領域
４１２：区切り線
４１４：デザインエディタ領域隠しボタン
４２０：デザインエディタ領域
４３０：スクリプトエディタ領域

【要約】

【目的】
ワンソースマルチユース（OSMU、One Source Multi Use）でマルチブラウザ、マルチデバイス、マルチOSを支援する上で、プログラム画面開発過程で開発中のプログラム画面とそれに対応するスクリプトを同時に確認できるようにするワンソースマルチユース支援プラットフォームでのビジュアルスクリプト提供方法とこれを行うプログラムを提供すること。
【解決手段】
ワンソースマルチユース用プログラム開発装置で行われるビジュアルスクリプト提供方法を行うようにするためにコンピュータ読取可能な媒体に格納されたコンピュータプログラムであって、上記コンピュータプログラムは、コンピュータが以下の段階を行うようにし、上記の段階は、ワンソースマルチユース用のプログラム開発装置で行われるビジュアルスクリプト提供方法において、（ａ）第１のユーザ入力に相応して上記プログラム開発装置の実行による開発ツール実行画面のページエディタ領域を区切り線により分割する段階と；（ｂ）上記区切り線により分割された領域のうちの１つをデザインエディタ領域に設定し、他の一つをスクリプトエディタ領域に設定する段階と、を含み、上記開発ツールの実行画面に上記デザインエディタ領域と上記スクリプトエディタ領域とが一緒に出力され、上記デザインエディタ領域と上記スクリプトエディタ領域のそれぞれには、相互に関連付けられるコンポーネントとスクリプトソースとが表示されることを特徴とする。
【選択図】 図１

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】