HTML5ビューア

HTML5ビューアのタイプ

Canvasタイプ

CanvasはWeb標準のHTML要素であり、JavaScriptを使用してグラフィックやアニメーションを描画するために使用できます。
Canvas APIは、JavaScriptとHTML要素を介してグラフィックを描画する手段を提供します。
HTML5タグはグラフィックの描画に使用されますが、要素には独自の描画機能はありません（グラフィックのコンテナにすぎません）。実際にグラフィックを描画するには、スクリプトを使用する必要があります。
Canvasは、グラフィックを画面に直接レンダリングする即時モードのグラフィックレンダリングモデルであり、レンダリングされたグラフィックは保存されません。

SVGタイプ

SVG（Scalable Vector Graphics）はオープンスタンダードであり、Scalable Vector Graphicsを記述するために使用されます。ScalableVector Graphicsは、コードを介して操作できるメモリ内モデルに保持される保持モードのグラフィックモデルであり、再レンダリングされます。
Scalable Vector Graphics（SVG）は、双方向性とアニメーションをサポートする2次元グラフィックス用のXMLベースのベクトル画像フォーマットです。
SVG画像とその動作は、XMLテキストファイルで定義されます。つまり、検索、インデックス付け、スクリプト化、圧縮が可能です。
XMLファイルとして、SVG画像はテキストエディターや描画ソフトウェアで作成および編集できます。

Canvas vs SVG

アイテム

Canvas

SVG

バインディング

クライアント

サーバー

パフォーマンス

OZJSViewer.jsの初期ロードが遅い（5,816 KB）

OZJSSVGViewer.jsの初期ロードがもっと早い(1,496 KB)

ツールバー

保存、印刷、ページの移動、ズームイン/アウト、メモの追加、データの保存、検索、用紙の向き、ツリービュー、サムネイル、更新、閉じる

保存、印刷、ページの移動、ズームイン/アウト

font

フォントはクライアントにインストールする必要があります。 PDFへのエクスポートでは、フォントの埋め込みはできません。サーバーバインディングでフォントの埋め込みが可能です。

フォントは、クライアントとサーバーの両方にインストールする必要があります。 PDFにエクスポートすると、フォントの埋め込みが可能になります（ビューアパラメータを使用）。

印刷

クライアントのフラッシュプレーヤーを使用して印刷するか、PDFにエクスポートしてクライアントで印刷します。

サーバー上のpdfにエクスポートし、クライアントにダウンロードしてから印刷します。

OZServer

Servletタイプまたは.Netタイプ

長所と短所

サーバーの作業負荷が少ない。

初期ページの読み込みが遅いパフォーマンスはクライアントに依存し、特にモバイルでは遅くなります。大きなレポートバインディングは、30秒ごとにバインディングメッセージを開く場合があります。

サーバーの作業負荷が大きい（ただし、複数のスケジューラで分散できる）

初期ページの高速読み込みクライアントにデータがある場合は、サーバーに送信する必要がある

勧告

ページ数が少ないレポートに使用

大容量レポートに使用

システム環境

サポートされているOZサーバーの種類

3種類のOZサーバー（サーブレット、.Net、デーモン）のうち、HTTPを使用するサーブレットと.NetタイプのサーバーはHTML5ビューアを提供します。
デーモンタイプのOZサーバーはHTML5ビューアを提供しません。

クライアント環境

サポートされているOS

Windows
Mac
Mobile OS

サポートされているブラウザ

ブラウザ名

最小バージョン

8(HTML4), 9(HTML5)

Firefox

Chrome

Safari

Opera

サーバー環境

JAVA JRE: 1.5または以降
.Net Framework: 3.0または以降

サービスの流れ

Canvas

SVG

HTML5 SVGビューアサービスには、HTML5サービスデーモンが必要です。 SVGサービスデーモンの設定については、OZスケジューラガイドを参照してください。

HTML5ビューアーを使用するためのOZサーバーの設定

ozサーバーインストールの下の/ WEB-INF / conf /に移動し、プロパティファイルを編集します。

Canvasの設定

repository.properties

REPOSITORY_ACCESS_BY_HTTP_GET=true

GETメソッドでリポジトリアイテムにアクセスするには、trueに設定します。

SVGの設定

spmgr.properties

SVGviewerbind_sessionkey=session_keys

