ビューポートとは何ですか？

スクレイピングなしのスクレイピングブラウザは、ビューポート設定によってページレイアウトとキャプチャ出力が形成される管理されたブラウザ環境で自動化を実行できます。

ビューポートとは何ですか？

ビューポートは、ブラウザが文書を表示するための長方形の領域です。通常のデスクトップブラウジングでは、ブラウザウィンドウ内のページコンテンツ領域に大まかに一致します。ビューポートを超えるコンテンツはまだ文書内に存在しますが、スクロール、ズーム、サイズ変更、または他のレイアウト変更によって表示されるまで目に見えません。

ビューポートは、画面解像度、ブラウザウィンドウサイズ、スクリーンショットサイズ、または文書寸法と同じではありません。ブラウザのコントロールは、ヘッドフルウィンドウの一部を消費し、デバイスピクセル比はCSSピクセルとデバイスピクセル間のマッピングを変更し、フルページのスクリーンショットは現在のビューポートよりもはるかに高いコンテンツをキャプチャできます。

正確な定義は、チームがツールを選択し、失敗を診断するのに役立ちます。エンジニアが複数の層に対して一つの言葉を使用すると、クッキーの問題がブラウザの問題と間違えられたり、ビューポートの不一致が欠落データと間違えられたり、閉じた制御接続が失われたプロファイル状態と間違えられたりします。境界を名付けることで修正が小さくなります。

ビューポートがレンダリングを変更する方法

ビューポートがレンダリングを変更する方法は、ブラウザと自動化クライアントによって制御される状態遷移のシーケンスとして理解できます。正確なAPIは異なりますが、ナビゲーション、レンダリング、ストレージ、入力、観察、クリーニングは荷重を支える部分のままです。

レイアウトビューポート

レイアウトビューポートは、レスポンシブレイアウト、メディアクエリ、パーセンテージサイズ、ビューポート相対ユニットによって使用される参照領域を提供します。これを変更することで、異なるナビゲーションメニュー、グリッド、またはコンテンツ密度が選択されることがあります。

レイアウトビューポートは、生産環境で観察可能であるべきです。これに影響を与える設定を記録し、ページが必要な状態に達するポイントで証拠をキャプチャし、リソースを意図的に閉じます。その実践により、ブラウザの実行がある機械でのみ機能する一連の操作ではなく、説明可能な操作に変わります。

視覚ビューポート

視覚ビューポートは、現在ユーザーに表示されている部分です。ピンチズームとオンスクリーンキーボードは、レイアウトビューポートが安定している間、視覚領域を縮小または移動させることがあります。

視覚ビューポートは、生産環境で観察可能であるべきです。これに影響を与える設定を記録し、ページが必要な状態に達するポイントで証拠をキャプチャし、リソースを意図的に閉じます。その実践により、ブラウザの実行がある機械でのみ機能する一連の操作ではなく、説明可能な操作に変わります。

デバイスピクセル比

CSSピクセルはレイアウト座標を記述し、物理的または画像ピクセルはラスター出力を記述します。デバイスピクセル比はそれらの空間を接続し、スクリーンショットの寸法と画像の鮮明さに影響を与えます。

デバイスピクセル比は、生産環境で観察可能であるべきです。これに影響を与える設定を記録し、ページが必要な状態に達するポイントで証拠をキャプチャし、リソースを意図的に閉じます。その実践により、ブラウザの実行がある機械でのみ機能する一連の操作ではなく、説明可能な操作に変わります。

ブラウザの用語は、主要な定義に結びついているときに使用が容易になります。 MDNビューポート用語集 コア概念を最も直接的に説明します、 MDNビューポートの概念 隣接する制御またはアーキテクチャの境界を定義し、 W3C WebDriver仕様書 第二の実装視点を提供します。これらの情報源は基準とブラウザの動作を説明しますが、製品の選択は依然としてワークフロー、セキュリティモデル、およびターゲット環境に依存します。

