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 の論理的な順序付け: [Create and Edit App] ページのアクション ボタンが DOM のフォーム要素の下に移動され、フォームの操作の完了時に論理的な順序でアクティブにできるようになりました。
  • 視覚要素のテキストによる説明: ラベル、代替テキスト、ボタンテキストの使用法が改善され、スクリーン リーダーでのナビゲーションが改善されました。
  • 色のコントラスト: プロダクト全体で多くの場所で WCAG AA コントラストの要件を満たすため、色のコントラストが上がりました。色のコントラストが十分にならないように、API リストの API タイトルを画像の下に移動しました。
  • フォームの検証: [Create and Edit App] ページで、フォーム送信ボタンが無効になり、有効にしてフォームを検証できるようになりました。[Create and Edit App] ページの検証済みフォーム フィールドに、検証エラーのテキストによる説明が追加されました。
  • 応答性: SmartDocs を除くすべてのページに最大幅が適用されるようになりました。SmartDocs のナビゲーションが、スマートフォンの画面サイズが小さい画面で機能するようになりました。[Create and Edit App] ページが、狭い画面に対してよりレスポンシブになりました。

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

特に、次の場合を検討します。

  • ナビゲーション バー（ヘッダーとフッター）とページ見出しのスタイル（または非表示）を CSS でオーバーライド: ページ コンテンツの幅が最大になりました。ナビゲーション バーとページヘッダーをブラウザ ウィンドウの端まで拡張するため、Apigee では :before 擬似要素のスタイルを設定しました。詳しくは、ナビゲーション バーとページヘッダーのプライマリ カラーをオーバーライドするをご覧ください。
  • 背景がブラウザ ウィンドウの端まで拡大されているページ要素がある（全画面表示の背景画像を除く）: コンテンツの最大幅は応答性を改善するために制限されていますが、カスタムページ内の元の全幅パネルが制約を受ける可能性があります。新しい最大幅設定の使用の詳細については、ポータルページで全幅パネルを作成するをご覧ください。
  • 特定の HTML 見出しレベルを CSS セレクタでテキスト スタイルにターゲット設定している: 特定のコンテンツに適用されている見出しレベルが変更されました。例: <H1> → <H2>このリリースでの詳細な変更リストを確認して、影響を受けるコンテンツを正確に把握してください。
  • ポータルのテーマエディタでは、セカンダリ カラーとして白または非常に明るい色が選択されます。セカンダリ カラーは、白の背景に対して見づらいナビゲーション要素に使用します。アクセス可能なセカンダリ カラーを選択し、必要に応じて、カスタム CSS を使用してオーバーライドすることをおすすめします。
  • テキスト内のリンクのスタイルを設定: リンクのスタイル設定を利用しやすくしました。既存のスタイル設定への影響については、以下をご確認ください。
  • ホームビュー カードのコンテンツ領域の下部の 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-icon matPrefix>search</mat-icon>" の前に検索アイコン <mat-form-field> を追加しました
    • 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> になりました

アプリリスト:

  • 空の状態:
    • 「Get Started」が <H1> から <H2> になりました
    • 空の状態のガイダンスは <H2> ではなく <H3> になりました
  • リスト:
    • [マイアプリ] を <H1> から <H2> に変更
    • <a> で <mat-row> のワープが完了しました

アプリページの作成と編集

[Create and Edit App] ページの変更点の概要は次のとおりです。

  • <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 の表です。
  • Callback URL の入力を新しいセクションに移動しました
  • [Save] ボタンで、マットレイズ ボタン スタイルとプライマリ カラー背景が使用されるようになりました。
  • テーブルが .app-table-wrapper クラスを持つ <div> にラップされるようになりました。
  • テーブル ヘッダーで <thead> ラッパーが使用されるようになりました
  • テーブル本文で <tbody> ラッパーが使用されるようになりました
  • [style.width] は、テーブル列の幅の設定に使用されなくなりました
  • テーブル内のすべての <a> タグが代わりに <button を使用するようになりました

チームリスト

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

  • 空の状態:
    • 「使ってみる」は<H1>ではなく<H2>になりました
    • 「共有アプリのオーナー権限を管理するチームを作成する」が、<H2> から <H3> に変更されました
  • リスト:

    「チーム」タイトルが <H1> から <H2> になりました

チームページを作成、編集する

[Create and Edit Team] ページに対する変更を以下にまとめます。

  • <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 マテリアル コンポーネントに完全に書き換えられました
    • サイド ナビゲーションの見出しが <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: #ffffff //  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: #000000; // background color for header navigation bar
  }
}

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

統合ポータルのアプリで API を管理するためのユーザー操作が変更されました。具体的には、アプリの [API] 欄で [有効化アイコン] または [無効化アイコン]（切り替えスイッチの代わりに）をクリックして、アプリからの API へのアクセスを有効または無効にする必要があります。

該当する場合は、アプリページで API を管理する方法を説明する手順をすべてポータルで更新します。詳細については、アプリで API を管理するをご覧ください。

修正済みのバグ

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

問題 ID コンポーネント名 説明
161269688 統合ポータル

Apigee ハイブリッドでアセットのサムネイルが正しくレンダリングされない

[アセット] ページにサムネイルが正しく表示されるようになりました。

161295683 統合ポータル

アプリに説明が設定されていないためサーバーでエラーが発生する

アプリの説明（オプションのフィールド）が定義されていない場合、アプリが正常に作成されるようになりました。

160898967 統合ポータル

ポータルのランディング ページが正しくスクロールされない

ポータルのランディング ページがスクロール可能になりました。
160613314、
159197760、
158643196、
158069283、
158069066、
140154942		 統合ポータル

その他のセキュリティ上の修正
158593496 統合ポータル

V1 ポータルでデベロッパー アプリを作成できない

V1 ポータルでデベロッパー アプリを作成できない問題を修正しました。
158318079 統合ポータル

デベロッパー ポータルでのコールバック URL の追加または変更が機能しない

ポータルユーザーが [API] ページでコールバック URL を追加または変更できない問題を修正しました。
157902256 統合ポータル

公開すると、[ページの詳細] ページでページ名の更新をオーバーライドできる

この問題は、ポータルの公開時にページ名の更新がオーバーライドされる問題を修正しました（これは競合状態が原因です）。

138993728 統合ポータル

デベロッパー プログラムのメールの並べ替えと検索が動作しない

一般ユーザー向けユーザー アカウントの検索と並べ替えが想定どおりに機能するようになりました。

既知の問題

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