複数のキーをセパレーターコンマ（ ‘,’）で割り当てることができ、OR演算は複数のキーに適用されます。
オプションがコメント化されている場合、「user_id」がデフォルトのキーになります。
空のキーが提供された場合、セッションはチェックされません。

schedulerforhtml5SVGviewer.properties

sch1.scheduler_1 ip=10.10.10.11
sch1.scheduler_port=9521
sch2.scheduler_ip=10.10.10.12
sch2.scheduler_port=9521

Html5 SVGサービスデーモンのIPとポートを設定します。
大きなレポートをHTML5SVGでバインドする場合、エイリアス設定で複数のSVGサービスデーモンを実行することにより、パフォーマンスを向上させることができます。
リクエストはSVGに配信されます

html5SVGviewer.properties

html5SVGServerURL=http://127.0.0.1/oz/server

レポートを作成するOZサーバーのURL URLが指定されていない場合、Webページ呼び出しレポートで指定されたOZサーバーURLが使用されます。
指定されたURLは、SVGサービスデーモンからアクセスできる必要があります。

scheduler_server.properties

ViewerType=Applet

UNIXまたはLinuxサーバーの場合、「Applet」に設定します。
NTサーバーの場合、「Applet」または「ActiveX」に設定します。

HTML5ビューアの統合

まず、サーバーのtomcat / webappsの下にHTML5ビューアフォルダを準備する必要がありますアプリケーションがHTML5ビューアファイルをダウンロードできるようにします。
サーバーにない場合は、
2. それをサーバー上のtomcat / webappsに抽出します。
3. フォルダー名（たとえば、OZViewerHTML5_80_20190814100）をHTML5viewer（または任意の名前）に変更します。
アプリケーションでHTML5ビューアを呼び出す前に、HTML5ビューアファイルをロードする必要があります。＊以下の例に示すように。
CanvasビューアーのOZJSViewer.jsまたはSVGビューアーのOZJSSVGViewer.jsをロードします。

HTML5ビューアコード例

<!DOCTYPE html>
<html>
<html style="height:100%">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="../HTML5viewer/ui.dynatree.css" type="text/css"/>
<script type="text/javascript" src="../HTML5viewer/jquery.dynatree.js" charset="utf-8"></script>
<script type="text/javascript" src="../HTML5viewer/OZJSViewer.js" charset="utf-8"></script>
</head>

<body style="width:98%;height:98%">
<div id="OZViewer" style="width:98%;height:98%"></div>
<script type="text/javascript" >
	var serverUrl = "https://" + location.host;
	function SetOZParamters_OZViewer(){
		var oz = document.getElementById("OZViewer");
		oz.sendToActionScript("connection.servlet",serverUrl + "/oz/server");
		oz.sendToActionScript("information.debug", "true");
		oz.sendToActionScript("connection.reportname","/samples/customer.ozr");
		oz.sendToActionScript("odi.odinames", "customer");
		return true;
	}
	start_ozjs("OZViewer", serverUrl + "/oz/HTML5viewer/");
</script>
</body>
</html>

モバイル端末からのHTML5ビューア

以下のように、モバイルデバイス用のjQuerymobileでHTML5ビューアを使用します。

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jtsage.com/simpledialog/latest/jquery.mobile.simpledialog.min.css"/>
<script type="text/javascript" src="https://cdn.jtsage.com/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>

また、関数start_ozjs()は、以下に示すように3番目のオプションを指定して呼び出す必要があります。

start_ozjs("OZViewer","/oz/HTML5viewer/", true); // true for mobile emulation

ノート

HTMLタグ

<!DOCTYPE html>を使用しないと、互換モード、ドキュメントモードIE8以前でHTML5ビューアを開けない問題が発生する可能性があります。 MSエッジブラウザーでメタタグを使用する場合、ブラウザーのバージョンによってレンダリングが異なり、CSSなどのアプリケーションコードが影響を受ける可能性があります。

インターネットのないローカルネットワーク

HTML5ビューアによって参照されるjqueryおよび画像ファイルは、以下のようにOZサーバーで必要です。

HTML5viewer / folderに必要なファイル：

http://code.jquery.com/1 jquery-2.0.3.min.js
http://code.jquery.com/ui/1.12.2/themes/base/jquery-ui.css
http://code.jquery.com/ui/1.12.2/jquery-ui.min.js

HTML5viewer/image/ folderに必要なファイル：

