JP5759187B2 - ＡｄｏｂｅＦｌａｓｈ（登録商標）によるＳＷＦ形式の画像表現をＨＴＭＬ形式の画像表現に変換するプログラム - Google Patents

Description

この発明は、Ａdobe Flash（登録商標）により作成されたＳＷＦ形式の画像表現をＨＴＭＬ形式の画像表現に自動変換するアルゴリズムに関し、とくに、入力画像情報（ＳＷＦ形式）に含まれている、境界線を挟んで接した２つの領域がそれぞれ定義された「塗りスタイル」に従って塗りつぶされる態様の画像をＨＴＭＬ形式で正しく再現できるものに関する。

Ａdobe FlashによるＳＷＦ形式の画像表現を採用したウエブコンテンツが増えている。パーソナルコンピューター・タブレット端末・携帯電話機などの情報端末のブラウザーにFlash Player（登録商標）が実装（プラグイン）されていればＳＷＦ形式の画像表現を含んだコンテンツを制作者の意図どおりに可視化することができる。しかし、Flash Playerが組み込まれていない情報端末ではＳＷＦ形式の画像表現を表示することはできない。

そのため、Ａdobe FlashによるＳＷＦ形式の画像表現を、Flash Playerのないブラウザーでも表示できるように、ＨＴＭＬ形式の画像表現に変換することが望まれており、そうした変換を自動化するプログラムの開発が待望されている。

この発明に係るコンピューター情報処理による変換方法の核心とするところは、つぎの事項（１）〜（10）により特定されるものである。
（１）ＳＷＦ形式で記述された特定態様の画像を含んだ入力画像情報をＨＴＭＬ形式の記述に変換して出力画像情報とする方法であること
（２）特定態様の画像は、複数の領域が境界線を共有して接しており、境界線を挟んで接した２つの領域にはそれぞれ異なる「塗りスタイル」が定義され、各領域内がそれぞれに定義された「塗りスタイル」に従って塗りつぶされる画像であること
（３）入力画像情報において、１個の領域は、２個以上の「方向付き線」により取り囲まれた閉じた領域として定義されていること
（４）入力画像情報において、境界線を挟んで接した２つの領域は、境界線となる１個以上の「方向付き線」の記述を共有して定義されていること
（５）入力画像情報において、境界線となる「方向付き線」の記述は、線の右側の「塗りスタイル」を規定する右側「塗りスタイル」記述と、線の左側の「塗りスタイル」を規定する左側「塗りスタイル」記述の両方が対応付けされていること
（６）入力画像情報において、境界線以外の「方向付き線」の記述は、線の右側の「塗りスタイル」を規定する右側「塗りスタイル」記述と、線の左側の「塗りスタイル」を規定する左側「塗りスタイル」記述の一方のみが対応付けされていること
（７）第１処理として、入力画像情報における境界線となる「方向付き線」の記述Ａを二重化して記述Ａ１と記述Ａ２を作成するとともに、記述Ａに対応付けされていた右側「塗りスタイル」記述および左側「塗りスタイル」記述の一方を記述Ａ１に対応付けし、他方を記述Ａ２に対応付けすること
（８）第２処理として、第１処理後の画像情報において、右側「塗りスタイル」記述と左側「塗りスタイル」記述のいずれか一方に対応付けされているすべての「方向付き線」記述を、反対向きの「方向付き線」記述に置換すること
（９）第３処理として、第２処理後の画像情報において、各「方向付き線」記述を、それぞれに対応付けされた「塗りスタイル」記述に基づいてグループ分けすること
（10）第４処理として、第３処理後の画像情報において、「塗りスタイル」記述が共通する１個のグループの複数の「方向付き線」記述により１個以上の領域が規定される場合、その領域を規定する「方向付き線」の集合と「塗りスタイル」をＨＴＭＬ形式で記述して出力画像情報を作成すること

変換対象となる特定態様の画像の一例 図１の画像に対応したＳＷＦファイルの内容説明その１ 図１の画像に対応したＳＷＦファイルの内容説明その２ 図１〜図３の内容に対応した解説図 図４に対応した変換処理過程の解説図その１ 図４に対応した変換処理過程の解説図その２

＝＝＝変換対象となる特定態様の画像＝＝＝
この発明に係るコンピューター情報処理の方法は、ＳＷＦ形式で記述された特定態様の画像を含んだ入力画像情報をＨＴＭＬ形式の記述に変換して出力画像情報とする方法である。ここで、特定態様の画像とは、複数の領域が境界線を共有して接しており、境界線を挟んで接した２つの領域にはそれぞれ異なる「塗りスタイル」が定義され、各領域内がそれぞれに定義された「塗りスタイル」に従って塗りつぶされる画像である。

