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

Apigee Edge のドキュメントを表示しています。
Apigee X のドキュメントに移動します。 情報

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> になりました

アプリリスト:

• 空の状態:
  • [スタートガイド] が <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 に変更
• <div class="team-apps-container"> が <table class="team-apps"> を囲むように追加されました

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 を管理するをご覧ください。

修正済みのバグ

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

既知の問題

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