開発者が .NET、React、Angular、Vue Web アプリに PDF、Office、CAD ビューアを組み込んでユーザーフレンドリー性と効率性を向上させる方法：ステップバイステップ
文書が大量に扱われる .NET アプリケーションを、ユーザーが本当に使いやすいものに変えたいのであれば、PDF、Word、Excel、PowerPoint、そして CAD 図面までを すべて 扱えるビューアが必要です。その上、デスクトップアプリのダウンロードを強要したり、外部のクラウドサービスに依存したりしないことが条件です。そこで Doconut が登場します。Doconut はサーバーサイドのドキュメントビューアで、レンダリングされたページを対応ブラウザにストリーミングし、ネイティブの注釈、全文検索（OCR 含む）、制御された印刷機能を標準で提供します。本ガイドでは、ASP.NET Core バックエンドで Doconut の変換エンジンを設定するところから、React、Angular、Vue のフロントエンドへビューアを埋め込むまでの全工程を順を追って解説します。スムーズで効率的な文書体験を提供する準備はできましたか？さっそく始めましょう。
1. エンタープライズ Web アプリに専用ビューアが重要な理由
「ダウンロードして開く」隠れたコスト
多くのレガシーポータルは、単に共有フォルダ上のファイルへのリンクを貼るだけです。ユーザーがクリックするとファイルがダウンロードされるか、ローカルにインストールされたプログラムで開かれます。実際には次のような問題が発生します。
- コンテキストの喪失 – ユーザーはポータルを離れ、別ウィンドウで文書を開き、元の位置を覚えておく必要があります。
- レンダリングの不一致 – ローカルにインストールされた Word、Excel、CAD ビューアはファイルをそれぞれ異なる方法で解釈し、レイアウトのずれが生じ、法的あるいは技術的な判断に影響を与える可能性があります。
- セキュリティリスク – ファイルが社内ネットワークの外へ流出し、監査ログやデータ損失防止（DLP）ポリシーの管理が困難になります。
- 生産性の低下 – レビュー担当者は注釈、検索、印刷だけのために複数のツールを使い分けなければならず、承認プロセスが遅延します。
開発者が実際に求めているもの
現代的なソリューションは次の要件を満たすべきです。
- ブラウザ上で全てのサポート形式をレンダリングできること（PDF、DOCX、XLSX、PPTX、DWG、DXF など）。
- .NET バックエンドおよび React、Angular、Vue フロントエンド向けにクリーンな API を提供すること。
- 追加ライブラリを導入せずに、注釈、全文検索（OCR 含む）および制御された印刷機能を備えていること。
- 安全にスケールできること――サーバー側で文書を処理し、画像タイルとしてストリーミングし、クライアントに生ファイルを一切公開しないこと。
Doconut はこれらすべての要件を満たします。そのビューアライブラリは .NET サーバー上で動作し、ソース文書をオンデマンドでラスターページに変換し、対応フロントエンド統合が利用できる軽量 HTTP エンドポイントを通じてページを配信します。
2. ASP.NET Core アプリケーションで PDF 変換のために Doconut ミドルウェアを設定する
最初のステップは Doconut のミドルウェアを登録し、バックエンドが文書タイル、サムネイル、注釈データを提供できるようにすることです。これは ASP.NET Core のリクエストパイプラインで行われ、キャッシュとリクエストコンテキスト用のサービス登録が数件必要なだけです。
ミドルウェアの登録
ConfigureServices で必要なサービス（分散メモリキャッシュと HTTP コンテキストアクセサ）を追加します。その後、Configure で Doconut エンドポイント（通常は DocImage.axd）を Doconut ミドルウェアにマッピングします。ミドルウェアのオプションにより、安全なレンダリングを強制し、内部診断情報をエンドユーザーから隠すことができます。
ライセンスの初期化
Doconut は起動時にライセンスファイルが必要です。一般的な方法は、ライセンスをリソースとして埋め込み、アプリケーション起動時にストリームとして読み込むことです。ライセンスストリームが Doconut ビューアインスタンスに提供されると、SDK が完全に有効化され、文書処理の準備が整います。
文書を開いてトークンを取得する
ユーザーが文書を要求すると、バックエンドは Doconut の API を通じてファイルを開き、パスワード保護、画像解像度、タイムアウトなどのオプションパラメータを渡します。Doconut は開かれた文書を一意に表す短いトークン（通常は GUID）を返します。フロントエンドはこのトークンをすべてのタイルリクエストに含めます。例：/DocImage.axd?token=abcd1234&page=1&zoom=100。
3. JavaScript フレームワーク向けの安全な文書ストリーム API を公開する
Doconut はミドルウェア経由で低レベルのタイルハンドラを提供していますが、ほとんどのチームは認証、ロギング、オプションの透かし処理を追加する薄いラッパーコントローラを好みます。
典型的なコントローラの責務
- オープン エンドポイント – 文書識別子を受け取り、実際のファイルパスを解決し、Doconut に文書を開かせ、生成されたトークンを返します。
- サムネイル エンドポイント – 指定ページの小さな PNG を返し、ナビゲーションストリップに利用できます。コントローラは適切なクエリ文字列で Doconut タイルハンドラへリダイレクトするだけで済みます。
セキュリティ上の考慮点
トークンはユーザーのセッションに保存するか、短時間有効な JWT クレームに埋め込みます。トークン単体ではサーバー側キャッシュなしに元のファイルを取得できないため、文書は保護されたままです。同じ REST API が本ガイドで説明した React、Angular、Vue の統合パターンをすべてサポートします。
4. React アプリケーションへのビューア埋め込み
React 開発者は次のような関数コンポーネントを作成できます。
/openエンドポイントを呼び出し、要求された文書のトークンを取得する。- 各ページの Doconut タイルハンドラを指す画像 URL の配列を構築する（最初の 10 ページから開始し、必要に応じて追加読み込みできる）。
- ページを
<img>要素としてレンダリングし、スクロールやズームイベント時に URL パラメータを更新して表示を切り替える。
Doconut の JavaScript 統合ポイントとの連携
Doconut はページに軽量な JavaScript ヘルパーを注入します。このヘルパーを通じて次のような操作が可能です。
- 用語のハイライト – 文書全体に対して全文検索を実行し、該当する単語をハイライト表示します。
- 注釈の追加 – ページ番号、注釈タイプ、座標、追加データを含む JSON ペイロードを送信し、特定のページに付箋、スタンプ、または描画を配置します。
重いレンダリング処理はサーバー側に残るため、React のバンドルサイズは小さく抑えられ、UI は高い応答性を保ちます。
5. Angular と Vue へのビューア埋め込み – 再利用可能なコンポーネントパターン
Angular
.NET の小さな API（文書を開く、サムネイル取得）を鏡像する Angular サービスを作成します。サービスは HttpClient を使用してバックエンドエンドポイントを呼び出し、トークンを Observable として返します。
次に、コンポーネントの初期化時にトークンを取得し、ページ画像 URL を組み立て、*ngFor で画像を表示します。コンポーネントは React の例と同様に、注釈や検索のために Doconut の JavaScript ヘルパーを呼び出すボタンを提供できます。
Vue
Vue では created ライフサイクルフックを利用して fetch または axios でトークンを取得するコンポーネントを定義します。取得したトークンと生成したページ URL をコンポーネントの data に保存し、v-for ループでページを描画します。Vue のリアクティビティにより、ユーザーがスクロール、ズーム、または Doconut の JavaScript ヘルパーを通じて注釈操作を行った際にビューが自動的に更新されます。
3 つのフレームワークは同一のバックエンド契約を共有しているため、ASP.NET Core のコントローラを変更せずにそのまま再利用できます。
結論
フル機能のドキュメントビューアを埋め込むために、サードパーティプラグインの寄せ集めや高価なクラウドサービスはもはや必要ありません。Doconut を利用すれば、開発者は PDF、Office、CAD ファイルをサーバーサイドでレンダリングし、注釈、OCR による全文検索、制御された印刷機能を提供する単一のライブラリを手に入れられます――すべて文書を安全かつスケーラブルに保ちます。
.NET、React、Angular、Vue アプリケーションで文書体験を向上させる準備はできましたか？Doconut を今すぐお試しください、そしてユーザーが喜ぶ洗練されたエンタープライズ向けビューアをいかに迅速に提供できるかをご確認ください。