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

<ph type="x-smartling-placeholder"></ph> 現在、Apigee Edge のドキュメントが表示されています。
Apigee X のドキュメント。 詳細

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

新機能と改善

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

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

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

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

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

特に次の場合は検討してください。

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

詳細な変更内容のまとめ

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

ポータル全体の変更

ポータル全体の変更の概要を以下に示します。

  • 次の変数は使用されなくなりました。 <ph type="x-smartling-placeholder">
      </ph>
    • $layout-horizontal-padding
    • $layout-main-content-horiz-padding
    • $layout-header-horiz-padding
    • $layout-context-bar-horiz-padding
  • メイン コンテンツ領域の最大幅と、メイン コンテンツ領域の最小水平パディングを制御するための新しい変数は次のとおりです。 <ph type="x-smartling-placeholder">
      </ph>
    • $layout-main-content-max-width
    • $layout-horizontal-min-padding

プライマリ ナビゲーション バーの変更

プライマリ ナビゲーション バーの変更点を以下にまとめます。

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

テキスト内の標準リンク（<a>）に、デフォルトで下線が引かれ、カーソルを合わせると背景色（テーマ設定のセカンダリ カラーに基づく色）が表示されるようになりました

404 ページの変更

404 ページの変更内容は次のとおりです。

  • 「今すぐログイン」<H1> から <H2> に変更されました
  • 説明テキストが「<H1>」から「<H2>」になりました

API ページ

[API] ページの変更内容をカテゴリ別に以下にまとめます。

  • API 検索/フィルタの入力カード: <ph type="x-smartling-placeholder">
      </ph>
    • <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 リスト メッセージ: <ph type="x-smartling-placeholder">
      </ph>
    • 「API が見つかりません」<H1> から <H2> に変更されました
    • 説明が <H2> から <H3> になりました。
  • API カードのリスト:

    「検索条件に一致する API はありません」<H1> から <H2> に変更されました

  • API カード: <ph type="x-smartling-placeholder">
      </ph>
    • >div class="api-doc-card-content-image-gradient"></div> を削除しました
    • API のタイトルを、<div> を含む画像から、画像 <div> の直後の <div class="api-doc-card-content-title"></div> に移動しました
    • API のタイトルが <H1> から <H2> に変わりました

アプリのリスト:

  • 空の状態: <ph type="x-smartling-placeholder">
      </ph>
    • "使ってみる"<H1> から <H2> に変更されました
    • 空の状態のガイダンスが <H2> から <H3> に変わりました
  • リスト: <ph type="x-smartling-placeholder">
      </ph>
    • 「マイアプリ」<H1> から <H2> に変更されました
    • <a> で <mat-row> がワープするようになりました

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

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

チームリスト

チームのリストに加えられた変更内容は次のとおりです。

  • 空の状態: <ph type="x-smartling-placeholder">
      </ph>
    • 「始める」<H1> から <H2> に変更されました
    • 「共有アプリのオーナー権限を管理するチームを作成します」<H2> から <H3> に変更されました
  • リスト:

    [チーム]タイトルが <H1> から <H2> に変更されました

[Create and Edit Team] ページ

[Create Team] ページと [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 に変更しました
  • <table class="team-apps"> の周囲に<div class="team-apps-container">が追加されました

SmartDocs

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

  • サイド ナビゲーション: <ph type="x-smartling-placeholder">
      </ph>
    • サイド ナビゲーションを Angular マテリアル コンポーネントで完全に書き換えました。
    • サイド ナビゲーションの見出しが <div> から <H2> に変わりました
    • ナビゲーション アイテムで、ポータル テーマエディタの「セカンダリ カラー」ではなく、ポータルのデフォルトのテキスト色が使用されるようになりました
    • サイド ナビゲーションで選択したアイテム、フォーカスされたアイテム、カーソルを合わせたアイテムで、ポータルテーマ エディタのダークとライトのバリエーションが使用されるようになりました "セカンダリ カラー"それぞれテキストと背景の
  • コンテンツ:
    • 「パスパラメータ」などの多数の小見出し[Header Parameters]<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>

ナビゲーション バーとページヘッダーのプライマリ カラーのオーバーライド

ナビゲーション バーとページヘッダーを拡張する ヘッダー ナビゲーション バーの場合と同様に、[Advanced Theme Editor] を使用して、ナビゲーション バーとページヘッダーのカスタム スタイルを追加します。


// 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 統合ポータル

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

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

既知の問題

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