このページは Cloud Translation API によって翻訳されました。

ポップオーバーの事例紹介

Swetha Gopalakrishnan

Saurabh Rajpal

ポップオーバーはウェブ上のいたるところにあります。メニュー、切り替えツールチップ、ダイアログに表示されます。アカウント設定、開示ウィジェット、商品カードのプレビューなどの機能で使用されます。これらのコンポーネントは広く普及していますが、ブラウザで構築するのは驚くほど面倒です。この問題を解決するため、ポップオーバーを構築するための新しい宣言型 HTML API がブラウザに導入されます。最初の API は Popover API です。

ポップオーバーは、ベースラインの新規リリースの一部です。

対応ブラウザ

ソース

ポップオーバーはダイアログと混同されることがよくあります。ただし、動作にはいくつかの重要な違いがあります。dialog.showModal（モーダルダイアログ）で開く dialog 要素は、モーダルを閉じるには明示的なユーザー操作が必要なエクスペリエンスです。popover はライトを消して閉じる操作をサポートしています。モーダル dialog はそうではありません。モーダルダイアログでは、ページの残りの部分は無効になります。popover はそうしません。詳しくは、相違点についての説明をご覧ください。

この記事は、新しい CSS と UI の機能を使用して e コマース企業がウェブサイトを強化した方法について説明するシリーズの一部です。この記事では、Tokopedia が Popover API を実装してメリットを得た方法について説明します。

Tokopedia

ポップオーバー属性を使用すると、React のコードの行数が最大 70% 削減されました。モーダルは、JavaScript でのイベント処理を必要とせず、React.createPortal を使用してモーダル DOM を document.body の末尾に移動する代わりに、HTML でネイティブに制御できます。また、@starting-style を使用してポップオーバーの開閉をアニメーション化することもできます。- Andy Wihalim、Tokopedia シニアソフトウェアエンジニア

Tokopedia の商品の詳細ページ（PDP）には、商品ごとに複数の商品画像が含まれています。商品のサムネイルをクリックすると、モーダルが開き、拡大した画像が表示されます。これは、e コマースウェブサイトで使用される一般的なパターンです。

コード

Tokopedia は、フロントエンド開発に React を使用しています。このモーダルにポップオーバー API を実装する前は、DOM モーダルとボタンを使用していました。ボタンが React の状態を変更してモーダルを開きました。ポップオーバー API では、要素内で popovertarget 属性を指定します。これにより、ポップオーバー要素の ID と同じ値を持つポップオーバーが開きます。

この基本的な実装では、ポップオーバーは機能しますが、アニメーションなしで表示と非表示を切り替えます。ポップオーバーの開始と終了のアニメーションをスムーズに作成するには、:popover-open と @starting-style を使用して、個別のプロパティのアニメーションを許可します。次のコード例では、ポップオーバーは transform: 'scale()' プロパティを使用してスケールインとスケールアウトを行います。

このコードサンプルは、ポップオーバー API の開始アニメーションと終了アニメーションを実装する方法を示しています。

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  transform: 'scale(0.8)',
  opacity: 0,
  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },

  '&:popover-open': {
    transform: 'scale(1)',
    opacity: 1,
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
  },
});

ポップオーバー API をサポートしていないブラウザに対応するため、Tokopedia は oddbird の popover-polyfill を実装しました。gzip 圧縮でわずか 3.2 KB です。ポリフィルは正常に動作し、パフォーマンスの低下も発生しなかったため、満足していました。全体として、ポップオーバー API により React のコード行数を最大 70% 削減できました。

Tokopedia は React を使用しています。チームは、ポップオーバーを使用しないページのポップオーバーコンポーネントをマウント解除し、ポップオーバーコンテンツのコード分割を行うことで、コード分割を実現しました。これにより、最初のリクエストのサイズを削減できました。

ポップオーバーを CSS アンカーポジショニング（Chrome に近日提供予定）と組み合わせて、他の要素に対してポップオーバーを配置することを検討してください。これは、メニューやツールチップなどに便利です。

リソース

popover API のご紹介
ポップオーバーとダイアログの違い
バグの報告または新機能のリクエストを行いますか？ご意見をお聞かせください。

スクロールドリブンのアニメーション、ポップオーバー、コンテナクエリ、has() セレクタなど、新しい CSS と UI の機能を使用して e コマース企業がどのようにメリットを得たかについて、このシリーズの他の記事をご確認ください。

ポップオーバーの事例紹介

Tokopedia

コード

Popover API を使用する際の考慮事項

リソース