(57)【要約】【課題】画面の動的コントロールが必要な業務用のWeb画面を、簡単な操作で効率的に作成可能であり、可読性や均質性にも優れたコードを生成できる開発支援技術を提供する。【解決手段】画面生成用ベースファイル12に基づき、段組レイアウト選択メニュー34と、HTML部品選択メニュー38を備えた編集画面30を表示する手段と、選択された段組レイアウト39を編集画面30上に表示する手段と、選択されたHTML部品を編集画面30上に配置する手段と、各HTML部品について、特定の制御機能を実現する関数を選択する欄63と、当該制御機能を発動させるイベントを選択する欄62を備えた部品機能設定ウィンドウ50を編集画面30上に表示する手段と、選択された関数及びイベントと各HTML部品との対応関係を、部品機能定義ファイル22として出力する手段と、選択された段組レイアウト及びHTML部品を備えたWeb画面ファイル20を出力する手段を備えたWeb画面開発支援システム10。【選択図】図１
2016110206.tif 000002
【特許請求の範囲】
【請求項１】
Web画面編集機能を実現するためのスクリプトを含むHTMLファイルよりなる画面生成用ベースファイルと、
この画面生成用ベースファイルに基づき、Web画面の段組レイアウトの選択メニューと、Web画面上に配置させるHTML部品の選択メニューを備えた編集画面をコンピュータのディスプレイに表示する手段と、
コンピュータの入力手段を介して選択された段組レイアウトを上記編集画面上に表示する手段と、
選択されたHTML部品を同編集画面上に配置する手段と、
各HTML部品について、特定の制御機能を実現する関数を選択する欄と、当該制御機能を発動させるイベントを選択する欄を備えた部品機能設定ウィンドウを、上記編集画面上に表示する手段と、
選択された関数及びイベントと、各HTML部品との対応関係を、部品機能定義ファイルとして出力する手段と、
上記段組レイアウト及びHTML部品を備えたHTMLファイルを、Web画面ファイルとして出力する手段と、
を備えたことを特徴とするWeb画面開発支援システム。
【請求項２】
各HTML部品の所定の属性について定義するための設定項目を備えた部品属性設定ウィンドウを、上記編集画面上に表示する手段と、
入力された設定情報を、上記編集画面及びWeb画面ファイルに反映させる手段と、
を備えたことを特徴とする請求項１に記載のWeb画面開発支援システム。
【請求項３】
各HTML部品の所定のスタイルについて定義するための設定項目を備えた部品スタイル設定ウィンドウを上記編集画面上に表示する手段と、
入力された設定情報を、上記編集画面に反映させる手段と、
同設定情報と各HTML部品との対応関係を、部品スタイル定義ファイルとして出力する手段と、
を備えたことを特徴とする請求項１または２に記載のWeb画面開発支援システム。
【請求項４】
上記編集画面上に、複数のWeb画面ファイルを指定する欄と、各Web画面間の遷移関係を指定する欄を備えた画面遷移設定ウィンドウを表示する手段と、
指定された複数のWeb画面ファイルを一つのHTMLファイルとして結合することにより、複数のWeb画面を備えたWeb画面ファイルを生成する手段と、
上記の各Web画面に、遷移先のWeb画面に移動するためのボタンを挿入する手段と、
各Web画面間の遷移関係を、画面遷移定義ファイルとして出力する手段と、
を備えたことを特徴とする請求項１〜３の何れかに記載のWeb画面開発支援システム。
【発明の詳細な説明】
【技術分野】
【０００１】
この発明はWeb画面開発支援システムに係り、特に、動的な画面コントロールが多用される業務用Web画面の開発を主として支援する技術に関する。
【背景技術】
【０００２】
一般的なWebサイトを簡単な操作で作成できることを謳った製品やサービスは、これまでも種々存在していた（非特許文献１参照）。
これらの製品やサービスは、見た目を重視した静的なWebサイトを作成する目的には十分な機能を備えているが、動的な画面コントロールが多用される業務用Web画面の作成には不向きであった。
【０００３】
例えば、Web画面上のあるボタンが選択された時点で、他のボタンや入力欄を非表示にするといった画面コントロールを実現するためには、JavaScript（登録商標）等のスクリプト言語で動作を規定する必要があり、専門知識を有する開発者がエディタを用いて個別にコーディングせざるを得ないのが実情である。
【０００４】
【非特許文献１】直感でWebサイトを作成できる６つのフリーWebサービスインターネットURL：http://kachibito.net/web-service/6-free-sitebuilder.html  検索日：２０１４年１０月２４日
【発明の開示】
【発明が解決しようとする課題】
【０００５】
このように、業務用のWeb画面を個々の開発者がエディタベースでコーディングしている以上、生産性の向上には自ずと限界があった。
また、開発者各自の流儀に従い、HTMLファイル中にCSSやJavaScriptのコードが自由に記述されることが多いため、他者にとって理解しづらく、保守性や再利用性に欠けるという問題があった。
【０００６】
また最近では、従来のようにテンプレートエンジンを用いてサーバサイドでWeb画面を生成する代わりに、SPA（Single Page Application）と称するWeb画面生成技術を用いて、クライアントサイドだけで動的なWeb画面の生成を完結させる方式が主流となりつつある。
このため、複数の画面を含み、相互間の遷移関係まで考慮された大きなHTMLファイルを作成することが開発者に求められるようになり、上記の問題点がより拡大することが懸念されている。
【０００７】
この発明は、このような現状に鑑みて案出されたものであり、画面の動的コントロールが必要な業務用のWeb画面を、簡単な操作で効率的に作成可能であり、また可読性や均質性にも優れたコードを生成できる開発支援技術の提供を目的としている。
【課題を解決するための手段】
【０００８】
上記の目的を達成するため、請求項１に記載したWeb画面開発支援システムは、Web画面編集機能を実現するためのスクリプトを含むHTMLファイルよりなる画面生成用ベースファイルと、この画面生成用ベースファイルに基づき、Web画面の段組レイアウトの選択メニューと、Web画面上に配置させるHTML部品の選択メニューを備えた編集画面をコンピュータのディスプレイに表示する手段と、コンピュータの入力手段を介して選択された段組レイアウトを上記編集画面上に表示する手段と、選択されたHTML部品を同編集画面上に配置する手段と、各HTML部品について、特定の制御機能を実現する関数を選択する欄と、当該制御機能を発動させるイベントを選択する欄を備えた部品機能編集ウィンドウを、上記編集画面上に表示する手段と、入力された関数及びイベントと、各HTML部品との対応関係を、部品機能定義ファイルとして出力する手段と、上記段組レイアウト及びHTML部品を備えたHTMLファイルを、Web画面ファイルとして出力する手段とを備えたことを特徴としている。
【０００９】
請求項２に記載したWeb画面開発支援システムは、請求項１のシステムであって、さらに、各HTML部品の所定の属性について定義するための設定項目を備えた部品属性設定ウィンドウを、上記編集画面上に表示する手段と、入力された設定情報を上記編集画面及びWeb画面ファイルに反映させる手段を備えたことを特徴としている。
【００１０】
請求項３に記載したWeb画面開発支援システムは、請求項１または２のシステムであって、さらに、各HTML部品の所定のスタイルについて定義するための設定項目を備えた部品スタイル設定ウィンドウを上記編集画面上に表示する手段と、入力された設定情報を上記編集画面に反映させる手段と、同設定情報と各HTML部品との対応関係を、部品スタイル定義ファイルとして出力する手段を備えたことを特徴としている。
【００１１】
請求項４に記載したWeb画面開発支援システムは、請求項１〜３のシステムであって、さらに、上記編集画面上に、複数のWeb画面ファイルを指定する欄と、各Web画面間の遷移関係を指定する欄を備えた画面遷移設定ウィンドウを表示する手段と、指定された複数のWeb画面ファイルを一つのHTMLファイルとして結合することにより、複数のWeb画面を備えたWeb画面ファイルを生成する手段と、上記の各Web画面に、遷移先のWeb画面に移動するためのボタンを挿入する手段と、各Web画面間の遷移関係を、画面遷移定義ファイルとして出力する手段を備えたことを特徴としている。
【発明の効果】
【００１２】
請求項１に記載のWeb画面開発支援システムによれば、開発者は編集画面上で段組レイアウトと必要なHTML部品を選択すると共に、HTML部品毎に部品機能編集ウィンドウを開いて関数とイベントを選択するだけで、必要な画面コントロール機能を備えたWeb画面を容易に構築できる。
また、HTML部品の動作が、予め用意された関数とイベントとの組合せとして特定され、その対応関係が部品機能定義ファイルとして外出しされるため、第三者でも容易に内容を理解することができ、HTML部品の保守性や再利用性を高めることが可能となる。
しかも、画面生成用ベースファイルがHTMLファイルよりなるため、コンピュータにわざわざ専用のアプリケーションプログラムをインストールしたり、インターネット上のサーバに接続したりすることなく、汎用のWebブラウザ上でWeb画面の開発を済ますことができる。
【００１３】
請求項２に記載のWeb画面開発支援システムの場合、開発者は部品属性設定ウィンドウを通じて各HTML部品の属性を設定することができ、HTMLファイル中にタグを自分で記述する必要がないため、Web画面ファイルのコードに一定の秩序が形成され、その保守性や再利用性を高めることが可能となる。
【００１４】
請求項３に記載のWeb画面開発支援システムの場合、開発者は部品スタイル設定ウィンドウを通じて各HTML部品のスタイルを設定することができ、HTMLファイル中にCSSを自分で記述する必要がないため、Web画面ファイルのコードに一定の秩序が形成され、その保守性や再利用性を高めることが可能となる。
【００１５】
請求項４に記載のWeb画面開発支援システムによれば、開発者が指定した複数のWeb画面ファイルが一つのWeb画面ファイルとして自動的に統合されると共に、各Web画面間には開発者が指定した遷移関係が自動的に反映されるため、SPA方式に対応したWeb画面を極めて容易に開発することができる。
【発明を実施するための最良の形態】
【００１６】
図１は、この発明に係るWeb画面開発支援システム10の機能構成を示すブロック図であり、画面生成用ベースファイル12と、画面編集部14と、コンピュータのディスプレイ16と、マウスやキーボード等の入力装置18とを備えている。
【００１７】
上記画面生成用ベースファイル12は、Web画面の編集機能を備えたJavaScriptコードを含むHTMLファイルよりなる。
上記画面編集部14は、コンピュータのCPUが、OSやWebブラウザプログラム、上記JavaScriptコードに従って所定の処理を実行することにより、実現される。
この画面編集部14からは、Web画面ファイル20、JSファイル21、部品機能定義ファイル22、部品スタイル定義ファイル24、画面遷移定義ファイル26が出力される（詳細は後述）。
【００１８】
以下、図２のフローチャートに従い、このシステム10の処理手順について説明する。
まず、ユーザがコンピュータ上で画面生成用ベースファイル12をクリックすると、Webブラウザプログラムが起動して画面編集部14が生成され、ディスプレイ16に編集画面が表示される（Ｓ10）。
【００１９】
図３は、この編集画面30の遷移を例示するものである。
まずユーザは、図３(a)に示すように、作成するWeb画面の段組レイアウトを選択して編集画面30にこれを反映させた後（Ｓ12）、図３(b)に示すように、Web画面上に配置するHTML部品（表やボタン、入力ボックス等）を選択して編集画面30にこれらを反映させる（Ｓ14）。
【００２０】
図４は、編集画面30の拡大図であり、ユーザがLayoutボタン32をクリックすると、段組レイアウトのアイコンが複数列記された段組レイアウト選択メニュー34が表示される。
この段組レイアウト選択メニュー34の中から、ユーザが一のアイコンを選択し、編集画面30上にドラッグ＆ドロップすると、対応の段組レイアウト39が編集画面30に反映される。
つぎにユーザは、HTMLボタン36をクリックしてHTML部品選択メニュー38を表示させ、この中から必要なHTML部品（ラジオボタンや表等）を任意の領域にドラッグ＆ドロップで配置する。
【００２１】
配置したHTML部品にマウスカーソルを近づけると、図３(c)に示すように、当該HTML部品の属性やスタイル、機能を編集するためのボタンが複数表示される。
この中からユーザが部品属性設定ボタン40をクリックすると、図３(f)に示すように、部品属性設定ウィンドウ42がポップアップ表示される。
また、ユーザが部品スタイル設定ボタン44をクリックすると、図３(g)に示すように、部品スタイル設定ウィンドウ46がポップアップ表示される。
あるいは、ユーザが部品機能設定ボタン48をクリックすると、図３(e)に示すように、部品機能設定ウィンドウ50がポップアップ表示される。
【００２２】
図５は、部品属性設定ウィンドウ42の一例を示すものであり、HTML部品の一つである「表」の詳細を設定するものである。
すなわち、ユーザはマトリクス設定欄52で表の縦横の項目数を選択した上で、ヘッダネーム設定欄53、ヘッダID設定欄54に必要な文字列を入力し、Setボタン55をクリックする。
この結果、設定内容に対応した表（HTML部品）が編集画面30上に表示される（Ｓ16）。
【００２３】
図６は、部品スタイル設定ウィンドウ46の一例を示すものであり、特定のHTML部品についてのスタイル設定を行うものである。
すなわち、ユーザはフォントサイズ設定欄56でテキストの大きさを指定すると共に、配置設定欄57で「左端／中央／右端」の選択を行う。
また、ユーザが文字色設定欄58や背景色設定欄59にマウスカーソルを近づけるとカラーパレットが表示され（図示省略）、その中から任意の色彩を選択すると、文字色設定欄58や背景色設定欄59に対応のカラーコードが入力される。
最後に、ユーザがCSSクラス設定欄60において必要な設定を行い、Setボタン61をクリックすると、当該HTML部品に設定したスタイル属性が編集画面30上に反映される（Ｓ18）。
【００２４】
図７は、部品機能設定ウィンドウ50の一例として、あるHTML部品（例えばボタン）の機能を定義する場面が示されている。
まずユーザは、イベント選択欄62においてプルダウンメニュー上にリストアップされた複数のイベントの中から一つ（例えば「click」）を選択する。
つぎにユーザは、関数選択欄63においてプルダウンメニュー（図示省略）上にリストアップされた複数のイベントの中から、一つを選択する。
最後にユーザがSetボタン64をクリックすると、当該HTML部品に設定内容（イベント＋関数）が関連付けられる（Ｓ20）。
【００２５】
以上の編集操作の途中においてユーザは、メニューバー中のSaveボタン66をクリックする。
これを受けた画面編集部14は、ユーザのこれまでの編集結果を含めた形で、画面生成用ベースファイル12を上書保存する（Ｓ22）。
【００２６】
そして、図３(d)に示すように、Web画面が完成した時点で、ユーザはメニューバー中のExportボタン67をクリックする。
これを受けた画面編集部14は、ユーザのこれまでの編集結果を反映させたWeb画面ファイル20、JSファイル21、部品機能定義ファイル22、部品スタイル定義ファイル24を生成し、外部記憶装置の所定領域に出力する（Ｓ24）。
【００２７】
図８は、Web画面ファイル20とJSファイル21、部品機能定義ファイル22との関係を示すものであり、同図(a)に示すように、Web画面ファイル20中の各HTML部品68には、部品ID（例えば「id="001"」）が割り振られている。
また、JSファイル21には、ユーザによって選択されたJavaScriptの関数（例えば「funcA（関数Ａ）」）が複数記述されている。
さらに、部品機能定義ファイル22には、各部品IDとイベント、関数との対応関係が定義されている。
【００２８】
そして、WebブラウザプログラムがWeb画面ファイル20に基づいてWeb画面を生成する際には、部品機能定義ファイル22に記述されたコードに従い、各HTML部品に具体的なイベント及び関数が関連付けられる。
この結果、ユーザがあるHTML部品に対して対応のイベントを付与すると、当該部品に関連付けられた関数が実行される。
【００２９】
以上の仕組みを備えているため、このシステム10によって作成したWeb画面に関しては、部品機能定義ファイル22の記述を修正するだけで、HTML部品を簡単に再利用可能となる。
例えば、図８(b)に示した例では、Web画面ファイル20及びJSファイル21の記述に変更はないが、部品機能定義ファイル22に修正が施されているため、「id="001"」のHTML部品の挙動が、以下のように変化している。
「id="001"」（旧）→「クリック」によって「関数Ａ」が実行
「id="001"」（新）→「マウスオーバー」によって「関数Ｂ」が実行
【００３０】
図９は、従来のWeb画面ファイル70とJSファイル71との対応関係を示す参考図であり、図９(a)に示すように、Web画面ファイル70中の各部品72には、イベントと関数との対応関係が直に記述されていた。
このため、イベントや関数を変更する場合には、例え部品のデザインに変更がない場合であっても、図９(b)に示すように、新たなHTML 部品として記述し直す必要があり、大きな手間を要すると同時にバグ混入の危険性を伴っていた。
【００３１】
このシステム10によれば、SPA方式に対応したWeb画面を極めて容易に構築することもできる。
すなわち、図１０に示すように、上記の編集画面30を通じて予め作成された複数のWeb画面ファイル20を、SPA方式に対応した一つのWeb画面ファイル80に結合する機能を、画面編集部14は備えている。
【００３２】
結合の対象となる複数のWeb画面ファイル20の選択と、各Web画面間の遷移関係は、図１１に示すように、画面遷移設定ウィンドウ82を介してなされる。
まずユーザは、Web画面ファイル指定欄84において、各Web画面の画面名を入力すると共に、それぞれのWeb画面に対応するWeb画面ファイル20を指定する。
【００３３】
つぎにユーザは、画面遷移関係指定欄86において、各Web画面間の遷移関係を指定する。具体的には、遷移元のWeb画面と、遷移先のWeb画面の組合せを複数記述する。
【００３４】
最後にユーザがSetボタン88をクリックすると、画面編集部14によって各Web画面ファイル20が一つのWeb画面ファイル80として統合されると共に、各Web画面に遷移先のWeb画面に移動するためのリンクボタン90が自動的に挿入される。
同時に画面編集部14は、各Web画面間の遷移関係を画面遷移定義ファイル26として外出しにする。
また画面編集部14は、図示は省略したが、各Web画面ファイル20に関連付けられたJSファイル21、部品機能定義ファイル22、部品スタイル定義ファイル24もそれぞれ結合し、Web画面ファイル80用のJSファイル、部品機能定義ファイル、部品スタイル定義ファイルとして外部記憶装置に出力する。
【００３５】
上記の画面遷移定義ファイル26には、「画面(1)→画面(2)」や「画面(3)→画面(1)」のように、遷移元画面と遷移先画面間の対応関係が記述されているため、Web画面ファイル80に含まれる各Web画面の遷移関係が一目瞭然となる。
【００３６】
ユーザは、編集画面30のImportボタン（図示省略）をクリックし、既存のWeb画面ファイル20を選択することにより、編集画面30を通じてこれに必要な修正を施し、新たなWeb画面ファイルとして再利用することも当然に可能である。
【図面の簡単な説明】
【００３７】
【図１】この発明に係るWeb画面開発支援システムの機能構成を示すブロック図である。
【図２】このシステムにおける処理手順を示すフローチャートである。
【図３】編集画面の遷移を示す図である。
【図４】編集画面の拡大図である。
【図５】部品属性設定ウィンドウの一例を示す図である。
【図６】部品スタイル設定ウィンドウの一例を示す図である。
【図７】部品機能設定ウィンドウの一例を示す図である。
【図８】このシステムにおけるWeb画面ファイル、JSファイル及び部品機能定義ファイルの関係を示す図である。
【図９】従来におけるWeb画面ファイルとJSファイルの関係を示す図である。
【図１０】SPA方式に対応したWeb画面ファイルの生成過程を示す図である。
【図１１】画面遷移設定ウィンドウの一例を示す図である。
【符号の説明】
【００３８】
10    Web画面開発支援システム
12    画面生成用ベースファイル
14    画面編集部
16    ディスプレイ
18    入力装置
20    Web画面ファイル
21    JSファイル
22    部品機能定義ファイル
24    部品スタイル定義ファイル
26    画面遷移定義ファイル
30    編集画面
32    Layoutボタン
34    段組レイアウト選択メニュー
36    HTMLボタン
38    HTML部品選択メニュー
39    段組レイアウト
40    部品属性設定ボタン
42    部品属性設定ウィンドウ
44    部品スタイル設定ボタン
46    部品スタイル設定ウィンドウ
48    部品機能設定ボタン
50    部品機能設定ウィンドウ
66    Saveボタン
67    Exportボタン
68    HTML部品
80    SPA方式対応のWeb画面ファイル
82    画面遷移設定ウィンドウ
84    Web画面ファイル指定欄
86    画面遷移関係指定欄
90    リンクボタン
【図１】
2016110206.tif 000003
【図２】
2016110206.tif 000004
【図３】
2016110206.tif 000005
【図４】
2016110206.tif 000006
【図５】
2016110206.tif 000007
【図６】
2016110206.tif 000008
【図７】
2016110206.tif 000009
【図８】
2016110206.tif 000010
【図９】
2016110206.tif 000011
【図１０】
2016110206.tif 000012
【図１１】
2016110206.tif 000013