3つ値の具体的な動作は、次のサンプルで確認できます。overscroll-behaviorプロパティがcontainまたはnoneだった場合、背面のコンテンツにスクロールが伝達しないことを確認できます。 加えてcontainは、オーバースクロールの動作を維持します。このサンプルでは、コンテンツを超えて上下にバウンスする効果を確認できます。（次のGIF画像の2番目） 効果が有効かどうかは、OSやブラウザによって異なりますが、モバイルのPull-to-Refreshが有効なブラウザから確認できると思います。 サンプルを別ウインドウで開く コードを確認する（HTML、CSS） どのような使い方ができるのか、作例をいくつか用意しましたのでご紹介します。実装の参考にしてみてください。 画面固定で表示するUIの作例 画面固定で表示されるダイアログとハンバーガーメニューをdialog要素で実装し、ove
米Googleは5月3日（現地時間）、Googleアカウントへのログインで「パスキー（passkey）」を利用可能にしたと発表した。設定すると、毎回パスワードを入力しなくても顔認識、PIN、スマートフォンでの生体認証などを使ってログインできるようになる。 パスキーは、昨年5月に米Appleと米Microsoftとともに発表したFIDO Allianceの「マルチデバイス対応FIDO認証資格情報」の通称。業界標準のAPIとプロトコルに基づく公開鍵暗号化を使い、面倒なログイン名とパスワードの入力を省いて安全にログインできるようにする機能だ。 Googleはこれまで、AndroidやChromeなどで、段階的にパスキーに対応してきたが、Googleアカウントのサポートは5月5日の「世界パスワードの日」をひかえた「パスワードレスの未来」に向けた大きな一歩だとしている。「来年の世界パスワードの日まで
ミルクボーイがCORSを説明しました
はじめに 内海「どうもー ミルクボーイですー」 駒場「お願いしますー」 内海「あーありがとうございますぅー ねっ 今XSS攻撃をいただきましたけどもね」 駒場「こんなん なんぼあっても良いですからね」 内海「ねー あればあるだけ良いですからね ほんとにね」 駒場「いきなりですけどね うちのオカンがね 好きなセキュリティに関する用語があるらしいんやけど」 内海「あっ そーなんや」 駒場「そのセキュリティに関する用語をちょっと忘れたらしくてね」 内海「好きなセキュリティに関する用語忘れてもうて どないなってんねんそれ」 駒場「でまあ色々聞くんやけどな 全然わからへんねんな」 内海「分からへんの？ ほな俺がね オカンの好きなセキュリティに関する用語 ちょっと一緒に考えてあげるから」 内海「どんな特徴ゆうてたかってのを教えてみてよー」 CORSとは 駒場「あのー Webブラウザ上で異なるオリジン間
[待望のアプデ]EC2インスタンスメタデータサービスv2がリリースされてSSRF脆弱性等への攻撃に対するセキュリティが強化されました！ | DevelopersIO
[待望のアプデ]EC2インスタンスメタデータサービスv2がリリースされてSSRF脆弱性等への攻撃に対するセキュリティが強化されました！ EC2のメタデータサービスv2がリリースされました。これまでSSRF等の脆弱性と組み合わせることによりクレデンシャルの流出が多発していましたが、v2を利用することにより簡単にセキュリティを向上することができるようになりました。 こんにちは、臼田です。 皆さんセキュリティ対策してますか？(挨拶 今回はEC2インスタンスメタデータサービスv2がリリースされたのでこの機能について解説していきます。 Add defense in depth against open firewalls, reverse proxies, and SSRF vulnerabilities with enhancements to the EC2 Instance Metadata
![[待望のアプデ]EC2インスタンスメタデータサービスv2がリリースされてSSRF脆弱性等への攻撃に対するセキュリティが強化されました！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/e03678dab7b09cb34c564b7250c4c7eac8677103/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Famazon-ec2.png)
ディズニー、Disney+の動画配信クライアントにWebAssemblyを採用。2019年春に開発開始 Amazon.comがAmazon Prime Videoの配信アプリケーションでWebAssemblyを採用し、動画のフレームレートを向上したことは、2月1日に公開した記事「Amazon Prime Videoが動画再生にWebAssemblyを採用。再生デバイス上にWasm VMをデプロイ、高フレームレートなど実現」で紹介しました。 この記事では「これだけの規模の本番環境にWebAssemblyが投入されている事例は他にないはず」と書いたのですが、その後もWebAssemblyの事例や応用技術を調べていくうちに、このAmazon Prime Videoの取り組みよりも前に、本番環境で大規模にWebAssemblyを展開している企業がありました（ですので、この記事のこの表現はお詫びして
Selenium 4 の新機能・変更点まとめ
2021/10/13 に Selenium 4 の正式リリースがアナウンスされました。 Selenium 4 の変更点について調べたので、まとめておきます。 後方互換性のない変更 基本的には後方互換性ありですが、一部のコードに依存していると修正が必要です。 Selenium 4 へのアップグレード方法のドキュメントが↓にあり、プログラミング言語ごとに修正例が載っているので参考になります。 大きなところでは、Capabilities 系のクラスや findElement(s)By* 系のメソッドが使えなくなっています。細かいところでは Java だと Waits や Timeout 系の引数が Duration 型になっているなどいろいろあるので、アップグレードするときはちゃんと上記のドキュメントを読んで影響範囲を把握しましょう。 新機能 Relative Locators ブラウザ上の他の
Web NFCを試してみました 〜 動作確認とアプリケーション作成 〜 - 虎の穴開発室ブログ
皆さんいかがお過ごしですか？ラボのおっくんです。 気温が高い時期になってきました。室内にいても気が付くと脱水から熱中症になることもあるそうですので、お気を付けください。 今回は、Web NFC を試してみましたので、そちらをレポートします。 最終的には、次のものができました。 以下順を追って説明します。 実行環境 開発環境 OS:macOS Catalina 10.15.4 Chrome 84.0.4147.89 確認用デバイス OS:Android バージョン 10 Chrome 83.0.4103.106 NFC を備えたスマートフォンでないといけませんので、ご注意ください。 WebNFC とは WebNFCは、「Google Chrome 81」のベータ版から追加された実験的な機能です。 NFC(Near Field Communication : 近距離無線通信)タグをブラウザから
この記事はドワンゴ Advent Calendar 2020 最終日の記事です。年の瀬ですね。 はじめに 本記事は、WHATWG Living Standardに準拠することを目的としたHTMLパーサである「gammo」の紹介を目的としている。gammoが実現していることを詳細に伝えるため、単なるgemの紹介に留まらず、HTMLの歴史や昨今のHTMLを取り巻く状況を簡単に解説し、WHATWG Living StandardにおけるHTML文書の解析アルゴリズムについて、実例と共に紹介する。 本記事で紹介するgammoの開発に取り掛かった理由は、主に以下の二点が挙げられる。 WHATWG Living Standardに準拠したHTMLパーサをRubyGemsの中から見つけられなかったため。 現在HTMLパーサの機能を持つライブラリの中で、最も利用されていると考えられるNokogiriと比較
NETGEAR社製ルーターにおける認証不要の任意コード実行の技術的解説(PSV-2022-0044) - Flatt Security Blog
※本記事は先立って公開された英語版記事を翻訳し、日本語圏の読者向けに一部改変したものです。 画像出典: https://www.netgear.com/business/wifi/access-points/wac124/ はじめに こんにちは、株式会社Flatt Securityのstypr(@stereotype32)です。 一昨年、日本のOSS製品で発見された0day脆弱性に関する技術解説をブログに書きました。 それ以来、私は様々な製品に多くの脆弱性を発見してきました。残念ながら私が見つけたバグのほとんどはすぐに修正されなかったので、今日まで私が見つけた、技術的に興味深い脆弱性の情報を共有する機会がありませんでした。 本記事では、NETGEAR社のWAC124(AC2000)ルーターにおいて、様々な脆弱性を発見し、いくつかの脆弱性を連鎖させて、前提条件なしに未認証ユーザーの立場からコ
分散型SNSプロトコル「AT Protocol」「ActivityPub」「Nostr」は一体何が違うのか？それぞれの特徴をまとめてみた
X(旧Twitter)の仕様変更などを受けて、BlueskyやMastodonなどの分散型SNSに注目が集まっています。そこで、分散型SNSプロトコルの代表的存在である「AT Protocol」「ActivityPub」「Nostr」の特徴をまとめてみました。 Docs | AT Protocol https://atproto.com/docs ActivityPub https://www.w3.org/TR/2018/REC-activitypub-20180123/ GitHub - nostr-protocol/nostr: a truly censorship-resistant alternative to Twitter that has a chance of working https://github.com/nostr-protocol/nostr Nostrの仕組
Vue.jsでWebの多様なユーザー/利用シーンに対応していくための公開素振り - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2019の15日目の記事です。 こんにちは。フロントエンドグループの加藤です。 私達は、「Payment to the People,Power to the People.」というミッションを掲げ、日々サービスづくりを頑張っています。 Peopleとは誰か このミッションにある、Peopleとは誰のことを指すのでしょうか？ 自分の周りの環境を想像しても、実に多様な人がいることがわかります。 また、日々ショップオーナーさんや購入者さんからいただく様々なお問い合わせの内容を見ていると、ほんとに様々な背景を持った方々に使っていただいているんだなと思います。 Webフロントエンド開発者としては、自分の力で出来ることがあれば、出来る限り多様な使われ方に対応できるプロダクトにしていきたいという思いがあります。 何を指針とするか では、まず何をどうす
「HTMLの前提についてはざっと知った、ステップアップできるHTMLの勉強がしたい」「人に勧められるHTMLにまつわる書籍はあるだろうか」「令和でHTMLを学ぶならこの1冊、というものがほしい」―――そうした人々のニーズを叶えてくれる書籍が販売された。 その名も「HTML解体新書」だ。 本ブログ記事は、レビュアーとして関わり本書を読んだ＠okuto_oyamaによる感想と、HTMLのこれからについて考えていることをまとめたものである。 本の内容については、著者によるブログ記事にまとまってあるのでそちらを参考にしてもらいたい。 creators.bengo4.com まだまだHTMLについて知らないことがあった 私がHTMLについて始めて触れたのは、とあるブログサービスのHTML編集機能からだ。その頃は HTMLの仕様というものを知る由もなく、どういったタグを使うと画面上にどのように表示され
Webサイトを離れたときにデータを送る Page Unload Beacon (Pending Beacon API) - ASnoKaze blog
Webサイトを離れたときにサーバにデータを送れるようにする「Page Unload Beacon」という仕組みが、W3CのWICGで議論されています。 既存のページのライフサイクル(unloadイベントやbeforeunload)で、サーバにデータを送ろうとしても処理されないことがあります。そのため、ページのunload時にビーコンを送るように登録できるようにするのが「Page Unload Beacon」です。 最新のChrome Canaryでとりあえず動くっぽいので、触ってみる (まだ動作するだけで、一部仕様と異なります) Page Unload Beacon デベロッパーツールから次の通り実行して、Beaconを登録しておきます。今回はGETリクエストとPOSTリクエストのビーコンをそれぞれ登録。 getbeacon = new PendingGetBeacon("http://e
「Markdown+CSS/TeXで冊子本を作ってみた」に参加してみた - 自己顕示欲の開放治療所
「Markdown+CSS/TeXで冊子本を作ってみた」に参加してみた connpass.com 2019/11/16 訂正 訂正いただきました箇所、打ち消し線と + 記号で大体わかるように、なっているといいな、しました。 開始前 記事中のAmazonのリンクはアフィリエイトにしていますので嫌悪感を抱かれる方は気をつけてください。 アンテナハウス株式会社*1様主催のセミナーに参加してきました。以前『PDFインフラストラクチャ構造解説』のPOD（Print On Demand）本を買ったときに存在を知り、ウェブサイトの「XMLに命をかけてくれ」というエピソード紹介が印象に残っていました。大規模、構造的ドキュメント用のソフトウェアに強みのある会社という理解です。 PDFインフラストラクチャ解説: 電子の紙PDFとその周辺技術を語り尽す 作者: 小林徳滋出版社/メーカー: アンテナハウスCAS電
こんにちは、富士榮です。 20日にデジタル庁がリリースしたワクチン接種証明アプリが話題ですね。内容的にはSMART Health Cardの仕様に沿った証明データが出てきているという話だったので中身を紐解いてみようかと思います。何しろSMART Health Cardの中身はW3CのVerifiable Credentials（VC）なので。 参考１） https://www.digital.go.jp/policies/vaccinecert/faq_06 より 参考２） This document describes how clinical information, modeled in FHIR, can be presented in a form based on W3C Verifiable Credentials (VC). https://spec.smarthealth
Defensive CSS
👋 This article has been expanded into a new project called Defensive CSS. Due to the fact that the content here will not be updated, I recommend you to read defensivecss.dev instead. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or
当サイトをFediverseに対応させました。 @songmu.jp@songmu.jp でMastodonなどでリモートフォローできます。 やったことは、 このブログがFediverseに対応しました というtyageさんのエントリーをそのままなぞっただけです。このエントリーはh-cardのサイトトップへの掲出に関する説明が書き漏れていそうでしたが、それも実施しました。 当サイトは静的サイトであり、付随機能は外部サービスに頼りたいと考えている。例えば、コメント機能はDisqusを使っている。Fediverseに関しても何かそういうサービスがないかと思っていたが、Bridge Fedというサービスがあり、上記のエントリー内で懇切丁寧に解説されていたので導入は比較的簡単で、作業時間は小一時間でできた。大まかな手順は以下。 Bridgy Fed というサービスを利用してサイトをFedivers
HTML Living Standard の概要 HTML 1.0 HTML+ HTML 2.0 Netscape Navigator 1.0～4.0 Internet Explorer 1.0～4.0 HTML 3.2 HTML 4.x WHATWG W3CとWHATWGの共同作業と再分裂 HTML5 W3CからWHATWGへの移管 HTML Living Standard の概要 HTML 1.0～2.0 は IETF が、HTML 3.2～5.2 は W3C が標準化を進めていましたが、W3C とは別に、Apple, Mozilla, Opera の開発者らが設立した WHATWG という団体が独自に策定を進めている HTML 仕様です。HTML Living Standard と呼ばれ、バージョン番号や第何版という概念がなく、日々、改版が進められています。 HTML Living
WebのクローリングにPuppeteerを使っています。 いつかPuppeteerの使い方をまとめたいなと思っていたのですが、そうこうしている内に月日は流れ、Puppeteerと同様のブラウザ操作ツールとして、Playwrightの名前をよく聞くようになってきました。 ならばいっそのこと、新たにクローラーを書く時はPlaywrightに乗り換えて、その使い方をまとめようかなと思い始めました。 一方、ブラウザ操作ツールとしてSeleniumも有名です。 Microsoft Power AutomateでSeleniumが使えると聞いたので、Seleniumならクローリングだけでなく、日々の業務の自動化にも使えて便利かなとSeleniumにも興味がありました。 SeleniumとPlaywright、どちらにしようかと迷ったのですが、どちらも使ったことがなかったので結局両方を使って確かめること
Cloudflare WorkersがNode.js API互換の提供を発表。Bun、Denoなどに続く対応により、Node.js APIはサーバサイドJavaScriptの事実上の標準になるか
Cloudflare WorkersがNode.js API互換の提供を発表。Bun、Denoなどに続く対応により、Node.js APIはサーバサイドJavaScriptの事実上の標準になるか Cloudflareは、エッジでJavaScriptを実行できるサービス「Cloudflare Workers」において、Node.jsのAPI互換機能を提供すると発表しました。 node.js APIs have officially landed in Cloudflare Workers — no polyfills required. We've added AsyncLocalstorage, EventEmitter, Buffer, assert and util, with more on the way soon.https://t.co/8CkPZkS3Yb — Cloudfl
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部で社内プラットフォームを開発・運用している本田です。普段は大阪オフィスで働いています。（新型コロナウイルスの影響でここ1年はずっと在宅ワークが続いておりますが） 私は2020年度後期の6カ月間、ヤフー大阪オフィスが運営しているオープンコラボイベント「Mix Leap」にスタッフとして初めて参加しました。そこで「フロントエンドのテストに関する勉強会」を企画から入って開催し、結果200人を超える参加応募がありました！ 今回はヤフーでのアソシエイトという働き方と、イベント企画から開催までを通した中での出来事や学んだことをお話しします。 ヤフーの技術コミュニティーとアソシエイト ヤフーでは東京、名古屋、大阪、福
こんにちは、フロントエンド技術顧問の @koba04 です。 今回は React v17 での変更に対して気になった部分や、RC からリリースまでにあった修正の中で個人的に興味深いと思った話を紹介したいと思います。 v17 自体の変更点については下記で紹介している公式ブログで確認することをオススメします。 React v17.0 (日本語ブログ) React v17.0 Release Candidate: No New Features (日本語ブログ) SmartHR では毎週フロントエンド MTG を行っており、今回紹介するような内容はこの MTG で取り上げています。 SmartHR での フロントエンド MTG のようなプロダクト開発以外の活動に興味のある方は下記のブログ記事を参照ください。 tech.smarthr.jp Changes to Event Delegation
User-Agent Client Hints
This specification was published by the Web Platform Incubator Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups. 1. Introduction This section is non-normative. Today, user agents general
任天堂は2023年10月、人気ゲーム機「Nintendo Switch」などで利用するニンテンドーアカウントをパスワードレス認証の「パスキー（パスキー認証）」に対応させた。「FIDO2（Fast Identity Online 2、ファイド2）」という仕様に基づいた、パスワードを使わない認証方法だ。 従来ニンテンドーアカウントにログインするには、利用者がユーザーIDとパスワードを入力して本人認証していた。パスキーを利用すると生体認証を用いるので、パスワード入力は不要になる。だが「生体認証＝パスキー」ではないので注意してほしい。詳しくは後述する。 パスキーならユーザーIDとパスワードの入力や管理がなくなり、利用者にとって利便性が高まる。サービス提供者としては、利用者のパスワード忘れなどへの対応が不要になる。 このためログインやサインインの手段としてパスキーを採用するサービスが相次いでいる。N
もう10日以上経つが6/10の深夜に電撃的にWeb5が発表された。Twitterで「Web5」の文字やミーム画像がぞろぞろ流れ始めてきたときは冗談だと思ったが、スライド資料*1を読み進めるといったいどこで笑えばいいんだろうと困惑が大きくなる一方だったくらいに、本気の内容で驚いた。 一部の間ではこれはガチだとすぐに騒ぎ始めたが戸惑っている人たちも多そうだった。まだWeb3ですら一般認知されだしたばかりというタイミングで「4」を飛ばしていきなり「5」だ。そりゃあそうだというところだが、どうもWeb5にすぐに反応できた人たちというのは既存のWeb3になにかしらの違和感を抱いていた人たちだったらしい。ウェブのアーキテクチャ、経済思想、ビジネス構造など、どこに違和感を持っていたかによっても刺さっているポイントが違くて、いろいろな観点があるなあと感心しきりだった。 今回発表された内容は基本的にシステム
知らないでは済まされない、日本のデジタル広告の現状 ── JAA デジタルメディア委員会セミナー「デジタルメディアの最新潮流 〜Originator Profile＆オープンインターネット〜」｜講談社C-station
11月10日（金）、日本アドバタイザーズ協会（JAA）デジタルメディア委員会（※）主催のセミナーが開催されました。「デジタルメディアの最新潮流 〜Originator Profile＆オープンインターネット〜」と題して、デジタル広告の買い方改革の必要性を訴えました。 ※デジタル環境下においても広告活動の適正化と広告取引の透明化を実現し、生活者から信頼される広告の発信を目指した取り組みを推進。アドバタイザー自らが協同して活動を行っている。 【委員長挨拶】デジタル広告を学び、理解しなければ、自分たちのブランドを守れない時代日本アドバタイザーズ協会 デジタルメディア委員長 山口有希子 皆さんこんにちは。本日は、ご参加いただきありがとうございます。デジタル広告は非常に複雑で、多くの課題を抱えています。そのなかで、広告主もデジタル広告について勉強し、理解していかなければ自分たちのブランドを守れない時
Puppeteer、テスト自動化の次世代標準「WebDriver BiDi」に対応開始。Firefoxもサポートへ
Puppeteer、テスト自動化の次世代標準「WebDriver BiDi」に対応開始。Firefoxもサポートへ Node.jsでヘッドレスブラウザを用いたテスト自動化のためのフレームワーク「Puppeteer」が、ブラウザ自動化の次世代標準である「WebDriver BiDi」（「BiDi」は双方向を表すため、読みは「ウェブドライバー バィディ」とのこと）への対応を開始しました。 Puppeteerは、ChromiumベースのWebブラウザに対してChrome DevTools Protocolを用いて通信することで、Webブラウザの操作を自動化するとともに、コンソールに表示される情報やログなどの収集、画面キャプチャなどの取得によって、テストの自動化を効率化してくれる機能を備えています。 このPuppeteerが、現在策定中の次世代標準の「WebDriver BiDi」に対応を開始しま
パスワードレスを実現するFIDO/WebAuthのさらなる普及へ、新提案を公開。デバイス間でのクレデンシャル同期、Bluetooth経由でのローミング認証器など
パスワードレスを実現するFIDO/WebAuthのさらなる普及へ、新提案を公開。デバイス間でのクレデンシャル同期、Bluetooth経由でのローミング認証器など 一般にWebサービスなどへのログインには、ユーザー名とパスワードの組み合わせが使われます。しかしこのパスワードの情報などが漏洩することで、企業や個人に大きな損失を与える事故が繰り返されてきました。 そこで、ユーザー名とパスワードの組み合わせの代わりにスマートフォンなどのデバイス内に保存したクレデンシャルを用いてユーザー認証を行い、パスワードの入力を不要にする技術が登場しています。 業界標準となっているのが、FIDOアライアンスによる「FIDO2」と、それをW3CのWeb標準として策定した「Web Authentication」（WebAuthn）です（以下、FIDO/WebAuthn）。 ユーザーはスマートフォンなどのデバイスに対
WebDriver について調べる機会があったので簡単にまとめました。 この記事では curl を使って、WebDriver によるブラウザ操作をしてみます。 WebDriver と Selenium の歴史 Selenium は現在最も広く使われている、Web ブラウザの自動化・テストフレームワークです。 多くの言語をサポートしており、Java や C#などの言語から、Web ページを開いたり要素の検証ができます。 そのため Web サービスの End-to-end (E2E) テストの自動化で主に利用されています。 Selenium 1 (Selenium RC) と呼ばれていた時代は、ブラウザを操作するために Selenium Core という JavaScript をブラウザ上でロードしてました。 しかしブラウザのセキュリティ強化により、Selenium Core の JavaSc
「Microsoft Edge」のIEモードによるe-Taxサイトの表示 国税庁のe-TAXサイトでは、互換性チェックが実行され、Windows OSではInternet Explorerでのアクセスが要求される。IEモードを有効にすると、ChromiumベースのMicrosoft Edgeでも、このように互換性チェックをパスできる。 2020年1月16日（日本時間）に正式版の「Chromium版Microsoft Edge（以下Chromium版Edge）」の提供が開始された。Japan Windows Blog「新たな年に新たなブラウザーを」によれば、Windows Updateを介したChromium版Edgeの提供は、2020年4月1日以降になるという。 当面は、以下のMicrosoftのWebページから手動でダウンロードして、インストールする必要がある。提供開始当初は、Chrom
はじめに UL Systems Advent Calendar 2019 の17日目です。 Blazorとは、.NET の技術を使ってクライアント側のWeb UIを構築するためのフレームワークです。このBlazorを使えば、今まで主に業務アプリケーションの開発で C#を使用してきたような開発者であっても、極力JavaScriptを使わず、追加の学習コスト少なくWebアプリケーション(SPA)を開発することができるようになります。 Blazor には、サーバ側で処理するBlazorサーバーと、クライアント側で処理するBlazor WebAssemblyがあります。Blazorの開発を今まさに進めており、2019年9月にリリースされた.Net Core 3.0にてBlazor サーバーが正式にサポートされるようになりました。Blazor WebAssemblyも2020年5月に正式リリースされ
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年に引き続き、技術仕様と国内法整備に関して、2022年のWebアクセシビリティの短期的な予測をしてみます。 WCAG 2.2とWCAG 3.0 WCAG 2.2に関しては、2020年末では2021年2月にCandidate Recommendation（勧告候補）になる予定だったものが、ずるずるとスケジュールが後ろ倒しになっており、執筆時点の2021年12月初頭になっても未だに勧告候補のステータスにはない状況です。一方で、執筆時点でのWhat’s New in WCAG 2.2 Working Draftによれば、2022年6月にRecommendation（勧告）を発行するスケジュールとのことです。 このスケジュールに間に合わせるのであれば、逆算すると4月までに勧告候補を発行する必要があります。よって、4月に勧告候
ブラウザテスト自動化のPuppeteerがFirefox正式サポート、新標準のWebDriver BiDi対応で。これでChromeとFirefoxに両方対応に
MozillaとGoogleは、ブラウザを用いたテスト自動化のためのフレームワーク「Puppeteer」がFirefoxを正式にサポートしたことを発表しました。 PuppeteerはGoogleが開発しており、Chrome DevTools Protocol（CDP）を通じてChromeをリモートコントロールすることでテスト自動化を実現しています。 CDPはWebSocketによる高速な双方向通信、コンソール上のメッセージを取得するなど低レイヤのAPIにも対応するなど、より柔軟かつ高度なテスト自動化を実現できます。 しかしCDPはChromium系のWebブラウザしか実装されていません。FirefoxはCDPのサブセットを実験的に実装してPuppeteerから操作可能ですが、あくまでも非公式なサポートにとどまっていました。 新しい標準のWebDriver BiDiをPuppeteerとFi
こちらは、Webアクセシビリティ Advent Calendar 2019 の２１日目の記事です。 Vue.js 開発における Web アクセシビリティ対応にまつわる内容となっております。（英訳記事） この記事は公開から１年以上が経過しています。内容が一部古い箇所があります。 自己紹介 大山奥人（おおやまおくと）と申します。ネット上では、おおやまみちのく、yamanoku と名乗って活動しています。 制作会社の Web デザイナーとして働き出し、株式会社GEEK でマークアップ・フロントエンドエンジニアとして従事した後、2019 年 10 月から株式会社クラウドワークスに在籍しております。 役職は UX エンジニアです。個人ではアクセシビリティ啓蒙も行っています。 著書 これからはじめるwebアクセシビリティ 技術書典で「これからはじめるwebアクセシビリティ」という技術同人誌を発表しまし
HTMLとCSSを真剣に学びたい人にお勧めの本を紹介します。 HTML5とCSS3の仕様書に基づいて、知識をしっかり身につけ、実践的なテクニックを本格的に学べます。Web制作者が持っておいて間違いのない一冊です。 実装の現場で必要とされる、リソースの先読みや画像の遅延読み込みなどの高速化テクニック、float時代のクリアフィックスを簡単に実現できるフロールートなど、必要な知識をまとめて吸収できます。 本書はコーダーの定番書である前書の第2版。 現在の最新仕様、HTMLは標準仕様はW3CからWHATWGに一本化され、CSSは各種機能の追加や主要ブラウザでの対応が進んでいます。ブラウザもChromiumベースのEdgeがリリースされ、使える便利な機能が増えています。 第2版はそれらに対応した解説書で、先日当ブログで紹介した:is()疑似クラス関数、min(), max(), clamp()比較
こんにちは。福岡オフィスエンジニアの @petamoriken です。趣味でFloat16Arrayのponyfill1を公開しECMAScriptに入れてもらうように活動していたところ、喜ばしいことに2023年5月のTC39会議にてStage 3となりました。折角なのでその経緯を書いていこうと思います。 ECMAScript excitement 😉@TC39 advanced these proposals this week 🎉 4️⃣ Atomics.waitAsync 4️⃣ RegExp v flag 4️⃣ Well-Formed Unicode Strings 3️⃣ Decorator Metadata 3️⃣ Float16Array 2️⃣ Base64 for Uint8Array 2️⃣ Promise.withResolvers 2️⃣ TimeZone C
こちらは翻訳記事となります。原著者の許諾を得て翻訳・公開しております。 英語記事: The History of the URL原文公開日: 2020/03/05著者: Zack BloomURL: https://blog.cloudflare.com/the-history-of-the-url/ 1982年1月11日、22 人のコンピュータ科学者が「コンピュータメール」(今日の電子メール）の問題を議論するために集まりました。議論の参加者にはサン・マイクロシステムズを作った人、Zork の開発者に NTP の開発者、そして政府に Unix の支払いをするように説得した人も含まれていました。 問題は単純で、 ARPANET にある455台のホストが制御不能に陥っていたのです。 この問題は、ARPANET がもともとの NCP プロトコルから、今日の”インターネット”と呼ばれる TCP/I
![[翻訳]”URL”の歴史 — Cloudflare Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/3d08fa716709e9ce713da4039682c4ddc6011178/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fda%3Atrue%2Fresize%3Afit%3A514%2F0%2AvGh9FcrsUeIMw0DK.gif)
IEでのブラウザ確認にまだ意味はあるのか？
IEでのブラウザ確認にまだ意味はあるのでしょうか？ 2020年1月14日にWindows 7のサポートが終了し、翌15日にはChromium ベースのEdgeがリリースされました。そんな2020年の現在でもInternet Explorerでのブラウザ確認はまだ必要なのか、IEの現状とEdgeの登場でどう変わるのか、デベロッパーの目線で解説した記事を紹介します。 Does Browser Testing On Internet Explorer Still Make Sense? by Harshit Paul 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Internet Explorerでの確認に、まだ意味がまだありますか？ なぜInternet Explorerは終焉を迎えたのか EdgeとInternet Explor
WebAssembly Summitというカンファレンスへ参加してきました。その午前のセッションについてまとめました。午後のセッションについては別記事でまとめます。 TL;DR; 午前はWASMを取り巻く問題について扱ったように感じました。いくつかには解決策が提示され、いくつかは問題提起にとどまった印象です。 WebAssembly Summitとは？ Webブラウザの上で実行できる第2の言語、それがWebAssemblyです。誕生は2015年にW3Cのコミュニティグループが結成され、2019年末に正式な仕様としてリリースされました。このWebAssemblyのツールやランタイム、そしてWebAssemblyを使ったアプリケーションに関する発表を行うカンファレンスが、WebAssembly Summitです。 WebAssembly は、ネイティブのアプリケーションやエッジサーバにおける処
JSON Web Signatureを簡単かつ安全に使うためのkid/typパラメータの使い方 - r-weblife
こんにちはこんにちは、ritou です。 現状、様々な用途で利用されているJWTですが、今後はますます開発者にとって "簡単に" かつ "安全に" 利用できる状況が求められていくと考えられます。 今回はそのために重要になる、各種パラメータの扱いに注目します。 とりあえずライブラリ使えで終わりでは？ JWTを扱うためには 各種暗号化処理 JSON, Base64URLエンコード/デコード あたりの処理が必要です。 関連仕様がRFC化されてからある程度時間も経っており、各言語で仕様を忠実に実装されたものから自身が使う機能をピンポイントで抽出して実装したものまで様々なライブラリが存在します。 ここで、 仕様に忠実に、全ての暗号化処理をサポートするライブラリ を使うだけで、誰もが安心、安全に利用できるかと言うと、そうでもないことは想像できるでしょう。 JWTの各種仕様とは別で最近RFC化された "
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
overscroll-behaviorがお手軽！ モーダルUI等のスクロール連鎖を防ぐ待望のCSS - ICS MEDIA
Googleアカウント、「パスキー」でのログインをサポート
ディズニー、Disney+の動画配信クライアントにWebAssemblyを採用。2019年春に開発開始
WHATWG Living StandardとHTMLパーサ - Qiita
「HTML解体新書」HTMLのこれからと向き合うための本 - クラウドワークス エンジニアブログ
ワクチン接種証明のVerifiable Credentialsを覗いてみる
静的サイトをFediverseに対応させる | おそらくはそれさえも平凡な日々
HTML Living StandardとHTMLの歴史 - とほほのWWW入門
Selenium と Playwright の両方を使ってみた感想 - 新しいことにはウェルカム
フロントエンドテストの勉強会を企画から開催まで担当した話
React v17 の変更に関するこぼれ話 - SmartHR Tech Blog
もうパスワードは使わない、任天堂も対応する「パスキー」の正体
Web5 ファーストインプレッション - 悠々自適
curlで覚えるWebDriver (1/2) | Folioscope
IEレガシーWeb救済の決定版!? 最新Microsoft Edge「IEモード」の実力検証
Web開発でJavaScriptの代わりにC#でロジックを書くBlazorがめちゃ便利！ - Qiita
2022年のWebアクセシビリティ | gihyo.jp
Vue.js から考えるアクセシビリティについて - 2019
Web制作者が持っておいて間違いない一冊！HTMLとCSSの必要な知識と最新テクニックをまとめて吸収できる良書
6年を経てFloat16ArrayをStage 3にしてもらった - pixiv inside
[翻訳]”URL”の歴史 — Cloudflare Blog
WebAssembly Summitまとめ（前編）｜chikoski