そのような特定形態の画像の典型例を図１に示している。この例の画像は、緑色に塗りつぶされた緑領域と、赤色に塗りつぶされた赤領域と、青色に塗りつぶされた青領域の３つの領域でデザインされている。緑領域と赤領域は境界線を共有して接している。赤領域と青領域も境界線を共有して接している。緑領域と青領域は二点で接しているが、境界線は存在しない。

＝＝＝ＳＷＦファイルの論理構造＝＝＝
図１に示す画像をＡdobe Flash上で作画すると、以下に説明する構造をもつＳＷＦ形式で画像を表現したデータ（これをＳＷＦファイルとする）が生成される。そのＳＷＦファイルがFlash Playerにより再生処理されると、コンピューター画面上に図１に示す画像が表示される。

Ａdobe Flashにより作成されるＳＷＦファイルはバイナリーファイルであり、そのフォーマットについては、「Flash File Format Specification 」に開示されている。バイナリーファイルであるＳＷＦファイルは、ヘッダとタグ領域から構成され、図形や画像を描画する画像の実質部分の情報はタグ領域に記述されている。タグ領域のバイナリーデータはそのままではその意味内容を人は理解できない。

swfmill と称するオープンソースのプログラムツールが知られている。このツールによれば、ＳＷＦファイルを解析してＸＭＬファイルに変換することができる。ＸＭＬファイルに変換すると、ＳＷＦファイルのバイナリーデータの意味内容を人が理解できる記述になる。図１の画像に対応したＳＷＦファイルの一例についてswfmill によりＸＭＬファイルに変換し、その中の画像表現の実質部分の意味内容が理解できるようにＸＭＬ風に記述したものを図２と図３に示している。

図２に示すのは、ＳＷＦファイルにおける「塗りスタイル」を規定するための塗色番号の定義である。図１の画像との関係において図２の定義を説明すると、塗色番号２が緑色で塗ることを意味し、塗色番号３が青色で塗ることを意味し、塗色番号４が赤色で塗ることを意味している。

＝＝＝「方向付き線」の記述＝＝＝
図３に示すのは、図１の緑領域・赤領域・青領域のデザインを規定する記述である。図３に示した例においては、図１の画像を図４に示した「方向付き線」の順列によって描画するように規定している。つまり、図１の緑領域・赤領域・青領域の輪郭が、図４に示す１０個のＡ点〜Ｊ点を矢印のように結ぶ１２個の「方向付き線」１〜１２により構成され、そのことが図３に示す記述により定義されている。

図３において「方向付き線」１〜１２の記述は、Ａ点をスタート点とし、Ａ点からＢ点に至る「方向付き線」１の記述と、Ｂ点からＣ点に至る「方向付き線」２の記述と、Ｃ点からＤ点に至る「方向付き線」３の記述と、Ｄ点からＥ点に至る「方向付き線」４の記述と、Ｅ点からＦ点に至る「方向付き線」５の記述と、Ｆ点からＧ点に至る「方向付き線」６の記述と、Ｇ点からＨ点に至る「方向付き線」７の記述と、Ｈ点からＡ点に至る「方向付き線」８の記述と、Ａ点からＩ点に至る「方向付き線」９の記述と、Ｉ点からＥ点に至る「方向付き線」１０の記述と、Ｅ点からＪ点に至る「方向付き線」１１の記述と、Ｊ点からＡ点に至る「方向付き線」１２の記述を含んでいる。

＝＝＝「方向付き線」と「塗りスタイル」の関係＝＝＝
図３に示すＳＷＦファイルの記述は、各「方向付き線」１〜１２を修飾する「塗りスタイル」の記述を含んでいる。「Flash File Format Specification 」に記載されているように、「塗りスタイル」は、「方向付き線」の方向の右側の「塗りスタイル」を規定する記述と、左側の「塗りスタイル」を規定する記述とに分けて定義することになっている。１個の「方向付き線」について、右側と左側の両方の「塗りスタイル」記述を対応付けすることができる。また、１個の「方向付き線」について右側と左側の一方のみの「塗りスタイル」記述を対応付けした場合は、他方の「塗りスタイル」は直前の定義を引き継ぐ。他方を無定義とする場合は番号０を対応付ける。

