# Web Viewer クライアントの使用

警告
装置の意図しない動作 Web Viewer などの遠隔監視機能を使用する場合、リモート機器の操作を行う前にリモート側の承認を得て目視で受信を確認してください。 上記の指示に従わないと、死亡、重傷、または物的損害を負う可能性があります。

Hide Show

1. クライアントからの接続
2. ログインページ
3. 配信ページ
4. CGI パラメーターを使用したモード
5. Web Viewer クライアントアプリケーションに保存される設定
6. 画面表示領域で使用できるジェスチャー
7. Web Viewer クライアントアプリケーション使用の注意

## クライアントからの接続

以下にクライアントからサーバーに接続する方法を説明します。

### クライアントからの接続

以下に示すようにウェブブラウザーから Web Viewer の URL を入力します。

http://<表示器の IP アドレスまたはドメイン名>:<ポート番号>/webviewer/index.html

IP アドレスの例) | http://192.168.1.100:8082/webviewer/index.html
ドメインの例) | http://hmi1.xxx.com:8082/webviewer/index.html

MEMO:

- URLでポート番号を省略できません。コロンの後に、[ポート番号] プロパティの値を入力します。有効なポート番号は 1024 から 65535 の間です。
- URL から「index.html」を省略できます。

  使用例) | http://192.168.1.100:8082/webviewer/
  | http://hmi1.xxx.com:8082/webviewer/

- URL に CGI パラメーターを追加できます。URL に CGI パラメーターを追加する場合、「index.html」は省略できません。CGI パラメーターの詳細については、以下を参照してください。
  CGI パラメーターを使用したモード
- サーバーとクライアント間の接続が切断されると、クライアントは、切断される前と同じ操作モード (監視モードまたは操作モード) でサーバーへの再接続を試みます。
- 通信の問題や、プロジェクトの更新、別のプロジェクト全体の問題などで、クライアントがサーバーへの再接続に失敗した場合、エラーメッセージが表示されます。エラーメッセージについては、以下を参照してください。
  Web Viewer クライアントアプリケーションに表示されるエラー

重要:

- クライアントとサーバーの接続を保つには、クライアントアプリケーションに焦点をあわせる必要があります。
  例えば、次のようにすると、クライアント/サーバー接続が遮断されます。

- コンピューターから接続している場合に、フォーカスをほかのアプリケーションに移動する。
- コンピューターから接続している場合に、ウェブブラウザーで別のタブを開く。
- コンピューターから接続して Microsoft Edge を使用している場合に、ブラウザーの履歴などのブラウザー設定を開く。
- スマートデバイスから接続している場合に、ホーム画面に移動またはスリープ状態に入る。

Web Viewer の[セキュリティー設定] プロパティが有効か無効かによってオペレーションは以下のように異なります。

#### セキュリティーが無効な場合

上記の URL をウェブブラウザーから開くと、ウェブブラウザーに配信ページが表示されます。

配信ページ

#### セキュリティーが有効な場合

上記の URL をウェブブラウザーから開くと、ウェブブラウザーにログインページが表示されます。

ログインページ

[Web Viewer アクセス権] プロパティが [モニター] または [モニター/オペレーション] に設定されたユーザーグループのユーザーのユーザー名とパスワードでログインします。

未登録のユーザー名またはパスワードを入力した場合、または [Web Viewer アクセス権] プロパティを [なし] に設定したユーザーグループのユーザー名でログインしようとすると、エラーメッセージが表示され接続が拒否されます。

MEMO: ログインの成功失敗にかかわらず、ログイン履歴が操作ログに記録されます。

## ログインページ

Web Viewer 設定で [セキュリティー設定] が有効になっている場合、クライアントからサーバーに接続するとログインページが表示されます。

1. 言語切替
2. ユーザー名
3. パスワード
4. [ログイン] ボタン

正しいユーザー名とパスワードを入力し [ログイン] ボタンをクリックして配信ページ (以下) を閲覧します。

MEMO:

- ログインページの設定については、以下を参照してください。
  ログインページと配信ページをカスタマイズしたい
- 許可するログイン試行回数やほかのパラメーターの設定については、以下を参照してください。
  ユーザーのロックアウト

## 配信ページ

