次の方法で共有

カスタム パターンを使用するテスト フォーム

注

コミュニティの関心グループが Yammer から Microsoft Viva Engage に移行されました。 Viva Engage コミュニティに参加し、最新のディスカッションに参加するには、「 Finance and Operations Viva Engage Community へのアクセスを要求する 」フォームに入力し、参加するコミュニティを選択します。

この記事では、カスタム パターンを使用してフォームをテストする方法について説明します。

概要

フォーム パターンに従うことによって、さまざまなメリットが得られます。 たとえば、フォームのパターンは正しくレイアウト プロパティを設定して、フォームが応答しやすいように配置されます。 ただし、フォーム パターンの補充が欠落している場合 (たとえば、現在多くの拡張コントロールのサポートがない場合)、またはフォームまたはコンテナーに任意のパターンに適合しない固有の要件/用途がある場合、開発者はカスタムにパターンを設定できます。 開発者は、正しい、応答フォーム レイアウトを作成する責任を負います。

カスタム パターンを使用したフォーム

カスタム パターンを使用するフォームは、フォーム パターン レポートを使用することにより見つけることができます。 レポートを実行する詳細については、フォーム パターン アドイン を参照してください。レポートを実行した後、パーセンテージ補充されるコントロール列をフィルター処理して 100% 補充より少ないフォームを表示します。 最上位レベルのカスタム パターンを持つフォームについては、カスタムがパターン列に表示されます。

コンフィギュレーションのテスト

キー ソリューション

  • 1366 × 768 は、画面サイズが 12 ～ 23 インチの標準的な解像度です。 したがって、この解決策はテストのための良いベースラインを提供します。
  • 1920 × 1080 など高解像度でもテストすることをお勧めします。

パラメーター

  • ブラウザー
    • Internet Explorer 11
    • グーグルクローム
    • Microsoft Edge
    • Apple Safari (iPad) – Safari でクラウド URL を指定する必要があります。
      • ランドスケープおよびポートレート モード
  • 密度
    • 低密度
    • 高密度
  • ビューポートのサイズ
    • 最大化されたウィンドウ
    • タブレットで縦モードをシミュレートするスナップ ビュー (画面の半分)
  • ズーム
    • 50 ～ 200 パーセント

ステップ

以下の手順を実行します。 各ステップで、フォームのレイアウトの問題を確認します。 検証の一環として、すべてのタブ ページ、および展開/折りたたみコンテンツのグループを確認します。

  1. 全画面のサイズでブラウザー ウィンドウを開き、(低密度で) フォーム/コントロールへ移動します。 1366 × 768 の解像度でテストを開始することをお勧めします。
  2. Windows ロゴ キー + 左方向キーを押し、ブラウザー ウィンドウをスナップ ビューに切り替えます (画面の半分)。
  3. ブラウザーを横幅最大までゆっくりと横方向にサイズ変更します。 ときどき停止して、フォーム レイアウトを評価します。
  4. ブラウザーを高さ最大から画面の半分の高さまでゆっくりと縦方向にサイズ変更します。 ときどき停止して、フォーム レイアウトを評価します。
  5. ブラウザー ウィンドウを全画面のサイズに最大化します。 ズーム レベル (50%、75%、125%、150% および 200%) を調整し、フォーム レイアウトを評価します。
  6. 高密度でサニティ チェックを実行します。
  7. 他のブラウザでサニティ チェックを実行します。

遭遇する可能性のある視覚的な問題

テストしている間に答える質問

  • フォームは使用可能ですか。
  • フォームのすべてにアクセスできますか。 (小規模なビューポートで複数のスクロール バーを移動する必要が生じる場合があります。)

レイアウト メタデータに関する問題を示す問題

  • フォームの内容は、使用可能な領域に基づいて調整されていません。
  • グリッドおよびその他の「塗りつぶし」コントロールは、完全な高さと幅を占有しません。
  • コンテナーはまったく表示されません (フォームの一部にアクセスするためのスクロールバーはありません)。
    • この問題は、使用可能な高さ/幅がない場合、SizeToAvailable コンテナーで発生する可能性があります。
  • 予備の (不要な) スクロール バーがあります。
    • 特に一部のコンテナー (グリッドやタブ ページなど) では、高さが最小であるために、小規模のビューポートでスクロール バーが多くなることが予想されます。
    • この問題は、SizeToAvailable でなければならない SizeToContent コンテナーで発生する可能性があります。

その他の既知の/正常な問題

  • ツールバーに水平スクロール バーが表示されます。
    • ツールバー上のすべてのボタンを表示するだけの十分な幅がない場合、水平スクロール バーが表示されます。 この問題は、ツールバーのオーバーフロー動作を展開するフレームワークの配送によってすぐに解決されます。
  • ランダム入力コントロールの境界線が、さまざまなズーム レベルで欠落しています。
    • これは、既知の問題であり、1721990 で追跡されます。
  • グリッドで利用可能な領域がグリッドの高さの最小値 (200 ピクセル) よりも少ないため、グリッドは追加のスクロール バーを受け取ります。
    • この最小高さの縮小/除去を調査するための今後の作業項目があります。
  • SizeToAvailable 幅の StaticText コントロールが同じ SizeToAvailable 幅のグループ内にあるときは、水平スクロール バーがある幅で表示されます (Internet Explorer のみ)。
    • ブラウザーには、このシナリオでスクロールバーが表示される原因となる計算エラーがあります。

付録

レイアウトに関する情報/ガイドライン

レイアウトのプロパティに関する情報、および避ける必要があるシナリオに関するガイドラインについては、ページ レイアウト を参照してください。

  • Last updated on