(57)【特許請求の範囲】
【請求項１】
コンピュータに、
利用者端末からWeb画面の要求を受信させ、
Web画面に対応してマッシュアップ対象となる連携対象Webページ中の切り出し対象領域に関する情報を記録した切り出し情報テーブルを参照し、前記受信ステップにおいて受信された要求に対応するWeb画面に対応する切り出し対象領域を取得させ、
前記取得ステップにおいて取得された切り出し対象領域に関する情報と、該切り出し対象領域に関する情報を参照して該Webページの該切り出し対象領域以外の領域を非表示とするコントロール部と、を前記Web画面に埋め込むことで、前記利用者端末へ送信する送信用Web画面を作成させ、
前記作成ステップにおいて作成された送信用Web画面を前記利用者端末へ送信させる、
ことを特徴とするWebアプリケーション編集方法。
【請求項２】
前記非表示とする領域には、Webページに埋め込まれたロジックにより表示するよう指示する設定がなされる場合に、その設定を検出するイベントリスナが設定され、前記コントロール部は、非表示領域を表示するような設定がなされた場合に、該表示設定を非表示設定に再設定することを特徴とする請求項１に記載のWebアプリケーション編集方法。
【請求項３】
前記切り出し領域に関する情報は、XPathによる記述がなされていることを特徴とする請求項１に記載のWebアプリケーション編集方法。
【請求項４】
利用者端末からWeb画面の要求を受信する受信手段と、
Web画面に対応してマッシュアップ対象となる連携対象Webページ中の切り出し対象領域に関する情報を記録した切り出し情報テーブルを参照し、前記受信手段において受信された要求に対応するWeb画面に対応する切り出し対象領域を取得する取得手段と、
前記取得手段において取得された切り出し対象領域に関する情報と、該切り出し対象領域に関する情報を参照して該Webページの該切り出し対象領域以外の領域を非表示とするコントロール部と、を前記Web画面に埋め込むことで、前記利用者端末へ送信する送信用Web画面を作成する作成手段と、
前記作成手段において作成された送信用Web画面を前記利用者端末へ送信する送信手段と、
を備えることを特徴とするWebアプリケーション編集装置。
【請求項５】
コンピュータを、
利用者端末からWeb画面の要求を受信する受信手段と、
Web画面に対応してマッシュアップ対象となる連携対象Webページ中の切り出し対象領域に関する情報を記録した切り出し情報テーブルを参照し、前記受信手段において受信された要求に対応するWeb画面に対応する切り出し対象領域を取得する取得手段と、
前記取得手段において取得された切り出し対象領域に関する情報と、該切り出し対象領域に関する情報を参照して該Webページの該切り出し対象領域以外の領域を非表示とするコントロール部と、を前記Web画面に埋め込むことで、前記利用者端末へ送信する送信用Web画面を作成する作成手段と、
前記作成手段において作成された送信用Web画面を前記利用者端末へ送信する送信手段と、
して動作させることを特徴とするWebアプリケーション編集プログラム。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、他のWebアプリケーションから内容をコピーして、自Webアプリケーションに使用する際のアプリケーションの連携のためのWebアプリケーション編集方法に関する。
【背景技術】
【０００２】
複数のWebアプリケーションを同時に画面表示する技術として、ポータル構築ツールがある。従来は、ポータルを構築する際に、対象Webアプリケーションの特定部分を切り出して、それを表示していた。これを行うと、対象WebアプリケーションにJavaScript（登録商標）が存在した場合、その挙動が保証できない。切り出した部分以外にもJavaScript（登録商標）が作用を及ぼす可能性があるためである。そのため、JavaScript（登録商標）を切り出し対象外にしているものもあるが、それだと対象Webアプリケーションの挙動を再現できない。Google Maps（登録商標）のように、マッシュアップ連携専用のアプリケーションもある。しかし、このようなマッシュアップ連携専用アプリケーションでは、専用のAPI(Application Program Interface)やJavaScript（登録商標）を作る必要があるため、開発工数が大きく、既存のWebアプリケーションをそのまま活用できない
図８及び図９は、従来のアプリケーション連携装置の概略を説明する図である。
【０００３】
図８は、従来のマッシュアップの開発時動作を説明する図である。切り出しアプリケーション１１が連携対象Webアプリケーション１０を表示し、切り出しを行う。連携対象Webアプリケーション１０は、Webページの表示内容と、JavaScript（登録商標）からなる。切り出し情報はWebページのどの部分を使うかなどである。切り出しアプリケーション１１は、Webページを表示するブラウザ表示を行う部分と、ブラウザ表示されたWebページから切り出し部分を切り出す切り出し部と、Webページのどの部分を切り出すかの情報を格納する切り出し情報ストア部とからなる。
【０００４】
図９は、従来のマッシュアップの実行時を説明する図である。切り出しストア部に記録された内容を見ながら、連携対象アプリケーションにアクセスし、切り出しを行って表示する。
【０００５】
JavaScript（登録商標）は、そのままブラウザにロードするか、まったくロードしないかのどちらかになる。連携サーバ１２は、アクセス部が、連携対象WebアプリケーションのWebページとJavaScript（登録商標）にアクセスし、切り出し部でWebページの一部の切り出しを行う。切り出し部が切り出したWebページの情報は、切り出し情報ストア部に格納される。連携サーバ１２は、Webサーバ部を使って、クライアントのブラウザにアクセスし、Webページと、JavaScript（登録商標）の切り出された部分を表示させる。このとき、JavaScript（登録商標）は、Webページの切り出された部分以外にアクセスする場合があり、その場合には、アクセスが失敗し、エラーが発生する場合がある。
【０００６】
特許文献１には、無線装置用のGUIソフトウェアの開発を容易にするための構成が開示されている。
【特許文献１】特開２００５−３２７２５１号公報
【発明の開示】
【発明が解決しようとする課題】
【０００７】
Webアプリケーションの一部を切り出して他のWebアプリケーションと同時に、クライアントのブラウザに表示するポータル構築ツールでは、切り出したアプリケーションにJavaScript（登録商標）が含まれていると、正常に動かない場合が多かった。
【０００８】
切り出し対象のWebアプリケーションに含まれているJavaScript（登録商標）が切り出していない部分にアクセスしてしまい、エラーが出てしまうことがあるからである。切り出し対象のWebアプリケーションに含まれているJavaScript（登録商標）を切り出さないと、JavaScript（登録商標）に依存した動作ができないため、もともとのWebアプリケーションの挙動が変わってしまう。
【０００９】
従来の方法では、連携対象アプリケーションから特定の範囲を切り出していたが、元アプリケーションにJavaScript（登録商標）があると、場合により操作対象がなくなるため、その挙動が反映できない、または保証できないという問題がある。また、連携対象専用のアプリケーションを開発することもできるが、工数が多かったり、既存のアプリケーションを活用できないという問題があった。
【００１０】
本発明の課題は、Webアプリケーションの一部を切り出して他のブラウザで表示する場合にも、エラーの生じることのない切り出し表示ができるアプリケーション連携のためのWebアプリケーション編集方法を提供することである。
【課題を解決するための手段】
【００１１】
本Webアプリケーション編集方法は、コンピュータに、利用者端末からWeb画面の要求を受信させ、Web画面に対応してマッシュアップ対象となる連携対象Webページ中の切り出し対象領域に関する情報を記録した切り出し情報テーブルを参照し、前記受信ステップにおいて受信された要求に対応するWeb画面に対応する切り出し対象領域を取得させ、前記取得ステップにおいて取得された切り出し対象領域に関する情報と、該切り出し対象領域に関する情報を参照して該Webページの該切り出し対象領域以外の領域を非表示とするコントロール部と、を前記Web画面に埋め込むことで、前記利用者端末へ送信する送信用Web画面を作成させ、前記作成ステップにおいて作成された送信用Web画面を前記利用者端末へ送信させる。
【発明の効果】
【００１２】
本発明によれば、Webアプリケーションの一部を切り出して他のブラウザで表示する場合にも、エラーの生じることのない切り出し表示ができるアプリケーション連携のためのWebアプリケーション編集方法を提供することができる。
【発明を実施するための最良の形態】
【００１３】
以下においては、Webページの記述言語は、HTMLあるいはXMLであるとする。
本実施形態においては、対象のWebアプリケーションを切り出すのではなく、当該Webアプリケーションを含む全画面をそのままクライアントのブラウザに送信する。そして、切り出す代わりに、不必要な表示部分は非表示とする。このようにすることで、当該Web画面に含まれるJavaScript（登録商標）が作用しようとする対象であっても単に非表示となっているだけでブラウザには全て送信されているため、その動作がエラーとなることはないうえ、表示上は従来の切り出しと同じものが実現できる。
【００１４】
切り出し対象のWebアプリケーションをJavaScript（登録商標）も含めて画面ごとすべてブラウザに送ってしまう。ただし、その際に切り出し情報とそれをコントロールするコントロール部をブラウザに送る。ここで、切り出し情報は、Webページのどの部分を切り出すかを示すXPathなどの記述を登録したテーブルとして保持される。
【００１５】
初期表示を行う際は、ブラウザ内のコントロール部が切り出し情報を見て、切り出し対象の画面内で必要のない部分は非表示に設定する。これと同時に、その部分の表示状態が変化されたらコントロール部に通知するように設定する。
【００１６】
切り出し対象のWebアプリケーションに含まれているJavaScript（登録商標）が、非表示部分にアクセスしても、状態が非表示なだけで要素は存在するので正常に動作する。
切り出し対象のWebアプリケーションに含まれているJavaScript（登録商標）により、非表示部分の表示状態が変化したときには、イベントがコントロール部に通知される。これが非表示部分を表示しようとするものであった場合、再び当該部分を非表示に設定する。
【００１７】
以上により、JavaScript（登録商標）を含むWebアプリケーションを連携(マッシュアップ)することができる。
本実施形態では、開発時と実行時の2種類の動作がある。
【００１８】
図１は、本実施形態に従った開発時の動作を説明する図である。
開発時は、切り出しアプリケーション１１が連携対象Webアプリケーション１０のどの画面部分を利用するかを指定し、切り出し情報ストア部に切り出し情報を保存する。切り出す手法は既存技術が存在するので、それを利用してもよい。
【００１９】
切り出し情報ストアに保存される情報は、たとえばWebページであればXPathなどの従来技術が利用できる。ここで、XPathは、W3Cで規格化されているXMLドキュメント内の記述の位置を記述する言語であり、正式名称をXML Path Languageという。
【００２０】
図２は、本実施形態に従った実行時の動作を説明する図である。
実行時は、まず次の動作が行われる。連携対象Webアプリケーション１０のWebページとJavaScript（登録商標）はそのままブラウザに送られる。切り出しストア部に記録された切り出し情報がクライアントのブラウザ２１に送られるとともに、ブラウザ２１内で表示・非表示をコントロールするためのコントロール部がブラウザに送られる。コントロール部のブラウザへの送信方法は、連携対象Webページにコントロール部の読み込み指示を埋め込む場合と、コントロール部が先に読み込まれてそれが連携対象Webページを読み込む方法がある。切り出し情報においては、連携対象Webページに切り出し情報の読み込み指示を埋め込む場合と、コントロール部が切り出し情報を読み込むように作成する場合がある。コントロール部は、切り出しストア部に記録されていた切り出し情報を元に、連携対象Webアプリケーション１０の切り出されている部分以外を非表示にする。
【００２１】
連携対象のWebアプリケーションにおいて、Webページの動作を規定するロジックであるJavaScript（登録商標）は、Webページのあらゆる箇所にアクセスする可能性がある。本実施形態では、Webページのすべての情報をブラウザに送っているので、このアクセスが失敗することはないため、正常に動作する。
【００２２】
図３は、本実施形態に従った、ロジックの動作によって表示されてしまう非表示部分が生じないようにするための構成の初期化時の動作であり、図４は、そのスクリプト動作時の動作である。
【００２３】
正常に動作することで問題となるのが、もともと連携対象アプリケーションで切り出されていない「非表示であるはずの部分」が連携対象Webアプリケーションに含まれるロジックによって可視化されてしまうことである。そのため、図３に示されるように、コントロール部は、初期表示時に連携対象アプリケーションの表示が変化したらイベントを受け取るように設定を行う。すなわち、非表示情報に対して、イベントリスナを設定し、非表示情報を表示するよう指示するイベントが発生した場合には、このイベントを検出できるようにしておく。イベントリスナの設定方法は、Webページの要素をelmとすると、以下のような記述をWebページのソースに加えることである。
elm.addEventListener(“DomAttrModified”,関数（コントロール部）, true)
関数の設定は、たとえば、
Function modified(event){
if (event.attrName=”style”
&& event.newValue=”display: block”) {
event.target.style.display="none";
}
}
などである。
【００２４】
図４に示されるように、スクリプト動作で非表示であるはずの部分が表示されようとしたときは、Webページ自体の状態が変化するため、コントロール部にイベントが通知される。このイベントを契機としてコントロール部が動作し、可視化されようとしている部分について表示すべきかどうかを切り出し情報から判定し、非表示であるべきなら非表示に設定する。上記の関数の設定は、切り出し情報が非表示であるべき場合に非表示にするコントロール部の例である。
【００２５】
以上により、連携対象のアプリケーションは連携された状態のまま、正常に動作する。
本実施形態によれば、連携対象アプリケーションの任意の部分を切り出しても、そのアプリケーションのJavaScript（登録商標）が正常動作する。連携用に専用のAPIを開発しなくても、既存のWebアプリケーションがそのまま連携対象として使える。連携対象アプリケーションのJavaScript（登録商標）を修正する必要がない。
【００２６】
以上により、既存のWebサイトを対象にした連携がWebページやスクリプトを修正することなく、低コストで構築できる。
図５は、全体の処理シーケンスを示す図である。
【００２７】
初期化時においては、クライアントのブラウザから連携サーバを介して連携対象アプリケーションにWebページの切り出しリクエストが出される。連携サーバは、アクセス部を介して、連携対象アプリケーションにアクセスし、WebページとJavaScript（登録商標）を取得し、Webサーバ部に渡す。Webサーバ部では、切り出し情報を切り出し情報ストア部から取得し、１ページ分のWebページ、JavaScript（登録商標）とともに、コントロール部と切り出し情報をクライアントのブラウザに送る。クライアントのブラウザが表示を行う場合には、クライアントは、コントロール部にアクセスし、切り出し情報を取得する。次に、Webページについて、コントロール部を介して取得した表示、非表示設定に基づいて、表示、非表示の設定を行う。すなわち、切り出したい部分のみを表示設定し、その他は、非表示設定にする。そして、非表示設定されたWebページの要素にイベントリスナを設定する。以上の処理の後、クライアントのブラウザに、Webページの切り出したい部分のみが表示される。表示最中に、JavaScript（登録商標）が動作し、クライアントのブラウザにダウンロードされたWebページ内で、表示設定が行われた場合、表示設定された部分が非表示対象である場合には、イベントリスナが設定されているので、非表示対象を表示設定しようとするイベントが発生したことが検出され、コントロール部に通知される。コントロール部は、非表示対象を表示設定するイベントの発生を検出すると、表示設定に変更された非表示対象を再び非表示に設定する。これにより、非表示対象を非表示のままに維持することができる。
【００２８】
図６及び図７は、クライアントのブラウザの動作を示すフローチャートである。
図６は、コントロール部の初期化時の動作フローである。WebページとJavaScript（登録商標）、コントロール部及び切り出し情報をクライアントのブラウザにダウンロードすると、ステップＳ１０において、切り出し情報のすべてを取得し、ステップＳ１１で、We
bページのページ情報すべて処理するためのループを開始する。切り出し情報の例としては、XPathで表現された、html/body/div[3]/input[1]などの記述が挙げられる。これは、１行の切り出し部分を表現しており、図６の切り出し対象のHTMLの例で示すところの、<input type=”text” value=”入力1”>を示している。上記XPathのhtmlは、HTML例の一番上のタグを示しており、切り出し対象のHTMLのDOMツリーにおける一番上のディレクトリを示している。次のbodyは、HTML例の5行目のタグであり、DOMツリーの2番目のディレクトリを示している。2番目のディレクトリには、headとbodyがあるが、bodyの方をさしている。次のdiv[3]は、div  idが3番のタグを示しており、HTML例の13行目のタグと15行目のタグの間の情報を示している。そして、input[1]は、inputと記載されているHTML例の14行目のタグを示している。このように、XPathを用いると、HTML文書内の任意のタグで指定された記述を示すことができる。ステップＳ１２では、切り出し情報のすべてについて処理を行うループを始める。ステップＳ１３において、ページ要素のパスが切り出し情報であるか否かを判断する。ページ要素のパスとしては、たとえば、html/body/div[2]などがある。これによって示されるページ要素は、HTML例においては、divのidが2番のタグで囲まれた部分を示しており、7行目から12行目までのページ要素を示す。このページ要素が、切り出し情報に記載されたページ要素と一致するか否かを判断し、Ｙｅｓの場合には、何もせず、切り出し情報についてのループを続ける。ステップＳ１３の判断がＮｏの場合には、ステップＳ１４において、ページ要素を非表示にする設定を行い、ステップＳ１５において、ページ要素にイベントリスナをつけて、切り出し情報に関するループを行う。すべての切り出し情報について処理が終わった場合には、すべてのページ情報に関するループを続け、すべてのページ情報について処理が終わったら、処理を終了する。
【００２９】
図７は、コントロール部の動作時の動作フローである。
今、非表示要素を表示しようとする連携対象アプリケーションJavaScript（登録商標）によるイベントが発生したとする。このようなスクリプトの例としては、以下のようなものが挙げられる。
var elm=document.getElementById(“second”);
elm.style.display=”block”
このようなスクリプトにより、クライアントのブラウザ内でイベントが発生する。発生するイベントの例としては、以下のようなものが挙げられる。
target=HTMLStyleElement
type=”DomAttrModified”
attrName=”display”
attrChange=”block”
ステップＳ２０において、イベントリスナからの上記のようなイベントを受信し、ステップＳ２１において、イベントは表示イベントか否かを判断する。表示イベントと判断する場合のイベントの内容の例としては、以下のようなものが挙げられる。
type=”DomAttrModified”
attrName=”display”
attrChange=”block”
ステップＳ２１の判断がＮｏの場合には、処理を終了する。ステップＳ２１の判断がＹｅｓの場合には、ステップＳ２２において、イベントの対象ページ要素を取得する。すなわち、イベントのターゲット要素の親ディレクトリをたどって、表示要素を得る。図６のHTML例では、<div id=”second”>の要素であり、表示要素の型としては、HTMLDivElementである。表示要素の型の例としては、以下のようなものがある。
HTMLHtmlElement、HTMLHeadElement、HTMLTitleElement、HTMLBodyElement、HTMLFormElement、HTMLSelectElement、HTMLOptionElement、HTMLInputElement、HTMLTextAreaElement、HTMLButtonElement、HTMLLabelElement、HTMLFieldSetElement、HTMLLegendElement、HTMLUListElement、HTMLOListElement、HTMLDListElement、HTMLLIElement、HTMLDivElement、HTMLParagraphElement、HTMLHeadingElement、HTMLQuoteElement、HTMLPreElement
、HTMLBRElement、HTMLHRElement、HTMLAnchorElement、HTMLImageElement、HTMLAppletElement、HTMLAreaElement、HTMLTableElement、HTMLTableCaptionElement、HTMLTableColElement、HTMLTableRowElement、HTMLTableCellElement、HTMLFrameSetElement、HTMLFrameElement、HTMLIFrameElement
ステップＳ２３において、対象ページを非表示にする。非表示にする操作の例としては、elementに非表示にすべき要素が入っているとして、以下のような設定を行う。
element.setStyle(“display:none;”);
以上の構成により、Webページの一部のみをクライアントのブラウザに表示可能とするとともに、元のWebページに埋め込まれていたロジックがアクセス先を失うことによりエラーとなることを防ぎ、かつ、ロジックにより非表示のWebページ内容が新たに表示されてしまうことを防止できる。
【図面の簡単な説明】
【００３０】
【図１】本実施形態に従った開発時の動作を説明する図である。
【図２】本実施形態に従った実行時の動作を説明する図である。
【図３】本実施形態に従った、ロジックの動作によって表示されてしまう非表示部分が生じないようにするための構成の初期化時の動作を説明する図である。
【図４】本実施形態に従った、ロジックの動作によって表示されてしまう非表示部分が生じないようにするための構成のスクリプト動作時の動作を説明する図である。
【図５】全体の処理シーケンスを示す図である。
【図６】クライアントのブラウザの動作を示すフローチャート(その１)である。
【図７】クライアントのブラウザの動作を示すフローチャート(その２)である。
【図８】従来のアプリケーション連携方法の概略を説明する図(その１)である。
【図９】従来のアプリケーション連携方法の概略を説明する図(その２)である。
【符号の説明】
【００３１】
１０      連携対象Webアプリケーション
１１      切り出しアプリケーション
２０      連携サーバ
２１      クライアントのブラウザ
【図１】
0004978522.tif 000002
【図２】
0004978522.tif 000003
【図３】
0004978522.tif 000004
【図４】
0004978522.tif 000005
【図５】
0004978522.tif 000006
【図６】
0004978522.tif 000007
【図７】
0004978522.tif 000008
【図８】
0004978522.tif 000009
【図９】
0004978522.tif 000010