2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
5月25日、Mozilla Developer Newsで「よりスマートでシンプルなFirefoxのアドレスバー (A smarter, simpler Firefox address bar)」と題した記事が公開された。この記事では、Firefox 138で刷新されたアドレスバーが検索と操作性を大幅に高め、ユーザーに真の選択肢と強固なプライバシーを提供する取り組みについて詳しく紹介されている。以下に、その内容を簡潔にまとめて紹介する。([blog.mozilla.org][1]) 5月25日、Mozilla Developer Newsで「よりスマートでシンプルなFirefoxのアドレスバー (A smarter, simpler Firefox address bar)」と題した記事が公開された。この記事では、Firefox 138で刷新されたアドレスバーが検索と操作性を大幅に高め、ユ
「ClipJS」はFFmpegのWebAssembly版であるffmpeg.wasmとNext.js、Reactの動画生成ライブラリであるRemotionで構築された動画編集ウェブアプリです。登録不要かつ無料で、PCやスマートフォンのブラウザから使うことができます。 ClipJS https://clipjs.vercel.app/ 今回はClipJSにPCのGoogle Chromeからアクセスしてみました。動画編集を行うには「Get started」をクリックします。なお、利用にはユーザー登録は必要なく、無料でも使うことができます。 プロジェクトを作成するため、「Add Project」をクリック。 プロジェクト名を入力し、「Create」をクリックします。 作成されたプロジェクトをクリック。 ClipJSのUIが表示されました。無料で使えるウェブアプリですが、広告は一切表示されていま
人材プラットフォームの品質保証を推進するQAエンジニアを募集! 株式会社メドレー @medley X as a Service Web Standards / Browsers HTML WebGL API Economy UX Design Software testing Continuous Integration I want to hear a detailed なにをやっているのか 「テクノロジーを活用して医療ヘルスケアの未来をつくる」というミッションの実現に向けて、現在は以下の事業を展開しています。 ■人材プラットフォーム事業 ・医療介護福祉の人材採用システム「ジョブメドレー」 ・介護事業所向けオンライン研修システム「ジョブメドレーアカデミー」 ・介護施設のマッチングサービス「介護のほんね」 ■医療プラットフォーム事業 ・オンライン医療事典「MEDLEY」 ・クラウド診療支援
はじめに こんにちは。BEENOSのがれっとです。 E2Eテストのメンテナンス、うまくできていますか？ E2Eテストはその性質上、アプリケーションのUI変更や仕様変更に影響を受けやすく、テストコードの頻繁な修正が必要となり、メンテナンスコストが高いという課題があります。 私たちの持つサービス、「Groobee」は、サイトのデザインや構造を柔軟にカスタマイズできる点が特徴です。ユーザー自身でUIを変更可能なため、DOM要素に依存する従来のE2Eテストは、これらの変更によって頻繁に動作しなくなります。それによる維持管理コストの高さが課題となっていました。 そこで、今年（2025年）3月に登場したPlaywright MCPを使い、LLMを活用した自然言語でのE2Eテストを実験してみました。 Playwright MCPとは ブラウザを自動操作するためのツールであるPlaywrightをMCPサ
Mozilla Foundationによって開発されているウェブブラウザ・Firefoxの公式GitHubリポジトリが登場しました。 GitHub - mozilla-firefox/firefox: The official repository of Mozilla's Firefox web browser. https://github.com/mozilla-firefox/firefox Firefox Source Code Now Hosted On GitHub - Phoronix https://www.phoronix.com/news/Firefox-On-GitHub Mozilla Firefox – Official GitHub repo | Hacker News https://news.ycombinator.com/item?id=43969827
5月13日、WebKitで「Safari 18.5 の WebKit 機能(WebKit Features in Safari 18.5)」と題した記事が公開された。この記事では、Safari 18.5に搭載された新機能や修正事項について詳しく紹介されている。 中でも注目は、Declarative Web Pushが実装されたことだ。 以下に、Safari 18.5に搭載されたDeclarative Web Pushについて簡単に解説する。 Declarative Web Pushとは Safari 18.5 では Service Worker を必要としない Declarative Web Push が利用可能となった。標準化された JSON 形式を用いることで実装が極めて容易になり、不要な常駐処理が省かれるためバッテリー消費も削減できる。プライバシー保護と省電力設計を両立しつつ、未対応
現在進行中の米司法省によるGoogleの独占禁止法訴訟で、Appleのサービス部門を率いる上級副社長、エディ・キュー氏は、SafariにAI検索ツールを導入し、リニューアルする案を「積極的に検討中だ」と証言した。 具体的には、OpenAIやPerplexity、Anthropicなどの先進的なAI技術を検討しているという。またキュー氏は、先月初めてSafariでのオンライン検索数が落ち込んだことも明らかにした。 報道でGoogleの株価が急落 その背景 今回のキュー氏の発言が明らかになると、市場は即座に反応を示した、5月7日にはGoogleの株価が7.5%下落した。 SafariをはじめとするApple製品では、長年にわたりGoogleがデフォルトの検索エンジンとなっている。米司法省の裁判資料によれば、Googleはその地位を維持するため、Appleに年間180億ドルという巨額の支払いを行
blog ✦ code ✦ photos Podfox: World's First Container-Aware Browser A port conflict pushed me to abolish container port forwarding once and for all, making my Firefox talk to Podman's whole network. Also: containerizing dev environments for command-line addicts. May 5th, 2025 ✦ 11 min read Containers. Containers containers containers. Even if you were reluctant before, it’s likely that you use them
Four major web browsers dominate the market: Google Chrome, Microsoft Edge, Mozilla Firefox, and Apple’s Safari. What most users don’t realize is that Google effectively bankrolls over 80% of the development for all of them. But this funding stream is under threat: the US Department of Justice is moving to force Google to cut off its competitors and divest from Chrome, a decision that will simulta
前回の記事『階層メニューやトーストUIが簡単に作れる新技術! JavaScriptで利用するポップオーバーAPI』ではポップオーバーAPIについて紹介しました。今回はその続編として、Chrome 133、Edge 133で新しく追加されたpopover="hint"属性に焦点を当てます。ツールチップなどのUIの実装に便利な属性で、その特徴や使い方、他の属性との違いを詳しく説明します。 ポップオーバーAPIのおさらい まずはポップオーバーAPIについて簡単におさらいしましょう。ポップオーバーAPIはその名の通りポップオーバーを実装するためのものです。ポップオーバーとは画面上の最前面に表示させるUIで、確認メッセージやトースト、メニューなどに使えます。 ポップオーバーAPIを使わなくてもCSS、JavaScriptを駆使して同じようなUIを作れますが、ポップオーバーAPIを使えば細かなケアを実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![AI検索をWebブラウザのデフォルトの検索エンジンにする方法 [てっぱんアプリ！]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a95d0f82d8bb452e241f419fc22c31f8dcf19a44/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F2013%2F661%2Ficon.jpg)
