JP5476709B2 - Webページ編集プログラム及びWebページ編集装置 - Google Patents

Webページ編集プログラム及びWebページ編集装置 Download PDF

Info

Publication number
JP5476709B2
JP5476709B2 JP2008313156A JP2008313156A JP5476709B2 JP 5476709 B2 JP5476709 B2 JP 5476709B2 JP 2008313156 A JP2008313156 A JP 2008313156A JP 2008313156 A JP2008313156 A JP 2008313156A JP 5476709 B2 JP5476709 B2 JP 5476709B2
Authority
JP
Japan
Prior art keywords
web page
behavior
editing
overlay
overlay element
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.)
Expired - Fee Related
Application number
JP2008313156A
Other languages
English (en)
Other versions
JP2010140076A (ja
Inventor
暁生 下野
昭彦 松尾
貴英 松塚
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujitsu Ltd
Original Assignee
Fujitsu Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Fujitsu Ltd filed Critical Fujitsu Ltd
Priority to JP2008313156A priority Critical patent/JP5476709B2/ja
Publication of JP2010140076A publication Critical patent/JP2010140076A/ja
Application granted granted Critical
Publication of JP5476709B2 publication Critical patent/JP5476709B2/ja
Expired - Fee Related legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Description

本発明はWebページ編集プログラム及びWebページ編集装置に係り、特に編集画面でWebページを編集する為のWebページ編集プログラム及びWebページ編集装置に関する。
従来、テキストやイメージデータからなる文書の編集は文書支援装置(例えば特許文献1参照)やWebページ編集ソフト等によって行われていた。
例えば一般的なWebページ編集ソフト(Webページ編集プログラム)では、WYSIWYG(What you see is what you get)編集を実現すべく、編集中の画面イメージのプレビュー機能を備えている。WYSIWYG編集とはGUIをベースにした直感的編集方式である。WYSIWYG編集では、画面配置部品の選択・移動・追加・削除・サイズ変更などを統一的なGUI操作により行える。WYSIWYG編集では、HTMLソースファイル等の編集対象のWebページを記述したファイルの内容が、GUI操作により自動的に書き換えられる。
このようなWebページ編集ソフトは、一般に流通しているブラウジングソフト(ブラウジングプログラム)と異なる独自の描画ロジックによってプレビュー機能を実現しているため、一般に流通しているブラウジングソフト(以下、単にブラウザという)と見た目が異なってしまう場合があった。
また、Webページ編集ソフトには、ブラウザベースのものがある。ブラウザベースのWebページ編集ソフトはブラウザのAPI(Application Program Interface)を制御することで、ブラウザの表示画面をプレビュー領域に表示する。
ブラウザのAPIを制御することでブラウザの表示画面をプレビュー領域に表示するブラウザベースのWebページ編集ソフトは、ブラウザが表示する表示画面をそのままプレビュー領域に表示するため、ブラウザと見た目が異なることもない。
特開平6−195334号公報
ブラウザベースの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ページを前記プレビュー領域に表示させる制御手段として機能させるためのWebページ編集プログラムである。
なお、本発明の一実施形態の構成要素、表現又は構成要素の任意の組合せを、方法、装置、システム、コンピュータプログラム、記録媒体、データ構造などに適用したものも本発明の態様として有効である。
本発明の一実施形態によれば、プレビュー領域に表示された編集対象のWebページをプレビュー領域上で編集できるWebページ編集プログラム及びWebページ編集装置を提供可能である。
次に、本発明を実施するための最良の形態を、以下の実施例に基づき図面を参照しつつ説明する。本実施例ではWebページ編集ソフトの一例としてWYSIWYG編集を行うブラウザベースのWebページエディタ(以下、単にWebページエディタという)を例に説明する。
Webページエディタは、編集対象のWebページを記述したファイル(例えばHTMLファイル)の編集を行うとき、HTMLファイルをブラウザに提供し、ブラウザがHTMLファイルに基づいて生成した表示画面をプレビュー領域に嵌め込んで表示する。
このとき、WebページエディタはWYSIWYG編集を行うため、プレビュー領域に表示された表示画面を構成する部品にクリック等、アクセスがあった場合に、その部品が持つ本来の振る舞いを行わせることなく、部品が選択されて、部品の移動・削除・サイズ変更・プロパティ変更などの別の振る舞いをさせる必要がある。
ここでは本実施例の理解を容易とするため、プレビュー領域に表示された部品にアクセスがあった場合に、その部品が持つ本来の振る舞いが行われることなく、その部品が選択されて、部品の移動・削除・サイズ変更・プロパティ変更などの別の振る舞いをさせる加工について、従来技術と本実施例の技術とを対比しつつ説明する。
図1は、プレビュー領域に表示された部品にアクセスがあった場合に、その部品が持つ本来の振る舞いとは別の振る舞いをさせる加工の従来技術を表したイメージ図である。図1(A)は加工前のWebページのイメージ図である。Webページは反応部品,非反応部品などの部品から構成される。
反応部品は、ボタン,リンク,タブ,ツリー等である。非反応部品は、テキスト,リンク等の設定されていない画像等である。図1(A)のWebページは、振る舞いが定義された反応部品1〜3と、振る舞いが定義されていない非反応部品4〜6とを含むように構成されている。
例えば図1(A)のWebページは反応部品1に「クリックで処理Aを起動」という振る舞いが定義されている。例えば図1(A)のWebページは反応部品2に「クリックで処理Bを起動」、「クリックで処理Cを起動」という振る舞いが定義されている。
例えば図1(A)のWebページを構成する反応部品1〜3がクリックされても反応部品1〜3に定義されている振る舞いが行われることなく、その部品が選択されて、部品の移動・削除・サイズ変更・プロパティ変更などの別の振る舞いをさせる為には、反応部品1〜3に定義されている振る舞いを別の振る舞いに置き換える加工が必要である。
図1(B)は加工後のWebページのイメージ図である。図1(B)のWebページは図1(A)のWebページを構成する反応部品1〜3にイベントハンドラ関数やイベントリスナ関数で定義された振る舞いが、別の振る舞いに置き換えられている。
例えば図1(B)のWebページを構成する反応部品1は加工前に「クリックで処理Aを起動」という振る舞いが定義されていたが、「マウスオーバーで処理Dを起動」という別の振る舞いに置き換えられている。
このように、従来技術ではWebページを構成する反応部品1〜3がクリックされても反応部品1〜3に定義されている振る舞いが行われることなく、別の振る舞いをさせるように加工していた。
しかしながら、加工前のWebページを構成するそれぞれの部品にどのようなイベントリスナ関数が定義されているかを知る手段として、どのようなWebページにも適用可能な汎用的な方法は存在しない。一般的なブラウザでは、DOM要素にどのようなイベントリスナ関数が定義されているかを知ることができない為である。
このため、従来技術では統一的な方法で、Webページを構成する反応部品1〜3がクリックされても反応部品1〜3に定義されている振る舞いが行われることなく、別の振る舞いをさせるように加工することができなかった。
図2は、プレビュー領域に表示された部品にアクセスがあった場合に、その部品が持つ本来の振る舞いとは別の振る舞いをさせる加工の本実施例の技術を表した一例のイメージ図である。
本実施例の技術は、プレビュー領域に表示された部品にアクセスがあった場合に、その部品が持つ本来の振る舞いとは別の振る舞いをさせるように加工したいWebページに対して、そのWebページを構成する部品に透明(例えば透明度0%)又は半透明(例えば透明度1〜99%)のオーバーレイ要素を被せるものである。
図2(A)は編集対象のWebページを構成する部品1〜6毎に、一つずつオーバーレイ要素1A〜6Aを被せたものである。また、図2(B)は編集対象のWebページ全体にオーバーレイ要素7Aを被せたものである。本実施例の技術は編集対象のWebページを構成する部品1〜6にオーバーレイ要素1A〜7Aを被せることで、編集対象のWebページを構成する部品1〜6に如何なる振る舞いが定義されていようとも、また、如何なる振る舞いが定義されているか知ることができなくても、編集対象のWebページを構成する部品1〜6に対するクリック等のイベントの発生を抑止できる。
また同時に、本実施例の技術ではオーバーレイ要素1A〜7Aに部品1〜6が持つ本来の振る舞いとは別の振る舞いを定義することで、プレビュー領域に表示された部品1〜6にアクセスがあった場合に、その部品1〜6が持つ本来の振る舞いとは別の振る舞いをさせることができる。つまり、本実施例の技術では編集対象のWebページを構成する部品1〜6にイベントが発生せず、オーバーレイ要素1A〜7Aにイベントが発生する。
なお、本実施例の技術ではオーバーレイ要素1A〜7Aを透明とすることで、利用者にオーバーレイ要素1A〜7Aの存在を一切意識させなくできる。また、オーバーレイ要素1A〜7Aは編集対象のWebページ上の重なる部分と同一デザインとしても、利用者に存在を一切意識させなくできる。
さらに、本実施例の技術ではオーバーレイ要素1A〜7Aを半透明など透明と別の状態とすることで、編集対象のWebページを構成する部品1〜6に何らかの加工が成されたことを敢えて意識させた上で、部品1〜6の振る舞いを変更できる。なお、以下の説明では図2(A)に示した本実施例の技術を方式1と呼び、図2(B)に示した本実施例の技術を方式2と呼ぶ。
(システム構成図)
図3は、本実施例のWebページエディタが実行されるシステムの一例を示した構成図である。図3(A)に示したシステムは、スタンドアローンのコンピュータ(PC)により実現される利用者端末10を含む構成である。また、図3(B)に示したシステムはインターネットやLAN等のネットワーク13に接続されたコンピュータにより実現される利用者端末10,Webページ編集装置11及びWebサイト12を含む構成である。利用者端末10,Webページ編集装置11及びWebサイト12は、ネットワーク13経由でデータ通信可能である。
図3(A)のシステムに含まれる利用者端末10は利用者から編集対象のWebページに対する編集開始指示を受け、後述の振舞変更処理で編集操作が可能となった編集対象のWebページを表示する。図3(A)のシステムに含まれる利用者端末10は利用者から編集対象のWebページに対する部品の移動・削除・サイズ変更・プロパティ変更などの編集操作を受け付け、その編集操作の内容を編集対象Webページファイル(編集対象のWebページを記述したファイル)に反映させる。
また、図3(B)のシステムに含まれる利用者端末10は利用者から編集対象のWebページに対する編集開始指示を受け、その編集開始指示をWebページ編集装置11に送信する。Webページ編集装置11はWebサイト12から編集対象Webページファイルを読み込み、後述の振舞変更処理で編集操作が可能となった又は後述の振舞変更処理が追加された編集対象Webページファイルを利用者端末10に送信する。
図3(B)のシステムに含まれる利用者端末10はWebページ編集装置11から受信した編集対象Webページファイルに基づき、編集操作が可能となった編集対象のWebページを表示する。また、図3(B)のシステムに含まれる利用者端末10は利用者から編集対象のWebページに対する部品の移動・削除・サイズ変更・プロパティ変更などの編集操作を受け付け、その編集操作の内容をWebページ編集装置11に通知する。Webページ編集装置11は、利用者端末10から通知された編集操作の内容を、Webサイト12に格納されている編集対象Webページファイルに反映させる。
図4は本実施例のWebページエディタが実行されるコンピュータの一例を示した構成図である。図4のコンピュータは、バスBで相互に接続されている入力装置21,出力装置22,ドライブ装置23,補助記憶装置24,主記憶装置25,演算処理装置26及びインターフェース装置27を有するように構成される。
入力装置21はキーボードやマウスなどで構成され、各種信号を入力するために用いられる。出力装置22はディスプレイ装置などで構成され、各種ウインドウやデータ等を表示するために用いられる。インターフェース装置27は、モデム,LANカードなどで構成されており、インターネットやLANなどのネットワーク13に接続するために用いられる。
本実施例のWebページエディタは、利用者端末10又はWebページ編集装置11を制御する各種プログラムの少なくとも一部である。Webページエディタのプログラムは記録媒体28の配布やネットワーク13からのダウンロードなどによって提供される。
Webページエディタのプログラムを記録した記録媒体28は、CD−ROM、フレキシブルディスク、光磁気ディスク等の様に情報を光学的,電気的或いは磁気的に記録する記録媒体、ROM、フラッシュメモリ等の様に情報を電気的に記録する半導体メモリ等の様々なタイプの記録媒体を用いることができる。
また、Webページエディタのプログラムを記録した記録媒体28がドライブ装置23にセットされると、Webページエディタのプログラムは、記録媒体28からドライブ装置23を介して補助記憶装置24にインストールされる。なお、ネットワーク13からダウンロードされるWebページエディタのプログラムは、インターフェース装置27を介して補助記憶装置24にインストールされる。
補助記憶装置24はインストールされたWebページエディタのプログラムを格納すると共に、必要なファイル,データ等を格納する。主記憶装置25は、起動時に補助記憶装置24からWebページエディタのプログラムを読み出して格納する。そして、演算処理装置26は主記憶装置25に格納されたWebページエディタのプログラムに従って、後述するような各種処理を実現している。
以下、本実施例のWebページエディタが行う処理の詳細について説明していく。本実施例のWebページエディタは前述した方式1及び方式2の技術について、直接加工又は間接加工を取り得る。直接加工は、本実施例のWebページエディタが主体となって編集対象Webページファイルの加工を完結する。
一方、間接加工は本実施例のWebページエディタが、加工処理を行うスクリプトを編集対象Webページファイルへ挿入するにとどまる。間接加工は、加工処理を行うスクリプトを挿入された編集対象Webページファイルが、利用者のWebブラウザへロードされた時点で、Webブラウザ上で加工処理が走行する。なお、直接加工及び間接加工は加工処理の走行する場所が異なるものの、処理の本質が変わるものではない。以下では方式1及び2の技術を直接加工で実現する例、方式1及び2の技術を間接加工で実現する例を順番に説明していく。
なお、以下の説明では説明の便宜上、処理の主体がWebページエディタやWebブラウザであるように記載している。実際、処理の主体は演算処理装置26がWebページエディタやWebブラウザのプログラムを実行することにより実現される手段である。
(直接加工)
図5は直接加工の処理手順を表したフローチャートである。ステップS1に進み、Webページエディタは編集対象Webページファイルを読み込む。WebページエディタはステップS2に進み、編集対象Webページファイルに対して後述の加工処理を行う。ステップS3に進み、Webページエディタは加工処理により加工した後の編集対象Webページファイルを出力する。
図6は直接加工の処理手順を表した一例のイメージ図である。図6の利用者端末10はWebページエディタ31及びWebブラウザ32がインストールされている。利用者から編集開始指示を受け、Webページエディタ31は編集対象Webページファイル100を読み込む。Webページエディタ31は後述の加工処理(振舞変更処理)を行う。例えばWebページエディタ31は編集対象Webページファイル100について、全ての部品のクリック操作に対する振る舞いを「選択動作」とし、その後の編集処理が可能となるように設定する。
Webページエディタ31は振舞変更処理により振舞変更された編集対象Webページファイル(振舞変更されたWebページ電文)101を出力する。Webブラウザ32は振舞変更で編集操作が可能となった編集対象Webページファイルを受け、出力装置22に編集操作が可能となった編集対象Webページを表示して利用者に閲覧させる。
利用者は、Webブラウザ32を操作し、編集対象Webページの編集を行う。利用者からの編集操作(移動・削除・サイズ変更・プロパティ変更など)を受け、Webブラウザ32は編集操作による変更の反映をWebページエディタ31経由で、編集対象Webページファイル100に対して行う。
このような編集操作による変更を編集対象Webページファイル100に反映させる為には、振舞変更された編集対象Webページファイル101に、一連の編集操作に対する振る舞いを設定しておく必要がある。
例えばWebブラウザ32は「window.status」の変更により電文をWebページエディタ31に伝える。また、Webページエディタ31は「window.status」の変更を監視することにより、編集操作による変更を編集対象Webページファイル100に反映させることができる。
ここでの「window」はJavaScriptでブラウザウインドウを指すオブジェクトである。また、「window.status」はブラウザのステータスバー部分の文字列を表す属性である。
図7は、直接加工の処理手順を表した他の例のイメージ図である。図7の利用者端末10はWebブラウザ32がインストールされている。Webページ編集装置11はWebページエディタ31がインストールされている。また、Webサイト12は編集対象Webページファイル(編集対象Webページリソース)100を格納している。
利用者端末10,Webページ編集装置11及びWebサイト12はHTTP通信が可能であるものとする。さらに、Webサイト12が格納する編集対象Webページファイル100は、Webページ編集装置11からのHTTPのGET要求のみならずHTTPのPUT要求にも対応しているものとする。
利用者から編集開始指示を受け、利用者端末10のWebブラウザ32はWebページ編集装置11のWebページエディタ31へ編集開始を要求する。Webページエディタ31はWebサイト12にHTTPのGET要求を行い、Webサイト12から編集対象Webページファイル100を読み込む。
Webページエディタ31は後述の振舞変更処理を行う。Webページエディタ31は振舞変更処理により振舞変更された編集対象Webページファイルを出力する。Webブラウザ32は振舞変更で編集操作が可能となった編集対象WebページファイルをWebページ編集装置11のWebページエディタ31から受け、出力装置22に編集操作が可能となった編集対象Webページを表示して利用者に閲覧させる。
利用者は、Webブラウザ32を操作し、編集対象Webページの編集を行う。利用者からの編集操作(移動・削除・サイズ変更・プロパティ変更など)を受け、Webブラウザ32は編集操作による変更の反映をWebページ編集装置11のWebページエディタ31経由で、Webサイト12が格納する編集対象Webページファイル100に対して行う。
このような編集操作による変更を編集対象Webページファイル100に反映させる為には、振舞変更された編集対象Webページファイルに、一連の編集操作に対する振る舞いを設定しておく必要がある。
例えばWebブラウザ32はXmlHttpRequestオブジェクトを使い、編集対象Webページに対する編集操作をWebページ編集装置11のWebページエディタ31へ伝えるように振る舞いが設定される。そして、Webページ編集装置11のWebページエディタ31は、編集対象Webページに対する編集操作を、HTTPのPUT要求によりWebサイト12の編集対象Webページファイル100に反映させることができる。つまり、図7ではWebブラウザ32が受けた編集対象Webページに対する編集操作をWebサイト12へ伝える形態とすることにより、リモートによる編集対象Webページファイル100の編集を可能としている。
図8は方式1の技術を直接加工で実現する処理を表したイメージ図である。方式1は前述したように、編集対象Webページを構成する部品毎に、一つずつオーバーレイ要素を生成して被せ、オーバーレイ要素に部品が持つ本来の振る舞いとは別の振る舞いを定義する技術である。
Webページエディタ31は、ページ解釈部41,オーバーレイ生成部42,振舞決定部43,合成部44,制御部45を有する構成である。ページ解釈部41は、例えば編集対象Webページファイル100の一例として図8に示す加工前のWebページ200を読み込む。
加工前のWebページ200は、振舞220〜222が定義された部品210〜212により構成される。Webページエディタ31のページ解釈部41は読み込んだ加工前のWebページ200を解釈し、部品一覧を作成する。言い換えれば、ページ解釈部41は読み込んだ加工前のWebページ200を解釈し、部品ツリーとしてモデル化する。
簡単な実装においてはページ解釈部41をWebブラウザ32等に実装されているDOMパーサそのものとしてもよい。ページ解釈部41をWebブラウザ32等に実装されているDOMパーサそのものとした場合、部品ツリーはDOMツリーそのものとなる。その他、ページ解釈部41はDOMツリーそのものではなく、DOMツリーを更に解釈してまとめた部品ツリーを別途生成するようにしてもよい。DOMツリーを更に解釈してまとめた部品ツリーを別途生成するようにした場合、Webページエディタ31はJavaScriptライブラリなどが提供する特殊マークアップや複数のDOM要素からなる複合部品(カレンダー、スライダーなど)を扱うこともできる。
ページ解釈部41で作成された部品一覧に基づき、加工前のWebページ200を構成する全ての部品210〜212について、オーバーレイ生成部42は、オーバーレイ要素230〜232を一つずつ生成する。オーバーレイ生成部42は生成したオーバーレイ要素230〜232に、加工前のWebページ200を構成する全ての部品210〜212と比べて、より大きなZ座標を持たせる。
振舞決定部43は振舞紐付定義DB33に格納されている振舞紐付定義や振舞DB34に格納されている新しい振舞240〜242を参照し、加工前のWebページ200を構成する全ての部品210〜212について、紐付けるべき新しい振舞240〜242を対応するオーバーレイ要素230〜232に紐付ける。
振舞紐付定義DB33は、各部品、各イベントに対する新しい振舞を定義した定義体である。なお、振舞紐付定義DB33は、一律,テーブル,ルールの何れの形態であってもよい。
合成部44はページ解釈部41から加工前のWebページ200を受信し、振舞決定部43から新しい振舞240〜242が紐付けられたオーバーレイ要素230〜232を受信する。合成部44は、加工前のWebページ200に新しい振舞240〜242が紐付けられたオーバーレイ要素230〜232を合成し、加工後のWebページ201を生成する。
図8に示した加工後のWebページ201は、振舞220〜222が定義された部品210〜212に、新しい振舞240〜242が紐付けられたオーバーレイ要素230〜232を被せたものである。加工後のWebページ201はオーバーレイ要素230〜232を透明にした場合、加工前のWebページ200と見た目が同じである。つまり、利用者は加工前のWebページ200から加工後のWebページ201に変わったことを認識しない。
利用者が加工前のWebページ200を構成する部品(例えば部品210)に対する操作を意図しながら加工後のWebページ201に対して行うクリックやマウスオーバーなどのマウスイベントは、加工前のWebページ200を構成する部品に被せたオーバーレイ要素(例えばオーバーレイ要素230)にしか発生しない。
このため、加工前のWebページ200を構成する部品(例えば部品210)へのイベント発生は完全に抑止され、加工前のWebページ200を構成する部品(例えば部品210)に定義されていた振舞(例えば振舞220)が実行されない。一方、加工前のWebページ200を構成する部品に被せたオーバーレイ要素(例えばオーバーレイ要素230)へのイベントは発生し、そのオーバーレイ要素(例えばオーバーレイ要素230)に紐付けられた振舞(振舞240)が実行される。
図9は、方式1の技術を直接加工で実現する処理を説明する為の説明図である。Webページエディタ31は、加工前のWebページを構成する部品a〜fを走査し、それぞれの部品a〜fに対して以下の処理を行う。
部品a〜fに対応する新しい振る舞いは、振舞紐付定義DB33に格納されている振舞紐付テーブルのルックアップ等により決定される。図9(B)は振舞紐付定義DB33に格納されている振舞紐付テーブルの一例を示している。なお、部品a〜fに対応する新しい振る舞いは、振舞紐付テーブルによる定義の他、全ての部品a〜fを一律、同じとする定義、特定の条件に合致する部品毎の定義も有用である。
次に、オーバーレイ生成部42は部品a〜fと同じ大きさ・形状のオーバーレイ要素を生成する。振舞決定部43は部品a〜fに対応する新しい振る舞いを、部品a〜fに対応するオーバーレイ要素に定義する。合成部44は、部品a〜fに対応するオーバーレイ要素を、部品a〜fと同じ平面座標かつ充分大きなZ座標に配置し、部品a〜fを完全に覆う形とする。
図9(A)は加工後のWebページの一例を示している。加工後のWebページを構成する全ての部品a〜fは、各部品a〜fに対応するオーバーレイ要素が完全に覆った形となっている。例えば図9(A)では部品aに対応するオーバーレイ要素に「クリックでfunctionAを実行」、「マウスムーブでfunctionBを実行」が図9(B)の振舞紐付テーブルに基づき、定義されている。
なお、図9(A)に示す加工後のWebページは、部品a〜fに定義された振舞がそのまま定義されているが、被さったオーバーレイ要素により部品a〜fへのイベント発生が完全に抑止され、もともと部品a〜fに定義されている振舞が無効化されているのと同様となる。
図10は、加工前のWebページファイル及び加工前のWebページを説明する為の説明図である。図10(A)は加工前のWebページファイルの一例の構成図である。図10(B)は図10(A)に示す加工前のWebページファイルに基づいてWebブラウザ32が生成する表示画面の一例のイメージ図である。
図11は、加工後のWebページファイルの一例の構成図である。図11の加工後のWebページファイルは図10(A)の加工前のWebページファイルに、部品A及びBに対応するオーバーレイ要素及び新しい振舞C及びDの記載が追加されている。
次に、図5のステップS2に示した加工処理の処理手順について詳細に説明する。図12は加工処理の手順を表したフローチャートである。ステップS11に進み、ページ解釈部41は、例えば図10(A)に示す加工前のWebページファイルを読み込む。ページ解釈部41は読み込んだ加工前のWebページファイルを解釈し、例えば図13に示すように部品ツリー化する。図13は部品ツリーの一例の構成図である。
ステップS12に進み、オーバーレイ生成部42は部品ツリーに基づき、加工前のWebページを構成する全ての部品についてオーバーレイ要素を一つずつ生成する。ステップS12のオーバーレイ生成処理の詳細は後述する。
ステップS13に進み、振舞決定部43は振舞紐付定義DB33に格納されている振舞紐付定義や振舞DB34に格納されている新しい振舞を参照し、加工前のWebページを構成する全ての部品について、紐付けるべき新しい振舞を決定する。振舞決定部43は決定した新しい振舞を、各部品に対応するオーバーレイ要素に紐付ける。ステップS13の振舞決定処理の詳細は後述する。
ステップS14に進み、合成部44はページ解釈部41から加工前のWebページを受信し、振舞決定部43から新しい振舞が紐付けられたオーバーレイ要素を受信する。合成部44は、加工前のWebページに新しい振舞が紐付けられたオーバーレイ要素を合成して加工後のWebページを生成する。ステップS14の合成処理の詳細は後述する。
図14はオーバーレイ生成処理の手順を表したフローチャートである。ステップS21に進み、オーバーレイ生成部42はオーバーレイ格納用の空リストを作成する。ステップS22に進み、オーバーレイ生成部42は部品ツリーからページルート部品(例えば図13の部品ツリーにおけるbody)を取り出す。
ステップS23に進み、オーバーレイ生成部42は部品ツリーに基づき、図15に示す部品毎の再帰処理を行ったあと、オーバーレイ生成処理を終了する。図15は、部品毎の再帰処理の手順を表したフローチャートである。
ステップS31に進み、オーバーレイ生成部42は変数iに0を代入する。ステップS32に進み、オーバーレイ生成部42は、変数iが子部品の数より小さいかを否かを判定する。なお、子部品の数は部品ツリーから取得できる。オーバーレイ生成部42は変数iが子部品の数より小さければ、ステップS33に進み、部品ツリーからi+1番目の子部品を取り出す。
ステップS34に進み、オーバーレイ生成部42は後述する部品毎の実処理を行う。ステップS33で取り出したi+1番目の子部品に、更に子部品があればオーバーレイ生成部42はステップS35において、更に図15の部品毎の再帰処理を行う。ステップS36に進み、オーバーレイ生成部42は変数iに1を加算したあと、ステップS32の処理に戻り処理を続ける。ステップS32において、オーバーレイ生成部42は変数iが子部品の数より小さくなければ、ステップS23の部品毎の再帰処理を終了する。
図16は、部品毎の実処理の手順を表したフローチャートである。ステップS41に進み、オーバーレイ生成部42はオーバーレイ要素を生成する。オーバーレイ生成部42はステップS42に進み、オーバーレイ要素のid,サイズ,座標を設定する。オーバーレイ生成部42は対応する部品が完全に覆われるように、オーバーレイ要素のサイズ及び座標を設定する。なお、オーバーレイ生成部42はオーバーレイ要素のZ座標を部品のZ座標と比べて充分に大きな値に設定する。
そして、ステップS43に進み、オーバーレイ生成部42は設定したオーバーレイ要素のid,サイズ,座標をオーバーレイ格納用のリストに追加して、部品毎の実処理を終了する。
続いて、ステップS13に示した振舞決定処理の詳細について説明する。図17は振舞決定処理の手順を表したフローチャートである。ステップS51に進み、振舞決定部43はオーバーレイ格納用のリストを参照する。ステップS52に進み、振舞決定部43は変数iに0を代入する。
ステップS53に進み、振舞決定部43は、変数iがオーバーレイ要素の数より小さいか否かを判定する。なお、オーバーレイ要素の数はオーバーレイ格納用のリストから取得できる。振舞決定部43は変数iがオーバーレイ要素の数より小さければ、ステップS54に進み、オーバーレイ格納用のリストからi+1番目のオーバーレイ要素を取り出す。
ステップS55に進み、振舞決定部43は後述の部品毎振舞付与処理を行う。ステップS56に進み、振舞決定部43は変数iに1を加算したあと、ステップS53の処理に戻り処理を続ける。ステップS53において、振舞決定部43は変数iがオーバーレイ要素の数より小さくなければ、ステップS13の振舞決定処理を終了する。
図18は部品毎振舞付与処理の手順を表したフローチャートである。ステップS61に進み、振舞決定部43はステップS54で取り出したi+1番目のオーバーレイ要素に対応する部品(対応部品)を特定する。例えば図2(A)のオーバーレイ要素1Aが取り出された場合は部品1が対応部品として特定される。
ステップS62に進み、振舞決定部43は振舞紐付定義DB33に格納されている振舞紐付定義を検索し、対応部品に定義されている単数又は複数の振舞(対象イベント・振舞関数の組)を取得する。ステップS63に進み、振舞決定部43は取得した単数又は複数の振舞を全てオーバーレイ要素に付与した(紐付けた)あと、ステップS55の部品毎振舞付与処理を終了する。
続いて、ステップS14に示した合成処理の詳細について説明する。図19は合成処理の手順を表したフローチャートである。ステップS71に進み、合成部44はオーバーレイ格納用のリストを参照する。ステップS72に進み、合成部44は変数iに0を代入する。ステップS73に進み、合成部44は変数iがオーバーレイ要素の数より小さいか否かを判定する。
変数iがオーバーレイ要素の数より小さければ、ステップS74に進み、合成部44はオーバーレイ格納用のリストからi+1番目のオーバーレイ要素を取り出す。ステップS75に進み、合成部44はステップS22で取り出したページルート部品にオーバーレイ要素を追加する。例えば合成部44は、図10(A)に示す加工前のWebページファイルにオーバーレイ要素に関する記載を合成して図10(B)に示す加工後のWebページファイルを生成する。
ステップS76に進み、合成部44は変数iに1を加算したあと、ステップS73の処理に戻り処理を続ける。ステップS73において、合成部44は変数iがオーバーレイ要素の数より小さくなければ、ステップS14の合成処理を終了する。
図20は振舞紐付定義の実装例を表した説明図である。振舞紐付定義は様々な方法が考えられる。図20は典型的な振舞紐付定義の実装を示している。図20の振舞紐付定義は部品指定子,対象イベント,振舞関数の3列からなる表を用いたテーブル構造である。
部品指定子はCSS(Cascading Style Sheets)におけるセレクタ又はXPathなどの要素指定子が利用可能である。図20の振舞紐付定義はCSSにおけるセレクタを用いた例である。
図20(A)は部品指定子に個別のIDを使った要素指定の例である。図20(B)は部品指定子に要素種別(アンカータグなど)を使った要素指定の例である。さらに、図20(C)は部品指定子に、全ての要素に一律、同一の指定を行う要素指定の例である。
なお、部品指定子を解釈し、DOMツリー上を走査して該当要素を取得するアルゴリズムはJavaScriptライブラリの形で現存しており、既存技術であるため説明を省略する。
図21は方式2の技術を直接加工で実現する処理を表したイメージ図である。方式2は前述したように、編集対象Webページ全体を覆うオーバーレイ要素を一つ生成して編集対象Webページに被せ、そのオーバーレイ要素にマウス座標などから利用者の関心の対象である部品を特定する手段と、特定された部品及び対象イベントから実行されるべき新しい振舞を特定する手段と、特定された振舞を起動する手段とを持たせる技術である。
Webページエディタ31は、ページ解釈部41,オーバーレイ生成部42,合成部44,制御部45を有する構成である。ページ解釈部41は、例えば編集対象Webページファイル100の一例として加工前のWebページ200を読み込む。
加工前のWebページ200は、振舞220〜222が定義された部品210〜212により構成される。Webページエディタ31のページ解釈部41は読み込んだ加工前のWebページ200を解釈し、部品一覧を作成する。言い換えれば、ページ解釈部41は読み込んだ加工前のWebページ200を解釈し、部品ツリーとしてモデル化する。
オーバーレイ生成部42は、加工前のWebページ200全体を覆うオーバーレイ要素250を一つ生成する。オーバーレイ生成部42は生成したオーバーレイ要素250に加工前のWebページ200を構成する全ての部品210〜212と比べて、十分大きなZ座標を持たせる。
また、オーバーレイ生成部42は生成したオーバーレイ要素250に特殊な振舞251を定義する。ここで定義する特殊な振舞251には、振舞紐付定義DB33に格納されていた振舞紐付けルール253や振舞DB34に格納されていた新しい振舞240〜242を全て内包し、かつ利用者の操作によるイベント発生時に、利用者の関心の対象である部品(利用者が意図した部品)を特定する機構が含まれる。
より具体的に、特殊な振舞251にはイベント発生時にオーバーレイ要素250を不可視にしたり、振舞紐付けルール253を動的に参照しながら振舞を特定・実行したりする機構が含まれる。
合成部44はページ解釈部41から加工前のWebページ200を受信し、オーバーレイ生成部42から新しい振舞である特殊な振舞251が紐付けられたオーバーレイ要素250を受信する。合成部44は、加工前のWebページ200に特殊な振舞251が紐付けられたオーバーレイ要素250を合成し、加工後のWebページ201を生成する。
加工後のWebページ201は、特殊な振舞251が紐付けられたオーバーレイ要素250を、加工前のWebページ200に被せたものである。加工後のWebページ201はオーバーレイ要素250を透明にした場合、加工前のWebページ200と見た目が同じである。つまり、利用者は加工前のWebページ200から加工後のWebページ201に変わったことを認識しない。
利用者が加工前のWebページ200を構成する部品(例えば部品210)に対する操作を意図しながら加工後のWebページ201に対して行うクリックやマウスオーバーなどのマウスイベントは、加工前のWebページ200に被せたオーバーレイ要素250にしか発生しない。
このため、加工前のWebページ200を構成する部品(例えば部品210)へのイベント発生は完全に抑止され、加工前のWebページ200を構成する部品(例えば部品210)に定義されていた振舞(例えば振舞220)が実行されない。
一方、加工前のWebページ200に被せたオーバーレイ要素250へのイベントは発生し、そのオーバーレイ要素250に紐付けられた特殊な振舞251が実行される。ここで実行される特殊な振舞251には、利用者の意図した部品を特定する機構,特定された部品及び対象イベントから実行されるべき新しい振舞を決定する機構,決定された振舞そのもの,決定された振舞を起動する機構が内包されている。したがって、加工後のWebページ201では、利用者の意図した部品に定義されていた振舞を一切実行せず、新しい振舞が実行される。
なお、方式2の技術では加工前のWebページ200に一つのオーバーレイ要素250を覆いつつ、イベント発生時に、利用者の意図した部品を特定する必要がある。そこで本実施例ではオーバーレイ要素250を一時的に不可視(visibility=hidden)とし、イベント発生座標を元に最上位要素を取得し、オーバーレイ要素250の不可視を解除することにより、取得した最上位要素を利用者の意図した部品として特定できる。
ここで、不可視とはイベント発生座標を元にZ座標が最大である最上位要素を取得するときに、無視される状態をいう。なお、オーバーレイ要素250は、もともと透明であるため、不可視となったオーバーレイ要素250と可視となったオーバーレイ要素250とに見た目の違いがない。
図22は、方式2の技術を直接加工で実現する処理を説明する為の説明図である。Webページエディタ31は、加工前のWebページ全体と同じサイズを持ち、且つ、特殊な振舞251が定義されたオーバーレイ要素250を生成して加工前のWebページ全体に被せる。
特殊な振舞251には、mouseDown,mouseMove,mouseUp等のイベントに対して図22(B)に示す振舞が定義されている。その他、特殊な振舞251にはイベント発生時にオーバーレイ要素250を不可視にする機構,マウスポインタ座標(イベント発生座標)に対する最上位要素を取得する関数を使って利用者の意図した部品を取得する機構,利用者の意図した部品に対応する新しい振舞を図22(B)の振舞紐付テーブルのルックアップ等により決定する機構,利用者の意図した部品に対応する新しい振舞を実行する機構,不可視になっていたオーバーレイ要素250を可視に戻す機構が内包されている。
図23は特殊な振舞による処理を表した動作イメージ図である。図23(A)では利用者が部品Aのある座標でマウスクリックを行う。このとき、利用者の心理としては部品Aをマウスクリックしているつもりである。しかし、Webブラウザ32にはオーバーレイ要素に対するクリックイベントのみが発生し、部品Aに対するクリックイベントが発生しない。このため、図23(A)に示す例では、部品Aに定義されたクリックイベントに対する振舞を起動しない。
図23(B)では透明なオーバーレイ要素が一時的に不可視となることで、部品Aが最上位(最前面)要素となる為、マウスクリックのあったマウスポインタ座標を使ってWebブラウザ32に実装されている最前面部品を取り出す関数を呼び出すことで、部品Aを特定できる。マウスポインタ座標を使って最前面部品を取り出す関数としては、例えばelementFromPoint(x,y)がある。
図23(C)では透明なオーバーレイ要素をもとの状態である可視に戻し、例えば特定した部品Aの位置及びサイズから部品A上に選択状態表示用矩形を表示する。部品Aが既に特定されているため、図23(C)では特定した部品Aの削除,編集,移動,リサイズ等の動作を行うことができる。
図24は、加工前のWebページファイルの一例の構成図である。図25は加工後のWebページファイルの一例の構成図である。図25の加工後のWebページファイルは図24の加工前のWebページファイルに、加工前のWebページ全体に被せるオーバーレイ要素及び特殊な振舞の記載が追加されている。
次に、図5のステップS2に示した加工処理の処理手順について詳細に説明する。図26は加工処理の手順を表したフローチャートである。ページ解釈部41は、例えば図24に示す加工前のWebページファイルを読み込む。ページ解釈部41は読み込んだ加工前のWebページファイルを解釈し、例えば図13に示すように部品ツリー化する。
ステップS101に進み、オーバーレイ生成部42は加工前のWebページ全体を覆うオーバーレイ要素を一つ生成する。ステップS102に進み、オーバーレイ生成部42はオーバーレイ要素に発生しうるマウスイベントに対し、後述のようにイベントリスナ関数を付与する。さらに、オーバーレイ生成部42は生成したオーバーレイ要素250に特殊な振舞251を定義する。
ステップS103に進み、合成部44はページ解釈部41から加工前のWebページを受信し、オーバーレイ生成部42から特殊な振舞251が紐付けられたオーバーレイ要素を受信する。合成部44は、加工前のWebページのルートに、特殊な振舞251が紐付けられたオーバーレイ要素を追加して加工後のWebページを生成する。
図27は、イベントリスナ関数処理の手順を表したフローチャートである。図27に示したイベントリスナ関数処理はオーバーレイ要素に紐付けられた特殊な振舞251に基づいてWebブラウザ32で実行される。ステップS111に進み、Webブラウザ32は後述のように利用者の関心の対象である部品(関心部品)を特定する。
ステップS112に進み、Webブラウザ32は、関心部品が加工後のWebページのルートにあるかルート以外にあるかを判定する。加工後のWebページのルート以外に関心部品があれば、Webブラウザ32はステップS113に進み、利用者の操作による対象イベント(イベント種別)を特定する。
ステップS114に進み、Webブラウザ32は後述の振舞関数決定処理を行う。Webブラウザ32はステップS115に進み、ステップS114の振舞関数決定処理において該当する振舞関数があったか否かを判定する。該当する振舞関数があれば、Webブラウザ32はステップS116に進み、該当する振舞関数を実行したあと、イベントリスナ関数処理を終了する。
Webブラウザ32はステップS112において加工後のWebページのルートに関心部品があれば、振舞関数を実行することなく、イベントリスナ関数処理を終了する。Webブラウザ32はステップS115において該当する振舞関数がなければ、振舞関数を実行することなく、イベントリスナ関数処理を終了する。
図28は関心部品特定処理の手順を表したフローチャートである。ステップS121に進み、Webブラウザ32はオーバーレイ要素を不可視に設定する。ステップS122に進み、Webブラウザ32はマウスポインタ座標を取得する。
ステップS123に進み、Webブラウザ32は取得したマウスポインタ座標での最上位要素を関心部品として取得する。ステップS124に進み、Webブラウザ32は不可視になっていたオーバーレイ要素を可視に戻す設定を行ったあと、関心部品特定処理を終了する。
図29は振舞関数決定処理の手順を表したフローチャートである。ステップS131に進み、Webブラウザ32は取得した関心部品と対象イベントとを引数にとり、振舞紐付け定義を参照する。ステップS132に進み、Webブラウザ32は振舞紐付け定義を参照して、関心部品と対象イベントとに対応する振舞関数を決定したあと、振舞関数決定処理を終了する。
(間接加工)
図30は間接加工の処理手順を表したフローチャートである。なお、前述したように直接加工及び間接加工は加工処理の走行する場所が異なるものの、処理の本質が変わるものではないため、直接加工と同様な部分については適宜説明を省略する。
ステップS201に進み、Webページエディタは編集対象Webページファイルを読み込む。WebページエディタはステップS202に進み、編集対象Webページファイルに対して後述の加工処理を行うスクリプトを追加する。ステップS203に進み、Webページエディタは加工処理を行うスクリプトを追加した加工後の編集対象Webページファイルを出力する。
図31は間接加工の処理手順を表した一例のイメージ図である。図31の利用者端末10はWebページエディタ31及びWebブラウザ32がインストールされている。利用者から編集開始指示を受け、Webページエディタ31は編集対象Webページファイル100を読み込む。Webページエディタ31は、編集対象Webページファイル100に対して、振舞変更処理を行うスクリプトの追加を行う。
例えばWebページエディタ31は編集対象Webページの全ての部品のクリック操作に対する振る舞いを「選択動作」とし、その後の編集処理が可能となるような振舞変更処理を行うスクリプトを編集対象Webページファイル100に追加する。Webページエディタ31は、振舞変更処理を行うスクリプトが追加された編集対象Webページファイル(振舞変更処理の追加されたWebページ電文)102を出力する。
Webブラウザ32はWebページエディタ31から振舞変更処理を行うスクリプトが追加された編集対象Webページファイル102を受け、振舞変更処理を行うことで編集対象Webページファイル100の編集操作を可能とする。Webブラウザ32は出力装置22に編集操作が可能となった編集対象Webページを表示して利用者に閲覧させる。
利用者は、Webブラウザ32を操作し、編集対象Webページの編集を行う。利用者からの編集操作を受け、Webブラウザ32は編集操作による変更の反映をWebページエディタ31経由で、編集対象Webページファイル100に対して行うことができる。
図32は、間接加工の処理手順を表した他の例のイメージ図である。図32の利用者端末10はWebブラウザ32がインストールされている。Webページ編集装置11はWebページエディタ31がインストールされている。また、Webサイト12は編集対象Webページファイル(編集対象Webページリソース)100を格納している。
利用者端末10,Webページ編集装置11及びWebサイト12はHTTP通信が可能であるものとする。さらに、Webサイト12が格納する編集対象Webページファイル100は、Webページ編集装置11からのHTTPのGET要求のみならずHTTPのPUT要求にも対応しているものとする。
利用者から編集開始指示を受け、利用者端末10のWebブラウザ32はWebページ編集装置11のWebページエディタ31へ編集開始を要求する。Webページエディタ31はWebサイト12にHTTPのGET要求を行い、Webサイト12から編集対象Webページファイル100を読み込む。
Webページエディタ31は編集対象Webページファイル100に対して、振舞変更処理を行うスクリプトの追加を行う。Webページエディタ31は、振舞変更処理を行うスクリプトが追加された編集対象Webページファイル102を出力する。
Webブラウザ32はWebページエディタ31から振舞変更処理を行うスクリプトが追加された編集対象Webページファイル102を受け、振舞変更処理を行うことで編集対象Webページファイル100の編集操作を可能とする。Webブラウザ32は出力装置22に編集操作が可能となった編集対象Webページを表示して利用者に閲覧させる。
利用者は、Webブラウザ32を操作し、編集対象Webページの編集を行う。利用者からの編集操作を受け、Webブラウザ32は編集操作による変更の反映をWebページ編集装置11のWebページエディタ31経由で、Webサイト12が格納する編集対象Webページファイル100に対して行うことができる。
図33は間接加工後のWebページファイルの一例の構成図である。なお、図33の間接加工後のWebページファイルは、図10(A)に示すWebページファイル100に対して間接加工を行った例である。図33の間接加工後のWebページファイルは、図10(A)のWebページファイル100に、部品A及びBに対応するオーバーレイ要素及び新しい振舞C及びDの記載を追加するJavaScriptで記載された振舞変更処理が追加されている。
例えば図11に示した直接加工後のWebページファイルは2つの部品に対応する2つのオーバーレイ要素を実際に追加する加工がされている。一方、図33に示した間接加工後のWebページファイルは振舞変更処理を追加して、間接的な振舞変更加工を行っている。このような間接的な振舞変更加工を行うことで、間接加工後のWebページファイルはWebブラウザ32に読み込まれたときにWebブラウザ32上で動的に振舞が変化するため、結果として直接加工後のWebページファイルと同じ効果を得られる。
(画面例)
以下、図10(A)のWebページファイル100を例に画面イメージを示す。図34はWebページファイルの元の振舞を表した画面イメージ図である。つまり、図34の画面イメージはWebブラウザ32によって生成される。図34の画面は部品Aをクリックしたときに、「funcA」という文字列の警告表示が起こっている。
図35は図10(A)のWebページファイル100をWebページエディタ31で開いたときの一例の画面イメージ図である。図35の画面はプレビュー領域301を有している。プレビュー領域301に表示されている部品A及びBには前述したオーバーレイ要素が被さっている。つまり、プレビュー領域301では部品A及びBをクリックしたとしても部品A及びBの本来の振る舞いが実行されない。なお、図35の画面はプレビュー領域301以外をWebページエディタ31が表示し、プレビュー領域301をWebブラウザ32が表示する。
図36は、図10(A)のWebページファイル100をWebページエディタ31で開き、部品Aをクリックしたときの一例の画面イメージ図である。プレビュー領域301に表示されている部品Aは前述のオーバーレイ要素に覆われている。したがって、利用者が部品Aをクリックしたとしても、図36の画面では図34に示した部品Aの本来の振舞である「funcA」という文字列の警告表示が起こらない。その代わり、図36の画面ではセレクタとリサイザとが表示され、編集動作が可能である。また、図36の画面では部品Aをダブルクリックすることでプロパティ領域302にプロパティが表示される。
図37は図36の画面イメージを実現する為の振舞紐付定義の一例の構成図である。図37の振舞紐付定義は、全ての要素についてクリックすることでセレクタ・リサイザが表示され、全ての要素についてダブルクリックすることでプロパティが表示されるように定義している。
(まとめ)
本実施例のWebページエディタ31は編集対象Webページファイル100を構成する部品の振舞を変更する加工が可能である。なお、本実施例のWebページエディタ31が行う加工は、実質、オーバーレイ要素の追加であり、元の編集対象Webページファイル100に対して破壊的な変更を行うものではない。言わば可逆加工となっている。
このため、本実施例のWebページエディタ31は追加したオーバーレイ要素を削除することで元の編集対象Webページファイル100に戻したり、利用者の操作で振舞変更のON/OFFを動的に切り替えたりすることもできる。本実施例のWebページエディタ31は、従来のWebページエディタと異なり、JavaScriptフレームワークが提供する特殊マークアップによる動的構成のWebページの編集も可能である。
また、本実施例のWebページエディタ31は、JavaScriptフレームワークのバージョンアップに伴う部品追加があった際にも、別途デザインタイム用の描画ロジックを書き起こす必要がなく、保守性の高いものとすることができる。
このように、本実施例のWebページエディタ31は、利用者が編集しようとする編集対象Webページファイル100を選択したときに、その編集対象Webページファイル100を直接、利用者に見せるのではなく、加工後のWebページを見せて、加工後のWebページを操作してもらうことによりWYSIWYG編集を可能とし、利用者の編集操作によって生じる変更を編集対象Webページファイル100へ反映させることが可能である。
本発明は、以下に記載する付記のような構成が考えられる。
(付記1)
コンピュータに、プレビュー領域を備える編集画面を表示させるWebページ編集プログラムであって、
前記コンピュータを、
編集対象のWebページを記述したファイルを解釈するページ解釈手段と、
前記ページ解釈手段による解釈に基づいて、前記編集対象のWebページを構成する部品を識別し、前記部品に被せるオーバーレイ要素を生成するオーバーレイ生成手段と、
前記Webページを構成する部品の新たな振る舞いを前記オーバーレイ要素に紐付ける振舞決定手段と、
前記編集対象のWebページを記述したファイルに、前記Webページを構成する部品の新たな振る舞いを紐付けた前記オーバーレイ要素の記述を追加し、前記編集対象のWebページにオーバーレイ要素を合成する合成手段と、
前記合成手段により前記オーバーレイ要素が合成された前記編集対象のWebページを記述したファイルをブラウジングプログラムに提供し、前記オーバーレイ要素が被せられた前記編集対象のWebページを前記プレビュー領域に表示させる制御手段と
して機能させるためのWebページ編集プログラム。
(付記2)
コンピュータに、プレビュー領域を備える編集画面を表示させるWebページ編集プログラムであって、
前記コンピュータを、
編集対象のWebページを記述したファイルを解釈するページ解釈手段と、
前記ページ解釈手段による解釈に基づいて、前記編集対象のWebページを構成する部品を識別し、前記部品に被せるオーバーレイ要素を生成すると共に、前記Webページを構成する部品の新たな振る舞いを決定及び実行する振舞変更処理を前記オーバーレイ要素に紐付ける振舞決定手段と、
前記編集対象のWebページを記述したファイルに、前記Webページを構成する部品の新たな振る舞いを決定及び実行する振舞変更処理を紐付けた前記オーバーレイ要素の記述を追加し、前記編集対象のWebページにオーバーレイ要素を合成する合成手段と、
前記合成手段により前記オーバーレイ要素が合成された前記編集対象のWebページを記述したファイルをブラウジングプログラムに提供し、前記オーバーレイ要素が被せられた前記編集対象のWebページを前記プレビュー領域に表示させる制御手段と
して機能させるためのWebページ編集プログラム。
(付記3)
前記オーバーレイ生成手段は、前記部品に被せる前記オーバーレイ要素を、部品毎に生成する付記1又は2記載のWebページ編集プログラム。
(付記4)
前記オーバーレイ生成手段は、前記部品に被せる前記オーバーレイ要素を、全ての部品が被さるように生成する付記1又は2記載のWebページ編集プログラム。
(付記5)
前記オーバーレイ生成手段は、前記部品に被せる前記オーバーレイ要素を、透明,半透明、又は前記オーバーレイ要素と重なる前記編集対象のWebページ上の部分と同一デザインで生成する付記1乃至4何れか一項記載のWebページ編集プログラム。
(付記6)
前記振舞変更処理は、前記プレビュー領域に表示された前記オーバーレイ要素に対する操作を受け付けると、前記操作を受け付けた前記オーバーレイ要素上の位置の直下にある前記編集対象のWebページを構成する部品を特定し、前記特定した部品に紐付けた新たな振る舞いを、操作の種別に基づいて実行するように前記ブラウジングプログラムを制御する付記2記載のWebページ編集プログラム。
(付記7)
プレビュー領域を備える編集画面を表示するWebページ編集装置であって、
編集対象のWebページを記述したファイルを解釈するページ解釈手段と、
前記ページ解釈手段による解釈に基づいて、前記編集対象のWebページを構成する部品を識別し、前記部品に被せるオーバーレイ要素を生成するオーバーレイ生成手段と、
前記Webページを構成する部品の新たな振る舞いを前記オーバーレイ要素に紐付ける振舞決定手段と、
前記編集対象のWebページを記述したファイルに、前記Webページを構成する部品の新たな振る舞いを紐付けた前記オーバーレイ要素の記述を追加し、前記編集対象のWebページにオーバーレイ要素を合成する合成手段と、
前記合成手段により前記オーバーレイ要素が合成された前記編集対象のWebページを記述したファイルをブラウジングプログラムに提供し、前記オーバーレイ要素が被せられた前記編集対象のWebページを前記プレビュー領域に表示させる制御手段と
を有するWebページ編集装置。
(付記8)
プレビュー領域を備える編集画面を表示するWebページ編集装置であって、
編集対象のWebページを記述したファイルを解釈するページ解釈手段と、
前記ページ解釈手段による解釈に基づいて、前記編集対象のWebページを構成する部品を識別し、前記部品に被せるオーバーレイ要素を生成すると共に、前記Webページを構成する部品の新たな振る舞いを決定及び実行する振舞変更処理を前記オーバーレイ要素に紐付ける振舞決定手段と、
前記編集対象のWebページを記述したファイルに、前記Webページを構成する部品の新たな振る舞いを決定及び実行する振舞変更処理を紐付けた前記オーバーレイ要素の記述を追加し、前記編集対象のWebページにオーバーレイ要素を合成する合成手段と、
前記合成手段により前記オーバーレイ要素が合成された前記編集対象のWebページを記述したファイルをブラウジングプログラムに提供し、前記オーバーレイ要素が被せられた前記編集対象のWebページを前記プレビュー領域に表示させる制御手段と
を有するWebページ編集装置。
本発明は、具体的に開示された実施例に限定されるものではなく、特許請求の範囲から逸脱することなく、種々の変形や変更が可能である。
プレビュー領域に表示された部品にアクセスがあった場合に、その部品が持つ本来の振る舞いとは別の振る舞いをさせる加工の従来技術を表したイメージ図である。 プレビュー領域に表示された部品にアクセスがあった場合に、その部品が持つ本来の振る舞いとは別の振る舞いをさせる加工の本実施例の技術を表した一例のイメージ図である。 本実施例のWebページエディタが実行されるシステムの一例を示した構成図である。 本実施例のWebページエディタが実行されるコンピュータの一例を示した構成図である。 直接加工の処理手順を表したフローチャートである。 直接加工の処理手順を表した一例のイメージ図である。 直接加工の処理手順を表した他の例のイメージ図である。 方式1の技術を直接加工で実現する処理を表したイメージ図である。 方式1の技術を直接加工で実現する処理を説明する為の説明図である。 加工前のWebページファイル及び加工前のWebページを説明する為の説明図である。 加工後のWebページファイルの一例の構成図である。 加工処理の手順を表したフローチャートである。 部品ツリーの一例の構成図である。 オーバーレイ生成処理の手順を表したフローチャートである。 部品毎の再帰処理の手順を表したフローチャートである。 部品毎の実処理の手順を表したフローチャートである。 振舞決定処理の手順を表したフローチャートである。 部品毎振舞付与処理の手順を表したフローチャートである。 合成処理の手順を表したフローチャートである。 振舞紐付定義の実装例を表した説明図である。 方式2の技術を直接加工で実現する処理を表したイメージ図である。 方式2の技術を直接加工で実現する処理を説明する為の説明図である。 特殊な振舞による処理を表した動作イメージ図である。 加工前のWebページファイルの一例の構成図である。 加工後のWebページファイルの一例の構成図である。 加工処理の手順を表したフローチャートである。 イベントリスナ関数処理の手順を表したフローチャートである。 関心部品特定処理の手順を表したフローチャートである。 振舞関数決定処理の手順を表したフローチャートである。 間接加工の処理手順を表したフローチャートである。 間接加工の処理手順を表した一例のイメージ図である。 間接加工の処理手順を表した他の例のイメージ図である。 間接加工後のWebページファイルの一例の構成図である。 Webページファイルの元の振舞を表した画面イメージ図である。 図10(A)のWebページファイル100をWebページエディタ31で開いたときの一例の画面イメージ図である。 図10(A)のWebページファイル100をWebページエディタ31で開き、部品Aをクリックしたときの一例の画面イメージ図である。 図36の画面イメージを実現する為の振舞紐付定義の一例の構成図である。
符号の説明
1〜3 反応部品
4〜6 非反応部品
1A〜7A オーバーレイ要素
10 利用者端末
11 Webページ編集装置
12 Webサイト
13 ネットワーク
21 入力装置
22 出力装置
23 ドライブ装置
24 補助記憶装置
25 主記憶装置
26 演算処理装置
27 インターフェース装置
28 記録媒体
31 Webページエディタ
32 Webブラウザ
33 振舞紐付定義DB
34 振舞DB
41 ページ解釈部
42 オーバーレイ生成部
43 振舞決定部
44 合成部
45 制御部
100 編集対象Webページファイル
101 振舞変更された編集対象Webページファイル
102 振舞変更処理を行うスクリプトが追加された編集対象Webページファイル
210〜212 部品
220〜222,240〜242 振舞
230〜232,250 オーバーレイ要素
251 特殊な振舞
253 振舞紐付けルール
301 プレビュー領域
302 プロパティ領域

Claims (11)

  1. コンピュータに、プレビュー領域を備える編集画面を表示させるWebページ編集プログラムであって、
    前記コンピュータを、
    編集対象のWebページを記述したファイルを解釈するページ解釈手段と、
    前記ページ解釈手段による解釈に基づいて、前記編集対象のWebページを構成する部品を識別し、前記部品に被せるオーバーレイ要素を生成するオーバーレイ生成手段と、
    前記Webページを構成する部品の新たな振る舞いを前記オーバーレイ要素に紐付ける振舞決定手段と、
    前記編集対象のWebページを記述したファイルに、前記Webページを構成する部品の新たな振る舞いを紐付けた前記オーバーレイ要素の記述を追加し、前記編集対象のWebページにオーバーレイ要素を合成する合成手段と、
    前記合成手段により前記オーバーレイ要素が合成された前記編集対象のWebページを記述したファイルをブラウジングプログラムに提供し、前記オーバーレイ要素が被せられた前記編集対象のWebページを前記プレビュー領域に表示させる制御手段と
    して機能させるためのWebページ編集プログラム。
  2. 前記振舞決定手段は、前記Webページを構成する部品の新たな振る舞いを、部品指定子、対象イベント及び振舞関数により定義した振舞紐付定義を管理するデータベースを参照して、前記Webページを構成する部品の新たな振る舞いを決定する請求項1記載のWebページ編集プログラム。
  3. コンピュータに、プレビュー領域を備える編集画面を表示させるWebページ編集プログラムであって、
    前記コンピュータを、
    編集対象のWebページを記述したファイルを解釈するページ解釈手段と、
    前記ページ解釈手段による解釈に基づいて、前記編集対象のWebページを構成する部品を識別し、前記部品に被せるオーバーレイ要素を生成すると共に、前記Webページを構成する部品の新たな振る舞いを決定及び実行する振舞変更処理を前記オーバーレイ要素に紐付ける振舞決定手段と、
    前記編集対象のWebページを記述したファイルに、前記Webページを構成する部品の新たな振る舞いを決定及び実行する振舞変更処理を紐付けた前記オーバーレイ要素の記述を追加し、前記編集対象のWebページにオーバーレイ要素を合成する合成手段と、
    前記合成手段により前記オーバーレイ要素が合成された前記編集対象のWebページを記述したファイルをブラウジングプログラムに提供し、前記オーバーレイ要素が被せられた前記編集対象のWebページを前記プレビュー領域に表示させる制御手段と
    して機能させるためのWebページ編集プログラム。
  4. 前記振舞決定手段は、前記Webページを構成する部品の新たな振る舞いを、部品指定子、対象イベント及び振舞関数により定義した振舞紐付定義を管理するデータベースを参照して、前記Webページを構成する部品の新たな振る舞いを決定する請求項3記載のWebページ編集プログラム。
  5. 前記オーバーレイ生成手段は、前記部品に被せる前記オーバーレイ要素を、部品毎に生成する請求項1又は2記載のWebページ編集プログラム。
  6. 前記オーバーレイ生成手段は、前記部品に被せる前記オーバーレイ要素を、全ての部品が被さるように生成する請求項1又は2記載のWebページ編集プログラム。
  7. 前記オーバーレイ生成手段は、前記部品に被せる前記オーバーレイ要素を、透明,半透明、又は前記オーバーレイ要素と重なる前記編集対象のWebページ上の部分と同一デザインで生成する請求項1、2、5又は6何れか一項記載のWebページ編集プログラム。
  8. プレビュー領域を備える編集画面を表示するWebページ編集装置であって、
    編集対象のWebページを記述したファイルを解釈するページ解釈手段と、
    前記ページ解釈手段による解釈に基づいて、前記編集対象のWebページを構成する部品を識別し、前記部品に被せるオーバーレイ要素を生成するオーバーレイ生成手段と、
    前記Webページを構成する部品の新たな振る舞いを前記オーバーレイ要素に紐付ける振舞決定手段と、
    前記編集対象のWebページを記述したファイルに、前記Webページを構成する部品の新たな振る舞いを紐付けた前記オーバーレイ要素の記述を追加し、前記編集対象のWebページにオーバーレイ要素を合成する合成手段と、
    前記合成手段により前記オーバーレイ要素が合成された前記編集対象のWebページを記述したファイルをブラウジングプログラムに提供し、前記オーバーレイ要素が被せられた前記編集対象のWebページを前記プレビュー領域に表示させる制御手段と
    を有するWebページ編集装置。
  9. 前記振舞決定手段は、前記Webページを構成する部品の新たな振る舞いを、部品指定子、対象イベント及び振舞関数により定義した振舞紐付定義を管理するデータベースを参照して、前記Webページを構成する部品の新たな振る舞いを決定する請求項8記載のWebページ編集装置。
  10. プレビュー領域を備える編集画面を表示するWebページ編集装置であって、
    編集対象のWebページを記述したファイルを解釈するページ解釈手段と、
    前記ページ解釈手段による解釈に基づいて、前記編集対象のWebページを構成する部品を識別し、前記部品に被せるオーバーレイ要素を生成すると共に、前記Webページを構成する部品の新たな振る舞いを決定及び実行する振舞変更処理を前記オーバーレイ要素に紐付ける振舞決定手段と、
    前記編集対象のWebページを記述したファイルに、前記Webページを構成する部品の新たな振る舞いを決定及び実行する振舞変更処理を紐付けた前記オーバーレイ要素の記述を追加し、前記編集対象のWebページにオーバーレイ要素を合成する合成手段と、
    前記合成手段により前記オーバーレイ要素が合成された前記編集対象のWebページを記述したファイルをブラウジングプログラムに提供し、前記オーバーレイ要素が被せられた前記編集対象のWebページを前記プレビュー領域に表示させる制御手段と
    を有するWebページ編集装置。
  11. 前記振舞決定手段は、前記Webページを構成する部品の新たな振る舞いを、部品指定子、対象イベント及び振舞関数により定義した振舞紐付定義を管理するデータベースを参照して、前記Webページを構成する部品の新たな振る舞いを決定する請求項10記載のWebページ編集装置。
JP2008313156A 2008-12-09 2008-12-09 Webページ編集プログラム及びWebページ編集装置 Expired - Fee Related JP5476709B2 (ja)

Priority Applications (1)

Application Number Priority Date Filing Date Title
JP2008313156A JP5476709B2 (ja) 2008-12-09 2008-12-09 Webページ編集プログラム及びWebページ編集装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
JP2008313156A JP5476709B2 (ja) 2008-12-09 2008-12-09 Webページ編集プログラム及びWebページ編集装置

Publications (2)

Publication Number Publication Date
JP2010140076A JP2010140076A (ja) 2010-06-24
JP5476709B2 true JP5476709B2 (ja) 2014-04-23

Family

ID=42350196

Family Applications (1)

Application Number Title Priority Date Filing Date
JP2008313156A Expired - Fee Related JP5476709B2 (ja) 2008-12-09 2008-12-09 Webページ編集プログラム及びWebページ編集装置

Country Status (1)

Country Link
JP (1) JP5476709B2 (ja)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2014157456A (ja) * 2013-02-15 2014-08-28 Toshiba Corp 文書処理システム、文書処理装置、文書処理方法、文書処理プログラム
JP6277828B2 (ja) 2014-03-31 2018-02-14 富士通株式会社 編集補助プログラム、編集補助方法および編集補助装置
BR112019024309A2 (pt) * 2017-07-24 2020-11-03 Wix.Com Ltd. editar base de dados durante visualização de página da web virtual
JP7014958B2 (ja) 2017-10-23 2022-02-02 富士通株式会社 編集プログラム、編集装置、及び、編集方法

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2003196264A (ja) * 2001-12-26 2003-07-11 Fukui Computer Kk ウエブページ作成方法、ウエブページ作成プログラム及びウエブページ作成装置
JP2005301422A (ja) * 2004-04-07 2005-10-27 Canon Inc 文書データ処理装置および方法

Also Published As

Publication number Publication date
JP2010140076A (ja) 2010-06-24

Similar Documents

Publication Publication Date Title
US9495134B2 (en) Methods and apparatus for code segment handling
JP5284509B2 (ja) ページ分割されたコンテンツを表示し、それと対話するための方法およびシステム
JP4306991B2 (ja) データ処理装置及び方法、並びに、コンピュータプログラム及び記憶媒体
JP4972254B2 (ja) リフレッシュ可能なWebクエリを作成するための統合された方法
US11822615B2 (en) Contextual editing in a page rendering system
US20040268232A1 (en) Pane Element
JP2008506183A (ja) 自動的に生成されたコンテンツのインポート
US9535667B2 (en) Content collapse outside of selection
CN112364496B (zh) 基于html5和vue技术的航电仿真面板生成系统
JP5476709B2 (ja) Webページ編集プログラム及びWebページ編集装置
CN112487340A (zh) 一种极速简约防盗Linux全屏浏览器的创新技术
KR100697809B1 (ko) 아이프레임―레이어를 이용한 홈페이지 제작방법
Freeman Pro jQuery 2.0
US8566734B1 (en) System and method for providing visual component layout input in alternate forms
US10394932B2 (en) Methods and systems for combining a digital publication shell with custom feature code to create a digital publication
TWI815029B (zh) 將程式碼轉變為可下載檔案的方法和伺服器
Kavaldjian et al. Generating content presentation according to purpose
JP3347047B2 (ja) 電子カルテ作成装置および電子カルテ作成プログラム記憶媒体
KR20140115456A (ko) 애플리케이션 개발 환경 제공 프로그램을 기록한 기록매체
Sanderson et al. Using Smile: The AppleScript Integrated Production Environment
Ghosh et al. A Quick Tour of Silverlight 4 Development
KR20110078310A (ko) 핑거라우저 및 이를 이용한 이미지 편집 방법/시스템
JP2006092216A (ja) ドキュメントの表示形態を編集するためのプログラム、参照情報編集方法及び参照情報編集装置
KR20140114975A (ko) 애플리케이션 개발 환경 제공 프로그램을 기록한 것을 특징으로 하는 컴퓨터로 판독 가능한 기록매체
KR20140115461A (ko) 애플리케이션 개발 환경 제공 장치

Legal Events

Date Code Title Description
A621 Written request for application examination

Free format text: JAPANESE INTERMEDIATE CODE: A621

Effective date: 20110907

A977 Report on retrieval

Free format text: JAPANESE INTERMEDIATE CODE: A971007

Effective date: 20130308

A131 Notification of reasons for refusal

Free format text: JAPANESE INTERMEDIATE CODE: A131

Effective date: 20130319

A521 Written amendment

Free format text: JAPANESE INTERMEDIATE CODE: A523

Effective date: 20130517

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: 20140114

A61 First payment of annual fees (during grant procedure)

Free format text: JAPANESE INTERMEDIATE CODE: A61

Effective date: 20140127

R150 Certificate of patent or registration of utility model

Ref document number: 5476709

Country of ref document: JP

Free format text: JAPANESE INTERMEDIATE CODE: R150

LAPS Cancellation because of no payment of annual fees