図３に示すＳＷＦファイルの記述と図４の解説図を対照させながら説明する。図３の記述では、４個の「方向付き線」１〜４の記述について、右側「塗りスタイル」を塗色番号２（緑色に塗る）とする記述が対応付けされ、左側「塗りスタイル」は無定義となっている。

また、４個の「方向付き線」５〜８の記述については、右側「塗りスタイル」を塗色番号３（青色に塗る）とする記述が対応付けされ、左側「塗りスタイル」は無定義となっている。

また、２個の「方向付き線」９と１０の記述については、右側「塗りスタイル」を塗色番号４（赤色に塗る）とする記述が対応付けされ、かつ、左側「塗りスタイル」を塗色番号２（緑色に塗る）とする記述が対応付けされている。

また、２個の「方向付き線」１１と１２の記述については、右側「塗りスタイル」を塗色番号４（赤色に塗る）とする記述が対応付けされ、かつ、左側「塗りスタイル」を塗色番号３（青色に塗る）とする記述が対応付けされている。

以上の説明から明らかなように、緑領域と赤領域の境界線を規定する２個の「方向付き線」９と１０の記述には、右側「塗りスタイル」と左側「塗りスタイル」の両方の記述が対応付けされている。同様に、青領域と赤領域の境界線を規定する２個の「方向付き線」１１と１２の記述には右側「塗りスタイル」と左側「塗りスタイル」の両方の記述が対応付けされている。そして、境界線以外の８個の「方向付き線」１〜８には右側「塗りスタイル」の記述のみが対応付けされ、左側については無定義となっている。

＝＝＝変換処理の準備＝＝＝
まず変換対象となる上述した論理構造のＳＷＦファイルをコンピューターの主メモリに読み込み、上述したswfmill のようにＳＷＦファイルのバイナリーデータを解析し、変換作業用のデータを作成する。作業用データとしては、画像を構成しているすべての「方向付き線」を特定するデータと、各「方向付き線」を修飾している「塗りスタイル」を特定するデータが含まれていればよい。作業用データの表現形式は、この発明の変換プログラムが稼働するコンピューターにおいて認識できて以下に説明する論理処理が遂行できるデータであれば、どのような形式でもよく、もちろん人が理解できる形式である必要はない。

図１〜図４に例示したＳＷＦファイルの場合、Ａ点〜Ｊ点を結んでいる１２個の「方向付き線」１〜１２を特定するデータと、４個の「方向付き線」１〜４に対応付けされている「塗りスタイル」のデータと、４個の「方向付き線」５〜８に対応付けされている「塗りスタイル」のデータと、２個の「方向付き線」９と１０に対応付けされている「塗りスタイル」のデータと、２個の「方向付き線」１１と１２に対応付けされている「塗りスタイル」のデータを作業用データとして用意する。作業用データの表現形式は、この発明の変換プログラムが稼働するコンピューターにおいて認識できて以下に説明する論理処理が遂行できるデータであれば、どのような形式でもよく、もちろん人が理解できる形式である必要はない。

＝＝＝「方向付き線」の二重化＝＝＝
ファイル変換の第１処理として、上記作業用データを解析し、「方向付き線」のうち、右側「塗りスタイル」および左側「塗りスタイル」の両方が対応付けされている「方向付き線」のデータを抽出する。つまり異なる「塗りスタイル」の２つの領域の境界線となっている「方向付き線」を抽出する。

図１〜図４に例示したＳＷＦファイルの場合、緑領域と赤領域の境界線である「方向付き線」９と１０が抽出されるとともに、青領域と赤領域の境界線である「方向付き線」１１と１２が抽出される。

つぎに上記作業用データにおいて、抽出した「方向付き線」９のデータを二重化する。つまり、Ａ点からＢ点に至る「方向付き線」９の記述をもう１個生成して作業用データに加える。この処理状況を図５に解説的に示した。二重化した「方向付き線」の記述を図５における符号９ａと９ｂで区別している。

上記と同様に、図４における「方向付き線」１０を図５の「方向付き線」１０ａと１０ｂに二重化し、図４における「方向付き線」１１を図５の「方向付き線」１１ａと１１ｂに二重化し、図４における「方向付き線」１２を図５の「方向付き線」１２ａと１２ｂに二重化する。

