JP2015200953A

JP2015200953A - 画像表示装置

Info

Publication number: JP2015200953A
Application number: JP2014077912A
Authority: JP
Inventors: 克哉日野; Katsuya Hino; 善之松田; Yoshiyuki Matsuda
Original assignee: Toshiba Corp
Current assignee: Toshiba Corp
Priority date: 2014-04-04
Filing date: 2014-04-04
Publication date: 2015-11-12

Abstract

【課題】SVG（ＳｃａｌａｂｌｅＶｅｃｔｏｒＧｒａｐｈｉｃｓ）に対応していない環境下でSVG部品を代替部品に置換する際、代替部品に対する外観属性の設定をせずに、外観をSVG部品に揃える画像表示装置を提供する。
【解決手段】SVGを生成・編集可能なソフトウェアで作成されたSVG部品をHTML文書に挿入したデータを入力し、HTML文書中からSVG部品を探し出し、探したSVG部品を退避させ、SVG部品の代わりとなりその外観表現方法にSVG以外の技術を使用している代替部品を生成し、退避したSVG部品から、SVG部品の外観属性を取得して、代替部品にSVG部品の外観属性を設定し、外観属性を設定した代替部品を、HTML文書に挿入する代替部品挿入することにより、代替部品挿入部で代替部品を挿入後のHTML文書をレンダリングした結果をビデオメモリに保持して、ビデオメモリに保持している内容を表示させる。
【選択図】図１

Description

本発明の実施形態は、画像表示装置に関する。

画像を図形の集合から成るベクトル画像で表示することが行われているが、ベクトル画像をWebブラウザで表示する場合、SVG(Scalable Vector Graphics)形式で作成する。

一般的に、図形の外観の表現方法にSVGを使用したSVG部品は、SVGに対応しない環境（例えば、サポートされていないWebブラウザ）では使用できず、表示することができない。実行時に、SVG部品を代替部品と差し替えることで、SVGに対応しない環境でも使用できるが、SVG部品使用時の外観を再現することができない。SVG部品の外観を再現するには、外観の表現方法にSVG以外の技術を使用した代替部品に対して、追加で外観属性を設定する必要がある。

ところが、代替部品に対して外観属性を設定する場合、同一外観を表現するための外観属性の設定を部品毎にそれぞれの手法で行うため冗長であるという問題がある。

さらに、SVG部品と代替部品に対する外観属性の設定を同一に保つように、記述の書き直しが必要になる。

また、SVG部品に対する外観属性の設定にはCSS（Cascading Style Sheets）やSVG作成ソフトウェアが利用可能であるが、文書中に置換された代替部品に対してCSSで記述されたと同様の外観属性を設定するには、別途プログラミング言語を使用して記述しなければならない、という煩雑さがあった。

特開２０１２−２５２５２０号公報特開２００６−３２３６８２号公報

本発明が解決しようとする課題は、SVGに対応していない環境下でSVG部品を代替部品に置換する際、代替部品に対する外観属性の設定をせずに、代替部品の外観をSVG部品の外観に揃える画像表示装置を提供することである。

実施形態の画像表示装置は、SVG(Scalable Vector Graphics)を生成・編集可能なソフトウェアで作成されたSVG 部品をHTML（Hyper Text Markup Language）文書に挿入したデータを入力し、前記HTML文書中から前記SVG 部品を探し出すSVG部品検索部と、前記検索したSVG部品を退避させるSVG部品退避部と、前記SVG部品の代わりとなり、その外観表現方法にSVG以外の技術を使用している代替部品を生成する代替部品生成部と、前記退避したSVG 部品から、前記SVG部品の外観属性を取得する外観属性取得部と、前記代替部品に、前記SVG部品の外観属性を設定する外観属性設定部と、前記外観属性を設定した代替部品を、前記HTML文書に挿入する代替部品挿入部と、前記代替部品挿入部で代替部品を挿入後のHTML文書をレンダリングした結果を保持するビデオメモリと、前記ビデオメモリに保持している内容を表示させる表示部とを備える。

