20.07.27 - Apigee Edge 統合ポータル リリースノート

ここに表示されているのは Apigee Edge のドキュメントです。
Go to the Apigee X のドキュメントに移動します。 info

7 月 27 日（月曜日）に、Apigee Edge 統合ポータルの新バージョンのリリースを開始します。

新機能と改善

このセクションでは、このリリースの新機能と改善について説明します。

ユーザー補助機能と応答性の改善

このリリースで実装されたユーザー補助機能と応答性の改善点は次のとおりです。

• キーボード ナビゲーション: ヘッダー ナビゲーション バーとフッター ナビゲーション バー、SmartDocs サイド ナビゲーション、アプリリスト、アプリビュー、API カードをキーボードで操作できるようになりました。
  
• フォーカス管理: ヘッダー ナビゲーション バーと SmartDocs サイド ナビゲーションを使用して移動すると、ナビゲーション アクションの後のページの最初の <H1> にフォーカスが移動します。
• ライブリージョン: テキスト フィルタリングによって API のリストが変更されると、スクリーン リーダーを使用しているユーザーに通知されるようになりました。
• HTML 見出しのセマンティックな使用: すべてのテキストが、セマンティックに適切な HTML タグに含まれるようになりました。ポータル全体で適切な階層構造の見出しが使用されるようになりました。
• <H1> の単数形の使用: 各ページに <H1> が 1 つだけ含まれるようになったため、スクリーン リーダーでページ コンテンツの最も有益な説明を簡単に識別できます。
• スタイルの大文字表記: 視覚的なアクセントとしての大文字の使用は、実際のテキストではなく CSS でのみ適用されるようになりました。
• DOM の論理的な順序: [アプリを作成] ページと [アプリを編集] ページの操作ボタンが、DOM のフォーム要素の下に移動しました。これにより、フォーム操作の完了時に論理的な順序で操作できるようになりました。
• 視覚要素のテキストによる説明: ラベル、代替テキスト、ボタンテキストの使用が改善され、スクリーン リーダーでの操作性が向上しました。
• 色のコントラスト: 製品全体で、WCAG AA のコントラスト要件を満たすように色のコントラストが強化されました。色のコントラストが不十分になる可能性があるため、[API] リストの API タイトルが画像の下に移動しました。
• フォームの検証: [アプリを作成] ページと [アプリを編集] ページで、フォーム送信ボタンが無効にならなくなり、有効にしてフォームを検証できるようになりました。[アプリを作成] ページと [アプリを編集] ページで検証されたフォーム フィールドに、検証エラーのテキストによる説明が含まれるようになりました。
• 応答性: SmartDocs を除くすべてのページに最大幅が適用されるようになりました。SmartDocs ナビゲーションが、幅の狭いスマートフォン サイズの画面で機能するようになりました。[アプリを作成] ページと [アプリを編集] ページが、幅の狭い画面でより応答性が高くなりました。

ポータルに影響する可能性のある DOM の変更

特に、次の点に注意してください。

• ナビゲーション バー（ヘッダーとフッター）とページの見出しが CSS のオーバーライドでスタイル設定（または非表示）されている: ページ コンテンツの最大幅が設定されました。ナビゲーション バーとページヘッダーをブラウザ ウィンドウの端まで拡張するために、Apigee は :before 疑似要素のスタイルを設定しました。詳細については、ナビゲーション バーとページヘッダーのメインカラーをオーバーライドするをご覧ください。
• ブラウザ ウィンドウの端まで広がる背景を持つページ要素がある（全画面表示の背景画像以外）: ページ コンテンツの最大幅は、応答性を高めるために制限されており、カスタムページ内のそれまでの完全な幅のパネルが制限される可能性があります。新しい max-width 設定の使用方法について詳しくは、ポータルページに全幅パネルを作成するをご覧ください。
• 特定の HTML 見出しレベルが CSS セレクタでターゲットに設定され、テキスト スタイルが変更されている: 特定のコンテンツに適用される見出しレベルが変更されました。例: <H1> → <H2> このリリースの変更点の詳細なリストを確認して、影響を受けるコンテンツを正確に把握してください。
• ポータル テーマエディタで「セカンダリ カラー」として白または非常に薄い色が選択されている: セカンダリ カラーは、白い背景では見えにくいナビゲーション要素に使用されます。アクセス可能なセカンダリ カラーを選択し、必要に応じて特定の状況でカスタム scss でオーバーライドすることをおすすめします。
• テキスト内のリンクにスタイルが設定されている:リンクのスタイル設定のユーザー補助機能が強化されました。既存のスタイル設定との相互作用については、以下の変更点をご覧ください。
• ホームビュー カードのコンテンツ領域の 2 ピクセルの下線が CSS のオーバーライドでスタイル設定または非表示になっている: この下線が <mat-card-content> から <mat-card-actions> の上線に移動しました。