http://code.jquery.com/ui/1.12.2/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png
http://code.jquery.com/ui/1.12.2/themes/base/images/ui-bg_flat_75_ffffff_40x100.png
http://code.jquery.com/ui/1.12.2/themes/base/images/ui-icons_222222_256x240.png
http://code.jquery.com/ui/1.12.2/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png

jQueryの互換性

現在のHTML5ビューアには、jQuery Core 2.0.3およびjQuery UI 1.12.1の最小バージョンが必要です。

フォント

Canvas

OZRで使用されるフォントは、クライアントにインストールする必要があります。
クライアントにOZRフォントがインストールされていない場合、クライアントのデフォルトフォントが使用されます。
Webフォントは、クライアントにインストールされているフォントを使用する代わりにFontSpyで使用できます。

ブラウザ

woff

eot

ttf

Chrome

✓

Firefox

✓

Safari

✓

Swing

✓

IE11

✓

Edge

✓

Whale

✓

Opera

✓(11,1)

✓

SVG

OZRで使用されるフォントは、SVGサービスデーモンがインストールされているサーバーと、ビューアが開くクライアントPCの両方にインストールする必要があります。
レポートをSVGに変換するときに、デザイン時フォントがインストールされていない場合、OSが提供するデフォルトのフォントが使用され、レポートがクリーンでない可能性があります。
サーバーにインストールされているフォントにはライセンスが必要です。

HTML5 Viewerを使用するためのチェックリスト

サーバー要件

サーバーには最小のJAVA 1.5または.Net Framework 3.0が必要です。

パフォーマンスの向上

HTML5 Canvasビューアーは、サーバーからOZJSViewer.jsをダウンロードしてCanvasレポートをレンダリングします。ただし、ダウンロードする他のファイルよりもサイズが大きい（約6 M）ため、ダウンロードには時間がかかります。もちろん、ファイルをダウンロードしたら、パフォーマンスを気にする必要はありません。また、以下の圧縮ファイル転送技術を使用することで、この初期ダウンロード時間を3分の1未満に短縮できます。

IIS

OZサーバーのインストールパスで「Web.config」を開き、以下のように圧縮ファイル転送オプションを追加して、IISを再起動します。

<httpCompression directory="%SystemDrive%\inetpub\temp\1 IIS Temporary Compressed Files" />
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</dynamicTypes>
<staticTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</staticTypes>
</httpCompression>
<urlCompression doStaticCompression="true" doDynamicCompression="true" />

Tomcat

Tomcatのインストールパスで「conf/server.xml」を開き、以下のように圧縮ファイル転送オプションを追加して、Tomcatを再起動します。

<Connector executor="tomcatThreadPool"
    port="8080" protocol="HTTP/1.1"
    connectionTimeout="20000"
    redirectPort="8443"
    compression="on"
    compressionMinSize="1024"
    compressableMimeType="application/javascript"/>

前へHTML5ビューア次へHTML5ビューアオプション

最終更新 4 年前

役に立ちましたか？

HTML5ビューア

HTML5ビューアのタイプ

Canvasタイプ

CanvasはWeb標準のHTML要素であり、JavaScriptを使用してグラフィックやアニメーションを描画するために使用できます。
Canvas APIは、JavaScriptとHTML要素を介してグラフィックを描画する手段を提供します。
HTML5タグはグラフィックの描画に使用されますが、要素には独自の描画機能はありません（グラフィックのコンテナにすぎません）。実際にグラフィックを描画するには、スクリプトを使用する必要があります。
Canvasは、グラフィックを画面に直接レンダリングする即時モードのグラフィックレンダリングモデルであり、レンダリングされたグラフィックは保存されません。

SVGタイプ

SVG（Scalable Vector Graphics）はオープンスタンダードであり、Scalable Vector Graphicsを記述するために使用されます。ScalableVector Graphicsは、コードを介して操作できるメモリ内モデルに保持される保持モードのグラフィックモデルであり、再レンダリングされます。
Scalable Vector Graphics（SVG）は、双方向性とアニメーションをサポートする2次元グラフィックス用のXMLベースのベクトル画像フォーマットです。
SVG画像とその動作は、XMLテキストファイルで定義されます。つまり、検索、インデックス付け、スクリプト化、圧縮が可能です。
XMLファイルとして、SVG画像はテキストエディターや描画ソフトウェアで作成および編集できます。

Canvas vs SVG

アイテム

Canvas

SVG

バインディング

クライアント

サーバー