配信ページはサーバーの画面を表示します。

# | 説明
A | [ツールバー] ツールバーには使用できるオペレーションがリストされます。
アイコン | 説明
| 配信ページモードを変更します。ユーザーがモニター/オペレーションのアクセス権を持っている場合に使用できます。このボタンは監視モードと操作モードを切り替えます。
| 更新。内部通信接続を更新します。
| フォントサイズを変更します。フォントサイズ (80％、85％、90％、95％、100％、105％、110％、115％、または120％) を選択できるメニューを表示します。画面表示領域のテキストやグラフィカルオブジェクトのテキストのフォントサイズの設定を変更します。
| スケーリングモードを変更します。メニューで画面表示エリアの表示方法を [縦横比固定] または [サイズ固定] から選択します。
| 言語を変更します。メニューからクライアントユーザーインターフェイスの現在の言語を [英語]、[日本語]、[フランス語]、[ポルトガル語]、[ドイツ語]、[イタリア語]、[韓国語]、[簡体字中国語]、または [繁体字中国語] から選択します。
| 拡大率を表示/非表示にします。[モニター] モードで [スケーリングモード] が [サイズ固定] の場合、画面表示領域の下部に表示される拡大率の表示と非表示を切り替えます。 画面表示エリアの拡大率を 40％ から 500％ に変更できます。 MEMO: ツールバー以外で拡大率を変更すると、ツールバーやステータスバーの拡大率も変更される場合があります。
| このボタンを使用して、ツールバーとステータスバーを非表示にします。ツールバーとステータスバーを非表示にすると、プラス + アイコンが表示されます。これは非表示にすることはできませんが、画面表示領域の任意の部分に移動できるため、邪魔になりません。プラス + アイコンをタッチすると、ツールバーとステータスバーが再び表示されます。
| ログアウト。現在のユーザーをログアウトします。
B | [ステータスバー] ステータスバーには、サーバーノード名、ネットワークステータス、および現在の配信ページモードを表示します。
項目 | 説明
ノード名 | [ノード名] プロパティで指定されたサーバー名を表示します。
| ネットワーク接続状態を表示します。サーバーとの接続が確立されると、アイコンが点滅します。[Communication Timeout] で指定した秒数以上アイコンが点滅しない場合、通信タイムアウトが発生します。
| 現在の配信ページモードを表示します。 : 操作モード : 監視モード
C | [画面表示領域] サーバーの画面が表示されます。画面は、 [縦横比固定] または [サイズ固定] スケーリングのいずれかを使用して、ウェブブラウザーにあわせてスケーリングされます。

### 監視モードと操作モード

クライアントからサーバーに最初に接続したときは、監視モードになります。監視モードは、誤った画面のタッチ操作を防ぐことができる閲覧用のモードです。

操作モードに切り替えるには、 アイコンをクリックします。操作モードでは、画面上のタッチオブジェクトの操作ができます。

監視モードと操作モードではタッチ操作が異なります。詳細は画面表示領域で使用できるジェスチャーを参照してください。

MEMO: 操作モードに切り替えることができるのは、ユーザーの [Web Viewer アクセス権] プロパティが [モニター/オペレーション] に設定されている場合のみです。情報については、以下を参照してください。
ユーザー認証設定の指定

#### 占有オペレーション

ユーザーがクライアントから操作モードでログインし、配信ページの画面表示領域をタッチまたはクリックすると、占有オペレーションが開始されます。操作占有は、サーバーと他のクライアントによる画面操作を制限することにより、競合するアクションを防ぎます。操作占有については、以下を参照してください。

占有オペレーション

### 操作待機

サーバーに接続できるクライアントの数には制限があります。クライアントが使用可能なすべての接続を占有しないようにするために、Web Viewer は、操作待機状態のクライアントを自動的にログアウトするように設定されています。詳細情報については、以下を参照してください。

操作待機状態のクライアントのログアウト

## CGI パラメーターを使用したモード

Web Viewer では、Common Gateway Interface (CGI) パラメーターを使用して、表示のアスペクト比と通信タイムアウトを指定できます。URL の最後に、疑問符「？」を追加し、その後に CGI パラメータが続きます。アンパサンド「＆」を使用して、複数の CGI パラメーターを連結します。

