prizmdoc viewer - xlsoft corporation...prizmdoc viewer v13.8 – 入門ガイド p. 10...

PrizmDoc Viewer v13.8 – 入門ガイド

p. 1

サーバーベースの

HTML5 ドキュメントビューア

および Web API

___________________________

PrizmDoc Viewer

v13.8

______________________________

入門ガイド

(Getting Started)

エクセルソフト株式会社

2018/8/14


p. 2

©2019. Accusoft Corporation. All Rights Reserved.

Translated by XLsoft Corporation

http://www.accusoft.com/


p. 3

PrizmDoc Viewer 概要

PrizmDoc Viewer を使用すると、強力なドキュメント表示とドキュメント変換機能をWebアプリケーション

に追加できます。

ブラウザー向けのドキュメント表示

PrizmDoc Viewerには、ユーザーがブラウザーでさまざまなファイル形式のドキュメントを表示、検索、注釈

付け、墨消し、印刷、およびダウンロードできる高度な HTMLビューアコントロールが含まれています。ア

プリケーションを終了したり、カスタムソフトウェアをインストールする必要はありません。

シームレスな統合

ビューアは、Webアプリケーションとシームレスに統合できるように設計されています。検索や墨消しなど

の主要な機能は、アプリケーションのニーズに応じて簡単にオンまたはオフにできます (uiOptionsオブジェ

クトを参照)。すぐに使用できる UIレイアウトまたはスタイルが気に入らない場合は、完全に変更できます。

また、ビューアには広範な JavaScript APIがあるため、アプリケーションでプログラムを制御してビューアに

応答できます。

https://help.accusoft.com/PrizmDoc/v13.8/HTML/prizmdoc-overview.html#document-viewing-for-the-browser

https://help.accusoft.com/PrizmDoc/v13.8/HTML/prizmdoc-overview.html#document-conversion


p. 4

強力な機能

PrizmDoc Viewer 次のような強力な表示機能を提供します。

• Microsoft Officeを使用して、Word、Excel、および PowerPointファイルの忠実度の高いレンダリ

ングを行うオプション (PrizmDocクラウドに自動的に含まれます)

• 数千ページの大きなドキュメントの表示と検索のサポート

• 2つの異なるMicrosoft Wordファイル間の変更を確認する機能

• 事前にドキュメントコンテンツを変換して、Web上でさらに高速に表示するオプション

全体的なアーキテクチャ

表示機能は、1) HTML Viewer コントロールと 2) 強力な REST API およびサーバー側のソフトウェアによっ

て強化されています。

最も簡単な開始方法は PrizmDoc Cloud を使用することです。PrizmDoc クラウドでは、PrizmDoc Viewer

のサーバー側の部分を完全にホストおよび管理します。

もちろん、必要に応じて、すべて自己ホストすることもできます。


p. 5

ドキュメント変換

PrizmDoc Viewerのコンテンツ変換サービス REST API を使用すると、次のことが簡単にできます。

• Office、PDF、電子メール、HTML、TIFF、PNG、JPEG、CAD、およびその他の多くの種類のド

キュメントから PDF、TIFF、PNG、JPEG、または SVGに変換する

• OCRを使用して、検索不可能な PDFまたは TIFFを、フルテキスト検索をサポートする視覚的に

同一の新しい PDFに変換します

• 複数のドキュメントからページを分割および結合する

• ドキュメントにヘッダー、フッター、または透かしを適用する

表示と同様に、変換 REST APIには、Microsoft Officeを使用して、Word、Excel、および PowerPoint ファイ

ル (PrizmDoc Cloudに自動的に含まれる) の忠実度の高い変換を行うオプションがあります。

最も簡単な開始方法は PrizmDoc Cloud を使用することです。ここでは、強力な PrizmDoc サーバークラス

ターを完全にホストおよび管理します。


p. 6

もちろん、必要に応じて、サーバーを自己ホストできます。


p. 7

ドキュメント表示の入門

PrizmDoc Viewer へようこそ!

この入門ガイドでは、ビューアをWebアプリケーションに統合するのに必要な手順を説明します。完了する

と、Webアプリケーションの任意のページでビューアをレンダリングし、実際のドキュメントコンテンツを表示

できるようになります。

始めましょう!

• アーキテクチャの概要

• 表示シーケンスの説明イラスト

• サンプルアプリケーション

• 1. ビューアの統合

• 2. バックエンドの選択と表示セッションの作成

• 3. リバースプロキシの設定


p. 8

アーキテクチャの概要

PrizmDoc Viewer アーキテクチャには、主に 2つの側面があります。

1. ブラウザーで実行されている HTML ビューア自体

2. ブラウザーで表示するためにドキュメントページを SVGに変換する強力なバックエンド

