クライアントサイド vs サーバーサイドのドキュメント表示: メリット、デメリットと選び方

フロントエンドとバックエンドそれぞれのドキュメントビューアの特長を比較し、用途に応じた最適な選択を解説します。パフォーマンス、スケーラビリティ、セキュリティ、コンプライアンスなど、重要な判断ポイントを整理します。

はじめに
比較: クライアントサイド vs サーバーサイド
なぜ Web アプリで PDF 表示が必要なのか
技術的な違い: 処理はどこで行われるのか
1. クライアントサイドのドキュメントビューア
2. サーバーサイドのドキュメントビューア
セキュリティとコンプライアンスの考慮点
1. コードがユーザーに見える
2. クライアント端末は管理外
どちらを選ぶべきか
1. サーバーサイドが適しているケース
2. クライアントサイドが適しているケース
Apryse での実装方法
1. WebViewer (クライアントサイド)
2. WebViewer Server (サーバーサイド)
よくある質問（FAQ)
まとめ

はじめに

クライアントサイドとサーバーサイドの違いは、よくレストランに例えられます。

クライアントサイドの場合、ハンバーガーはバンズやパティ、具材が別々に提供され、最終的な組み立ては利用者側で行います。一方、サーバーサイドでは、完成したハンバーガーがそのまま提供されます。

どちらにもメリットとデメリットがあり、厨房の設備や来店数によって適した方式は変わります。

JavaScript ベースのドキュメント SDK である Apryse WebViewer は、PDF、Microsoft Office、CAD などを完全にクライアントサイドで表示可能です。ブラウザーと端末側の処理能力を活用するため、サーバーとの通信を最小限に抑え、高速な表示を実現します。

一方で、サーバーサイド処理は、認証、データベース処理、決済、文書生成など、高いセキュリティや計算処理が求められる用途で主に利用されます。

比較: クライアントサイド vs サーバーサイド

項目	クライアントサイド	サーバーサイド
処理	ブラウザー上の JavaScript	サーバー上で実行
パフォーマンス	端末性能に依存	サーバー性能に依存
スケーラビリティ	大規模ユーザーに適する	利用量に応じてコスト増
セキュリティ	ISO/IEC 27001:2022 認証、SOC 2 Type II 準拠	データをサーバーに集約
主な用途	多くの一般的なケース	大容量、複雑な文書

一般的なドキュメント表示ではクライアントサイドが適していますが、大規模で複雑な文書ではサーバーサイドが有利になる場合もあります。

なぜ Web アプリで PDF 表示が必要なのか

HTML でもコンテンツ表示は可能ですが、法務、医療、金融などの分野では、文書のレイアウトやフォントを正確に維持する必要があります。PDF は構造が固定されているため、どの環境でも同じ見た目を保証できる点が重要です。

HTML はレスポンシブレイアウトであるため、ウィンドウサイズによって表示が変わります。使用状況によっては、ユーザーがコンテンツを表示する方法にこのようなばらつきが生じることは望ましくありません。

Web アプリに PDF 表示機能を組み込むことで、以下のメリットがあります。

ファイルダウンロードを不要にする
アプリ内での操作を完結させる
フォーム入力や電子署名などのワークフローと連携

技術的な違い: 処理はどこで行われるのか

ドキュメント表示は、スクロールやズームなどユーザー操作に応じて動的に描画されます。この処理は以下のどちらかで実行されます。

クライアントサイド: ブラウザー内で処理 (低遅延で高速)
サーバーサイド: サーバーで処理し結果を返す (高負荷対応)

クライアントサイドのドキュメントビューア

Apryse WebViewer のような Web SDK では、JavaScript ライブラリがユーザー操作 (ボタン操作、スクロール、レンダリングなど) に応じてページをリアルタイムで更新します。サーバーとの通信が不要なため低遅延で、ユーザーにとって快適な閲覧体験を提供します。

サーバーサイドのドキュメントビューア

サーバーサイドでは、ユーザーが UI 要素を操作するたびにサーバーにリクエストが送信され、処理結果が返ってきます。これにより遅延が生じることがありますが、大容量で複雑な文書や非力なデバイス (モバイル、旧式ブラウザなど) に対しては、クライアントサイドより優れたパフォーマンスを発揮する場合があります。ただし、サーバーコストとネットワーク負荷の増加には注意が必要です。

セキュリティとコンプライアンスの考慮点

クライアント端末とサーバーでは、脆弱性や攻撃ベクトルが異なります。最大の違いは、機密データがどこに存在するかという点です。

コードがユーザーに見える