次の CGI パラメータを Web Viewer クライアントアプリケーションで使用できます。

CGI パラメーター | 値 | 説明
ScalingMode | AspectFit Fix | 配信ページでの画面の表示方法を指定します。 「AspectFit」は、画面の表示領域に合わせて画面の高さと幅を比例的に調整します。「AspectFit」では、画面は画面表示領域の中央に表示されます。 MEMO: 「AspectFit」を使用してブラウザーに画面表示領域が表示された後、ブラウザーウィンドウを最小化または最大化しても、画面表示領域のサイズは変更されません。 「Fix」は、画面表示領域のサイズに関係なく、画面の寸法を使用して表示します。画面表示領域が小さく画面全体を表示できない場合は、画面がトリミングされ、スクロールバーを使用して画面の残りの部分を表示できます。スクロールすると、画面表示領域のみが左右または上下に移動します。ステータスバーとツールバーはスクロールしません。 画面表示領域が画面よりも大きい場合、画面表示領域で表示された画面の右下に余白 (空白領域) が表示されます。 画面は画面表示領域の左上に表示されます。 MEMO: 設定値はローカルに保存されるため、CGI パラメーターを使用して設定を定義すると次回の接続時に CGI パラメーターを省略でき、配信ページは最初に定義された設定を使用します。
CommunicationTimeout | 1～60 秒 | Web Viewer クライアントアプリケーションがサーバーからの応答を待機する時間を秒単位で指定します。指定されたタイムアウト内にクライアントがサーバーから応答を受信しない場合、通信は終了し、Web Viewer クライアントアプリケーションはサーバーへの再接続を試みます。この設定を使用することで、質の高いの通信を確保し、画面の描画やタッチレスポンスのパフォーマンス低下によって起こり得る意図しない操作を防止します。 ‘CommunicationTimeout’ が指定されていない場合、初期値の 3 が使用されます。 MEMO: この通信タイムアウトはクライアントアプリケーション用ですが、サーバーにもクライアントとの通信用のタイムアウトがあります。タイムアウトの値は 'CommunicationTimeout' の 5 倍です。 したがって、'CommunicationTimeout' が 3 秒の場合、サーバーの通信タイムアウトは 15 秒です。

以下の例では、IP アドレスが 192.168.1.100 の Web Viewer サーバーを使用しています。

例: http://192.168.1.100:8082/webviewer/index.html?ScalingMode=AspectFit&CommunicationTimeout=3

上記の URL および CGI パラメーターをブラウザーに入力すると、次のように接続されます。

- 画面は画面表示領域のサイズにあわせて表示されます。
- サーバーとクライアント間の通信は 3 秒以内に完了し、それ以上かかる場合はエラーが発生します。

MEMO:

- CGI パラメーターでは大文字と小文字が区別されます。

- 無効な CGI パラメーターを入力すると、パラメーターは無視され、初期設定が使用されます。

## Web Viewer クライアントアプリケーションに保存される設定

Web Viewer クライアントアプリケーションを使用する場合、以下の設定内容は、コンピューターまたはスマートデバイスでのセッション間で保存されます。

- ログアウト時の配信ページモード (監視または操作)
- スケーリングモード: [縦横比固定] または [サイズ固定] (サーバー接続時に使用する CGI パラメーターで上書き可能)
- 文字サイズ: 前回指定されていたフォントスケーリングサイズ
- ユーザー名: 前回使用したユーザー名がログイン画面で入力されます。
- 言語: 前回指定されていた言語で Web Viewer クライアントアプリケーションを表示します。

## 画面表示領域で使用できるジェスチャー

監視モードか操作モードかによって、画面表示領域で使用できる操作とできない操作があります。

