Panel BrowserをIEに組み込んで実行

<< Click to Display Table of Contents >>

マニュアル > 運用ガイド > ランタイム実行編 > クライアントのランタイム実行 >

Panel BrowserをIEに組み込んで実行

実行概要

マイクロソフト社が提供するWebブラウザ「Internet Explorer(以降IE)」にPanel Browserを組み込んでクライアント画面を表示する方法について説明します。IEによる実行では、クライアント画面を配信するWebサーバが別途必要となりますが、Panel Browserのリビジョンアップを行う際、パッチファイルが自動ダウンロードされる為、各クライアント毎にパッチの配布及び適用の必要がなくなるメリットがあります。

 

 

IEで実行する際のセットアップ

セットアップ機能の必要性と概要については、「セットアップ機能の概要と事前設定について」を参照して下さい。

 

「Panel BrowserをIEに組み込んで実行」の場合は、Panel Browserを含むプラグインファイル、Webアクセス用ファイル、クライアント設定ファイル及びそのクライアント設定ファイルで参照しているファイル一式をセットアップ機能により出力します。

 

セットアップ機能で出力されるファイルの概要は以下の通りです。

 

ファイル

概要

Panel Browserを含むプラグインファイル

各クライアントPCへのプラグインのインストールを自動化するには、セットアップ機能で出力時に「IEにて各クライアントPCに自動インストールを行う運用にする」を選択します。この設定により、CABファイル(browser.cab)(IEでの自動インストーラーのようなもの)が作成されます。CABファイルにはIEで画面を表示するためのプラグインソフトウェアが含まれています。IEで始めて画面を開くとき、またはクライアントPCにインストールされているプラグインソフトウェアのバージョンが古い時に、クライアントPCにプラグインソフトウェアが自動インストールされます。

 

attention

パッチファイルによりPanel Browserのリビジョンアップをする際は以下の注意点があります。

リビジョンアップのためのパッチは、セットアップ機能時に「IEにて各クライアントPCに自動インストールを行う運用にする」をチェックし、Webサーバへ出力ファイル一式をアップロードして下さい。アップロード以降、IEにて再表示の際に自動更新されますので、クライアントPCに対して個別にパッチをあてる必要がありませが、パッチ適用後は各クライアントPCにて再表示を行って下さい。

 

 

Webアクセス用ファイル

xxx.htmlの形式でファイル出力されます。IEよりアクセスする際は本ファイルのURLを指定します。
 
例) http://www.xxx.com/xxx.html

クライアント設定ファイル

クライアントの設定ファイルです。xxx.xmlの形式となります。セットアップ機能で出力時に「クライアントファイル(xml)を暗号化する」にチェックを入れた場合、xxx.brwの形式で出力されます。

 

クライアント設定ファイルで参照しているファイル一式

クライアント設定ファイル内でプロパティから参照されている画像ファイルや設定ファイルになります。セットアップ時に指定された「リソースフォルダ」内に全て格納されます。また、クライアント設定ファイル内の参照しているプロパティの値は相対パスに全て置き換わります。

 

 

 

セットアップ方法(Panel Editor)

 

1.Panel Editorのツールバーよりセットアップボタンをクリックします。
ope_0022
 

2.「クライアント配布用ファイル作成」画面が表示されます。「Panel BrowserをIEに組み込んで実行」の場合は、「Internet Explorerで運用する」を指定します。
 
ope_0035 

 

作成先フォルダ

セットアップ機能で出力するフォルダを指定します。SetupFolderルートプロパティに指定があるとデフォルト値として採用します。

 

リソースフォルダ

セットアップ機能時にリソースファイル(画像ファイルや設定ファイル)の保存先となるフォルダを指定します。SetupResouceFolderルートプロパティに指定があるとデフォル値として採用します。

 

クライアントファイル(xml)を暗号化する

クライアント設定ファイル(xxx.xml)を暗号化します。xmlファイルの中身を公開したくない場合に暗号化します。

 

IEにて各クライアントPCに自動インストールを行う運用にする

IEで運用する際、セットアップ機能でPanel Browserの配布用プラグインを作成します。

 

 

3.「OK」ボタンをクリックする事で、「作成先フォルダ」にクライアント設定ファイル一式が出力されます。

 

4.出力された一式をWebサーバの公開フォルダにFTPツールなどでアップロードします。
 

IEに組み込んだクライアントの実行

