JP6161569B2 - ミラーリング画面の作成方法 - Google Patents

Description

本発明は、正画面および正画面を反転するミラーリング画面を作成するミラーリング画面の作成方法に関する。

工場等のラインにおいては、ライン内に配置された複数の装置の、稼働状況を表示する画面や操作画面を表示するアンドン画面が設けられている。また、アンドン画面は、ラインを挟んだ両側等に配置された２つのモニターに表示される場合があり、一方のアンドン画面には正画面を、他方のアンドン画面には正画面を左右反転したミラーリング画面（以下、ミラー画面と称す）を表示していた。

また、このような、１つの表示対象を左右反転させた画面である、正画面とミラー画面とを別々に表示させる場合、単に画面全体を左右対称に反転させただけでは、文字等が判別できなくなるため、従来のミラーリング画面の作成方法では、正画面とミラー画面とを別々に作成し、それぞれを別々のモニター等に表示させていた。

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

しかしながら、従来のミラーリング画面の作成方法では、正画面とミラー画面とを別々に作成するため、画面を作成する手番が多くなり、効率的でないという問題点があった。
本発明は、効率的かつ容易に、正画面とミラー画面とを作成することを目的とする。

上記目的を達成するために、本発明のミラーリング画面の作成方法は、第１のブラウザに表示する正画面と、第２のブラウザに表示され、前記正画面の対称画面であるミラーリング画面とを作成する方法であって、前記正画面をブラウザ表現用のマークアップランゲージで表現する正画面用データを作成する工程と、前記ミラー画面をブラウザ表現用のマークアップランゲージで表現するミラーリング画面用データを中継サーバが前記正画面用データから自動作成する工程と、ウェブサーバが前記第１のブラウザに前記正画面を表示すると共に前記中継サーバが前記第２のブラウザに前記ミラーリング画面を表示する工程とを有し、前記ミラーリング画面は、前記正画面の画像コンテンツを対称移動させたものであり、前記ミラーリング画面の文字コンテンツは前記正画面の配置位置のみを対称移動させたものであることを特徴とする。

以上のように、ブラウザ表現用のマークアップランゲージで正画面を作成し、プロキシサーバにより自動的に正画面からミラー画面を作成し、ウェブサーバとプロキシを介して正画面およびミラー画面をそれぞれのモニター上に表示させることにより、効率的かつ容易に、正画面とミラー画面とを作成することができる。

本発明のミラーリング画面の作成方法の概略を説明する図 ラインにおけるアンドン画面を説明する概念図 本発明のミラーリング画面の作成方法のフローを示す図 本発明のミラーリングによる配置位置の算出方法を説明する図

始めに、図１〜図３を用いて、本発明のミラーリング画面の作成方法の概略を説明する。
図１は本発明のミラーリング画面の作成方法の概略を説明する図、図２はラインにおけるアンドン画面を説明する概念図、図３は本発明のミラーリング画面の作成方法のフローを示す図である。

まず、ライン６におけるアンドン画面について説明する。
図２に示すように、ライン６には、装置Ａ７，装置Ｂ８，装置Ｃ９がこの順で並んでいる。アンドン画面は、ライン６上の各装置の稼動状態を表示したり、装置毎の操作画面を表示したりする。また、アンドン画面は、ライン６を挟んで両側に表示される場合がある。この時、一方のアンドン画面は、ライン６上の装置の配置順に沿って、左から装置Ａ７，装置Ｂ８，装置Ｃ９の順で情報を表示する。他方のアンドン画面は、ライン６上に見える装置配列が逆になるため、左から装置Ｃ９，装置Ｂ８，装置Ａ７の順で情報を表示することが便宜である。ここで、一方のアンドン画面を正画面２、他方のアンドン画面をミラー画面１と定義する。このように、ライン６を挟んで両側に表示される正画面２およびミラー画面１では、それぞれが表示されるモニターから見える装置配列が逆になるため、表示される各装置の位置関係が逆になる。また、装置毎に表示される文字の配置も装置に対応して位置関係が逆になる。ただし、画面表示全てを単に逆向きにすると、文字自体も裏返るため、文字自体は単純に逆向きにできず、文字の向きは同じとする必要がある。