クライアントオペレーションの種類 | 監視モード | 操作モード
マルチタッチ | - | 無効 MEMO: スマートデバイスで 3 点以上のタッチが同時に検出されると、クライアントは警告メッセージを表示します。配信ページの任意の場所をタッチして、メッセージを閉じます。
タッチ (タップ) 左クリック | ブラウザーのタッチまたは左クリックの操作。 | サーバーにタッチイベントが通知され、そのタッチ操作が発生します。
ピンチ | 非対応 MEMO: ピンチジェスチャーで拡大率を変更すると、ツールバーやステータスバーの拡大率も変更される場合があります。 | 無効
スワイプ | 画面全体が画面表示領域に表示されない場合は、スワイプして画面を左、右、上、下にスクロールします。 | 無効
右クリック | 画面表示領域を右クリックして、ウェブブラウザーのショートカットメニューを表示します。 | 無効
マウスホイール | 画面全体が画面表示領域に表示されない場合は、マウスホイールで画面を上下にスクロールします。 [Shift] キーを押しながら、マウスホイールを使用して左右にスクロールします。 [スケーリングモード] が [サイズ固定] の場合に使用でき、[CTRL] キーを押しながらマウスホイールを使用して、画面をズームインまたはズームアウトします。 MEMO: iOS および Android では、マウスホイール操作をサポートしていません。 | 無効
マウスオーバー | 無効 | 無効 MEMO: マウスオーバーは Web Viewer でサポートされていませんが、次の場合に、'Mouse Enter’ トリガーを Web Viewer から実行することができます。 オブジェクトの外側をマウスでクリックまたはタッチしてから、オブジェクトをクリックまたはタッチします。 オブジェクトの外側からマウスカーソルをドラッグし、オブジェクトの上にドロップします。 オブジェクトの外側を押し続け、指をオブジェクト上にスライドさせて離します。
マウスリーブ | 無効 | 無効 MEMO: マウスリーブは Web Viewer でサポートされていませんが、次の場合に、'Mouse Leave' トリガーを Web Viewer から実行することができます。 オブジェクトをマウスでクリックまたはタッチしてから、オブジェクトの外側をクリックまたはタッチします。 オブジェクトからマウスカーソルをドラッグし、オブジェクトの外側にドロップします。 オブジェクトを押し続け、指をオブジェクトの外側にスライドさせて離します。
キーボード [F5] キー (コンピューター) [Command]+[R] (iOS) | ブラウザーのログインページまたは配信ページを更新します。
キーボード 数字キー、英字キー、特殊文字キー | キーボード入力をブラウザーに送信します。 | 無効 MEMO: 数値表示器、文字列表示器、またはその他の部品/図形に値を入力するには、キーボードではなく画面のキーパッドを使用します。

MEMO:

- 上記の操作を画面表示領域で行うと、クライアントで動作します。タッチ、クリック、その他の操作を画面表示領域外で行った場合、動作しません。
  ただし、最初に画面表示領域内をタッチまたはクリックしてから、指またはマウスを画面表示領域外にドラッグすると、指が画面表示領域を離れたとき、またはマウスボタンを離したときに、タッチ 'Release’ トリガーが発生します。Microsoft Edge を使用する場合は例外です。'Release’ トリガーはマウスボタンが離されたときにのみ発生するためです。
- 通信の中断がタッチ操作に干渉する可能性があることに注意してください。例えば、クライアントアプリケーションが長押し操作を使用している場合、通信に問題があると長押しが無期限に続行される可能性があります。長押し操作の時間制限を設定するには、以下を参照してください。
  長押し操作のタイムアウト

## Web Viewer クライアントアプリケーション使用の注意

### 同じユーザーが複数のクライアントからログインする場合

ユーザーが 1 つのクライアントからログインしていても、同じユーザーは別のクライアントからログインすることができます。

同じユーザーが別のクライアントへのログインに失敗してロックアウトされた場合、すでにログインしているクライアントでは接続が更新されるまで操作を続行できます。その場合、エラーメッセージが表示されます。

### クライアントが操作占有を行っている場合のサーバー上の USB バーコードリーダーからの入力

クライアントが操作占有を使用している場合、サーバーへの USB バーコードリーダー入力は次のように動作します。

- データ入力先が変数に設定されたバーコードリーダーへの入力は正常に入力されます。
- データ入力先がオブジェクトに設定されているバーコードリーダーへの入力は無視されます。

USB バーコードリーダーについては、以下を参照してください。

USB バーコードリーダーに接続

### ポインティングデバイスでタッチを実行する

スマートデバイスなどのクライアントデバイスがタッチをサポートしている場合は、タッチパネルにタッチすると同時に、マウスやトラックパッドなどのポインティングデバイスを使用しないでください。タッチとポインティングデバイスの両方を使用すると、予期しない動作が発生する可能性があります。タッチとポインティングデバイスは使用できますが、同時に使用することはできません。

