ドキュメントビューアは技術的に機能していても、狭い画面では使いにくいと感じられることがあります。ツールバーが密集していたり、コントロールが小さすぎたり、サイドパネルが大きすぎたり、固定サイズのコンテナがあったりすると、シンプルなプレビューがすぐにイライラする体験に変わります。
Windows ベースの ASP.NET および .NET アプリケーション向けに、Doconut はビジネス文書、PDF ファイル、CAD 図面、メールファイル、画像用の組み込みドキュメント閲覧 SDK を提供します。アプリケーションはレイアウト、認証、認可、ストレージ、ドキュメントワークフローを引き続き管理します。
このガイドはその周辺体験に焦点を当てます。埋め込みビューアに十分なスペースを与え、アプリケーションコントロールを快適に使用できるようにし、向きの変化に対応し、未検証の SDK ソースコードに依存せずに実際的なドキュメントをテストする方法を解説します。
ビューアの外側から始まるレスポンシブデザイン
ビューアは親レイアウトが提供するスペースしか使用できません。アプリケーションが狭いカード内に配置したり、固定デスクトップ幅を与えたり、複数の永続パネルで囲んだりすると、ドキュメント領域は窮屈なままです。
次の 3 つの質問から始めましょう。
- このページの主なタスクは何ですか？
- 読み込み中にどのアプリケーションコントロールを常に表示させておく必要がありますか？
- どの二次パネルを折りたたむか、ボタンの背後に移動させることができますか？
専用のドキュメントページでは、ビューアが通常は支配的な要素であるべきです。メタデータ、コメント、承認、ワークフローアクションは、ドキュメントから恒久的なスペースを奪わずに利用可能にしておくことができます。
利用可能なスペースでレイアウトを計画する
レスポンシブ動作は、特定のデバイス名に関する仮定ではなく、コンポーネントに利用可能なスペースに従うべきです。
ワイドレイアウト
広いビューポートでは、ページは次のように表示されることがあります。
- ドキュメントサムネイルまたはナビゲーションパネル
- メインドキュメントキャンバス
- コメントやメタデータ用の二次ワークフローパネル
- フルセットのアプリケーションアクション
二次パネルがドロワーになる場合は、ダイアログの動作、フォーカスマネジメント、アクセシブルなラベリングをデザインシステムに従って追加してください。
アプリケーションコントロールをタッチフレンドリーにする
ビューア周辺のコントロールは、正確なポインタ操作なしで快適に操作できるようにすべきです。
実用的なガイドラインは次のとおりです。
- インタラクティブコントロールのタップ領域はおおよそ 44 × 44 CSS ピクセルとします。
- 破壊的アクションと頻繁に使用するアクションの間に十分な余白を確保します。
- 必要な情報を表示するためにホバーに依存しないでください。
- キーボードユーザー向けにフォーカスインジケータを常に表示します。
- アイコンのみのボタンにはアクセシブルな名前を提供します。
- 重要なコントロールをブラウザやシステムのジェスチャー領域の近くに配置しないでください。
Doconut の内部スタイルを推測したセレクタや未文書化の CSS 変数で上書きしないでください。インストールされた SDK バージョンの公式リソースを使用し、アプリケーションが所有するコンテナとコントロールに対してレスポンシブルールを適用します。
サイドパネルはオプションの作業領域として扱う
サムネイル、検索結果、注釈、メタデータ、ワークフローヒストリーは価値がありますが、すべてが同時にドキュメントと競合すべきではありません。
コンパクトレイアウトでは次のようにします。
- ユーザーが要求したときにのみサイドパネルを開く。
- 閉じた後は、パネルを開いたボタンにフォーカスを戻す。
- 必要に応じてモーダルパネル内にフォーカスをトラップする。
- パネルに明確なタイトルと閉じるアクションを付与する。
- パネルの開閉時にドキュメントの現在位置を保持する。
ビューアが独自のパネルを提供している場合は、二次的なアプリケーションレベルのナビゲーションシステムを追加する前に、ドキュメント化されたレスポンシブ動作をテストしてください。
ドキュメント作業領域を高速に保つ
レスポンシブデザインは見た目だけではありません。大きなドキュメントはメモリ、帯域幅、レンダリングの制約を露呈しやすく、特にページに複雑なダッシュボードやアニメーションが含まれる場合に顕著です。
競合作業を削減する
ユーザーが読んでいる間は装飾的なアニメーションを一時停止し、ビューア周辺の高コストなエフェクトを避け、不要なオブザーバやイベントリスナーを削除します。
レイアウトスペースを確保する
ビューアホストに安定した高さを事前に設定します。これにより大きなレイアウトシフトが防止され、ユーザーが誤って別のコントロールをタップする可能性が減ります。
二次機能は意図的にロードする
コメント、監査履歴、大規模メタデータパネルは必ずしも最初のドキュメントページと同時にロードする必要はありません。ユーザーが関連パネルを開いたときに遅延ロードしてください。
代表的なファイルでテストする
長い PDF、横長スプレッドシート、詳細な CAD 図面、大容量画像、特殊フォントを使用したドキュメントでテストします。小さなサンプルファイルだけでは本番環境での限界を把握できません。
サーバー側でアクセス制御を維持する
レスポンシブな提示はアプリケーションのセキュリティ責任を変えるものではありません。すべてのドキュメントリクエストは引き続き認証とドキュメント固有の認可を通過すべきです。
ASP.NET Core アプリケーションでは、認証ミドルウェア、ポリシー、クレーム、[Authorize] 属性、リソースベースの認可などの標準メカニズムが、ドキュメントを解決するサーバールートを保護します。
アプリケーションは次を実施すべきです。
- サーバー生成のドキュメント識別子を使用する。
- 現在のユーザーが要求されたドキュメントにアクセスできるか検証する。
- ストレージ認証情報や無制限パスをクライアントから遠ざける。
- ビューアページに表示されるエラーをサニタイズする。
- 元ファイルと一時ファイルに対して明示的な保持ポリシーを適用する。
- ドキュメント内容、シークレット、機密アクセス URL のログ記録を避ける。
ダウンロード、印刷、コンテキストメニューのアクションを隠すことは意図したワークフローを支援する場合がありますが、サーバー側認可の代替にはならず、コンテンツが表示された後のすべてのキャプチャ手段を防げるわけではありません。
Doconut をレスポンシブ体験に統合する
Doconut は埋め込みドキュメント閲覧レイヤーを提供し、アプリケーションはレスポンシブシェルとビジネスワークフローを提供します。
合理的な実装手順は次の通りです。
- 必要なフォーマットとビューア機能を確認する。
- .NET アプリケーション向けにサポートされた Doconut パッケージを統合する。
- サーバー側認可でドキュメント解像度を保護する。
- ビューアを流動的な、アプリケーション所有のホストコンテナに配置する。
- アプリケーションツールバーと二次パネルのコンパクト状態を設計する。
- リサイズ、向き、フォーカス、ロード、エラー動作をテストする。
- 本番に近いドキュメントと同時セッションで結果を検証する。
現在の製品情報は、Doconut ビューア製品ページ をご確認ください。バージョン固有のインストールと統合手順は、公式ダウンロードおよびドキュメントページ を使用し、サードパーティ投稿の未文書化 SDK 例をコピーしないでください。
レスポンシブビューアレビューチェックリスト
レイアウト
- ビューアがページの最も大きな有用領域を占めている。
- 固定幅が水平スクロールを強制しない。
- 二次パネルがきれいに折りたたまれる。
- ビューポートの高さが制限されてもレイアウトが使える。
- ローディングとエラーステートが適切なスペースを確保している。
インタラクション
- アプリケーションコントロールのターゲットサイズが快適である。
- 重要なアクションがホバーに依存しない。
- アイコンのみのコントロールにアクセシブルな名前が付いている。
- フォーカスが見え、論理的な順序で遷移する。
- ドロワーとダイアログが正しくフォーカスを返す。
ドキュメント
- 大容量 PDF がナビゲート可能である。
- 横長スプレッドシートがページレイアウトを崩さずに検査できる。
- 詳細図面が使用可能なズームとパン領域を保持する。
- 長いファイル名とエラーメッセージがオーバーフローしない。
- レイアウトサイズ変更がドキュメントの不要な再読み込みを引き起こさない。
セキュリティと運用
- サーバーがすべてのドキュメントリクエストを認可する。
- ストレージの詳細が非公開のままである。
- ファイルと一時データの保持が文書化されている。
- エラーとログに機密情報が含まれない。
- リソース制限と同時セッションの挙動がテストされている。
よくある質問
アプリケーションは電話用とデスクトップ用に別々のビューアページを維持すべきですか？
通常は不要です。単一のレスポンシブページの方が保守しやすく、利用可能なスペースに応じてレイアウトを変え、二次コントロールを段階的に公開します。
アプリケーションはビューアの内部 CSS を上書きできますか？
未文書化のセレクタや変数は避けてください。ホストコンテナと独自のアプリケーションコントロールをスタイリングし、導入している Doconut バージョンで文書化されたカスタマイズポイントのみを使用します。
コンパクトレイアウトでダウンロードと印刷ボタンを隠すべきですか？
これは製品上の判断であり、セキュリティ境界ではありません。アクションが許可されているがスペースに合わない場合は、アクセシブルなオーバーフローメニューに配置してください。許可されていない場合は、サーバー側でそのポリシーを実装します。
大容量ドキュメントはどのようにテストすべきですか？
実際のページ数、ファイルサイズ、フォント、図面、スプレッドシートを反映したサニタイズ済みテストコレクションを作成します。SDK、.NET、Windows Server、レイアウトの変更後にスイートを再実行してください。
結論
強力なモバイルドキュメント体験は、流動的なコンテナ、ドキュメント優先のレイアウト、快適なコントロール、オプションのサイドパネル、予測可能なリサイズ動作、そしてサーバー側認可から始まります。
Doconut は Windows ベースの .NET アプリケーション内で閲覧機能を提供できます。チームはレスポンシブなアプリケーションシェル、セキュリティルール、ワークフローに集中し、ビューアを製品の自然な一部として感じさせることができます。