そこで、図１，図３に示すように、本発明のミラーリング画面の作成方法では、次のように正画面２に対するミラー画面１を作成する。
まず、ブラウザ表現用のマークアップランゲージの例としてＨＴＭＬを用いて、正画面２を表示するためのデータ１０を作成する（ステップ１）。モニター５等のブラウザに表示するために、データ１０をウェブサーバ１７に転送する。

次に、プロキシサーバ３等の中継サーバにて、ウェブサーバ１７に転送された正画面２のデータ１０を解析して、自動的に正画面２のミラー画面１のデータ１１をＨＴＭＬで作成する。データ１１は、データ１０のＨＴＭＬの記述を解析し、画像データ等は位置および表示を線対称に移動させて裏返し、文字等は位置のみを画面の中心垂線１２に対して対称な位置に移動させる（ステップ２）。

次に、データ１０に対応する正画面２をモニター５等のブラウザに表示させ、同時にプロキシサーバ３の制御によりデータ１１に対応するミラー画面１をモニター４等のブラウザに表示させる（ステップ３）。
このように、正画面２をブラウザ表現用のマークアップランゲージで記述し、中継サーバにてミラー画面１をブラウザ表現用のマークアップランゲージで自動作成し、中継サーバによりモニターにミラー画面１を表示させることにより、正画面２のデータからミラー画面１のデータを自動作成することができ、正画面２およびミラー画面１を個別に作成することが不要となり、効率的かつ容易に、正画面とミラー画面とを作成することができる。

なお、ミラー画面１は正画面２の対称画面であれば良く、画面の垂直方向の中心線である中心垂線に線対称な画面でも、中心水平線に線対称な画面でも、画面の重心点，中心点等の任意の点に対して点対称な画面であっても良い。

以下、実施の形態として、ミラー画面用のデータの作成方法を、ＨＴＭＬを例として説明する。
（実施の形態１）
実施の形態１におけるミラー画面用のデータの作成方法について、図１〜図４を用いて説明する。

図４は本発明のミラーリングによる配置位置の算出方法を説明する図である。
実施の形態１においては、正画面２のデータ１０を作成する際に、正画面２中のコンテンツの内、対称移動を行うコンテンツに係るＨＴＭＬのタグに対称移動を行う旨のアトリビュートを追記し、対称移動を行わないコンテンツに係るＨＴＭＬのタグには対称移動を行う旨のアトリビュートを追記しないようにする。

このように、正画面２のＨＴＭＬデータ１０のタグに追記される対称移動を行う旨のアトリビュートの有無により、プロキシサーバ３が自動的にミラー画面１のＨＴＭＬデータ１１を作成できるため、効率的かつ容易に、正画面とミラー画面とを作成することができる。

ここで、画面のコンテンツとしては、画像コンテンツ１３や文字コンテンツ１４等があり、それぞれのデータのＨＴＭＬには、配置位置を示すタグや大きさを示すタグが記述される。対称移動を行う旨のアトリビュートは、画像コンテンツ１３等を反転させても問題のないコンテンツのみに対して追記する。プロキシサーバ３は、対称移動を行う旨のアトリビュートが追記されたコンテンツに対しては、画面の中央の中心垂線１２に対して線対称となるように、コンテンツを表示させるＨＴＭＬを自動的に作成する。また、プロキシサーバ３は、文字コンテンツ１４等の対称移動を行う旨のアトリビュートが追記されていないコンテンツに対しては、表示状態を反転させず、配置位置のみを画面の中央の中心垂線１２に対して線対称となるようにして、コンテンツを表示させるＨＴＭＬを自動的に作成する。なお、対称移動を行わないコンテンツについては、対称移動を行わない旨のアトリビュートを追記しても良い。

例えば、正画面２のある画像コンテンツ１３におけるＨＴＭＬデータ１０に、次のように、対称移動を行う旨のアトリビュートを追記する。
<div style="width:900px;background:
url('images/footer_m.jpg'):x-image-mirror:true;">
ここで、対称移動を行う旨のアトリビュートは、「x-image-mirror:true」の部分である。このように、タグに、「x-image-mirror:true」というアトリビュートが追記されているコンテンツについては、中心垂線１２に対して線対称となるよう表示を変更するミラーリングが行われる。タグに、「x-image-mirror:true」というアトリビュートが追記されていないコンテンツ、あるいは、タグに、「x-image-mirror:false」というアトリビュートが追記されているコンテンツについては、対称移動を行わない。

