「インタラクション2000」平成12年2月

ベクタ画像のためのズーミングデジタルコンテンツシステム
森浩一★，大平雅和1和田耕一童1寅市和男貴貴★筑波大学工学研究科柚筑波大学電子・情報工学系〒305茨城県つくば市天王台1−ト1

AZoomlngDigitaJContentsSystemforVector［mageKoichiMori，Masaka乙uOhira，KoichiWada，KazuoTbraichi（UniversityofTsukuba）
mailto：kom＠is．tsukuba．ac．］P

2．デジタルコンテンツシステムの概要

1．はじめに近年Webページなどのデジタルコンテンツにお試作したシステムの概要は図1のようになっていける画像形式として、ベクタ画像が注目され始めてる。以下では画像を作成する部分と表示・インターいる。以前はポリゴンで表現された画像をベクタ画フェースの部分についてそれぞれ説明する。

像と呼ぶことが多かったが、最近のベクタ画像フォ

2．1．画像作成

ーマットではベジェ曲線や楕円弧も扱えるので、その表現能力は高くなっている。さらに、W3CではⅩMLベースの画像フォーマット Scalable Vさctor

このシステムではピクセル画像をベクタ画像へ変Graphics（SVG）の標準化が進められている［1】。他にもプラグインを用いてWbbブラウザに表示でき換して利用するため既存の紙文書のコンテンツやペるベクタ画像いくつか存在している。ベクタ画像を可能である。

イントツールで描いた画像をベクタ画像として活用用いる利点としては、ラスタ画像をベクタ画像に変換する手法はいくつか提案されているが、変換精度が低く修正が必要で● ファイルサイズが画像解像度ではなく画像のあった。我々はこれまでに、ピクセル画像を自動処

複雑さで決まる● 高品質な画像を拡大・縮小が可能である（高理で高精度にべクタ画像へ変換する手法を提案して精度な印刷が可能であることと同意）いる［2］（図 2）。この手法では Dynamic● 高品質な変形が可能である● 単純な図形であれば描画・変形は高速

Prog柑mmir喝と多重解像度解析を合わせて用い、高速かつ高精度に変換でき、対象画像が複雑な文書などが挙げられる。特に画像解像度が自由に変更できるという利点は、出力デバイスの多様化（携帯端末、テレビ、PC、プリンタなど）を考えた場合非常に有効である。

Pd匹「documen†5

ZoomjngViewer
Fview

ベクタ画像がデジタルコンテンツとして普及するためには画像の生成・編集が簡単であることと、ベクタ画像ならではの表示方法が必要である。しか1ighqualityRaster−
Vectorconver＄ion［哀］

し、ベクタ画像の編集は熟練していないと自在には

Pdin†in9†00l

行えず、スキャナやデジタルカメラからの入力画像をそのまま利用することもできない。表示方法に関図1提案するシステムの概要

してもベクタ画像であることを活用しているものは少ない。
そこで本稿では、ベクタ画像をデジタルコンテンツとして活用するためのシステムを捷案する。提案′

するシステムの特徴は、ピクセル画像を高精度にべ′｝ 一一−●−■ ■‥ ■● デ′′ブ：ク：ヽ ′クタ画像へ変換して利用できることと、画像をリニアでスムーズなズームを利用したインターフェース

Fun￠tbnapproximation

0噸na】image

usingDPwithMRÅ

を有するビューワに表示することである。

図2 ラスタ・ベクタ変換−51−図3 プレゼンテーションとしての適用例
画像でも処理できる。システム全体の中のこの部分は、SVGのためのラスターベクタ変換ツールとして我々のWebサイト上で公開されている◆。

2．2．ズーミングビューワ：Fdew
既存のビューワにありがちな段階的なズームではなく、リニアでスムーズなズーム権能を持たせることでズームを単なる拡大縮小ではなくインターフェースの手段として捉える考え方としてZooming
UserInterface（PAD＋＋，Jazz）［3］がある。
ビューワのプロトタイプFviewは、その考え方

図4 Wbbコンテンツの例

だが、ベクタ画像は任意の解像度で印刷できファイルサイズが小さいので、図4に挙げたような地図を元にいくつかの付加機能を持たせており、実装にはJava2 を用いている。Fviewでのインタラクシ
ョンとしては、ズーム、パン、リンク機能（Fview
内の別の領域へのジャンプ＆ズーム）が実装されてやデジタルブックのネットワーク配信にも向いていいる。さらに、ナビゲーション機能としてホーム領3．まとめると思われる。

域を設け、bomeキーを押すことで必ずそこへ戻れるようになっている。また、たどったリンクによっ

本稿ではベクタ画像をデジタルコンテンツとしててジャンプした後に元の場所に戻れるようなボタン活用するためのプロトタイプシステムについて述べも用意されている。
Fviewで扱える画像は、ベクタ画像（独自フォーてきた。提案するシ女テムにより、紙文書やペインマット）、ピクセル画像、文字列などで、サウンド像へ変換して利用でき、リニアでスムーズなズームも扱えるようになっている。ベクタ画像は文書画像など複雑なものも想定しているので、高速で粗い描画と詳細な描画を使い分けて、インタラクティビティと高画質を両立させている。

を利用したインターフェースを有するビューワに表トツールで書いたピクセル画像を高精度にべクタ画示することでベクタ画像の特長が十分に活用できることをいくつかの例で示した。
現段階ではオーサリングのための設定ファイルをテキストエディタで書いているが、今後はオーサリ

2．3．アプリケーション例

ング用のツールを作成する予定である。
参考文献

このシステムのアプリケーションとして適してい

1．W3CScalableVbctorGraphics（SVG），

るものの一つはプレゼンテーションである。図3
はFview上でプレゼンテーションを作成した例で

http：／／www．w3．org／Graphics／SVG／
2．KoichiMori，KoichiWada and Kazuo

左から順にリンクによってズームしていく様子のス

Tbraichi，‖Function Approximated Shape

ナップショットである。

Representation using Dynamic Program・

もう一つの例はⅥ屯b コンテンツである。Fview

ming with Multi−Resolution Analysis

をJavaアプレットとして実装することで容易に

一，ICSPAT−99，November1999

Webコンテンツとして活用できる。通常のWebペ3．BenBederson，JonMeyer：

ージのようなコンテンツを作ることはもちろん可能

Implementing

a zooming UserInterface：eXPeriencebuilding Pad＋＋ ，Software：Practice and◆Ⅲs払rSVGは以下のサイトよりダウンロード可能

ExperienceVblume28，IssuelO，PP．1079・

http：／／www・padc・mmPC・is・tSukuba．ac．jp／member／morik／fdssvg／

1099，1998−52−