本発明の実施形態に係る画像表示装置の概略構成を示すブロック図である。 SVG部品をHTMLで記述し、ブラウザ上で閲覧可能なように画面に表示させるHTML文書に挿入したデータの一例を示す図である。 HTML文書中におけるSVG部品の検索を説明する図である。 HTML文書中のSVG部品の退避を説明する図である。代替部品ライブラリで生成した図形等の要素の一例を示す図である。退避したSVG部品から取得した外観属性の一例を示す図である。代替部品に対する外観属性の設定の一例を示す図である。代替部品の挿入の一例を示す図である。本発明の第２の実施形態に係る画像表示装置の概略構成を示すブロック図である。

以下、本発明の一実施の形態について、図面を参照して説明する。尚、各図において同一箇所については同一の符号を付すとともに、重複した説明は省略する。

まず、本実施形態で用いる主要な用語について説明する。

「SVG（Scalable Vector Graphics）」とは、XML形式で記述されるベクトル画像をいう。

「部品」とは、画面を構成する部分画面の外観とロジックボタン、入力欄、図形などをいう。

「SVG部品」とは、外観の表現方法にSVGを使用した部品をいう。

「代替部品」とは、外観の表現方法にSVG以外の技術を使用した部品をいう。

「外観属性」とは、図形および文字の色および塗りなどの情報をいう。

本実施形態においては、SVGに対応していない環境下でSVG部品を代替部品に置換する際、代替部品に対する外観属性の設定をせずに、代替部品の外観をSVG部品の外観に揃えるものである。

（第１の実施形態）
図１は、本発明の実施形態に係る画像表示装置の概略構成を示すブロック図である。この装置は汎用のコンピュータ（例えばパーソナルコンピュータ（ＰＣ）等）と、同コンピュータ上で動作するソフトウェアとを用いて実現される。コンピュータとしては、ＣＡＤ（Computer Aided Design）やＣＡＥ（Computer Aided Engineering）に好適なエンジニアリングワークステーション（ＥＷＳ）等も含む。本実施形態はこのようなコンピュータに、SVGに対応していない環境下でSVG部品を代替部品に置換する際、代替部品に対する外観属性の設定をせずに、代替部品の外観をSVG部品の外観に揃える処理を実行するプログラムとして実施することもできる。

図１に示すように、本実施形態に係る画像表示装置１は、主として、画面文書メモリ１０、SVG部品検索部２０、SVG部品位置メモリ３０、SVG部品退避部４０、SVG部品退避メモリ５０、代替部品生成部６０、代替部品メモリ７０、外観属性取得部８０、外観属性メモリ９０、外観属性設定部１００、代替部品挿入部１１０、ビデオメモリ１２０、表示部１３０から構成されている。

画面文書メモリ１０には、SVGを生成・編集可能なソフトウェアで作成されたSVGの各図形に、図形の役割を示すクラス名を付与し、SVG部品をHTML（Hyper Text Markup Language）文書に挿入したデータが格納されている。SVGを生成・編集可能なソフトウェアとしては、例えば、Illustrator（登録商標）、Inkscape等を使用することができる。

図２は、SVG部品をHTMLで記述し、ブラウザ上で閲覧可能なように画面に表示させるHTML文書に挿入したデータの一例を示す図である。図２（ａ）に示す例では、３本の縦棒グラフが“チャート領域”中に描かれ、それらを含む“チャート全体”が設定されている。チャート全体には“ts-chart”というクラス名が付与され、チャート領域には“ts-chart-area” というクラス名が付与され、縦棒グラフには“ts-chart-series-column” というクラス名が付与され、３本の縦棒グラフそれぞれの下にある”軸ラベル“に対しては“ts-chart-axis-label” というクラス名および”１“、”２“、”３“というテキストが付与されている。図２（ｂ）に示すHTML文書中で、まず、HTML文書自身に関する情報から成るヘッダ部分を指定する要素において、“ts-chart-area”と“ts-chart-series-column”のスタイル情報が、開始タグ<style>と終了タグ</style>とに挟まれて記述されている。続いて、HTML文書の本体部分（BODY要素）が開始タグ<body>と終了タグ</body>とに挟まれて記述されている。本体部分（BODY要素）の内容は、ブロックレベルの要素で、開始タグ<div class=“ts-panel” id=“container”>と、終了タグ</div>とに挟まれて記述されている。本実施形態では、ブロックレベルの要素（親要素）で挟まれ破線で囲った文字列がSVG部品を記述したものである。