クライアントサイドでは、スクリプトがブラウザで実行されるため、コードがユーザーに見える状態になります。このため、認証処理などはサーバーサイドより安全性が低いと見なされる場合があります。

文書についても同様で、サーバーサイドでは文書がクライアント端末にダウンロードされません。DRM (デジタル著作権管理) や閲覧専用要件、データ抽出防止が求められるケース (例: 著作権保護された雑誌など) では、サーバーサイドが有効な選択肢となります。

クライアント端末は管理外

開発者はクライアント端末を完全には制御できません。古いブラウザやマルウェアなどによるセキュリティリスクが存在します。しかし Apryse WebViewer はセキュリティを重視して設計されており、以下の認証を取得しています：

ISO/IEC 27001: 2022 認証：情報セキュリティマネジメントシステム (ISMS) が国際標準に準拠。2018年より認証を継続取得
SOC 2 Type II 認証: セキュリティ、可用性、機密性に関する信頼サービス基準を毎年の監査で継続確認

クライアントサイド処理の重要なメリットのひとつは、データがブラウザの外に出ないことです。

どちらを選ぶべきか

サーバーサイドが適しているケース

文書のダウンロードやコピーを防ぎたい
クライアント端末の性能が低い
高いセキュリティ要件がある
高コストや遅延を許容できる

クライアントサイドが適しているケース

大量ユーザーに対応する必要がある
高速でレスポンスの良い UI が求められる
ドキュメント操作をアプリ内で完結させたい

Apryse での実装方法

WebViewer (クライアントサイド)

高速かつ高精度なドキュメント表示を提供する JavaScript ライブラリです。簡単に組み込み可能で、UI のカスタマイズや高度なドキュメント操作にも対応します。

WebViewer({ 
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf' 
}, document.getElementById('viewer')).then(instance => { 
  // WebViewer の初期化が完了した後の処理をここに書く
});

実際の動作は Apryse Showcase でお試しいただけます。

WebViewer Server (サーバーサイド)

WebViewer Server は、Apryse SDK をベースに構築されたバックエンドコンポーネントです。サーバー側でレンダリングと処理を行い、WebViewer クライアントとシームレスに連携します。Docker コンテナまたは Tomcat サーバーとして展開可能です。

主な特長：

クロスプラットフォームの互換性確保
モバイルデバイスや古いブラウザでの表示信頼性の向上
大容量、複雑な文書の効率的な処理

このサンプルコードは、WebViewer Server を使用して WebViewer をインスタンス化し、ドキュメントを読み込むために WebViewer コンストラクタを呼び出す方法を示しています。ローカルファイルをアップロードしたり、公開されているファイルを読み込むことができます。

//
// 実行するには WebViewer Server の起動が必要です
// eslint-disable-next-line no-undef
const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;

const startWebViewer = () => {
  WebViewerConstructor(
    {
      path: '../../../lib',
      webviewerServerURL: hostname,
      initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
    },
    document.getElementById('viewer')
  ).then(instance => {
    samplesSetup(instance);
    document.getElementById('select').onchange = e => {
      instance.UI.loadDocument(e.target.value);
    };

    document.getElementById('file-picker').onchange = e => {
      const file = e.target.files[0];
      if (file) {
        instance.UI.loadDocument(file);
      }
    };

    document.getElementById('url-form').onsubmit = e => {
      e.preventDefault();
      instance.UI.loadDocument(document.getElementById('url').value);
    };
  });
};

let hostname = 'http://localhost:8090/';
if (window.location.hostname.includes('apryse.com')) {
  hostname = 'https://demo.apryse.com/';
}

const healthFunc = () => {
  if (this.status >= 500) {
    alert(`${hostname} の WebViewer Server がヘルスチェックに失敗しました。接続できません...`); // eslint-disable-line no-alert
  } else if (this.status === 404) {
    alert(`${hostname} に WebViewer Server が見つかりません。\`npm run webviewer-server\` を実行してください。`); // eslint-disable-line no-alert
  } else if (this.status >= 400) {
    alert(`${hostname} の WebViewer Server に到達できません。`); // eslint-disable-line no-alert
  } else {
    startWebViewer();
  }
};

// サーバーが動作しているか確認するためのヘルスチェック
const healthCheck = new XMLHttpRequest();
healthCheck.onreadystatechange = () => {
  if (healthCheck.readyState === 4 && healthCheck.status === 0) {
    alert(`WebViewer Server ${hostname} が見つかりません。WebViewer リポジトリで \`npm run webviewer-server\` を実行してください...`); // eslint-disable-line no-alert
  }
};

healthCheck.addEventListener('load', healthFunc);
healthCheck.open('GET', `${hostname}blackbox/health`);
healthCheck.send();