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

Popover API について

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
Dynamic Workersについて
Avatar for Yusuke Wada yusukebe
2
570
PHP と TypeScript の型システム比較：AI 時代の「型」は誰のためにあるのか？ #frontend_phpcon_do / frontend_phpcon_do_2026
Avatar for shogogg shogogg
1
230
GoとSIMDとWasmの今。
Avatar for asuka askua
3
460
地元にいないローカルオーガナイザーの立ち回り
Avatar for uvb_76 uvb_76
1
430
APIテストとは？
Avatar for 草薙昭彦 nagix
0
170
【Gen-AX】20260530開催_JJUG CCC 2026 Spring
Avatar for Gen-AX株式会社 genax
0
320
Datadog 認定試験の概要と対策
Avatar for Uechi Shingo uechishingo
0
220
Javaで学ぶSOLID原則
Avatar for Negima negima
1
260
インフラが苦手でも大丈夫！ 紙芝居 Kubernetes -WWGT 10周年編-
Avatar for Aoi Takahashi aoi1
1
320
価格.comをAI駆動で全面刷新する ー 30年分の技術的負債を返し、次の30年の土台をつくる ー
Avatar for tkyowa tkyowa
9
8.2k
Generative UI × A2UI で AI エージェントを作った話　AI-DLC も使ってみた！
Avatar for たけのこ kmiya84377
1
310
もりもり新機能を一挙紹介！ AgentCoreに入門して、AWS上にAIエージェントを構築しよう
Avatar for みのるん minorun365
PRO
6
650

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
390
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.5M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
22k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
310
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
200
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
330
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
560
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k

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 は神。