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

Apigee Edge のドキュメントを表示しています。
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 px の border-bottom が CSS オーバーライドでスタイル設定または非表示になっている: この境界線が <mat-card-content> から <mat-card-actions> の border-top に移動しました。

変更内容の詳細の概要

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

ポータル全体の変更

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

• 次の変数は使用されなくなりました。
  • $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 class="api-doc-card-content-title"></div> に移動しました。<div>
  • API のタイトルが <H1> から <H2> になりました

アプリリスト:

• 空の状態:
  • [Get Started] が <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 を管理するをご覧ください。

修正済みのバグ

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

既知の問題

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