Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Popover API について

Avatar for Hasegawa Hasegawa
September 09, 2024
Technology
30
0

Popover API について

Popover API についての解説スライドです。

Avatar for Hasegawa

Hasegawa

September 09, 2024

Other Decks in Technology

See All in Technology
社内 AI エージェント Synapse と セマンティックレイヤーの育て方
Avatar for Hiroaki Sano hiroakis
1
1.1k
"何を作るか"を任される エンジニアは、どう育つのか
Avatar for ofuji-works yutaokafuji
1
270
あなたの AI ワークスペースに、 専門コーダーを連れてくる - Amazon Quick Desktop 最新情報
Avatar for kawaji kawaji_scratch
1
120
Claude Code の Sandbox 機能を Anthropic Sandbox Runtime(srt) で試そう！/lets-play-anthropic-sandbox-runtime
Avatar for tomoki10 tomoki10
1
350
PHP と TypeScript の型システム比較：AI 時代の「型」は誰のためにあるのか？ #frontend_phpcon_do / frontend_phpcon_do_2026
Avatar for shogogg shogogg
1
270
サイバーセキュリティ概論 / Introduction to Cybersecurity
Avatar for Kenji Saito ks91
PRO
0
170
AIプラットフォームを運用し続けるための可観測性
Avatar for tanimuyk tanimuyk
4
1.2k
GoとSIMDとWasmの今。
Avatar for asuka askua
3
520
「コーディング」しない人のための Claude Code 入門　ChatGPT の次の一歩 — 業務に組み込む 育成・共有・自動化
Avatar for ふくだ（fukuda ryu） rfdnxbro
2
1.3k
Oracle Cloud Infrastructure IaaS 新機能アップデート 2026/3 - 2026/5
Avatar for oracle4engineer oracle4engineer
PRO
1
230
なぜ Platform Engineering の土台に Kubernetes を選ぶのか
Avatar for Ray r4ynode
1
360
AI Adaptable なテストを整える工夫 / Ways to Make Your Tests AI-Adaptable
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
3
230

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
152
17k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1.1k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
360
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
13k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
400
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
250
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
190
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k

Transcript

  1. Popover API

  2. Popover API⁨⁩⁨⁩ とは ポップオーバー UI を、 JavaScript を使わず HTML のみで実現できる機能！

  3. マークアップはこんな感じ これだけで基本的なポップオーバー UI が実装できます。

  4. ポップオーバー UI のおさらい

  5. ポップオーバーとは 4 画面の「最上位レイヤー」に表示されるインターフェースA 4 ESCキーを押したり、別の要素をクリックすると、
 非表示になるA 4 基本的に、１つのポップオーバーが開くと
 別のポップオーバーは非表示になる。

  6. ダイアログとは何が違うの？ b ダイアログは「対話」の意図があるインターフェースR b 重要な情報を確実にユーザに伝え、必要に応じて対応
 できるようにするR b 直近のアクションを確認したり変更したりする
 オプションを提供する。など Human

    Interface Guidelines より

  7. Popover API で何が嬉しいか

  8. コンテキストに応じたマークアップ が可能に p dialog ではないのに、dialog role で使うケースがあった@ p ユースケースに応じたセマンティクスの拡張が可能に@ p

    Dropdown Menu、Note、Tooltip、Toast など。

  9. 標準でキーボード操作のサポート b ESCキーで閉じることが可能。(Light Dismiss標準搭載A b popover="manual" では Light Dismiss でなくなるe

    b 閉じたあと、トリガー要素に自動でフォーカスされるe b popover="manual" では自動で戻らないので注意。

  10. 標準で支援技術のサポート 3 スクリーンリーダーでボタンの開閉状態を読み上げる' 3 ポップオーバー要素はデフォルトで group ロール。

  11. スタッキングコンテキスト問題から解放 T z-index を使わなくても、画面の最上部に表示される! T DOM の配置を気にしなくて済む。

  12. Popover API まとめ  Popover APIは、セマンティクスでアクセシブルな
 ポップオーバー UI が JavaScript

    なしで作れる@  Web標準技術を駆使して、持続可能なデザインの実現  Open UI は神。