SVG部品検索部２０は、SVG部品をHTML文書に挿入したデータを画面文書メモリ１０から取り込み、HTML文書中からSVG部品を探し出す。図３は、HTML文書中におけるSVG部品の検索を説明する図である。図３に示す例では、SVG部品は、“ts-chart”というクラス名が付与された要素で示され、その要素の親要素である開始タグ<div class=“ts-panel” id=“container”>と、終了タグ</div>とに挟まれて記述されている。そこで、HTML文書中のチャート全体“ts-chart”の要素の親要素である開始タグ<div class=“ts-panel” id=“container”>と、終了タグ</div>を一組のポインタとして検索される。検索したポインタは、SVG部品位置メモリ３０に送られる。

SVG部品位置メモリ３０は、SVG部品検索部２０から取得した一組のポインタの情報を格納する。図３に示す例では、<div class=“ts-panel” id=“container”>と、</div>の一組のポインタが格納される。

SVG部品退避部４０は、HTML文書中のSVG部品を退避する。図４は、HTML文書中のSVG部品の退避を説明する図である。図４に示すように、画面文書メモリ１０のDOM（Document Object Model）から上記ポインタを参照して、開始タグ<svg class=“ts-chart”>と、終了タグ</svg>で挟まれたチャート全体“ts-chart”を切り離す。

SVG非対応の環境下では、SVG部品の外観が的確に表示されないおそれがあるため、ブラウザ上の表示対象となる画面文書から分離するものである。切り離したSVG部品であるチャート全体“ts-chart”の記述自体は、SVG部品に対する外観属性を受け取るのに必要なので、削除せずにSVG部品退避メモリ５０に送られる。本実施形態では、切り離したSVG部品を削除せずに退避しておくことで、SVG部品に設定された外観属性を随時、利用することができる。

SVG部品退避メモリ５０は、SVG部品退避部４０で退避して取得したSVG部品を格納する。図４に示す例では、HTML文書中で、開始タグ<svg class=“ts-chart”>と、終了タグ</svg>で挟まれ、破線で囲った部分が格納される。

代替部品生成部６０は、SVG部品の代わりとなり、その外観表現方法にSVG以外の技術を使用している代替部品を生成する。具体的には、SVG以外で図形等を表示する代替部品ライブラリを読み込み、そのライブラリによって、図形等の要素を生成する。代替部品ライブラリとしては、例えば、「Flot」という統合グラフィックソフトCanvasを使用したライブラリや、Java（登録商標）アプレットを使用したJava（登録商標）製のライブラリ「JFreeChart」が好適である。図５は、代替部品ライブラリで生成した図形等の要素の一例を示す図である。図５（ａ）に示すように、代替部品ライブラリで生成した図形等の要素は、外観の表現方法がSVG部品とは異なっている。生成した図形等の要素は、代替部品メモリ７０に送られる。

代替部品メモリ７０は、代替部品生成部６０から取得した図形等の要素を格納する。図５（ｂ）に示す例では、開始タグ<div class=“alternative-chart”>と、終了タグ</div>で挟まれて代替部品が記述されている。

外観属性取得部８０は、SVG部品退避メモリ５０に格納されている退避したSVG部品から外観属性を取得する。図６は、退避したSVG部品から取得した外観属性の一例を示す図である。外観属性取得部８０は、SVG部品退避メモリ５０に格納されているSVG部品を取得し、図形処理用のインターフェース仕様であるAPI（Application Programing Interface）を使用して、図６に示すような、役割を持つ各要素に設定されている外観属性を取得する。図形処理用のAPIとしては、getComputedStyles()、styleプロパティなどが好適である。尚、役割を持たない要素に設定されている外観属性は、代替部品の表示に不要である。図６に示す例では、“チャート領域” の役割を持つ要素について、線幅：１ｐｘ、線色：黒色、塗り色：水色の外観属性が取得されている。同様に、“縦棒” の役割を持つ要素について、線幅：１ｐｘ、線色：黒色、塗り色：青色の外観属性が取得されている。さらに、“軸ラベル” の役割を持つ要素について、文字サイズ：１２ｐｘ、色：黒色の外観属性が取得されている。取得した外観属性は、外観属性メモリ９０に送られる。

外観属性メモリ９０は、外観属性取得部８０から外観属性を取得し、格納する。