これらの 2つの部分の間にあるのは、ビューアが表示する必要があるページをバックエンドに要求するため

のリバースプロキシとして機能するWebサーバーです。

PrizmDoc Viewer をWebアプリケーションに統合するには、次の 3つすべてが必要です。

1. HTML ビューア自体 (static JavaScript, CSS, フォント、画像ファイル)

2. PrizmDoc Viewer バックエンド

3. ビューアがバック亜鉛度からコンテンツをリクエストできるようにするリバースプロキシ

このすべては、このガイドの残りの部分で設定します。ただし、最初に、各要素がどのように連携するかを

より詳細に理解しておくと役立ちます。


p. 9

表示するには、PAS をコール

バックエンドは、PAS (PrizmDoc Application Services) と PrizmDoc Serverの２つのレイヤーで構成され

ています。

PAS と PrizmDoc Server は、独立しています。それぞれが独自のホストまたはポートで実行され、それぞれ

に独自の REST APIがあります。

• PrizmDoc Server (右端) は、製品の技術的中心であり、ドキュメントのページを SVG に変換する実際

のエンジンです。計算集中型であり、永続的なストレージはありません。

• PAS は、変換作業を行いません。代わりに、PrizmDoc Serverの前のレイヤーであり、注釈の保存と読

み込み、または事前に変換されたコンテンツの長期キャッシングなど、他の表示に関する問題を処理しま

す。 Webアプリケーションと同様に、PASには、所有するストレージ (ファイルシステムやデータベース

など) への特権アクセスがあります。

表示するために、Webアプリケーションは PASに対して REST API呼び出しのみを行う必要があります。

その後、PASはユーザーに代わって PrizmDocサーバーを呼び出して、変換作業が確実に行われるように

します。アプリケーションが PrizmDocサーバーを直接呼び出す必要があるのは、ファイルの変換や注釈

のドキュメントへの書き込みなど、表示以外の作業を実行する必要がある場合のみです。


p. 10

表示シーケンスの説明イラスト

Webアプリケーションがビューアを含む HTMLページをレンダリングする必要がある場合、ブラウザーと

バックエンドの間に発生する一種の「ダンス」があり、Webアプリケーションは 2つの中間に位置します。一

般的な方法は次のとおりです。

まず、Webアプリケーションが PASに POST して、新しい表示セッションを作成します。

PASは、新しい viewingSessionId を使用してWebアプリケーションに応答します。

この時点では、ドキュメントの変換はまだ始まっていません。ただし、Webアプリケーションがビューアで

ページ HTML をレンダリングできる十分な情報があり、返された viewingSessionId を使用するように構

成します。

これにより、ブラウザーはできるだけ早くビューア UIのレンダリングを開始できます。


p. 11

次に、Webアプリケーションが元のソースドキュメントを PASにアップロードして、バックエンドがドキュメント

の変換を開始できるようにします。

ソースドキュメントを受信するとすぐに、PASはそれを PrizmDocサーバーに渡し、そこでドキュメントページ

が 1つずつ SVGに変換されます。また、ページが変換されるとすぐに、ブラウザーに配信できます (残りの

ページがまだ変換中の場合でも)。

一方、ブラウザーに読み込まれると、ビューアはドキュメントコンテンツの最初のページを PAS (Webサー

バー経由でプロキシされる) に繰り返し要求し始めます (「最初のページを取得できますか? 今すぐ最初の

ページを取得できますか?」)

SVG コンテンツの最初のページが利用可能になるとすぐに、PASはそれを返し、ビューアはそれをエンド

ユーザーに表示します。


p. 12

もちろん、これはすべて非常に迅速に行われるため、ユーザーはドキュメントをできるだけ早く表示し、対話

することができます。

エンドユーザーがドキュメントを操作し続けると、ビューアは必要に応じてドキュメントコンテンツの追加のリ

クエストを PASに行います。

次のステップ

これが実際のコードで実際に発生することを確認するには、「hello viewer」サンプルアプリケーションをご覧

ください。これらは、お客様自身の開発マシンで簡単にセットアップして実行できる優れたスタートポイント

です。

ビューアを既存のWebアプリケーションに統合する準備ができたら、この 3部構成のガイドのパート 1に進

んでください。


p. 13

サンプルアプリケーション

PrizmDoc Viewerの評価を開始する最も早い方法は、最小限の「hello viewer」サンプルアプリケーションの

1つを使用することです。

• Node.js

• C#

• Java

これらは、PrizmDoc Viewer を使用してブラウザーに単一のドキュメントをロードするだけの非常にシンプル

なWebアプリケーションですが、実際のコードで一緒に機能するすべての部分を簡単に確認できます。

https://github.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html

