Speculation Rules APIでウェブサイトのページ遷移を速くする - クリック前にプリレンダリングする実装手法 - ICS MEDIA
Speculation Rules APIでウェブサイトのページ遷移を速くする - クリック前にプリレンダリングする実装手法 通常のウェブページでは、リンクをクリックしてから次のページの読み込みが始まります。もしクリックする前にブラウザーが次のページを裏側で準備していたら、クリック直後にページが表示され、待ち時間をほとんど感じません。この「先読み」をブラウザーの機能として実現するのが「Speculation Rulesスペキュレーションルールズ API」です。リンクをたどるたびに感じていた読み込みの間が少なくなり、ページ間の移動がスムーズに感じられるようになります。 たとえばユーザーがリンクにマウスカーソルを乗せたタイミングで、ブラウザーがそのリンク先のページをバックグラウンドで先読みします。リンクをクリックした時点ですでにページの準備が終わっているため、瞬時にページが切り替わります。先読
Canvas 内に直接 HTML を描画できる HTML in Canvas API について
HTML in Canvas API は WICG の提案段階にある実験的な API です。現時点では Chrome Canary の chrome://flags/#canvas-draw-element フラグを有効にすることで利用できます。 HTML in Canvas API の使用方法 HTML in Canvas API は以下の 3 つの要素で構成されています。 layoutsubtree 属性 drawElementImage() メソッド paint イベント canvas 要素に layoutsubtree 属性を追加することで、canvas 内に描画したい HTML を定義できます。この段階ではまだ canvas 内には描画されません。 <canvas id="canvas" width="400" height="300" layoutsubtree> <div i
CSSのattr()関数が進化！ HTML属性値を参照する新しい使い方 - ICS MEDIA
HTMLの属性値をCSSから参照できるattr()関数は、これまで::beforeや::afterといった疑似要素のcontentプロパティで使える機能として知られていました。 attr()関数の拡張構文は、CSSの値や単位の扱いを定義する仕様書「CSS Values and Units Module Level 5」で定義されています。さらに、Chrome・Edge 133（2025年2月）以降では、この拡張構文をcontentプロパティ以外でも利用できるようになりました。 拡張されたattr()関数には、次のようなメリットがあります。この記事では、デモを交えながら紹介します。 個別のstyle属性やクラスを減らせる HTMLの属性値をCSSの値として直接利用できる ※注意：本記事のデモは、Chrome・Edge 133以上でご覧ください。 1. HTML属性で色・サイズを指定するデモ
2026年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順作ってみた | DevelopersIO
初めてAWSのサーバレスサービスを学習するときに利用できる「基本的なェブアプリケーションを構築する」の内容を2026年現在でも実行できる手順にしてみました こんにちは、臼田です。 みなさん、AWSのハンズオンで学習してますか？(挨拶 今回は長らくAWSでサーバレスの入門編として活躍していた、AWS初心者向けハンズオンコンテンツである「基本的なウェブアプリケーションを構築する」がリニューアルされ以前のようにGUIベースで簡単に使えなくなってしまったので、旧来の手順を2026年版として起こします。以前は下記手順のようにAWSの提供するコンテンツと併用する手順を作っていましたが、本記事のみでサーバレスの入門として成り立つように編集しました。 ※内容を順次2024年版から更新していきます。一部古い内容が入っていることをご了承ください 概要 AWSでは「サーバレス」と呼ばれる領域のサービス群やこれら
新人AI禁止令と、その結果の答え合わせ - Qiita
はじめに こんにちは、和田です。いえらぶGROUPで開発部の執行役員を務めています。 弊社も例に漏れず、今年はAI活用に非常に注力してきました。Cursorを全エンジニアに導入し、テックリードにはClaude Codeを配布、業務効率化・実装スピード強化・精度向上を進めてきました。 そんな会社で、私はある新人エンジニアに対して「AIの使用を禁止する」という判断を下しました。 先日ちょっと話題になってましたね、こちらの彼の話です。 社内でも圧倒的なAI推進派の私がなぜそのような判断をしたのか。そして3ヶ月後、その新人はどう変わったのか。この記事では、私の目線からのある種答え合わせ的なつもりで経緯と結果をまとめてみました。 最初は「AIをどんどん使わせていた」 新人が入社した当初、私は彼にもCursorを使わせていました。なんならClaude Codeも使わせていました。理由はシンプルです。
GoogleのUI生成AIツール「Stitch」を試してみた | DevelopersIO
こんにちは！運用イノベーション部の大野です。 最近ひょんなことから知り合ったカナダ在住エンジニアの方に、「UI作成ならStitchが便利」というお話を伺いました。 ...が恥ずかしながら「Stitch」について全くの無知だったため、軽くですが実際に触って確かめてきました。 今回はその感想を共有させていただきます。 Stitchってなんだ？ Stitchとは、Google Labs提供のUIデザイン生成支援用AIツールです。 2025年5月に行われた「Google I/O 2025」にて発表されました。 自然言語や画像を入力として与えることで、AIによってWebやモバイル画面のUIを生成してくれる機能を持っています。 また、生成したUIをHTMLコードとして表示することや、Figmaに直接エクスポートすることが可能です。 UI生成可能なAIツールは他にも多数存在しますが、以下の点においてSt
【海外記事紹介】HTMLは死んだ — 問題だらけのWeb技術をどう未来につなげるか
8月6日、acko.netが「HTML is Dead, Long Live HTML」と題した記事を公開し、話題を呼んでいる。この記事では、HTMLとDOMの現在の構造的問題点を検証し、現代的なUI開発との乖離、そして将来に向けた再構築の必要性について詳しく紹介されている。 8月6日、acko.netが「HTML is Dead, Long Live HTML」と題した記事を公開し、話題を呼んでいる。この記事では、HTMLとDOMの現在の構造的問題点を検証し、現代的なUI開発との乖離、そして将来に向けた再構築の必要性について詳しく紹介されている。 以下に、その内容を紹介する。 DOMとHTMLの現状：終焉と限界 記事は、Web開発の現場において、HTMLやDOMが肥大化し、今や誰も全容を把握できないほど複雑化しているという問題意識から始まる。 たとえば、Chromeにおけるdocumen
HTTP/1.1 Must Die
HTTP/1 Must Die It's time to acknowledge HTTP/1.1 is insecure Upstream HTTP/1.1 is inherently insecure, and routinely exposes millions of websites to hostile takeover. Vendors have spent six years deploying mitigations, and researchers have consistently bypassed them. In PortSwigger's latest research, we introduce several novel classes of HTTP desync attack, and showcase critical vulnerabilities w
Visual Studio Code、Web標準の「Baseline」チェックに対応。コード内のHTMLやCSSにカーソルを合わせれば説明表示
Visual Studio Code、Web標準の「Baseline」チェックに対応。コード内のHTMLやCSSにカーソルを合わせれば説明表示 Visual Studio Code 1.100もしくはそれ以後のバージョンでは、標準でコード内のHTMLやCSSがWeb標準のBaselineに対応しているかどうかをチェックする機能が搭載されていることが、web.devブログで紹介されています。 これにより、HTMLやCSSが主要なWebブラウザで問題なく表示されるかどうかが、Visual Studio Codeで簡単にチェックできるようになりました。 Baselineは安心して使えるWeb標準 Baselineとは最新のWeb標準のサブセットです。Baselineに含まれているHTMLやCSSの機能であれば主要なWebブラウザで実装済みであるため、Webアプリケーション開発者が安心して使える機
HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM
宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコンポーネントを構築するために重要な技術ですが、従来は JavaScript を使用しなければ Shadow D
Redashではクエリ結果にHTMLを使えるので便利 長いカラムをdetailsで畳める ほか - hogashi.*
Redash (https://redash.io/) でデータをクエリしたとき、長い値が入ったカラムがあると、クエリ結果が縦に長くなってしまいがち (画像では 3行しかないけど、 100行とかあると見づらいことも多い)。 長い値があるクエリ結果 / 縦に長くなりがちで見づらいこともある Redash では、なんとクエリ結果に HTML が書かれているとレンダされるので、 details タグで囲うことで畳むことができる。便利。*1 長い値をdetailsタグで畳むことができる / クリックしたら全部見れる リンクを張ることもできる。管理画面の URL などで、クエリ結果の id をクエリパラメータに入れたり、名前や時刻をリンクテキストにしたりすると便利。おもてなしとして target="_blank" をつければ、新しいタブで開くことができる。 リンクを張ることができる / target
Deno 2.0リリース ―大規模プロダクトにも対応可能なJavaScript環境へ | gihyo.jp
Deno Land Inc.は2024年10月9日、同社が開発するJavaScript/TypeScriptランタイム環境Denoの新バージョンDeno 2.0のリリースをアナウンスした。 Announcing Deno 2 4 years after Deno 1.0, the next generation of JavaScript is ready for production at scale. Deno 2 is out today: 🐢 Fully backwards compatible with Node and npm 📦 Package management and node_modules and package.json 📅 Long term supporthttps://t.co/LsV4D4Too8 pic.twitter.com/F6EI3whmX8
ボタンをaタグで作るな高校校歌 - 弁護士ドットコム株式会社 Creators’ blog
まずはこちらをお聞きください。 技術的解説: ボタンを a 要素で作るな a 要素は URL などへのリンクをつくるためのもので、button 要素はなんらかの処理を起動するボタンをつくるためのものです。 配置されるものがリンクなら a 要素で実装し、ボタンなら button 要素で実装すべきです。 これに違反すると、意図しない動作や、アクセシビリティ上の問題が発生します。 これは MDN でも詳しく説明されています。 onclick イベント -- \<a>: アンカー要素 - HTML: ハイパーテキストマークアップ言語 | MDN よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、click を待ち受けするようにするというものがあります。 これらの偽の
スタイルをカスタマイズ可能な新しい `<select>` 要素
2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaScript を用いて独自のセレクトボックスを実装することが一般的ですが、この方法はアクセシビリティやパフォーマンスの問題を引き起こすことがありました。 この問題を解決するために新しい既存の <select> 要素をカスタマイズする手段が提案されました。<select> 要素と ::picker(select) 疑似要素に対して appearance:base-select を指定することで、開発者は <s
WebKit Features in Safari 18.0
ContentsNew in Safari 18Web apps for MacCSSSpatial WebHTMLJavaScriptWeb APICanvasManaged Media SourceWebRTCHTTPSWebGLWeb InspectorPasskeysSafari ExtensionsApple PayDeprecationsBug Fixes and moreUpdating to Safari 18.0Feedback Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolve
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
上記の引用にはいくつかのコード例が出てきます。1つめのコード例では、リンク（<a> 要素）に role="menuitem" を付けることでスクリーンリーダーのような支援技術に「ただのリンク」ではなく「メニューのアイテム」であることを認識させたり、aria-label 属性を使ってリンクのテキストを上書きして伝えたりしています。2つめのコード例では、ボタン（<button> 要素）に aria-pressed 属性を付けることで、このボタンがトグルボタン（「押されている・押されていない」の状態をもつボタン）であることを伝え、さらに属性値が "false" であることから「押されていない」すなわち「音を消していない」状態であることを伝えられています。 role="menuitem" や aria-pressed はHTMLの仕様の範囲では表現できない、WAI-ARIAの属性を使わなければ表現
Web 標準と、その限界
JavaScript、たくさんバックエンドで使われてますよね、あなたも使ったことはありませんか？ そんな バックエンドでも使われている JavaScript。そこに標準で組み込まれている Web 標準な API 。それを考えていきます。 Web 標準 とは何か Web を構成するための技術として、主に HTML/CSS/JavaScript があります。 どのブラウザでサイトを見ても同じ結果が得られるように、その HTML/CSS/JavaScript をまとめている仕様のことです。 例えば、 HTML の仕様は HTML Living Standard が主流で、 WHATWG という団体が決めています。 JavaScript では、構文や基本的な機能 (Arrayなどの言語使用) は ECMA という団体が ECMAScript を策定しています。この中にはfetchは含まれていないの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 仕様のメールアドレス正規表現に最小限の修正を加える - Qiita
Konva - JavaScript Canvas 2d Library
Layoutit Grid — CSS Grids layouts made easy!
