(19)【発行国】日本国特許庁(JP)
(12)【公報種別】特許公報(B2)
(11)【特許番号】6161569
(24)【登録日】2017年6月23日
(45)【発行日】2017年7月12日
(54)【発明の名称】ミラーリング画面の作成方法
(51)【国際特許分類】
G06T 3/00 20060101AFI20170703BHJP
G06F 13/00 20060101ALI20170703BHJP
G06F 3/048 20130101ALI20170703BHJP
G06F 3/14 20060101ALI20170703BHJP
【FI】
G06T3/00
G06F13/00 550A
G06F3/048
G06F3/14 350A
【請求項の数】3
【全頁数】8
(21)【出願番号】特願2014-95621(P2014-95621)
(22)【出願日】2014年5月7日
(65)【公開番号】特開2015-212902(P2015-212902A)
(43)【公開日】2015年11月26日
【審査請求日】2016年4月6日
(73)【特許権者】
【識別番号】592007601
【氏名又は名称】株式会社コンテック
(74)【代理人】
【識別番号】110001298
【氏名又は名称】特許業務法人森本国際特許事務所
(72)【発明者】
【氏名】高平 賢治
(72)【発明者】
【氏名】周 建平
(72)【発明者】
【氏名】山▲崎▼ 正明
【審査官】
松田 直也
(56)【参考文献】
【文献】
特開2012−009065(JP,A)
【文献】
特開2005−267158(JP,A)
【文献】
特開2010−131204(JP,A)
【文献】
エクセル2013基本講座:テキストボックスの上下反転と左右反転,[online],2017年 2月13日,URL,http://www4.synapse.ne.jp/yone/excel2013/excel2013_textbox_hanten.html
(58)【調査した分野】(Int.Cl.,DB名)
G06T 3/00
G06F 3/048
G06F 3/14
G06F 13/00
(57)【特許請求の範囲】
【請求項1】
第1のブラウザに表示する正画面と、第2のブラウザに表示され、前記正画面の対称画面であるミラーリング画面とを作成する方法であって、
前記正画面をブラウザ表現用のマークアップランゲージで表現する正画面用データを作成する工程と、
前記ミラーリング画面をブラウザ表現用のマークアップランゲージで表現するミラーリング画面用データを中継サーバが前記正画面用データから自動作成する工程と、
ウェブサーバが前記第1のブラウザに前記正画面を表示すると共に前記中継サーバが前記第2のブラウザに前記ミラーリング画面を表示する工程と
を有し、前記ミラーリング画面は、前記正画面の画像コンテンツを対称移動させたものであり、前記ミラーリング画面の文字コンテンツは前記正画面の配置位置のみを対称移動させたものであり、
前記正画面用データから前記ミラーリング画面用データを自動作成する前記中継サーバは、前記正画面の各コンテンツを対称移動またはその配置位置のみを対称移動させる際に、前記正画面における前記各コンテンツの表示領域の幅を考慮して、前記ミラーリング画面における前記各コンテンツの配置位置を算出することを特徴とするミラーリング画面の作成方法。
【請求項2】
前記正画面用データの対称移動させるコンテンツのタグにアトリビュートを追記し、前記中継サーバが、アトリビュートに従って、前記正画面のコンテンツを対称移動させて前記ミラーリング画面のコンテンツとするようにミラーリング画面用データを自動作成することを特徴とする請求項1記載のミラーリング画面の作成方法。
【請求項3】
前記中継サーバが前記正画面用データの記述を解析し、コンテンツを対称移動させるコンテンツと配置位置のみを対称移動させるコンテンツとを識別し、ミラーリング画面用データを自動作成することを特徴とする請求項1または請求項2に記載のミラーリング画面の作成方法。
【発明の詳細な説明】
【技術分野】
【0001】
本発明は、正画面および正画面を反転するミラーリング画面を作成するミラーリング画面の作成方法に関する。
【背景技術】
【0002】
工場等のラインにおいては、ライン内に配置された複数の装置の、稼働状況を表示する画面や操作画面を表示するアンドン画面が設けられている。また、アンドン画面は、ラインを挟んだ両側等に配置された2つのモニターに表示される場合があり、一方のアンドン画面には正画面を、他方のアンドン画面には正画面を左右反転したミラーリング画面(以下、ミラー画面と称す)を表示していた。
【0003】
また、このような、1つの表示対象を左右反転させた画面である、正画面とミラー画面とを別々に表示させる場合、単に画面全体を左右対称に反転させただけでは、文字等が判別できなくなるため、従来のミラーリング画面の作成方法では、正画面とミラー画面とを別々に作成し、それぞれを別々のモニター等に表示させていた。
【先行技術文献】
【特許文献】
【0004】
【特許文献1】特開平10−207430号公報
【特許文献2】特開2013−104856号公報
【発明の概要】
【発明が解決しようとする課題】
【0005】
しかしながら、従来のミラーリング画面の作成方法では、正画面とミラー画面とを別々に作成するため、画面を作成する手番が多くなり、効率的でないという問題点があった。
本発明は、効率的かつ容易に、正画面とミラー画面とを作成することを目的とする。
【課題を解決するための手段】
【0006】
上記目的を達成するために、本発明のミラーリング画面の作成方法は、第1のブラウザに表示する正画面と、第2のブラウザに表示され、前記正画面の対称画面であるミラーリング画面とを作成する方法であって、前記正画面をブラウザ表現用のマークアップランゲージで表現する正画面用データを作成する工程と、前記ミラー画面をブラウザ表現用のマークアップランゲージで表現するミラーリング画面用データを中継サーバが前記正画面用データから自動作成する工程と、ウェブサーバが前記第1のブラウザに前記正画面を表示すると共に前記中継サーバが前記第2のブラウザに前記ミラーリング画面を表示する工程とを有し、前記ミラーリング画面は、前記正画面の画像コンテンツを対称移動させたものであり、前記ミラーリング画面の文字コンテンツは前記正画面の配置位置のみを対称移動させたものであることを特徴とする。
【発明の効果】
【0007】
以上のように、ブラウザ表現用のマークアップランゲージで正画面を作成し、プロキシサーバにより自動的に正画面からミラー画面を作成し、ウェブサーバとプロキシを介して正画面およびミラー画面をそれぞれのモニター上に表示させることにより、効率的かつ容易に、正画面とミラー画面とを作成することができる。
【図面の簡単な説明】
【0008】
【
図1】本発明のミラーリング画面の作成方法の概略を説明する図
【
図2】ラインにおけるアンドン画面を説明する概念図
【
図3】本発明のミラーリング画面の作成方法のフローを示す図
【
図4】本発明のミラーリングによる配置位置の算出方法を説明する図
【発明を実施するための形態】
【0009】
始めに、
図1〜
図3を用いて、本発明のミラーリング画面の作成方法の概略を説明する。
図1は本発明のミラーリング画面の作成方法の概略を説明する図、
図2はラインにおけるアンドン画面を説明する概念図、
図3は本発明のミラーリング画面の作成方法のフローを示す図である。
【0010】
まず、ライン6におけるアンドン画面について説明する。
図2に示すように、ライン6には、装置A7,装置B8,装置C9がこの順で並んでいる。アンドン画面は、ライン6上の各装置の稼動状態を表示したり、装置毎の操作画面を表示したりする。また、アンドン画面は、ライン6を挟んで両側に表示される場合がある。この時、一方のアンドン画面は、ライン6上の装置の配置順に沿って、左から装置A7,装置B8,装置C9の順で情報を表示する。他方のアンドン画面は、ライン6上に見える装置配列が逆になるため、左から装置C9,装置B8,装置A7の順で情報を表示することが便宜である。ここで、一方のアンドン画面を正画面2、他方のアンドン画面をミラー画面1と定義する。このように、ライン6を挟んで両側に表示される正画面2およびミラー画面1では、それぞれが表示されるモニターから見える装置配列が逆になるため、表示される各装置の位置関係が逆になる。また、装置毎に表示される文字の配置も装置に対応して位置関係が逆になる。ただし、画面表示全てを単に逆向きにすると、文字自体も裏返るため、文字自体は単純に逆向きにできず、文字の向きは同じとする必要がある。
【0011】
そこで、
図1,
図3に示すように、本発明のミラーリング画面の作成方法では、次のように正画面2に対するミラー画面1を作成する。
まず、ブラウザ表現用のマークアップランゲージの例としてHTMLを用いて、正画面2を表示するためのデータ10を作成する(ステップ1)。モニター5等のブラウザに表示するために、データ10をウェブサーバ17に転送する。
【0012】
次に、プロキシサーバ3等の中継サーバにて、ウェブサーバ17に転送された正画面2のデータ10を解析して、自動的に正画面2のミラー画面1のデータ11をHTMLで作成する。データ11は、データ10のHTMLの記述を解析し、画像データ等は位置および表示を線対称に移動させて裏返し、文字等は位置のみを画面の中心垂線12に対して対称な位置に移動させる(ステップ2)。
【0013】
次に、データ10に対応する正画面2をモニター5等のブラウザに表示させ、同時にプロキシサーバ3の制御によりデータ11に対応するミラー画面1をモニター4等のブラウザに表示させる(ステップ3)。
このように、正画面2をブラウザ表現用のマークアップランゲージで記述し、中継サーバにてミラー画面1をブラウザ表現用のマークアップランゲージで自動作成し、中継サーバによりモニターにミラー画面1を表示させることにより、正画面2のデータからミラー画面1のデータを自動作成することができ、正画面2およびミラー画面1を個別に作成することが不要となり、効率的かつ容易に、正画面とミラー画面とを作成することができる。
【0014】
なお、ミラー画面1は正画面2の対称画面であれば良く、画面の垂直方向の中心線である中心垂線に線対称な画面でも、中心水平線に線対称な画面でも、画面の重心点,中心点等の任意の点に対して点対称な画面であっても良い。
【0015】
以下、実施の形態として、ミラー画面用のデータの作成方法を、HTMLを例として説明する。
(実施の形態1)
実施の形態1におけるミラー画面用のデータの作成方法について、
図1〜
図4を用いて説明する。
【0016】
図4は本発明のミラーリングによる配置位置の算出方法を説明する図である。
実施の形態1においては、正画面2のデータ10を作成する際に、正画面2中のコンテンツの内、対称移動を行うコンテンツに係るHTMLのタグに対称移動を行う旨のアトリビュートを追記し、対称移動を行わないコンテンツに係るHTMLのタグには対称移動を行う旨のアトリビュートを追記しないようにする。
【0017】
このように、正画面2のHTMLデータ10のタグに追記される対称移動を行う旨のアトリビュートの有無により、プロキシサーバ3が自動的にミラー画面1のHTMLデータ11を作成できるため、効率的かつ容易に、正画面とミラー画面とを作成することができる。
【0018】
ここで、画面のコンテンツとしては、画像コンテンツ13や文字コンテンツ14等があり、それぞれのデータのHTMLには、配置位置を示すタグや大きさを示すタグが記述される。対称移動を行う旨のアトリビュートは、画像コンテンツ13等を反転させても問題のないコンテンツのみに対して追記する。プロキシサーバ3は、対称移動を行う旨のアトリビュートが追記されたコンテンツに対しては、画面の中央の中心垂線12に対して線対称となるように、コンテンツを表示させるHTMLを自動的に作成する。また、プロキシサーバ3は、文字コンテンツ14等の対称移動を行う旨のアトリビュートが追記されていないコンテンツに対しては、表示状態を反転させず、配置位置のみを画面の中央の中心垂線12に対して線対称となるようにして、コンテンツを表示させるHTMLを自動的に作成する。なお、対称移動を行わないコンテンツについては、対称移動を行わない旨のアトリビュートを追記しても良い。
【0019】
例えば、正画面2のある画像コンテンツ13におけるHTMLデータ10に、次のように、対称移動を行う旨のアトリビュートを追記する。
<div style="width:900px;background:
url('images/footer_m.jpg'):x-image-mirror:true;">
ここで、対称移動を行う旨のアトリビュートは、「x-image-mirror:true」の部分である。このように、タグに、「x-image-mirror:true」というアトリビュートが追記されているコンテンツについては、中心垂線12に対して線対称となるよう表示を変更するミラーリングが行われる。タグに、「x-image-mirror:true」というアトリビュートが追記されていないコンテンツ、あるいは、タグに、「x-image-mirror:false」というアトリビュートが追記されているコンテンツについては、対称移動を行わない。
【0020】
なお、対称移動,配置位置の線対称の位置への移動の際には、各コンテンツは表示領域の幅を持っているので、幅を考慮してコンテンツの配置位置が決定される。
具体的には、
図4に示すように、正画面2がx方向に1000px、y方向に700pxであるとし、画像コンテンツ13がx方向,y方向に25px,100pxの大きさの枠15に配置されるとする。この時、枠15の始点Pを左上頂点とし、その座標を(x,y)=(10,10)とする(
図4(a))。ミラー画面1における画像コンテンツ13の枠16は、同じく左上頂点を始点P’とし、プロキシサーバ3により、P’のx座標を1000−10−25=965と算出する。その結果、P’の座標は(x,y)=(965,10)となる。ミラーリングであるため、枠16の形状,大きさは枠15と同一である。また、画像コンテンツ13は画像であるため、画像も左右反転させて表示する(
図4(b))。これに対して、文字コンテンツ14の場合は、枠は同様に算出して配置位置のみを線対称移動させ、枠内の文字はそのまま表示する。
(実施の形態2)
次に、
図1,
図2を用いて、実施の形態2におけるミラー画面用のデータの作成方法について説明する。
【0021】
実施の形態1のミラー画面用のデータの作成方法では、正画面2のHTMLデータ10のタグに追記される対称移動を行う旨のアトリビュートの有無により、プロキシサーバ3が自動的にミラー画面1のHTMLデータ11を作成したが、実施の形態2のミラー画面用のデータの作成方法では、プロキシサーバ3が、正画面2のHTMLデータ10のタグを解析し、表示位置のみを線対称移動させるコンテンツであるか、表示位置に加えて画面表示を線対称移動させるコンテンツであるかを判断して、ミラー画面1のHTMLデータ11を作成することを特徴とする。
【0022】
例えば、正画面2中のコンテンツの内、画像コンテンツ13等の対称移動を行う必要のあるコンテンツに係るHTMLデータ10のタグには、<img>,<div>等がある。ここで、<img>は画像を表すタグであり、<div>はコンテンツの配置位置を表すタグである。逆に、正画面2中のコンテンツの内、文字コンテンツ14等の対称移動ではなく、配置位置のみを線対称に移動させる必要のあるコンテンツに係るHTMLデータ10のタグには、<P>、<H>等がある。ここで、<P>、<H>は文字を表すタグである。
【0023】
このような正画面2のHTMLデータ10を、プロキシサーバ3が解析し、対称移動を行う必要のあるタグであるか、配置位置のみを線対称に移動させる必要のあるタグであるかを識別する。そして、対称移動を行う必要のあるタグに係るコンテンツにのみ、実施の形態1と同様に対称移動するミラーリング処理を行い、配置位置のみを線対称に移動させる必要のあるタグに係るコンテンツについては、実施の形態1と同様に、対称移動を行わず、配置位置のみを線対称に移動させるミラーリング処理を行ってミラー画面1を作成する。
【0024】
このように、プロキシサーバ3が、正画面2のHTMLデータ10のタグを解析して、対称移動を行う必要のあるタグであるか、配置位置のみを線対称に移動させる必要のあるタグであるかを識別することにより、自動的にミラー画面1のHTMLデータ11を作成できるため、効率的かつ容易に、正画面とミラー画面とを作成することができる。
(実施の形態3)
次に、
図1,
図2を用いて、実施の形態3におけるミラー画面用のデータの作成方法について説明する。
【0025】
実施の形態3のミラー画面用のデータの作成方法では、実施の形態2に係るミラー画面用のデータの作成方法において、自動判別の例外を規定するために、実施の形態1で示したような、対称移動をするかしないかのアトリビュートを、必要に応じて一部のタグに追記することを特徴とする。
【0026】
具体的には、画面のタイトル等、対称移動も配置位置の移動の必要もないコンテンツのタグに対して、実施の形態1に示すように処理を行わない旨のアトリビュートを追記する。このようなコンテンツは、本来、正画面2でも、ミラー画面1でも、同じ位置に同じ向きに表示して良いものである。しかし、実施の形態2のミラー画面用のデータの作成方法では、プロキシサーバ3の解析により、文字コンテンツ14として、配置位置のみ線対称に移動するべきものと認識されてしまう。実施の形態3のミラー画面用のデータの作成方法では、このようなコンテンツのタグに実施の形態1と同様に、例外として、処理を行わない旨のアトリビュートを追記する。これにより、処理を行わない旨のアトリビュートが優先的に適用され、プロキシサーバ3は、コンテンツの移動を行わない。
【0027】
例えば、対称移動も配置位置の移動の必要もないコンテンツの<div>タグに対して、
<div x-mirror="false"></div>
と追記する。
【0028】
これにより、プロキシサーバ3は、対象となるコンテンツに対して対称移動も配置位置の線対称移動も行わず、正画面2のHTMLデータ10からミラー画面1のHTMLデータ11を作成する。
【0029】
このように、プロキシサーバ3が、正画面2のHTMLデータ10のタグを解析して、対称移動を行う必要のあるタグであるか、配置位置のみを線対称に移動させる必要のあるタグであるかを識別すると同時に、タグに追記されたアトリビュートを優先的に適用し、効率的かつ容易に、より高精度に正画面とミラー画面とを作成することができる。
【符号の説明】
【0030】
1 ミラー画面
2 正画面
3 プロキシサーバ
4 モニター
5 モニター
6 ライン
7 装置A
8 装置B
9 装置C
10 データ
11 データ
12 中心垂線
13 画像コンテンツ
14 文字コンテンツ
15 枠
16 枠
17 ウェブサーバ