https://github.com/Accusoft/hello-prizmdoc-viewer-with-dotnet-and-html

https://github.com/Accusoft/hello-prizmdoc-viewer-with-java-and-html


p. 14

1. ビューアの統合

最初に、ビューア自体をWebアプリケーションに追加する必要があります。

このセクションの終わりまでに、Webアプリケーションは空のビューアを表示できるはずです。

Web アプリケーションを更新し、ビューアに必要な静的ファイルを提

供

ビューア UIを定義する静的 JavaScript、CSS、フォント、および画像ファイルのセットがあります。ブラウ

ザーが取得できるように、これらをWebアプリケーションに追加する必要があります。

ビューアに必要な静的ファイルはここからダウンロードできます。

• viewer-assets.zip

そのファイルを解凍し、解凍されたビューアアセットディレクトリとそのすべてのコンテンツを、ファイルを静

的に提供できる場所の Webアプリケーションに移動します。たとえば、ルート viewer-assets/ を、アプ

リケーションに追加したばかりの解凍された viewer-assetsディレクトリにマッピングするように、Webアプリ

ケーションを構成する場合があります。すべてのフォントと画像を含む、ZIP ファイルで定義されているすべ

てのファイルとフォルダーを必ず含めてください。これは、ビューア UIのすべての部分が正しく表示される

ために重要です。

ビューアをページに統合する

Webアプリケーションの特定のページにビューアを含めるには、次のことを行う必要があります。

1. ページの<head>に定型コードを追加して、必要な JavaScriptと CSSを含めます。

https://github.com/Accusoft/prizmdoc-viewer/releases/download/v13.8/viewer-assets.zip

p. 15

2. ビューアのプレースホルダーとして HTMLのどこかに <div> を宣言します。

3. 指定された <div>の場所にビューアを作成する JavaScript関数を呼び出します。

1. 必要な JavaScript と CSS を含めます

重要: スクリプトは、次のように指定された順序でロードする必要があります。

viewer-assets/で静的 JavaScript および CSS ファイルを提供するようにWebアプリケーションをセット

アップしたと仮定すると、HTMLの<head>に次を追加します。



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-

scale=1 user-scalable=no"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />



<link rel="stylesheet" href="viewer-assets/css/normalize.min.css">

<link rel="stylesheet" href="viewer-assets/css/viewer.css">



<script src="viewer-assets/js/jquery-1.10.2.min.js"></script>

<script src="viewer-assets/js/jquery.hotkeys.min.js"></script>

<script src="viewer-assets/js/underscore.min.js"></script>

<script src="viewer-assets/js/viewercontrol.js"></script>

<script src="viewer-assets/js/viewer.js"></script>

<script src="viewer-assets/js/viewerCustomizations.js"></script>

注意: 静的ファイルが viewer-assets/以外のパスでホストされている場合は、それに応じて調整してくだ

さい。

2. ビューアの <div> プレースホルダーを宣言します

HTMLのどこかで、ビューアを表示する場所に、次のように一意の IDを持つプレースホルダーdivを追加し

ます。

<div id="viewerContainer" />


p. 16

divの幅と高さを、ビューアに使用するサイズに合わせてスタイルを設定してください。

3. ビューアを作成する

最後に、次のような JavaScript 呼び出しでビューアをインスタンス化します。

<script type="text/javascript">

$(function() {

$('#viewerContainer').pccViewer({

//documentID: 'TODO: We'll handle this in part 2',

imageHandlerUrl: '/pas-proxy'

viewerAssetsPath: 'viewer-assets',

resourcePath: 'viewer-assets/img',

language: viewerCustomizations.languages['en-US'],

template: viewerCustomizations.template,

icons: viewerCustomizations.icons,

annotationsMode: "LayeredAnnotations"

});

});

</script>

注意: 静的ファイルが viewer-assets/以外のパスでホストされている場合、viewerAssetsPathおよび

resourcePath を適宜調整します。

documentID がまだ設定されていませんが、この後すぐにそれを取得します。

この時点で、Webアプリケーションを実行してブラウザーでページを表示すると、ビューアーUIに次のエラー

が表示されるはずです。


p. 17

このエラーは、視聴者をまだバックエンドビューイングセッションに接続していないために発生しています。

パート 2でこれを行います。


p. 18

2. バックエンドの選択と表示セッションの

作成

次に、バックエンドと連携して表示セッションを作成する必要があります。これは、ドキュメントの変換を担当

するバックエンドの「もの」と、ビューアが変換された SVGを要求する「もの」です。

そのためには、実行中のバックエンドにアクセスする必要があります。

このセクションでは、以下について説明します。

• バックエンドをホストするためのオプション

• 新しい表示セッションを作成する方法

• ビューアを関連する表示セッションに接続する方法