パフォーマンス

OZJSViewer.jsの初期ロードが遅い（5,816 KB）

OZJSSVGViewer.jsの初期ロードがもっと早い(1,496 KB)

ツールバー

保存、印刷、ページの移動、ズームイン/アウト、メモの追加、データの保存、検索、用紙の向き、ツリービュー、サムネイル、更新、閉じる

保存、印刷、ページの移動、ズームイン/アウト

font

印刷

クライアントのフラッシュプレーヤーを使用して印刷するか、PDFにエクスポートしてクライアントで印刷します。

サーバー上のpdfにエクスポートし、クライアントにダウンロードしてから印刷します。

OZServer

Servletタイプまたは.Netタイプ

長所と短所

サーバーの作業負荷が少ない。

サーバーの作業負荷が大きい（ただし、複数のスケジューラで分散できる）

初期ページの高速読み込みクライアントにデータがある場合は、サーバーに送信する必要がある

勧告

ページ数が少ないレポートに使用

大容量レポートに使用

システム環境

サポートされているOZサーバーの種類

3種類のOZサーバー（サーブレット、.Net、デーモン）のうち、HTTPを使用するサーブレットと.NetタイプのサーバーはHTML5ビューアを提供します。
デーモンタイプのOZサーバーはHTML5ビューアを提供しません。

クライアント環境

サポートされているOS

Windows
Mac
Mobile OS

サポートされているブラウザ

ブラウザ名

最小バージョン

8(HTML4), 9(HTML5)

Firefox

Chrome

Safari

Opera

サーバー環境

JAVA JRE: 1.5または以降
.Net Framework: 3.0または以降

サービスの流れ

Canvas

SVG

HTML5ビューアーを使用するためのOZサーバーの設定

ozサーバーインストールの下の/ WEB-INF / conf /に移動し、プロパティファイルを編集します。

Canvasの設定

repository.properties

REPOSITORY_ACCESS_BY_HTTP_GET=true

GETメソッドでリポジトリアイテムにアクセスするには、trueに設定します。

SVGの設定

spmgr.properties

SVGviewerbind_sessionkey=session_keys

複数のキーをセパレーターコンマ（ ‘,’）で割り当てることができ、OR演算は複数のキーに適用されます。
オプションがコメント化されている場合、「user_id」がデフォルトのキーになります。
空のキーが提供された場合、セッションはチェックされません。

schedulerforhtml5SVGviewer.properties

sch1.scheduler_1 ip=10.10.10.11
sch1.scheduler_port=9521
sch2.scheduler_ip=10.10.10.12
sch2.scheduler_port=9521

Html5 SVGサービスデーモンのIPとポートを設定します。
大きなレポートをHTML5SVGでバインドする場合、エイリアス設定で複数のSVGサービスデーモンを実行することにより、パフォーマンスを向上させることができます。
リクエストはSVGに配信されます

html5SVGviewer.properties

html5SVGServerURL=http://127.0.0.1/oz/server

レポートを作成するOZサーバーのURL URLが指定されていない場合、Webページ呼び出しレポートで指定されたOZサーバーURLが使用されます。
指定されたURLは、SVGサービスデーモンからアクセスできる必要があります。

scheduler_server.properties

ViewerType=Applet

UNIXまたはLinuxサーバーの場合、「Applet」に設定します。
NTサーバーの場合、「Applet」または「ActiveX」に設定します。

HTML5ビューアの統合

まず、サーバーのtomcat / webappsの下にHTML5ビューアフォルダを準備する必要がありますアプリケーションがHTML5ビューアファイルをダウンロードできるようにします。
サーバーにない場合は、
1. からHTML5ビューアをダウンロードします。
2. それをサーバー上のtomcat / webappsに抽出します。
3. フォルダー名（たとえば、OZViewerHTML5_80_20190814100）をHTML5viewer（または任意の名前）に変更します。
アプリケーションでHTML5ビューアを呼び出す前に、HTML5ビューアファイルをロードする必要があります。＊以下の例に示すように。
CanvasビューアーのOZJSViewer.jsまたはSVGビューアーのOZJSSVGViewer.jsをロードします。

HTML5ビューアコード例

<!DOCTYPE html>
<html>
<html style="height:100%">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="../HTML5viewer/ui.dynatree.css" type="text/css"/>
<script type="text/javascript" src="../HTML5viewer/jquery.dynatree.js" charset="utf-8"></script>
<script type="text/javascript" src="../HTML5viewer/OZJSViewer.js" charset="utf-8"></script>
</head>