＝＝＝左右の「塗りスタイル」を二重化「方向付き線」に振り分ける＝＝＝
図１〜図４のＳＷＦファイルの場合、緑領域と赤領域の境界線である「方向付き線」９と１０には、右側「塗りスタイル」（赤色）と左側「塗りスタイル」（緑色）の両方の記述が対応付けされている。「方向付き線」９と１０をそれぞれ９ａ・９ｂおよび１０ａ・１０ｂに二重化したのに伴い、その一方の「方向付き線」９ａと１０ａに左側「塗りスタイル」（緑色）を対応付けするとともに、他方の「方向付き線」９ｂと１０ｂに右側「塗りスタイル」（赤色）を対応付けする。

同様にして、青領域と赤領域の境界線である「方向付き線」１１と１２には、右側「塗りスタイル」（赤色）と左側「塗りスタイル」（青色）の両方の記述が対応付けされている。「方向付き線」１１と１２をそれぞれ１１ａ・１１ｂおよび１２ａ・１２ｂに二重化したのに伴い、その一方の「方向付き線」１１ａと１２ａに左側「塗りスタイル」（青色）を対応付けするとともに、他方の「方向付き線」１１ｂと１２ｂに右側「塗りスタイル」（赤色）を対応付けする。

以上の処理を行うことにより作業用データが更新される。更新後の作業用データには合計１６個の「方向付き線」のデータが含まれている。１６個の「方向付き線」のうち、右側「塗りスタイル」が対応付けされている「方向付き線」は１２個あり、左側「塗りスタイル」が対応付けされている「方向付き線」は４個である。左右両側の「塗りスタイル」が対応付けされた「方向付き線」はゼロである。

＝＝＝「方向付き線」の方向反転＝＝＝
つぎの処理では、右側「塗りスタイル」が対応付けされている１２個の「方向付き線」の向きを反転させる。この処理状況を図６に解説的に示した。向きが反転されない「方向付き線」は９ａ・１０ａ・１１ａ・１２ａの４個であり、他の「方向付き線」はすべて向きが反転している。

＝＝＝グループ分け＝＝＝
図６に示す状況の作業用データについて、１６個の「方向付き線」を、緑色に塗る「塗りスタイル」に対応付けされた「方向付き線」の集合と、青色に塗る「塗りスタイル」に対応付けされた「方向付き線」の集合と、赤色に塗る「塗りスタイル」に対応付けされた「方向付き線」の集合とにグループ分けする。

＝＝＝「方向付き線」による領域定義＝＝＝
図６から明らかなように、緑色に塗る「塗りスタイル」に対応付けされた「方向付き線」は、Ａ点→Ｉ点→Ｅ点→Ｄ点→Ｃ点→Ｂ点→Ａ点をこの方向順に結ぶ６個の「方向付き線」９ａ・１０ａ・４・３・２・１であり、これらの「方向付き線」により取り囲まれた閉じた領域が定義されることになる。そして、この閉じた領域を緑色に塗ることが定義されている。これだけの定義情報が揃えば、図１の緑領域を規定するＨＴＭＬ形式の記述を自動生成できることは当業者にとって自明であり、その具体的な記述を例示するまでもないので割愛する。

同様にして、青色に塗る「塗りスタイル」に対応付けされた「方向付き線」は、Ａ点→Ｈ点→Ｇ点→Ｆ点→Ｅ点→Ｊ点→Ａ点をこの方向順に結ぶ６個の「方向付き線」８・７・６・５・１１ａ・１２ａであり、これらの「方向付き線」により取り囲まれた閉じた領域が定義されることになる。そして、この閉じた領域を青色に塗ることが定義されている。これだけの定義情報が揃えば、図１の青領域を規定するＨＴＭＬ形式の記述を自動生成できることは当業者にとって自明であり、その具体的な記述を例示するまでもないので割愛する。

また同様に、赤色に塗る「塗りスタイル」に対応付けされた「方向付き線」は、Ａ点→Ｊ点→Ｅ点→Ｉ点→Ａ点をこの方向順に結ぶ４個の「方向付き線」１２ｂ・１１ｂ・１０ｂ・９ｂであり、これらの「方向付き線」により取り囲まれた閉じた領域が定義されることになる。そして、この閉じた領域を赤色に塗ることが定義されている。これだけの定義情報が揃えば、図１の赤領域を規定するＨＴＭＬ形式の記述を自動生成できることは当業者にとって自明であり、その具体的な記述を例示するまでもないので割愛する。

以上のようにして、図１に示した画像表現を規定したＳＷＦファイルをコンピューターに読み込み、この発明に係る変換プログラムの自動処理により、ブラウザーにより図１の画像表現を正しく表示することのできる、ＨＴＭＬ形式の画像データを作成して出力することができる。