• ソースドキュメントを表示セッションに提供する方法

このセクションの終わりまでに、ビューアは読み込みインジケータの表示を開始します (ただし、ドキュメント

コンテンツはまだ読み込まれません)。

バックエンドホスティングオプションの選択

バックエンドをホストするためのいくつかのオプションがあります。

1. PrizmDoc Cloud. Accusoft は、複数の顧客が共有するバックエンドを完全に管理します。使用したトラ

ンザクション (表示または処理されたドキュメントなど) に対してのみお支払いいただきます。これが最も

簡単な方法です。

2. プライベートクラウド. Accusoftは、クラウド専用のバックエンドをデプロイし、バックエンドを完全に管理

します。あなたのために実行するサーバーの平均数に対して毎年支払います。これはもう 1つの簡単

な開始方法です。このオプションに興味がある場合は、セールスにお問い合わせください。

https://cloud.accusoft.com/


p. 19

3. セルフホスト. お客様自身のハードウェアにバックエンドをデプロイして管理します。データがネットワー

クを離れることはありません。 PrizmDoc Server を実行するマシンの数に基づいて、毎年支払います。

バックエンドの設定に慣れていない場合は、PrizmDoc Cloudが最も簡単に開始できます。サインアップし

て APIキーを取得するだけで完了です。バックエンドの準備はできています。必要に応じて、いつでもプラ

イベートクラウドまたはセルフホストオプションに切り替えることができます。

表示セッションについて

ブラウザーで実行されているすべてのビューアインスタンスは、バックエンド表示セッションに関連付けられ

ている必要があります。つまり、新しいビューアを作成するときは常に、最初に新しいバックエンド表示セッ

ションを作成する必要があります。

表示セッションは、ブラウザーで表示するために元のドキュメントを SVGに変換するバックエンドの「もの」で

あり、ドキュメントコンテンツを要求するためにビューアが話す「もの」です (“Hey backend, I need page 9

for viewing session XYZ…”)。

これが、パート 1の最後で、ビューアがエラーを表示した理由です。

そのエラーは、ビューアが「表示セッションの IDを与えるのを忘れています！バックエンドにコンテンツを

要求する方法はありません。」ということを言っています。

これを修正しましょう。


p. 20

表示セッションの作成

ビューアで HTML をレンダリングしてブラウザーに送信する前に、Webアプリケーションは最初に POST要

求を PASに送信して、新しい表示セッションを作成する必要があります。

PrizmDoc Cloud を使用している場合、表示セッションを作成する HTTP リクエストは次のようになります。

POST https://api.accusoft.com/prizmdoc/ViewingSession

Acs-Api-Key: YOUR_API_KEY

Content-Type: application/json

{

"source": {

"type": "upload",

"displayName": "UNIQUE_NAME_OF_THE_DOCUMENT_TO_BE_VIEWED"

}

}

注意: セルフホストバックエンドを使用している場合:

• https://api.accusoft.com/prizmdoc を実際の PAS ペース URL (http://localhost:3000 な

ど)に置き換えます

• Acs-Api-Key リクエストヘッダーを省略します (PrizmDoc Cloud には必要)

これを分解しましょう。

• source オブジェクトは、元のソースドキュメントに関する PAS情報を伝えます。

• source.type は、ソースドキュメントの提供方法を PASに伝えます。 "upload" の値は、後続の HTTP

リクエストでソースドキュメントを PASにアップロードし、それをこの表示セッションに関連付けることを意

味します (オプションもありますが、 "upload" はほとんどの場合お勧めです)。

http://localhost:3000/


p. 21

• 最後に、source.type が "upload"に設定されている場合、source.displayName は必須オプション

であり、ドキュメントの一意の名前である必要があります。

注意: バックエンドのパフォーマンスを最適化するには、アップロードするドキュメントのバイナリコンテンツに

対して source.displayName が一意である必要があります。 2つの異なるソースドキュメントに同

じ "displayName" 値を使用しないでください。

PASは、新しい表示セッションを作成し、その viewingSessionId で返信します。

HTTP/1.1 200 OK

Content-Type: application/json

{

"viewingSessionId": "XYZ..."

}

ビューアを表示セッションに接続する

この時点で、新しい「空の」表示セッションが作成され、一意の viewingSessionIdが作成されました。

PASはまだソースドキュメントのアップロードを待っています。ただし、その前に、ビューアで HTMLをレンダ

リングし、次の新しい viewingSessionId を使用するように構成できます。


p. 22

パート 1で以前と同じようにビューアを構築しますが、今回は、ビューアがエラーにしていた、必要

な documentID プロパティの値を提供します (ビューア APIはそれを documentIDに呼び出し、PAS REST

APIはそれを viewingSessionId を呼び出しますが、同じことです)：