ビューポート、ウィンドウ、スクリーン、およびドキュメント

ビューポート、ウィンドウ、スクリーン、およびドキュメントは、カジュアルな議論でしばしばまとめられる用語を分けます。表は、ブランド固有のAPI名ではなく、所有権と運用効果に焦点を当てています。

これらのカテゴリは一つのアーキテクチャの中で共存できます。クラウド割り当ては、ヘッドレスChromiumプロセスを実行し、隔離されたコンテキストを作成し、いくつかのページを開き、各ページにひとつのビューポートを適用し、持続的なプロファイルを接続できます。このアーキテクチャは、各名詞がそれぞれの役割を果たすときにのみ理解可能です。

ビューポートの一般的な使用法

ビューポートは、その特定の境界が運用リスクを減少させたり、ブラウザの動作を測定可能にする場合に有用です。これらの一般的な使用例は、各パターンが実際に満たす要件を示しています。

ビューポートの背後にある状態モデル

信頼性のあるビューポートワークフローは、構成、ランタイム状態、ウェブサイト状態、及び証拠を分離します。構成とは、オペレーターが開始前に選択するもので、ブラウザのビルド、起動モード、ロケール、タイムゾーン、権限、ビューポート、及びネットワークルートが含まれます。ランタイム状態は、割り当てられたプロセス、コンテキスト、ページ、メモリ、オープン接続、及び制御チャネルをカバーします。ウェブサイト状態には、クッキー、オリジンストレージ、サーバーサイドアカウントレコード、及び現在レンダリングされている文書が含まれます。証拠とは、何が起こったかを説明するために使用される記録です。

これらのレイヤーは異なるライフタイムを持っています。ページは、そのコンテキストのクッキーが残ったまま閉じることができます。コンテキストは、持続的なプロファイルがディスク上で生き続ける間に閉じることができます。リモートコントロール接続は、サービスがブラウザを短期間所有している間に消失することがあります。ウェブサイトログインは、自動化セッションが終了した後も有効のままになる場合があります。したがって、クリーンアップはワークフローが作成した各レイヤーに対して明示的なアクションを必要とします。

ステートオーナーシップは、並列処理も制御します。一つのコンテキスト内の二つのページが意図的に認証を共有することはありますが、二つの独立したジョブは通常共有すべきではありません。一つのブラウザ内の二つのコンテキストは、同じプロセスリソースに対抗しながらクッキーを隔離できます。二つの持続的なブラウザ起動は、同じアクティブユーザーデータディレクトリを指してはなりません。安全な同時実行の単位は、隔離と共有リソースの制限によって決定されます。

制御秘密を明かすことなく相関識別子を使用します。ジョブIDは、アプリケーションログ、ブラウザイベント、スクリーンショット、及び最終出力を接続できます。セッションエンドポイント、クッキー値、認証ヘッダー、またはプロファイルアーカイブはその役割を果たすべきではありません。なぜなら、ログを読む人がブラウザまたはアカウントにアクセスできる可能性があるからです。後のクリーンアップに頼るのではなく、ログの境界で値を削除します。

ビューポートの可視性

可視性は四つの質問に答えるべきです：どの環境が実行されたか、ブラウザが何を見たか、コントローラーが送信したアクションは何か、ワークフローがなぜタスクを完了と見なしたのか。役立つイベント記録には、タイムスタンプ、相関ID、ナビゲーション後のページURL、アクション名、非秘密パラメータ、所要時間、結果、および短いエラー分類が含まれます。必要な証拠でない限り、ページ内容を避けるべきです。