＝＝＝この発明の活用場面＝＝＝
この発明に係る変換プログラムの活用の仕方はいくつかある。パソコン・タブレット端末・携帯電話機に向けてＳＷＦファイルを含んだウエブコンテンツを提供しているサーバーにおいて、Flash Player未搭載の端末でもコンテンツを見ることができるように、ＳＷＦファイルをＨＴＭＬ形式の画像データに変換した非Flash コンテンツも用意しておき、リクエストしてきた端末がFlash Player未搭載である場合、非Flash コンテンツを提供するようにする。そのようなサーバーにおいて、あるいはサーバーにコンテンツを登録するパソコンにおいて、この発明の変換プログラムを活用することができる。また、サーバーを介さずとも、変換プログラムを直接携帯電話機等のクライアントに送ることにより、変換処理をすべてクライアント上で完了することもできる。

＝＝＝補足説明＝＝＝
「方向付き線」の方向反転の処理について、上記の説明では、右側「塗りスタイル」が対応付けされている「方向付き線」の向きを反転させるとした。これは、左側「塗りスタイル」が対応付けされている「方向付き線」の向きを反転させることとしても、結果は同じになる。
煩雑な記載を避ける意味で「方向付き線」を直線として説明した。この発明は、「方向付き線」としてＡdobe Flashにより作成される様々な「方向付き線」に対応可能であることはもちろんである。
「塗りスタイル」についても緑色・青色・赤色で塗りつぶす単純な例を採り上げたが、これは単に説明の便宜上であり、Ａdobe Flashにより作成される様々な「塗りスタイル」にこの発明を敷衍できることは当然である。
請求項１に記載した発明特定事項において、第２処理と第３処理の実行の順番が逆になっても同じ処理結果が得られるものであり、発明特定事項はそうした意味で理解されるべきである。

Claims (1)

1. つぎの事項（１）〜（10）により特定される情報処理をコンピューターに行わせるプログラム。
   （１）ＳＷＦ形式で記述された特定態様の画像を含んだ入力画像情報をＨＴＭＬ形式の記述に変換して出力画像情報とするプログラムであること
   （２）特定態様の画像は、複数の領域が境界線を共有して接しており、境界線を挟んで接した２つの領域にはそれぞれ異なる「塗りスタイル」が定義され、各領域内がそれぞれに定義された「塗りスタイル」に従って塗りつぶされる画像であること
   （３）入力画像情報において、１個の領域は、２個以上の「方向付き線」により取り囲まれた閉じた領域として定義されていること
   （４）入力画像情報において、境界線を挟んで接した２つの領域は、境界線となる１個以上の「方向付き線」の記述を共有して定義されていること
   （５）入力画像情報において、境界線となる「方向付き線」の記述は、線の右側の「塗りスタイル」を規定する右側「塗りスタイル」記述と、線の左側の「塗りスタイル」を規定する左側「塗りスタイル」記述の両方が対応付けされていること
   （６）入力画像情報において、境界線以外の「方向付き線」の記述は、線の右側の「塗りスタイル」を規定する右側「塗りスタイル」記述と、線の左側の「塗りスタイル」を規定する左側「塗りスタイル」記述の一方のみが対応付けされていること
   （７）前記コンピューターは、前記入力画像情報を主メモリに読み込み、第１処理として、前記入力画像情報における境界線となる「方向付き線」の記述Ａを二重化して、記述Ａと同一の始点から同一の終点に至る「方向付き線」の記述Ａ１と記述Ａ２を作成するとともに、記述Ａに対応付けされていた右側「塗りスタイル」記述および左側「塗りスタイル」記述の一方を記述Ａ１に対応付けし、他方を記述Ａ２に対応付けすること
   （８）前記コンピューターは、第２処理として、第１処理後の画像情報において、右側「塗りスタイル」記述と左側「塗りスタイル」記述のいずれか一方に対応付けされているすべての「方向付き線」記述を、反対向きの「方向付き線」記述に置換すること
   （９）前記コンピューターは、第３処理として、第２処理後の画像情報において、各「方向付き線」記述を、それぞれに対応付けされた「塗りスタイル」記述に基づいてグループ分けすること
   （10）前記コンピューターは、第４処理として、第３処理後の画像情報において、「塗りスタイル」記述が共通する１個のグループの複数の「方向付き線」記述により１個以上の領域が規定される場合、その領域を規定する「方向付き線」の集合と「塗りスタイル」をＨＴＭＬ形式で記述して出力画像情報を作成すること