表示したいクライアントPCのIEを起動して、URLとして「http://Webサーバのアドレス/配置フォルダ/Webアクセス用ファイル」にアクセスします。

 

hint

Htmlファイルを開いた後、インターネットエクスプローラの「お気に入り」に登録しておくことで、次回起動時のファイル選択が簡単になります。

 

 

hint

IEの「ツール」「インターネットオプション」メニューから、以下のアドレスに監視システムのhtmlファイルのパス(URL)を指定しておくことで、IE起動時に自動的に監視システムを表示します。
ope_0053

 

 

attention

IE 11より以前のバージョンのIEを使用してクライアント実行する場合、「IE11以前のバージョンを利用する場合」に従いクライアントを作成する必要があります。

 

 

attention

正常に起動しない場合は、インターネットセキュリティの設定を変更する必要がある可能性があります。「IEのセキュリティの設定」の内容をご確認下さい。

 

attention

Panel ServerとPanel Browser(IEで表示)を異なるPCで実行する場合、PSNodeルートプロパティにはPanel ServerのIPアドレスを必ず指定して下さい。(WebサーバのIPアドレスではなく、Panel Serverが動作するPCのIPアドレスであることに注意して下さい。)

 

 

hint

RunBrowserTypeルートプロパティを「WEB_BROWSER」にすると、Panel Editorでの開発中、RUNアイコンを押すことにより、IEを起動し現在編集中のxmlファイルを実際に試すことできます。RUNアイコンを押す前にxmlファイルを保存する必要はありません。

 

 

 

IE向けの画面開発ヒント

 

IEにPanel Browserを組み込んで表示する場合、画面表示のルートプロパティでは、以下の設定を行います。その他の画面表示に関係するルートプロパティは反映されません。
 

ルートプロパティ(Browserグループ)

DefaultForm

ブラウザが起動したときの初期表示フォーム名。

Stretch

ストレッチモード。以下のモードに従い、フォームの大きさを自動的に調整(拡大、縮小)します。

"NONE" - 実際の大きさで表示(ストレッチしない。)

"STRETCH_FULL" - サイズに合わせて引き伸ばし表示する

"STRETCH_KEEPRATE" - サイズに合わせて引き伸ばし表示する(縦横比保持)

IEの場合、フォームのサイズとIEの画面サイズが異なる場合、IEのサイズをベースに調整します。

ViewFillColor

ビュー(フォーム範囲外の部分)の背景色。

 

attention

IEに組み込んだ場合、以下の処理が使用できない場合があります。

 

OnKeyDown
 

 

 

 

IE11以前のバージョンを利用する場合

IE11以前のバージョンを使用する場合、クライアントのファイルに本項目の設定を行う必要があります。概要としては、作成中の監視用画面とは別にフレーム用の画面を別途作成し、フレーム用画面の中に監視用画面を呼び出す処理を行います。

 

attention

本項目の設定を行わない場合、エディットボックスコントロールに入力ができないなどの現象が確認されています。

 

 

attention

本項の設定を行った場合、以下の現象が発生します。

 

IE のタブで異なるページを表示することができない

ブラウザの位置を移動させた場合、WEBコントロールがうまく移動できず、取り残される場合がある(残像が残る)

 

このようなデメリットを避ける場合は、フレーム用のHTMLを使用せず、IEのバージョンを11以降にするかIE以外のブラウザを使用する方法があります。但し、ActiveXが使用できる、IE互換をもったブラウザである必要があります。

 

 

 

この機能のサンプルは、以下からご利用頂けます。


 

1.作成中のクライアント画面を監視用画面(dialog.xml)として説明します。セットアップ機能によりHTMLファイル(dialog.html)を作成します。
ope_0036

 

2.新規にフレーム用画面(frame.xml)を作成します。フレーム用画面には、ウェブコントロールを張り付けます。
ope_0037

 

3.ウェブコントロールにスクリプトを記述します。
ope_0038
 
スクリプト内容

event OnInitialize()
{
   /////////////////////////////////////////////
   // カスタマイズ部分(環境に合わせてURLを変更して下さい)

   this.Navigate ("http://localhost/Sample/dialog.html");
   /////////////////////////////////////////////
}

 

 と記述を行い、1で作成した監視画面を表示するようにします。URLは実際に接続するURLを指定してください。

 

4.セットアップ機能によりHTMLファイル(frame.html)を作成します。
 

5.IEから、4でセットアップしたHTMLファイル(frame.html)を表示させます。