$(function() {


documentID: 'XYZ...',








});

});

</script>

ソースドキュメントをアップロードし、ドキュメント変換を開始する

最後に、HTML をレンダリングしてブラウザに送信した後、Webアプリケーションで実際にソースドキュメント

を PASにアップロードし、表示セッションに関連付けます。

PrizmDoc Cloud を使用している場合、ソースドキュメントをアップロードする HTTP リクエストは次のようにな

ります。

PUT

https://api.accusoft.com/prizmdoc/ViewingSession/u{viewingSessionId}/SourceFile

Acs-Api-Key: YOUR_PRIZMDOC_CLOUD_API_KEY

<<file bytes>>

注意: セルフホストバックエンドを使用している場合:

• https://api.accusoft.com/prizmdoc を実際の PASベース URL (http://localhost:3000な

ど)に置き換えます。

http://localhost:3000/


p. 23

• Acs-Api-Key リクエストヘッダーを省略します (PrizmDoc Cloud では必要)。

• PAS secretKey の値に必要な Accusoft-Secret ヘッダーを追加します。

ドキュメントが受け付けられると、PAS はすぐに 200 OK で返信します。

HTTP/1.1 200 OK

これは、ドキュメントが受け入れられ、変換プロセスが開始されたことを意味します。

ビューアには実際の viewingSessionIdがあり、バックエンドは実際にブラウザーで表示するためにドキュ

メントを変換しています。そして、ビューアは現在、変換されたドキュメントコンテンツをバックエンドに要求

しようとしています。

ここでWebアプリケーションを実行すると、ビューアにロードインジケータが表示されます。ただし、“Page

Load Failed” というメッセージも表示され、コンテンツは実際には表示されません。

これは、ビューアのバックエンドへのリクエストが実際にはまだ通過していないためです。次にパート 3で修

正します。


p. 24

3. リバースプロキシの設定

最後に、単純なリバースプロキシを設定して、ビューアがWebサーバーを介して GET リクエストをバックエ

ンドに送信できるようにする必要があります。

このセクションの終わりまでに、ビューアは実際のドキュメントコンテンツを実際に表示する必要があります。

ビューアのリバースプロキシルートの構成

ビューアを作成したときに、値 /pas-proxyに設定する特別な imageHandlerUrl プロパティがありまし

た。


$(function() {


documentID: 'XYZ...',








});

});

</script>


p. 25

imageHandlerUrl は、ビューアがドキュメントコンテンツの PASに GET リクエストを行う際に使用する

ベース URLです。

ビューアは、次のようなさまざまな GET要求を PASに送信します。

• GET /Page/q/0?DocumentID=uXYZ...&Scale=1

• GET /Document/q/Attributes?DocumentID=uXYZ...

• GET /Document/q/0-0/Text?DocumentID=uXYZ...

• その他

ビューアがこれらの要求を行うとき、それらはすべての要求のベース URL として imageHandlerUrl を使用

します。値を/pas-proxyに設定しているため、実際のリクエストは次のようになります。

• GET /pas-proxy/Page/q/0?DocumentID=uXYZ...&Scale=1

• GET /pas-proxy/Document/q/Attributes?DocumentID=uXYZ...

• GET /pas-proxy/Document/q/0-0/Text?DocumentID=uXYZ...

• その他

