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

現在、Apigee Edge のドキュメントを表示しています。
Apigee X のドキュメントをご確認ください
情報

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

新機能と改善

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

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

このリリースで実装されるユーザー補助機能と応答性の改善を以下に示します。

  • キーボード ナビゲーション: キーボードを使用して、ヘッダーとフッターのナビゲーション バー、SmartDocs サイド ナビゲーション、アプリリスト、アプリビュー、API カードを移動できるようになりました。
  • フォーカス管理: ヘッダー ナビゲーション バーと SmartDocs サイド ナビゲーションを使用して移動すると、ナビゲーション アクションの後に、ページ上の最初の <H1> にフォーカスが移動します。
  • ライブ領域: テキスト フィルタリングによる API リストの変更が、スクリーン リーダーを使用しているユーザーに報告されるようになりました。
  • HTML 見出しのセマンティックな使用: すべてのテキストが、意味的に適切な HTML タグに含まれるようになりました。ポータル全体で、適切な階層の見出し構造が使用されるようになりました。
  • <H1> を 1 つだけ使用: 各ページに <H1> を 1 つだけ持たせました。これにより、スクリーン リーダーはページのコンテンツに関する最も有益な説明を簡単に特定できます。
  • スタイルによる大文字の使用: アクセント記号としてすべて大文字を使用するのは、実際のテキストではなく CSS のみに適用されるようになりました。
  • DOM の論理的な順序: [アプリを作成] ページと [編集] ページに表示されるアクション ボタンが、DOM のフォーム要素の下に移動され、フォームの操作が完了すると論理的な順序でアクティブ化されるようになりました。
  • 視覚要素のテキストによる説明: ラベル、代替テキスト、ボタンテキストの使用方法が改善され、スクリーン リーダーでのナビゲーションが改善されました。
  • 色のコントラスト: プロダクト全体のさまざまな場所で、WCAG AA のコントラスト要件を満たすため、色のコントラストを上げました。色のコントラストが不十分になることを防ぐため、API リストの API タイトルを画像の下に移動しました。
  • フォームの検証: [Create App] ページと [Edit App] ページで、フォーム送信ボタンが無効ではなく、有効にしてフォームを検証できるようになりました。[アプリの作成] ページと [編集] ページの検証済みのフォーム フィールドに、検証エラーの説明テキストが表示されるようになりました。
  • レスポンシブ: SmartDocs を除くすべてのページに適用される最大幅が追加されました。SmartDocs のナビゲーションが、小さなスマートフォン サイズの画面で機能するようになりました。[アプリの作成と編集] ページが、狭い画面に対するレスポンシブになりました。

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

以下の場合は、特に考慮してください。

  • ナビゲーション バー(ヘッダーとフッター)とページ見出しは、CSS のオーバーライドでスタイル設定(または非表示)されました。: ページ コンテンツの幅が最大になりました。ナビゲーション バーとページヘッダーをブラウザ ウィンドウの端まで拡張するために、Apigee では :before 疑似要素のスタイルを設定しています。詳しくは、ナビゲーション バーとページヘッダーのプライマリ 色のオーバーライドをご覧ください。
  • 背景がブラウザ ウィンドウの端まで広がるページ要素がある(全画面の背景画像を除く): 応答性を向上させるため、ページ コンテンツの最大幅が制限されます。これにより、カスタムページ内の以前の全幅パネルが制限される可能性があります。新しい最大幅設定の使用方法については、ポータルページで全幅パネルを作成するをご覧ください。
  • テキスト スタイルを変更するために、CSS セレクタで特定の HTML 見出しレベルをターゲットに設定しました: 特定のコンテンツに適用される見出しレベルが変更されました。例: <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"> で Search 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 の入力を新しいセクションに移動しました
  • 保存ボタンに、マット面仕上げのボタンスタイルとプライマリ カラーの背景を使用
  • テーブルが .app-table-wrapper クラスの <div> でラップされるようになりました。
  • 表のヘッダーで <thead> ラッパーが使用されるようになりました
  • テーブルの本文で <tbody> ラッパーが使用されるようになりました
  • [style.width] は、表の列幅の設定に使用されなくなりました。
  • 表内のすべての <a> タグで代わりに <button が使用されるようになりました

チームリスト

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

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

    「Teams」のタイトルが <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 の管理をご覧ください。

修正済みのバグ

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

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

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

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

161295683 統合ポータル

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

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

160898967 統合ポータル

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

ポータルのランディング ページがスクロール可能になりました。

160613314、
159197760、
158643196、
158069283、
158069066、
140154942
統合ポータル

その他のセキュリティ上の修正

158593496 統合ポータル

V1 ポータルでデベロッパー アプリの作成が失敗する

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

158318079 統合ポータル

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

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

157902256 統合ポータル

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

ポータルの公開時にページ名の更新がオーバーライドされる原因となっていた問題(競合状態による)が修正されました。

138993728 統合ポータル

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

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

既知の問題

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