外観属性設定部１００は、代替部品に外観属性を設定する。図７は、代替部品に対する外観属性の設定の一例を示す図である。まず、外観属性設定部１００は、外観属性メモリ９０に格納されている外観属性を取得し（図７（ａ）参照）、代替部品メモリ７０に格納されている図形の要素を取得する。次いで、外観属性設定対応表を参照して代替部品向けの外観属性設定コードを、代替部品の要素（代替部品のインスタンス）に対して実行し（図７（ｂ）参照）、APIを経由して代替部品に外観属性を設定する。図５（ａ）に示す代替部品の図形の要素に対して外観属性設定コードの実行によって外観属性が設定され、図７（ｃ）に示すような外観属性を持った代替部品の図形の要素が生成される。外観属性が設定された代替部品の図形の要素は、再度、代替部品メモリ７０に格納される。外観属性設定対応表は、代替部品に対する外観属性設定の基準となる外観属性設定コードと、SVG部品の外観属性とを対応付けたもので、例えば、代替部品に対する図形の背景色の設定や、縦棒グラフの着色の設定等を予めまとめ、画面文書メモリ１０にHTML文書が格納される際には、既に用意される。代替部品のAPIは、代替部品ライブラリが、代替部品それぞれで独自に用意しているAPIで、代替部品の外観を変更する機能をもっている。

代替部品挿入部１１０は、代替部品をHTML文書に挿入するものである。図８は、代替部品の挿入の一例を示す図である。代替部品メモリ７０に格納されている外観属性が設定された代替部品の図形の要素（図８（ａ）参照）を、SVG部品位置メモリ３０に格納されている親要素（図８（ｂ）参照）の子要素として挿入する。SVG部品位置メモリ３０に格納されている親要素は、画面文書メモリ１０に格納されているHTML文書の同要素へのポインタなので、同時に画面文書メモリ１０に格納されているHTML文書のDOMツリーが変更される（図８（ｃ）参照）。代替部品メモリ７０には、代替部品の要素のポインタが相変わらず保持される。代替部品の要素のポインタを消さずに残しておくことで、後述の第２の実施形態において詳述するように、外観属性が変更されたときに、代替部品メモリ７０に格納されている代替部品に対して外観設定を行うことで、HTML文書内の代替部品の外観を直接設定できる。

ビデオメモリ１２０は、表示部１３０に表示される内容を保持しているメモリである。本実施形態では、ブラウザ上で表示させるSVGを含むHTML文書を、WebブラウザによってHTMLのコードから実際に目に見える画像形式へ変換するレンダリングした結果を保持している。

表示部１３０は、ビデオメモリ１２０に保持している内容を表示させる。

第１の実施形態によれば、SVG部品から取得した外観属性が代替部品に対しても自動的に設定されるので、代替部品の外観をSVG部品の外観と同一になるよう調節しなくてもよい。また、代替部品に対して外観属性を設定するコードを記述しなくてよい。

（第２の実施形態）
図９は、本発明の第２の実施形態に係る画像表示装置の概略構成を示すブロック図である。図９に示すように、第２の実施形態では、第１の実施形態に係る構成に加えて、外観変更検知部１４０を備えている。外観変更検知部１４０は、SVG部品の外観に変更が加えられた場合を検知する。画面文書メモリ１０内のCSSが変更され、SVG部品退避メモリ５０内の縦棒の色が変化する。SVG部品退避メモリ５０内のSVG部品は画面文書メモリ１０内の要素を参照できる。外観変更検知部１４０は、SVG部品の外観の変更をブラウザのイベント通知またはポーリングにより検知する。

外観変更検知部１４０は、外観属性取得部８０に、SVG部品の外観の変更があったことを通知する。

外観属性取得部８０は、SVG部品退避メモリ５０に格納されている退避したSVG部品から変更後の外観属性を取得する。

外観属性設定部１００は、外観属性メモリ９０に格納されている外観属性および代替部品メモリ７０に格納されている図形の要素に基づいて、外観属性設定対応表を参照して代替部品向けの外観属性設定コードを、代替部品の図形の要素（代替部品のインスタンス）に対して実行し、APIを経由して代替部品に外観属性を設定する。