失敗モードによってアーティファクトを選択します。ネットワークイベントは、リソースがブロックまたはリダイレクトされたときに役立ちます。DOMスナップショットは、予想される要素が存在しない場合や、構造が異なる場合に役立ちます。スクリーンショットは、オーバーレイがコントロールを覆っている場合、レスポンシブレイアウトが変更された場合、またはフォントがジオメトリを変更する場合に役立ちます。ストレージメタデータは、ログイン状態が消失したときに役立ちます。録音は、いくつかの相互作用の順序が重要な場合に役立ちますが、センシティブな情報をキャプチャできるため、慎重に保持すべきです。

完了チェックは、それが検証するアクションの隣に属します。ナビゲーション後にURL、レスポンス、またはページマーカーを確認します。入力後にフィールド値または結果の状態を検証します。クリック後に、ルート、ダイアログ、ネットワークリクエスト、またはそれが引き起こすべき文書の変更を確認します。抽出後に、必要なフィールドとデータ型を検証します。例外なしで戻ったコマンドは、意図されたユーザーに見える結果が発生した証拠ではありません。

運用ダッシュボードは、製品の健康状態をターゲットページの変動から区別する必要があります。ブラウザ割り当ての失敗、制御チャネルの失敗、レンダラーのクラッシュ、ターゲットHTTPレスポンス、アプリケーションレベルの空の状態、及びセレクタの不一致は、異なるラベルを必要とします。それらを一つの一般的な失敗率に統合すると、注意が必要なレイヤーが隠れ、狭い問題に対して広範な変更を促します。

制限と失敗モード

モバイルユーザーエージェントを備えたデスクトップサイズのビューポートは、真のモバイル環境ではありません。レスポンシブサイトは、いくつかの信号を考慮し、一部のアプリケーションはタッチサポート、デバイススケール、方向、またはクライアントヒントを観察します。再現可能なキャプチャのためには、完全なエミュレーション構成を記録し、スクリーンショットを撮る前にレイアウトのシフト、フォント、及び関連するコンテンツを待ちます。

ほとんどの失敗は、証拠が正しいレイヤーでキャプチャされると分類が容易になります。ナビゲーションレスポンスは、輸送とサーバーの動作を説明します。DOMはレンダリングされた構造を説明します。スクリーンショットは可視レイアウトを説明します。ストレージ検査はクッキーとオリジン状態を説明します。セッションログはライフサイクルを説明します。これらのアーティファクトのいずれも他のすべてを置き換えることはできません。

固定遅延は弱い完了シグナルです。なぜなら、ページは普遍的な時間内に終了しないからです。タスクに結びついた条件を優先してください：ルートが決まる、見出しが表示される、既知のリクエストが完了する、制御が有効になる、または期待されるデータが存在する。欠落した条件が有用な証拠で終わるように、制限付きのタイムアウトを設定してください。

開発、ステージング、および本番

開発は可視性と迅速な診断を重視します。小さな代表ケースを実行し、ブラウザの状態を公開し、スクリーンショットやトレースをコードに近く保ちます。ステージングは本番構成を反映しながら、制御されたアカウントとターゲットを使用する必要があります。本番は決定論的な入力、最小限の権限、制限されたリソース使用、構造化されたテレメトリ、および自動クリーンアップを重視します。これらの環境を移動することは、ナビゲーションロジックを再記述するのではなく、構成を変更すべきです。

バージョン管理はブラウザの動作にもアプリケーションコードにも適用されます。プラットフォームが許可する場合、互換性のあるブラウザと自動化クライアントのバージョンを固定し、アップグレードの前にリリースノートを確認し、集中した互換性スイートを実行します。このスイートは、ナビゲーション、ストレージ、入力、ダウンロード（使用する場合）、スクリーンショット、およびワークフローが依存するプロトコル機能をカバーする必要があります。合格したページタイトルチェックはブラウザのアップグレードには浅すぎます。

