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ビューアファイルをダウンロードできるようにします。
サーバーにない場合は、
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>

Run example

モバイル端末からの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で使用できます。
ブラウザでサポートされているWebフォント形式(https://www.w3schools.com/Css/css3_fonts.aspを参照)：

ブラウザ

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ビューアオプション

最終更新 5 年前

hashtagHTML5ビューアのタイプ

hashtagCanvasタイプ

hashtagSVGタイプ

hashtagCanvas vs SVG

hashtagシステム環境

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

hashtagクライアント環境

hashtagサーバー環境

hashtagサービスの流れ

hashtagCanvas

hashtagSVG

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

hashtagCanvasの設定

hashtagrepository.properties

hashtagSVGの設定

hashtagspmgr.properties

hashtagschedulerforhtml5SVGviewer.properties

hashtaghtml5SVGviewer.properties

hashtagscheduler_server.properties

hashtagHTML5ビューアの統合

hashtagHTML5ビューアコード例

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

hashtagノート

hashtagHTMLタグ

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

hashtagjQueryの互換性

hashtagフォント

hashtagCanvas

hashtagSVG

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

hashtagサーバー要件

hashtagパフォーマンスの向上

hashtagIIS

hashtagTomcat

HTML5ビューアのタイプ

Canvasタイプ

SVGタイプ

Canvas vs SVG

システム環境

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

クライアント環境

サーバー環境

サービスの流れ

Canvas

SVG

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

Canvasの設定

repository.properties

SVGの設定

spmgr.properties

schedulerforhtml5SVGviewer.properties

html5SVGviewer.properties

scheduler_server.properties

HTML5ビューアの統合

HTML5ビューアコード例

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

ノート

HTMLタグ

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

jQueryの互換性

フォント

Canvas

SVG

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

サーバー要件

パフォーマンスの向上

IIS

Tomcat