<body style="width:98%;height:98%">
<div id="OZViewer" style="width:98%;height:98%"></div>
<script type="text/javascript" >
	var serverUrl = "https://" + location.host;
	function SetOZParamters_OZViewer(){
		var oz = document.getElementById("OZViewer");
		oz.sendToActionScript("connection.servlet",serverUrl + "/oz/server");
		oz.sendToActionScript("information.debug", "true");
		oz.sendToActionScript("connection.reportname","/samples/customer.ozr");
		oz.sendToActionScript("odi.odinames", "customer");
		return true;
	}
	start_ozjs("OZViewer", serverUrl + "/oz/HTML5viewer/");
</script>
</body>
</html>

モバイル端末からのHTML5ビューア

以下のように、モバイルデバイス用のjQuerymobileでHTML5ビューアを使用します。

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jtsage.com/simpledialog/latest/jquery.mobile.simpledialog.min.css"/>
<script type="text/javascript" src="https://cdn.jtsage.com/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>

また、関数start_ozjs()は、以下に示すように3番目のオプションを指定して呼び出す必要があります。

start_ozjs("OZViewer","/oz/HTML5viewer/", true); // true for mobile emulation

ノート

HTMLタグ

インターネットのないローカルネットワーク

HTML5ビューアによって参照されるjqueryおよび画像ファイルは、以下のようにOZサーバーで必要です。

HTML5viewer / folderに必要なファイル：

http://code.jquery.com/1 jquery-2.0.3.min.js
http://code.jquery.com/ui/1.12.2/themes/base/jquery-ui.css
http://code.jquery.com/ui/1.12.2/jquery-ui.min.js

HTML5viewer/image/ folderに必要なファイル：

http://code.jquery.com/ui/1.12.2/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png
http://code.jquery.com/ui/1.12.2/themes/base/images/ui-bg_flat_75_ffffff_40x100.png
http://code.jquery.com/ui/1.12.2/themes/base/images/ui-icons_222222_256x240.png
http://code.jquery.com/ui/1.12.2/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png

jQueryの互換性

現在のHTML5ビューアには、jQuery Core 2.0.3およびjQuery UI 1.12.1の最小バージョンが必要です。

フォント

Canvas

OZRで使用されるフォントは、クライアントにインストールする必要があります。
クライアントにOZRフォントがインストールされていない場合、クライアントのデフォルトフォントが使用されます。
Webフォントは、クライアントにインストールされているフォントを使用する代わりにFontSpyで使用できます。
ブラウザでサポートされているWebフォント形式(

ブラウザ

woff

eot

ttf

Chrome

✓

Firefox

✓

Safari

✓

Swing

✓

IE11

✓

Edge

✓

Whale

✓

Opera

✓(11,1)

✓

SVG

OZRで使用されるフォントは、SVGサービスデーモンがインストールされているサーバーと、ビューアが開くクライアントPCの両方にインストールする必要があります。
レポートをSVGに変換するときに、デザイン時フォントがインストールされていない場合、OSが提供するデフォルトのフォントが使用され、レポートがクリーンでない可能性があります。
サーバーにインストールされているフォントにはライセンスが必要です。

HTML5 Viewerを使用するためのチェックリスト

サーバー要件

サーバーには最小のJAVA 1.5または.Net Framework 3.0が必要です。

パフォーマンスの向上

IIS

OZサーバーのインストールパスで「Web.config」を開き、以下のように圧縮ファイル転送オプションを追加して、IISを再起動します。

<httpCompression directory="%SystemDrive%\inetpub\temp\1 IIS Temporary Compressed Files" />
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</dynamicTypes>
<staticTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</staticTypes>
</httpCompression>
<urlCompression doStaticCompression="true" doDynamicCompression="true" />

Tomcat

Tomcatのインストールパスで「conf/server.xml」を開き、以下のように圧縮ファイル転送オプションを追加して、Tomcatを再起動します。

<Connector executor="tomcatThreadPool"
    port="8080" protocol="HTTP/1.1"
    connectionTimeout="20000"
    redirectPort="8443"
    compression="on"
    compressionMinSize="1024"
    compressableMimeType="application/javascript"/>

前へHTML5ビューア次へHTML5ビューアオプション

最終更新 4 年前

役に立ちましたか？