変更点の詳細の概要

次のセクションでは、このリリースで実装された変更点の詳細をカテゴリ別にまとめています。

ポータル全体の変更

ポータル全体の変更の概要は次のとおりです。

• 次の変数は使用されなくなりました。
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• メイン コンテンツ領域の最大幅とメイン コンテンツ領域の最小水平パディングを制御する新しい変数があります。
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

メイン ナビゲーション バーの変更

メイン ナビゲーション バーの変更の概要は次のとおりです。

• ロゴ <img> が、パソコンとモバイルの両方の画面サイズで <a> でラップされるようになりました。
• ユーザー プルダウン ボタンが <a> ではなく <button> になりました。

リンクのスタイルの変更

テキスト内の標準リンク <a> に、デフォルトで下線と、ホバー時に背景色（テーマ設定の「セカンダリ カラー」に基づく）が設定されるようになりました。

404 ページの変更

404 ページの変更の概要は次のとおりです。

• 「今すぐログイン」が <H1> ではなく <H2> になりました。
• 説明テキストが <H1> ではなく <H2> になりました。

API ページ

API ページの変更の概要をカテゴリ別に示します。

• API の検索/フィルタ入力カード:
  • <mat-card-content class="mat-card-content"> が、検索 API カードの見出しと入力をラップするようになりました。
  • <H2> で class="api-doc-filter-title" ではなく class="mat-subheading-1" が使用されるようになりました。
  • <mat-form-field> で appearance="outline" が使用されるようになりました。
  • 検索アイコンが、入力の前の <mat-form-field> に追加されました: "<mat-icon matPrefix>search</mat-icon>"
  • 入力に aria ラベルとコントロール参照が追加されました。
• API リストが空の場合のメッセージ:
  • 「API が見つかりません」が <H1> ではなく <H2> になりました。
  • 説明が <H2> ではなく <H3> になりました。
• API カードリスト:

  「検索に一致する API がありません」が <H1> ではなく <H2> になりました。

• API カード:
  • >div class="api-doc-card-content-image-gradient"></div> が削除されました
  • API タイトルが、画像を含む <div> から、画像の <div> の直後の <div class="api-doc-card-content-title"></div> に移動しました。
  • API タイトルが <H1> ではなく <H2> になりました。

アプリリスト:

• 空の状態:
  • 「スタートガイド」が <H1> ではなく <H2> になりました。
  • 空の状態のガイダンスが <H2> ではなく <H3> になりました。
• リスト:
  • 「マイアプリ」が <H1> ではなく <H2> になりました。
  • <mat-row> が <a> でラップされるようになりました。

[アプリを作成] ページと [アプリを編集] ページ

[アプリを作成] ページと [アプリを編集] ページの変更の概要は次のとおりです。

• <div class="app-buttons"> が <form> の末尾に移動し、<div class="form-buttons-sticky-container"> に置き換えられました。
• クラス .app-layout-section の使用箇所がすべて .details-layout-section に変更されました。
• クラス .app-layout-section-title の使用箇所がすべて .details-layout-section-title に変更されました。
• すべてのセクションの見出しが <div> ではなく <H2> になりました。
• クラス .app-layout-section-content の使用箇所がすべて .details-layout-section-content に変更されました。
• API のリストが、切り替えスイッチ付きの API カードのリスト（API リストと同様）ではなくなりました。代わりに、API の表になりました。
• コールバック URL の入力が新しいセクションに移動しました。
• 保存ボタンで mat-raised-button スタイルとメインカラーの背景が使用されるようになりました。
• 表がクラス .app-table-wrapper の <div> でラップされるようになりました。
• 表ヘッダーで <thead> ラッパーが使用されるようになりました。
• 表の本文で <tbody> ラッパーが使用されるようになりました。
• [style.width] が表の列幅の設定に使用されなくなりました。
• 表内のすべての <a> タグで <button が使用されるようになりました。