注意: /pas-proxy/* へのこれらのリクエストは、まだWebサーバーに送られています。このようなすべ

ての HTTP要求が PASに転送されるようにするには、この/pas-proxy/* ルートにリバースプロキシを設

定する必要があります。

リバースプロキシと PrizmDoc Cloud API Key

PrizmDoc Cloud を使用している場合、リバースプロキシには重要な責任があります。バックエンドに送信

する前に、各 HTTP リクエストに PrizmDoc Cloud API Key を追加する必要があります。

PrizmDoc Cloudに対して行われるすべての HTTP要求は、 Acs-Api-Key という名前の要求ヘッダーで提

供される APIキーで認証される必要があります。

ただし、API Key を秘密にしておく必要があります。これが PrizmDoc Cloud内のすべてにアクセスできるよ

うにし、実行した請求可能なトランザクションの数を判断するために使用するものです。ユーザーがアカウン

トを悪用し、不要な料金が発生するのを防ぐため、API Keyをブラウザーに送信しないでください。代わり

に、この責任はリバースプロキシで処理する必要があります。

そのため、ビューアは GET リクエストをWebアプリケーションに送信します。リバースプロキシはリクエス

トを受け入れ、API Keyヘッダーを追加してから、PrizmDoc Cloudにリクエストを転送します。


p. 26

リバースプロキシの設定

リバースプロキシを設定するための多くのオプションがあります。基本的に、リバースプロキシを 1) アプ

リケーションコードの一部として設定するか、2) nginxや IISなどの外部Webサーバーの一部として設定す

るかを決定する必要があります。両方の例を提供します。必要なものに最も近いものを選択してください。

• Web アプリケーション内でリバースプロキシを設定する

o node.js

o ASP.NET

o Java / Spring

• Web アプリケーションの外部でリバースプロキシを設定する

o nginx

o IIS

Web アプリケーション内でリバースプロキシを設定する

node.js

node.js と expressを使用している場合、 http-proxy-middleware などのパッケージを使用できます。

注意: 完全なサンプルアプリケーションについては、GitHub の Hello PrizmDoc Viewer with node.js and

HTML サンプルをチェックしてください。

/pas-proxy ルートを設定する方法は次のとおりです。

const express = require('express');

const proxy = require('http-proxy-middleware');

https://help.accusoft.com/PrizmDoc/v13.8/HTML/getting-started-viewing-part-3.html#setting-up-a-reverse-proxy-within-your-web-application

https://help.accusoft.com/PrizmDoc/v13.8/HTML/getting-started-viewing-part-3.html#nodejs

https://help.accusoft.com/PrizmDoc/v13.8/HTML/getting-started-viewing-part-3.html#aspnet

https://help.accusoft.com/PrizmDoc/v13.8/HTML/getting-started-viewing-part-3.html#java-spring

https://help.accusoft.com/PrizmDoc/v13.8/HTML/getting-started-viewing-part-3.html#setting-up-a-reverse-proxy-outside-of-your-web-application

https://help.accusoft.com/PrizmDoc/v13.8/HTML/getting-started-viewing-part-3.html#nginx

https://help.accusoft.com/PrizmDoc/v13.8/HTML/getting-started-viewing-part-3.html#iis

https://www.npmjs.com/package/http-proxy-middleware




p. 27

const app = express();

app.use(proxy('/pas-proxy', {

pathRewrite: {

'^/pas-proxy': '', // remove the /pas-proxy prefix when forwarding

target: 'https://api.accusoft.com/prizmdoc', // PAS base URL

changeOrigin: true, // necessary to convert from HTTP to HTTPS

headers: {

'Acs-Api-Key': 'YOUR_API_KEY' // for PrizmDoc Cloud

}

}

});

これがすべての GET /pas-proxy/* 要求を PASにプロキシするようにエクスプレスアプリケーションを構

成する方法です！

一旦、設定したら、結論にスキップできます。

ASP.NET

ASP.NETを使用している場合は、 nugetで入手可能な OWIN ミドルウェアパッケージである

SharpReverseProxy を使用できます。

注意: 完全なサンプルアプリケーションは、GitHub の Hello PrizmDoc Viewer with .NET and HTML サン

プルをチェックしてください。

Startup.cs の Configure メソッド内で、/pas-proxy ルートを設定する方法は次の通りです。

app.UseProxy(new List<ProxyRule> {

new ProxyRule {

Matcher = uri => uri.AbsolutePath.StartsWith("/pas-proxy/"),

Modifier = (req, user) =>

{

// Create a corresponding request to the actual PAS host

var match = Regex.Match(req.RequestUri.PathAndQuery, "/pas-

proxy/(.+)");

var path = match.Groups[1].Value;

var pasBaseUri = new Uri("https://api.accusoft.com/prizmdoc/");

https://help.accusoft.com/PrizmDoc/v13.8/HTML/getting-started-viewing-part-3.html#what-we-have-now

https://www.nuget.org/

https://www.nuget.org/packages/SharpReverseProxy/

https://github.com/Accusoft/hello-prizmdoc-viewer-with-dotnet-and-html


p. 28

req.RequestUri = new Uri(pasBaseUri, path);

// For PrizmDoc Cloud

req.Headers.Add("Acs-Api-Key", "YOUR_API_KEY");

}

}

}, result =>

{

Logger.LogDebug($"Proxy: {result.ProxyStatus} Url: {result.OriginalUri} Time:

{result.Elapsed}");

if (result.ProxyStatus == ProxyStatus.Proxied)

{

Logger.LogDebug($" New Url: {result.ProxiedUri.AbsoluteUri}

Status: {result.HttpStatusCode}");

}

});

そして、それがすべての GET /pas-proxy/* 要求を PASにプロキシするように ASP.NETアプリケーション

を構成する方法です。

それを設定したら、結論にスキップできます。

Java / Spring

Java Springアプリケーションでは、Netflix Zuul を使用できます。

注意: 完全なサンプルアプリケーションについては、GitHubの Hello PrizmDoc Viewer with Java and

HTML サンプルをご覧ください。

application.properties は、Zuul が /pas-proxy のリバースプロキシルートを設定するために必

要な情報を定義します。

prizmdoc.pas.baseUrl=https://api.accusoft.com/prizmdoc/

prizmdoc.cloud.apiKey=YOUR_API_KEY

# ===== Proxy all requests from /pas-proxy/* to PAS =====

ribbon.eureka.enabled=false

zuul.routes.pas-proxy.path=/pas-proxy/**

zuul.routes.pas-proxy.url=${prizmdoc.pas.baseUrl}

https://github.com/Netflix/zuul




p. 29

zuul.routes.pas-proxy.stripPrefix=true

メインの Application.java は、次のようになります。

package myapp;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.cloud.netflix.zuul.EnableZuulProxy;

import org.springframework.context.annotation.Bean;

import sample.pasProxy.AddApiKeyRequestHeaderFilter;

@EnableZuulProxy

@SpringBootApplication

public class Application {

public static void main(String[] args) {

SpringApplication.run(Application.class, args);

}

}

PrizmDoc Cloud を使用している場合は、リクエストがバックエンドに転送される前に、APIキーがリクエスト

ヘッダーとして追加されていることも確認する必要があります。これを行うには、Zuulの “pre” フィルター

Spring コンポーネントを設定します。

package myapp;

import javax.servlet.http.HttpServletRequest;

import com.netflix.zuul.context.RequestContext;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.beans.factory.annotation.Value;

import com.netflix.zuul.ZuulFilter;

/**

* Ensures that the PrizmDoc Cloud API key, if defined, is injected


p. 30

* as a request header before proxied requests are sent to PAS.

*

* Netflix Zuul will execute this "pre" filter before sending the request on to

PAS, allowing

* this class to inject the configured PrizmDoc Cloud API key.

*

* See https://spring.io/guides/gs/routing-and-filtering/

*/