第２の実施形態によれば、SVG部品に対する実行時における外観属性の動的な変更が代替部品に対しても自動的に設定されるので、実行時に外観を変更する際、外観属性の変更コードをSVG部品向けと代替部品向けの2種類記述しなくてもよい。また、代替部品に対する外観属性の変更漏れがなくなる。

以上説明したように、本実施形態によれば、SVGに対応しない環境でSVG部品を代替部品と差し替える際、代替部品に対する外観属性の設定をせずに、代替部品の外観をSVG部品の外観に揃えることができる。

本発明のいくつかの実施形態を説明したが、これらの実施形態は、例として提示したものであり、発明の範囲を限定することは意図していない。これら新規な実施形態は、その他の様々な形態で実施されることが可能であり、発明の要旨を逸脱しない範囲で、種々の省略、置き換え、変更を行うことができる。これら実施形態やその変形は、発明の範囲や要旨に含まれるとともに、特許請求の範囲に記載された発明とその均等の範囲に含まれる。

１・・・画像表示装置
１０・・・画面文書メモリ
２０・・・SVG部品検索部
３０・・・SVG部品位置メモリ
４０・・・SVG部品退避部
５０・・・SVG部品退避メモリ
６０・・・代替部品生成部
７０・・・代替部品メモリ
８０・・・外観属性取得部
９０・・・外観属性メモリ
１００・・・外観属性設定部
１１０・・・代替部品挿入部
１２０・・・ビデオメモリ
１３０・・・表示部
１４０・・・外観変更検知部

Claims

SVG(Scalable Vector Graphics)を生成・編集可能なソフトウェアで作成されたSVG 部品をHTML（Hyper Text Markup Language）文書に挿入したデータを入力し、前記HTML文書中から前記SVG 部品を探し出すSVG部品検索部と、
前記検索したSVG部品を退避させるSVG部品退避部と、
前記SVG部品の代わりとなり、その外観表現方法にSVG以外の技術を使用している代替部品を生成する代替部品生成部と、
前記退避したSVG 部品から、前記SVG部品の外観属性を取得する外観属性取得部と、
前記代替部品に、前記SVG部品の外観属性を設定する外観属性設定部と、
前記外観属性を設定した代替部品を、前記HTML文書に挿入する代替部品挿入部と、
前記代替部品挿入部で代替部品を挿入後のHTML文書をレンダリングした結果を保持するビデオメモリと、
前記ビデオメモリに保持している内容を表示させる表示部とを
備える画像表示装置。
前記SVG部品検索部は、前記HTML文書中の図形の要素の親要素である第１の開始タグと、第１の終了タグを一組のポインタとして前記SVG部品を検索する請求項１に記載の画像表示装置。
前記SVG部品退避部は、前記HTML文書のDOM（Document Object Model）から、前記ポインタを参照して、第２の開始タグと、第２の終了タグで挟まれた図形全体を切り離して退避させる請求項２に記載の画像表示装置。
前記代替部品生成部は、SVG以外で図形を表示する代替部品ライブラリを読み込み、該ライブラリによって、図形の要素を生成する請求項２又は請求項３に記載の画像表示装置。
前記外観属性取得部は、前記退避した前記SVG部品に対して、図形処理用のインターフェース仕様であるAPI（Application Programing Interface）を使用して、役割を持つ各要素に設定されている外観属性を取得する請求項２乃至請求項４のいずれか1項に記載の画像表示装置。
前記外観属性設定部は、前記代替部品に対する外観属性設定の基準となる外観属性設定コードと、前記SVG部品の外観属性とを対応付けた外観属性設定対応表を参照して、前記外観属性設定コードを前記代替部品の要素に対して実行し、前記代替部品ライブラリが用意するAPIを経由して前記代替部品に外観属性を設定する請求項４又は請求項５に記載の画像表示装置。
前記代替部品挿入部は、前記外観属性が設定された代替部品の図形の要素を、前記ポインタを参照して、親要素の子要素として挿入する請求項６に記載の画像表示装置。
前記SVG部品の外観に変更が加えられた場合を検知する外観変更検知部を備え、
この外観変更検知部は、前記外観属性取得部に、前記SVG部品の外観の変更があったことを通知し、
前記外観属性取得部は、前記退避したSVG部品から変更後の外観属性を取得する請求項１乃至請求項７のいずれか1項に記載の画像表示装置。