チームリスト

チームリストの変更の概要は次のとおりです。

• 空の状態:
  • 「スタートガイド」が <H1> ではなく <H2> になりました。
  • 「チームを作成して、共有アプリの所有権を管理する」が <H2> ではなく <H3> になりました。
• リスト:

  「チーム」というタイトルが <H1> ではなく <H2> になりました。

[チームを作成] ページと [チームを編集] ページ

[チームを作成] ページと [チームを編集] ページの変更の概要は次のとおりです。

• <form> で、クラス .teams-form が .details-form に置き換えられました。
• <div class="teams-buttons"> が <form> の末尾に移動し、<div class="form-buttons-sticky-container"> に置き換えられました。
• クラス .teams-layout-section の使用箇所がすべて .details-layout-section に変更されました。
• クラス .teams-layout-section-title の使用箇所がすべて .details-layout-section-title に変更されました。
• クラス .teams-layout-section-content の使用箇所がすべて .details-layout-section-content に変更されました。
• <table class="team-apps"> を囲む <div class="team-apps-container"> が追加されました。

SmartDocs

SmartDocs インターフェースの変更の概要は次のとおりです。

• サイド ナビゲーション:
  • サイド ナビゲーションが angular-material コンポーネントで完全に書き換えられました。
  • サイド ナビゲーションの見出しが <div> ではなく <H2> になりました。
  • ナビゲーション アイテムで、ポータル テーマエディタの「セカンダリ カラー」ではなく、ポータルのデフォルトのテキストの色が使用されるようになりました。
  • サイド ナビゲーションで選択、フォーカス、ホバーされたアイテムで、ポータル テーマエディタの "セカンダリ カラー"の濃淡がテキストと背景にそれぞれ使用されるようになりました。
• コンテンツ:
  • 「パスパラメータ」や「ヘッダー パラメータ」などの多くの小見出しが <H3> ではなく <H2> になりました。
  • 概要ページのスキーマ エンティティが <H2> ではなく <H3>=> になりました。

既存のホームページにユーザー補助機能の改善を追加する

既存のポータルがある場合は、ナビゲーション可能なカードの新しいユーザー補助機能の改善を利用できるように、次のようにホームページを編集する必要があります。

1. <mat-card> コンテナから href="" を削除します。
2. <mat-card-header> 内のカードの見出しに <H1> ではなく <H2> を使用します。
3. カードの見出し <h2> 内で、テキストを <a class="navigable-content" href="href-name"> でラップし、href-name をカードのナビゲーションに適した値に設定します。

または、次のカード テンプレートを使用することもできます。

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

ナビゲーション バーとページヘッダーのメインカラーをオーバーライドする

ナビゲーション バーとページヘッダーをブラウザ ウィンドウの端まで拡張するには、詳細テーマエディタを使用して、ナビゲーション バーとページヘッダーのカスタム スタイルを追加します。ヘッダー ナビゲーション バーの場合は次のようになります。

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

アプリの API を管理する手順の更新

統合ポータルでアプリの API を管理するユーザー操作が変更されました。 具体的には、アプリを管理するときに、[API] セクションで切り替えではなく または をクリックして、アプリから API へのアクセスを有効または無効にする必要があります。

必要に応じて、アプリページで API を管理する方法を説明するポータルの手順を更新します。詳細については、 アプリ内の API を管理するをご覧ください。

修正済みのバグ

このリリースでは以下のバグが修正されています。このリストは、サポート チケットの修正状況を確認するユーザーを対象としています。すべてのユーザーに詳細情報を提供することを目的としたものではありません。

既知の問題

統合ポータルの既知の問題のリストについては、統合ポータルの既知の問題をご覧ください。