### クライアントが操作占有を行っているときにショートカットメニューを表示

#### SP5000 シリーズオープンボックス (Windows 10 IoT Enterprise モデル)、IPC シリーズ、または PC/AT を使用する場合

クライアントが操作占有を行っている場合でも、サーバー上で [CTRL] + 右クリックで画面のショートカットメニューを表示できます。

### ユーザーの削除

サーバー上でユーザーが削除されると、ロックアウト情報など、そのユーザーに関連付けられている情報もすべて削除されます。そのユーザーがクライアントとしてログインしている場合は、自動的にログアウトされます。

### ウェブブラウザー部品

クライアントは、ウェブブラウザーの部品とそのコンテンツを表示することができません。ウェブブラウザー部分の代わりに、ウェブブラウザー部分が配置されている領域に長方形が表示されます。この領域でのタッチ操作はクライアントでは無効であることに注意してください。ウェブブラウザー部品の背後に部品や図形がある場合、その部品や図形にタッチすることはできません。

### フロントエンドプロセッサー (FEP)

Web Viewer クライアントから FEP を使用して日本語の文字列を入力すると、変換オプションのドロップダウンリストは表示されません。

#### SP5000 シリーズオープンボックス (Windows 10 IoT Enterprise モデル)、IPC シリーズ、または PC/AT を使用する場合

FEP はサポートされていません。代わりに IME キーのみをご使用ください。

### サーバーとクライアントでのフォントの違い

クライアントの画面はウェブブラウザーフォントを使用しますが、これはサーバー画面で使用されているフォントとは異なります。

左側はサーバー上の部品の例を示し、右側はクライアント上の同じ部品を示しています。

サーバーでは、3 つの部品 (数値表示器、日付/時刻表示器、文字列表示器) すべてで同じフォントを使用します。クライアントでは使用するフォントが異なります。

クライアントでは、数値表示器と日付/時刻表示器は同じフォントを使用しますが、文字列表示器は異なるフォントを使用します。

### クライアント上の斜体のテキスト

クライアントで縦向きの斜体のテキストを表示すると、斜体のスタイルが正しく適用されません。

例えば、ブラウザーで使用されているフォントが斜体をサポートしている場合、テキストの傾斜はランタイムで使用されているものと反対になります。

ブラウザーで使用されているフォントが斜体をサポートしていない場合、斜体は適用されません。

### Safari ウェブブラウザー

- Safari ウェブブラウザーで、点滅色が複数の状態で構成されているランプ部品、マルチステートランプ部品、ラジオボタン部品などの部品を表示すると、いくつかの状態で誤ったフォントの色が使用されます。
- iOS および iPadOS では、Safari のサイズ変更オプションは Web Viewer クライアントではサポートされていません。
  サイズを変更すると画面表示領域が正しく表示されないため、この設定は 100％ のままにしてください。

### スマートデバイスの回転

スマートデバイスを回転させると、配信ページも回転しタッチ操作が解除されます。操作占有はタイムアウトが経過するまで続行します。

### [スケーリングモード] が [縦横比固定]の場合、ブラウザーウィンドウを最大化/復元します。

[スケーリングモード] が [縦横比固定]のときに Web ブラウザーで配信ページを表示する場合、ウェブブラウザーウィンドウのサイズを最大化または復元しても、配信画面のサイズは変更されません。配信画面のサイズを変更するには、まず [スケーリングモード] を [サイズ固定] に変更し、ウェブブラウザーウィンドウを最大化または復元してから、[スケーリングモード] を [縦横比固定] に戻します。

### 画像ファイルが設定された部品

非常に大きな画像ファイルを設定すると、Web Viewer クライアントでの描画パフォーマンスが低下する可能性があります。ロードされている部品は、完全に描画されるまでゆっくりと点滅します。

画像ファイルを設定できる部品は以下のとおりです。

- チェックボックス
- 日付/時間表示器
- ランプ
- マルチステートランプ
- 数値表示器
- 画像表示器
- ラジオボタン
- 文字列表示器
- スイッチ
- 時間表示器
- 切り替えスイッチ