なお、対称移動，配置位置の線対称の位置への移動の際には、各コンテンツは表示領域の幅を持っているので、幅を考慮してコンテンツの配置位置が決定される。
具体的には、図４に示すように、正画面２がｘ方向に１０００ｐｘ、ｙ方向に７００ｐｘであるとし、画像コンテンツ１３がｘ方向，ｙ方向に２５ｐｘ，１００ｐｘの大きさの枠１５に配置されるとする。この時、枠１５の始点Ｐを左上頂点とし、その座標を（ｘ，ｙ）＝（１０，１０）とする（図４（ａ））。ミラー画面１における画像コンテンツ１３の枠１６は、同じく左上頂点を始点Ｐ’とし、プロキシサーバ３により、Ｐ’のｘ座標を１０００−１０−２５＝９６５と算出する。その結果、Ｐ’の座標は（ｘ，ｙ）＝（９６５，１０）となる。ミラーリングであるため、枠１６の形状，大きさは枠１５と同一である。また、画像コンテンツ１３は画像であるため、画像も左右反転させて表示する（図４（ｂ））。これに対して、文字コンテンツ１４の場合は、枠は同様に算出して配置位置のみを線対称移動させ、枠内の文字はそのまま表示する。
（実施の形態２）
次に、図１，図２を用いて、実施の形態２におけるミラー画面用のデータの作成方法について説明する。

実施の形態１のミラー画面用のデータの作成方法では、正画面２のＨＴＭＬデータ１０のタグに追記される対称移動を行う旨のアトリビュートの有無により、プロキシサーバ３が自動的にミラー画面１のＨＴＭＬデータ１１を作成したが、実施の形態２のミラー画面用のデータの作成方法では、プロキシサーバ３が、正画面２のＨＴＭＬデータ１０のタグを解析し、表示位置のみを線対称移動させるコンテンツであるか、表示位置に加えて画面表示を線対称移動させるコンテンツであるかを判断して、ミラー画面１のＨＴＭＬデータ１１を作成することを特徴とする。

例えば、正画面２中のコンテンツの内、画像コンテンツ１３等の対称移動を行う必要のあるコンテンツに係るＨＴＭＬデータ１０のタグには、＜ｉｍｇ＞，＜ｄｉｖ＞等がある。ここで、＜ｉｍｇ＞は画像を表すタグであり、＜ｄｉｖ＞はコンテンツの配置位置を表すタグである。逆に、正画面２中のコンテンツの内、文字コンテンツ１４等の対称移動ではなく、配置位置のみを線対称に移動させる必要のあるコンテンツに係るＨＴＭＬデータ１０のタグには、＜Ｐ＞、＜Ｈ＞等がある。ここで、＜Ｐ＞、＜Ｈ＞は文字を表すタグである。

このような正画面２のＨＴＭＬデータ１０を、プロキシサーバ３が解析し、対称移動を行う必要のあるタグであるか、配置位置のみを線対称に移動させる必要のあるタグであるかを識別する。そして、対称移動を行う必要のあるタグに係るコンテンツにのみ、実施の形態１と同様に対称移動するミラーリング処理を行い、配置位置のみを線対称に移動させる必要のあるタグに係るコンテンツについては、実施の形態１と同様に、対称移動を行わず、配置位置のみを線対称に移動させるミラーリング処理を行ってミラー画面１を作成する。

このように、プロキシサーバ３が、正画面２のＨＴＭＬデータ１０のタグを解析して、対称移動を行う必要のあるタグであるか、配置位置のみを線対称に移動させる必要のあるタグであるかを識別することにより、自動的にミラー画面１のＨＴＭＬデータ１１を作成できるため、効率的かつ容易に、正画面とミラー画面とを作成することができる。
（実施の形態３）
次に、図１，図２を用いて、実施の形態３におけるミラー画面用のデータの作成方法について説明する。