キャパシティプランニングは、ページから始まります。普遍的なマシンあたりのブラウザ数ではなく、代表的な作業のためにメモリ、CPU、ネットワークトラフィック、ページの持続時間、およびアーティファクトのサイズを測定してください。重いクライアント側アプリケーション、ビデオ、大きなキャンバス、そして多数の開いているページはコストプロファイルを変えます。観察されたリソース使用とサービス制限から同時実行性を設定し、関連しないセッションが不安定にならないように余裕を残してください。

本番のクリーンアップは冪等性を持つべきです：部分的な失敗の後に呼び出しても、存在するページ、コンテキスト、セッション、および一時ファイルを閉じるべきです。クリーンアップログは、秘密の値を出力せずにどのリソースが解放されたかを確認すべきです。永続的なプロファイルは別途処理されます。なぜなら、意図的に耐久性のあるプロファイルを削除することは通常のジョブクリーンアップではないからです。

セキュリティ、プライバシー、および責任ある使用

ブラウザ環境は、資格情報、個人データ、ダウンロード、そして承認されたアカウントのみが可視だったコンテンツを保持できます。アカウントとオペレーターには最小限の権限を適用し、秘密をソースファイルから排除し、録画へのアクセスを制限し、文書化された保持ポリシーの下で状態を削除してください。便利なデバッグアーティファクトは、検証なしに共有されるとデータ漏洩に変わる可能性があります。

自動化は、許可なしにプライベート、機密、または制限された情報にアクセスするために使用してはいけません。ウェブサイトの利用規約、適用される場合はロボットガイダンス、契約上の義務、およびデータと管轄の法律を確認してください。技術的能力は承認を確立しません。

フィンガープリンティング関連の構成は特別な注意が必要です。言語、ディスプレイ、コーデック、フォント、設定などのブラウザの特性は、引用された基準およびプライバシーガイダンスに記載されているように、識別に寄与する可能性があります。このような制御を互換性、孤立、承認されたテストのために使用してください。人を偽装したり、虐待的な行動を隠すために使用しないでください。

適切なセットアップを選択する方法

検証が必要な製品状態からビューポートサイズを選択してください。流行のデバイスのリストからではありません。重要なブレークポイントのすぐ下とすぐ上でテストし、少なくとも1つの狭い状態と1つの広い状態を含め、成功したスクリーンショットがページが使用可能であることを意味するとは限らないので、オーバーフローを確認してください。

• 必須の成果から始めてください。 ワークフローが生成すべきページの状態、データ、相互作用、または証拠を定義してください。
• 最小の状態境界を選択してください。 ページ、コンテキスト、セッション、またはプロファイルは、タスクが要求するよりも長く生きるべきではなく、より多くのデータを共有すべきではありません。
• 環境入力を明示化してください。 ブラウザのビルド、ロケール、タイムゾーン、ビューポート、権限、及びネットワークルートは結果を変更する可能性があります。
• スケール前に観測性を設計してください。 ネットワーク、レンダリング、セレクター、ストレージ、ライフサイクルの失敗を区別するのに十分な証拠をキャプチャしてください。
• 故意にクローズしてクリーンアップしてください。 リモートリソースを解放し、一時的な状態を削除し、承認されたアーティファクトのみを保持してください。

その Scrapeless Scraping Browserドキュメント は管理されたセッションの表面を説明し、 Scrapeless Scraping Browser製品ページ は製品のクラウドブラウザ自動化における役割を説明します。これらの製品の参照は標準リンクを補完し、一般的な定義を変更するものではありません。

結論

ビューポートはマーケティングラベルではなく、正確な建築用語として最も役立ちます。その価値は、所有する状態、可能にするブラウザの動作、および作成する運用境界から来ます。それらの特性を明示的に保つと、ローカル、リモート、永続的、孤立、可視、無人実行の間の選択が明確になります。

本番作業のために、その定義を具体的な証拠と組み合わせてください：既知の開始状態、有意義な完了条件、保護されたログ、および故意のクリーンアップ。その組み合わせにより、ブラウザ自動化はレビュー、デバッグ、およびメンテナンスが容易になります。