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