@Component

public class AddApiKeyRequestHeaderFilter extends ZuulFilter {

private static final Logger log =

LoggerFactory.getLogger(AddApiKeyRequestHeaderFilter.class);

@Value("${prizmdoc.cloud.apiKey:#{null}}")

private String apiKey;

@Override

public String filterType() {

return "pre";

}

@Override

public int filterOrder() {

return 0;

}

@Override

public boolean shouldFilter() {

return true;

}

@Override

public Object run() {

RequestContext ctx = RequestContext.getCurrentContext();

HttpServletRequest request = ctx.getRequest();

if (apiKey != null) {


p. 31

ctx.addZuulRequestHeader("Acs-Api-Key", apiKey);

}

log.info("Proxying {} {}", request.getMethod(), request.getRequestURL());

return null;

}

}

それが、すべての GET /pas-proxy/* 要求を PASにプロキシするように Java Springアプリケーションを

構成する方法です。


Web アプリケーションの外部でリバースプロキシを設定する

実稼働アプリケーションでは、Webアプリケーションの前で nginxや IISなどを使用して、リバースプロキシ

の懸念をアプリケーションコードの外部に保持するのが一般的です。


p. 32

このアプローチでは、すべての着信トラフィックは nginxまたは IISに送られ、URLに基づいて、Webアプリ

ケーションまたは PASにルーティングされます。

Webアプリケーションの前にすでに nginxまたは IISがある場合、このセクションでは、すべての GET

/pas-proxy/* 要求を PASにルーティングするための追加のリバースプロキシルールを構成する方法に

ついて説明します。

nginx

nginx構成ファイル内で、PASへのリバースプロキシルートを定義する server に location ディレクティブ

を簡単に追加できます。

location /pas-proxy/ {

# Limit to GET requests (which is all the viewer needs)

limit_except GET {

deny all;

}

# For PrizmDoc Cloud:

proxy_set_header Acs-Api-Key YOUR_API_KEY;

# PAS base URL

proxy_pass https://api.accusoft.com/prizmdoc/;

}

上記の例では、末尾のスラッシュに注意してください！それらは重要です。


p. 33

そして、これがすべての GET /pas-proxy/* 要求を PASにプロキシするように nginxを構成する方法で

す。


IIS

このセクションでは、IISでリバースプロキシルートを設定する方法について説明します。

まず、これらの IIS拡張機能がインストールされていることを確認してください。

• URL Rewrite

• Application Request Rerouting

次に、IISでサイトまたはアプリケーションのリバースプロキシルールを実際に定義する必要があります。

この種のルールは、サイトレベルまたはアプリケーションレベルでのみ適用できます。これを設定する方法

を見ていきましょう。

1. デフォルトWebサイトなど、変更するサイトまたはアプリケーションを選択します。

https://www.iis.net/downloads/microsoft/url-rewrite

https://www.iis.net/downloads/microsoft/application-request-routing


p. 34

2. URL Rewrite 機能を開きます。


p. 35

3. Add Rule(s)... をクリックします。


p. 36

4. Reverse Proxy テンプレートを選択します。

5. ダイアログで

• PAS ホストの値を入力します。バックエンドに PrizmDoc Cloud を使用している場合、現時点

では、値 api.accusoft.com/prizmdoc を使用します。

• Enable SSL Offloading チェックボックスをオフにします。


p. 37

• OK をクリックして、新規のルールを作成します。


p. 38

6. ここで、Edit... をクリックして、作成したルールをさらに変更します。

7. Match URLで、Pattern 値を ^pas-proxy/(.*) に変更します。


p. 39

8. Conditions で Remove をクリックして、作成されたデフォルトの {CACHE_URL} ルールを削除します。

9. 次に、このルールを GET リクエストのみに適用するように制限する必要があります (これはビューアが必

要とするすべてです）。 Add...をクリックします


• Condition input を {REQUEST_METHOD} に設定します。


p. 40

• Pattern を GETに設定します。

• OK をクリックして条件を作成します。 Conditions リストは次のようになります。

11. ページの下部にある Actionで、可能であれば https を使用して、Rewrite URLを実際の PASベース

URLに調整します。

• デフォルトの Rewrite URL値は{C:1} で始まり、元のリクエストに基づいて http また

は https を動的に使用します。ただし、PASインスタンスが HTTPSで実行されている場合、

{C:1}を httpsに置き換えて、PASへのすべてのリクエストが HTTPS経由であることを確認

する必要があります。

• バックエンドに PrizmDoc Cloudを使用している場合、Rewrite URLを

https://api.accusoft.com/prizmdoc/{R:1}に変更します。


p. 41

12. Apply をクリックして、ルールへの変更を保存します。


p. 42

13. Back to Rules をクリックします。

最後に、バックエンドに PrizmDoc Cloud を使用している場合、リバースプロキシがすべてのリクエストに

API keyを追加してから PASに送信するようにする必要があります。 PrizmDoc Cloud で

は、 ACS_API_KEY という名前の HTTP要求ヘッダーを介して API key を提供する必要があります。 IISで

は、HTTP_ACS_API_KEY という名前の IISサーバー変数を実際の APIキー値に設定することでこれを実現

できます (URL Rewrite モジュールは、HTTP_ で始まるサーバー変数のリクエストヘッダーを追加し、残り

のサーバー変数に基づいてヘッダー名を作成します名前;詳細については、URL Rewriteモジュールのド

キュメントを参照してください)。

このサーバー変数の設定は 2段階のプロセスです。

まず、HTTP_ACS_API_KEYサーバー変数を定義して、実際に使用できるようにする必要があります。


p. 43

1. URL Rewriteモジュール画面で、View Server Variables...をクリックします。


p. 44

2. Add...をクリックします。


• Server variable name に HTTP_ACS_API_KEY を設定します。


p. 45

• OKをクリックします。 Allowed Server Variables画面は次のようになります。

この変数を許可したので、実際にリバースプロキシで使用する必要があります。


p. 46

1. Back to Rules をクリックして、URL Rewriteルールのリストに戻ります。


p. 47

2. 前に作成したリバースプロキシルールを選択し、 Edit...をクリックします。

3. Server Variables を展開し、Add... をクリックします。


• Server variable name に HTTP_ACS_API_KEYを設定します。


p. 48

• Value を実際の API key に設定します。

• OK をクリックしてこの新しいサーバー変数を作成します。これにより、すべてのリクエスト

に acs-api-keyリクエストヘッダーが追加されてから、PASに転送されます。 Server

Variablesリストは次のようになります。


p. 49

5. Apply をクリックして、ルールへの変更を保存します。

これで、すべての GET /pas-proxy/* 要求を PASにプロキシするように IISサイトまたはアプリケーション

を構成しました。


p. 50

すべてを正しく構成した場合、Webアプリケーションは実際のドキュメントコンテンツを含むビューアを表示す

るはずです。

おめでとうございます。 PrizmDoc Viewer をアプリケーションに統合できました！


p. 51

ＰｒｉｚｍＤｏｃＶｉｅｗｅｒのオンラインドキュメント

https://help.accusoft.com/PrizmDoc/v13.8/HTML/webframe.html#prizmdoc-overview.html

エクセルソフト株式会社

お問い合わせページ: https://www.xlsoft.com/jp/services/contact.html

https://help.accusoft.com/PrizmDoc/v13.8/HTML/webframe.html#prizmdoc-overview.html

https://www.xlsoft.com/jp/services/contact.html

prizmdoc viewer - xlsoft corporation...prizmdoc viewer v13.8 – 入門ガイド p. 10...

Documents