実施の形態３のミラー画面用のデータの作成方法では、実施の形態２に係るミラー画面用のデータの作成方法において、自動判別の例外を規定するために、実施の形態１で示したような、対称移動をするかしないかのアトリビュートを、必要に応じて一部のタグに追記することを特徴とする。

具体的には、画面のタイトル等、対称移動も配置位置の移動の必要もないコンテンツのタグに対して、実施の形態１に示すように処理を行わない旨のアトリビュートを追記する。このようなコンテンツは、本来、正画面２でも、ミラー画面１でも、同じ位置に同じ向きに表示して良いものである。しかし、実施の形態２のミラー画面用のデータの作成方法では、プロキシサーバ３の解析により、文字コンテンツ１４として、配置位置のみ線対称に移動するべきものと認識されてしまう。実施の形態３のミラー画面用のデータの作成方法では、このようなコンテンツのタグに実施の形態１と同様に、例外として、処理を行わない旨のアトリビュートを追記する。これにより、処理を行わない旨のアトリビュートが優先的に適用され、プロキシサーバ３は、コンテンツの移動を行わない。

例えば、対称移動も配置位置の移動の必要もないコンテンツの＜ｄｉｖ＞タグに対して、
<div x-mirror="false"></div>
と追記する。

これにより、プロキシサーバ３は、対象となるコンテンツに対して対称移動も配置位置の線対称移動も行わず、正画面２のＨＴＭＬデータ１０からミラー画面１のＨＴＭＬデータ１１を作成する。

このように、プロキシサーバ３が、正画面２のＨＴＭＬデータ１０のタグを解析して、対称移動を行う必要のあるタグであるか、配置位置のみを線対称に移動させる必要のあるタグであるかを識別すると同時に、タグに追記されたアトリビュートを優先的に適用し、効率的かつ容易に、より高精度に正画面とミラー画面とを作成することができる。

１ ミラー画面
２ 正画面
３ プロキシサーバ
４ モニター
５ モニター
６ ライン
７ 装置Ａ
８ 装置Ｂ
９ 装置Ｃ
１０ データ
１１ データ
１２ 中心垂線
１３ 画像コンテンツ
１４ 文字コンテンツ
１５ 枠
１６ 枠
１７ ウェブサーバ

Claims (3)

1. 第１のブラウザに表示する正画面と、第２のブラウザに表示され、前記正画面の対称画面であるミラーリング画面とを作成する方法であって、
   前記正画面をブラウザ表現用のマークアップランゲージで表現する正画面用データを作成する工程と、
   前記ミラーリング画面をブラウザ表現用のマークアップランゲージで表現するミラーリング画面用データを中継サーバが前記正画面用データから自動作成する工程と、
   ウェブサーバが前記第１のブラウザに前記正画面を表示すると共に前記中継サーバが前記第２のブラウザに前記ミラーリング画面を表示する工程と
   を有し、前記ミラーリング画面は、前記正画面の画像コンテンツを対称移動させたものであり、前記ミラーリング画面の文字コンテンツは前記正画面の配置位置のみを対称移動させたものであり、
   前記正画面用データから前記ミラーリング画面用データを自動作成する前記中継サーバは、前記正画面の各コンテンツを対称移動またはその配置位置のみを対称移動させる際に、前記正画面における前記各コンテンツの表示領域の幅を考慮して、前記ミラーリング画面における前記各コンテンツの配置位置を算出することを特徴とするミラーリング画面の作成方法。
2. 前記正画面用データの対称移動させるコンテンツのタグにアトリビュートを追記し、前記中継サーバが、アトリビュートに従って、前記正画面のコンテンツを対称移動させて前記ミラーリング画面のコンテンツとするようにミラーリング画面用データを自動作成することを特徴とする請求項１記載のミラーリング画面の作成方法。
3. 前記中継サーバが前記正画面用データの記述を解析し、コンテンツを対称移動させるコンテンツと配置位置のみを対称移動させるコンテンツとを識別し、ミラーリング画面用データを自動作成することを特徴とする請求項１または請求項２に記載のミラーリング画面の作成方法。

Images