はてなブックマーク

この要素は PEPC（Page Embedded Permission Control） として提案されていた <permission type="camera"> の後継にあたります。汎用の <permission> を能力ごとの要素に分割する方針に変わり、先に <geolocation> が、続いて <usermedia> が実装されました。 ユーザーのインタラクションの前に .setConstraints() を呼び出すことで、解像度やフレームレートなど、getUserMedia() と同様の制約を指定できます。 capture.setConstraints({ video: { width: { ideal: 1280 }, height: { ideal: 720 } }, audio: { echoCancellation: true }, }); ただし、getUserMed

sr-only は画面上では表示せず、スクリーンリーダーからは読み取れる状態にするための CSS クラスです。display: none や hidden を使用するとアクセシビリティツリーからも削除されるため、1px の領域に切り詰める方法などが使われます。 ChatGPT の回答本文には、aria-live や aria-busy は指定されていませんでした。つまり、動的に更新される回答本文はスクリーンリーダーへ自動通知されない構成です。回答とは別に、視覚的に隠された role="status" aria-live="polite" aria-atomic="true" の要素が配置されています。この要素は、生成中は「考え中」、生成が終わると「回答が完了しました」といったテキストへ更新され、回答の状態を通知します。 <div role="status" aria-live="polit

Fetch API に textStream() メソッドが追加されました。レスポンスボディを UTF-8 のテキストとして読み出すストリームを返すメソッドで、これまで TextDecoderStream を自分で繋いでいた処理を 1 つの呼び出しに置き換えられます。この記事では従来の書き方との違いを紹介します。 fetch で取得したレスポンスを、最後まで待たずに届いた分から順に画面へ描画することで、ユーザーは待ち時間を短く感じられます。生成 AI のチャット UI のように、テキストが少しずつ表示されていく体験がその代表例で、普段から見慣れているのではないでしょうか。 このときレスポンスボディをそのまま読むと、流れてくるチャンクは Uint8Array です。バイト列を文字列にするには getReader() でチャンクを逐次読み出し、TextDecoder によるデコード処理が必要で

Flue 2.0 では従来の静的なエージェントの定義方法から、Agent Hooks と呼ばれる hook ベースのエージェントフレームワークへと進化しました。Agent Hooks では React の hooks と同様の API を用いて、エージェントの状態やライフサイクルを管理することができます。このブログ記事では Agent Hooks を使用してエージェントを構築する方法を紹介します。 Flue は Astro の制作者によって作られた TypeScript 製の AI エージェントフレームワークです。Flue 2.0 では、従来の静的なエージェントの定義方法から、Agent Hooks と呼ばれる hook ベースのエージェントフレームワークへと変化しました。Agent Hooks では React の hooks と同様の API を用いて、エージェントの状態やライフサイク

behavior token は、フォーカスナビゲーションの動作と ARIA ロールを結び付けます。たとえば <div focusgroup="tablist"> のように、明示的なロールもネイティブのセマンティクスも持たない汎用的な要素へ tablist token を指定すると、ブラウザはコンテナを tablist、子の <button> を tab としてアクセシビリティツリーに公開します。同時に、tablist のデフォルトである inline wrap が適用され、インライン軸の矢印キーでフォーカスが循環します。 focusgroup は、要素がすでに持つネイティブのセマンティクスや明示的な role を上書きしません。たとえば <ul focusgroup="menubar"> は自動的に menubar へ変わらず、リストのセマンティクスを保ちます。リストをアプリケーションの

2026 年 7 月現在、CSS Grid Lanes を実装しているのは Safari 26.4 以降のみです。仕様は策定中であり、今後構文や動作が変更される可能性があります。 Pinterest の画像ギャラリーのように、高さの異なるアイテムを複数の列へ隙間なく配置するレイアウトは、Masonry（石積み）レイアウトと呼ばれます。 しかし、このような Masonry レイアウトを実現するのは簡単ではありません。従来の CSS Grid を使ってカードを並べた場合、同じ行にあるアイテムは 1 番背の高いアイテムに合わせて配置されます。そのため、カードの高さが異なるとアイテムの下に空白が残ります。 <div class="grid"> <article class="card">...</article> <article class="card">...</article> <artic

Canvas UI は HTML-in-Canvas API を活用し、液体シミュレーションやシェーダーといったクリエイティブな UI を構築するためのコンポーネントライブラリです。 Canvas UI は HTML-in-Canvas API を活用し、液体シミュレーションやシェーダーといったクリエイティブな UI を構築するためのコンポーネントライブラリです。HTML-in-Canvas は、<canvas> 要素の子として配置した HTML 要素の描画結果を、2D Canvas や WebGL、WebGPU で利用するための実験的な API です。元の HTML は DOM として保たれるため、Canvas 上の表示と DOM の位置を適切に同期することで、ポインターやキーボードによる操作、アクセシビリティツリーへの参加を維持したまま WebGL エフェクトを適用できます。 HTML

Hermes Agent をローカルで動かす場合、意図せず重要なファイルを削除してしまったり、ホスト環境の認証情報を取得し外部に送信してしまうリスクがあります。本番相当の環境で Agent を動かす場合は、Docker や Modal、Daytona などのサンドボックス環境で実行することを推奨します。 Select terminal backend: ↑↓ navigate ENTER/SPACE select ESC cancel (○) Local - run directly on this machine (default) (○) Docker - isolated container with configurable resources (○) Modal - serverless cloud sandbox (○) SSH - run on a remote machin

AI コーディングエージェントの自律性が向上し、複数のエージェントを並行して動かすことが日常になったことで、開発の中で最も時間を使う工程が実装から設計へ移りつつあります。この記事では、設計セッション、Git worktree を使った並列実行、自律的な検証、AI によるコードレビューなど、最近の私が実践している開発の進め方を紹介します。 以前「AI と本音トーク：エンジニアの仕事、これからどうなる？」という記事で、AI コーディングエージェントを利用するようになったことで、コードを書く時間が減り、設計について考える時間が増えたと書きました。その後、AI モデル自身の性能やエージェントを動かすハーネスがさらに改善され、複数のエージェントを並行して動かすことが日常になりました。この傾向は以前よりもさらに強くなっていると感じています。 現在では、自分でコードを書くことはほとんどありません。だから

Next.js 16.3 Preview では、Instant Navigations という新機能が導入されました。画面遷移で即時表示できない箇所を開発時に検出し、修正を促すための機能です。この記事では Instant Navigations を実際に試してみた様子を紹介します。 Next.js 16.3 Preview では、Instant Navigations という新機能が導入されました。サーバーでデータを取得する画面へ遷移する場合、サーバーからのレスポンスを待ってから次の画面が描画されることがあります。これはユーザーの体験として、リンクをクリックしても何も起こらないように感じさせてしまう問題があります。ナビゲーションが進行中であることを示すため NProgress などのライブラリを使用してプログレスバーを表示させていたという方も多いのではないでしょうか。 従来の App Ro

Flue は AI エージェントを構築するための TypeScript フレームワークです。ハーネス駆動のアーキテクチャを採用しており、エージェントの構築に必要な機能を包括的に提供しています。この記事では SRE エージェントを構築する例を通じて Flue の機能に触れていきます。 Flue は AI エージェントを構築するための TypeScript フレームワークです。Flue は Claude Code をはじめとするコーディングエージェントが採用しているハーネス駆動のアーキテクチャを採用しており、あらゆる AI モデルをエージェントとして利用することができます。ハーネスアーキテクチャを構成する基盤として OpenCrew においても採用されている Pi が利用されています。Pi は「minimal terminal coding harness」と説明されており、ターミナル上でのコ

Deno v2.9.0 以降で `deno desktop` コマンドが使えるようになりました。`deno desktop` コマンドは単一の TypeScript ファイルから Next.js プロジェクトまで、デスクトップアプリに変換できます。この記事では Deno でデスクトップアプリを作る方法について紹介します。 Deno v2.9.0 以降で deno desktop コマンドが使えるようになりました。deno desktop コマンドは単一の TypeScript ファイルから Next.js プロジェクトまで、デスクトップアプリに変換できます。今までも Web 技術を使用してデスクトップアプリを作るためのフレームワークとして、Electron や Tauri, Electrobun などがありましたが、それぞれにトレードオフがありました。Electron は Node.js

今日のアプリケーション開発において、Feature Flags（機能フラグ）は欠かせないツールとなっています。Vercel Flags を使用することで、Vercel 上でホストされているアプリケーションに Feature Flags を簡単に導入することができます。この記事では、Vercel Flags を使用して Vercel 上でホストされているアプリケーションに Feature Flags を導入する方法を試してみます。 今日のアプリケーション開発において、Feature Flags（機能フラグ）は欠かせないツールとなっています。Feature Flags とは、コードベースに新しい機能を追加しながらも、その機能を特定のユーザーや環境でのみ有効にすることができる仕組みです。コードでは以下のような条件分岐で使用されることが一般的です。 if (isFeatureEnabled('ne

Cloudflare の Temporary Cloudflare Accounts を使用すると、人間が介入することなく AI エージェントが即座に Cloudflare Workers にデプロイできるようになります。この記事では、Temporary Cloudflare Accounts を使用して実際に Cloudflare Workers にデプロイする方法を試してみます。 現在の開発のワークフローでは AI エージェントをゴールを達成するまで自律的に動作させて、フィードバックを通じてアプリケーションを改善していくというスタイルが増えてきています。このような開発ワークフローでは、人間ができる限り介入することなく動かせるようなガードレール・実行環境・自動検証ツールを整備するいわゆるハーネスが重要になってきます。人間が介入する頻度が高ければ高いほど、開発のスピードが落ちてしまうからで

Codex の Record & Replay は macOS 上でのユーザーの操作を実演することで再利用可能なスキルに変換する機能です。例えば経費精算の提出や勤怠アプリへの打刻や工数入力、定期的なレポートの作成などをスキルとして記録し、煩雑な定型業務を AI に任せることが期待できます。この記事では、Record & Replay を実際に試してみた様子を紹介します。 Codex の Record & Replay は macOS 上でのユーザーの操作を実演することで再利用可能なスキルに変換する機能です。Record & Replay が効果的な場面は、ワークフローが定型的なものでユーザーが頻繁に繰り返す場合や、プロンプトで説明するよりも実際の操作を見せる方が理解しやすい場合です。例えば経費精算の提出や勤怠アプリへの打刻や工数入力、定期的なレポートの作成などが挙げられます。このような操作

Vercel が新しい AI エージェントフレームワーク eve を発表しました。Next.js の設計思想に基づいて構築された eve は、AI エージェントの開発に必要な機能がすべて揃ったフレームワークです。この記事では、eve を使って簡単なエージェントを作成し、実行する方法を紹介します。 Vercel が新しい AI エージェントフレームワーク eve を発表しました。eve は Next.js の設計思想に基づいて構築され、本番環境で実行するために必要な以下の機能を備えています。ウェブで必要なものがすべて揃ったフレームワークが Next.js であるように、AI エージェントの開発に必要なものがすべて揃ったフレームワークが eve という位置付けです。 耐久性のあるセッション（セッションが一時停止しても、停止した場所から正確に再開できる） サンドボックス化された実行環境 Huma

コーディングエージェントの自律性が向上し、並行して複数のエージェントを動かすことが当たり前になってきた今、エージェントの動きを逐一監視することは現実的ではなくなっています。そのため実装前に人間と AI の間で共通理解を形成することが重要になっています。この記事では、実装前の設計フェーズで要件を明確にし、人間と AI の間で共通理解を形成するためのスキル `/grill-me` について紹介します。 コーディングエージェントが登場した当初はコマンドの実行やコードの生成のたびに承認し、間違った方向に進みそうになれば随時介入するような、つきっきりで監視する手法が一般的であったと記憶しています。しかし最近では AI モデル自身の性能の向上やハーネスエンジニアリングの発展により、エージェントが自律的にタスクを完了できるようになっています。エージェントの自律性の向上は、ユーザーがエージェントの動きを逐

Vitest の `isolate: false` オプションを有効にすることで、テストの実行時間を大幅に短縮できましたが、その際に大規模なコードの修正が必要でした。Claude Code の `/goal` コマンドを活用することで、最終的なゴールを達成するために必要なステップを自律的に判断して実行させることができます。この記事ではその経験について紹介します。 あるプロジェクトではフロントエンドのテストの実行時間が非常に長く、開発の生産性に大きな影響を与えていました。テストの実行時間が長いと、CI の待機時間が増えてしまったり、コードを書いてからフィードバックを得るまでのサイクルが遅くなり、特に AI エージェントにコードを書かせている場合には大きなボトルネックになっていました。プロジェクトの構成を大まかに説明すると、フロントエンドは React で構築されており、Vitest と Te

Zed は Rust で書かれたネイティブアプリケーションで、非常に高速な動作と軽量な設計が特徴の新しいエディタです。この記事では、Zed のインストール方法と、実際に使ってみて感じた主要な機能や特徴について紹介していきたいと思います。 思えばエンジニアとして生を受けてから、大半の時間を Visual Studio Code を相棒としてコードを書いていました。私がはじめて VS Code に出会ったときの衝撃といえばはかりしれないものでした。当時は Sublime Text や Atom などのエディタが主流だった中で、VS Code は軽快な動作と豊富な拡張機能、そして IDE とエディタのちょうど中間のような絶妙な立ち位置で、まさにエンジニアの理想を体現したエディタでした。以来、VS Code は私のコードを書くためのホームとなり、テーマやキーバインディングをカスタマイズし、数え切れ

Claude Code v2.1.154 で Dynamic Workflow と呼ばれる機能が追加されました。Dynamic Workflow は数時間から数日かかるような大規模な作業を実行するために設計されています。最近では Bun を Zig から Rust に移植するプロジェクト が話題を呼びましたが、このプロジェクトにおいても Dynamic Workflow が利用されていたようです。 Dynamic Workflow は複数のサブエージェントをオーケストレーションするための JavaScript スクリプトのことです。ワークフローが開始されると計画をコードに変換します。Claude はタスクに応じてワークフローのスクリプトを生成し、実行時にはそのスクリプトとランタイムがサブエージェントの実行順序や中間結果を管理します。計画をコード化することにより、単にエージェントの数を増やす

2026-07-28 MCP 仕様リリース候補の最も大きな変更点は、MCP サーバーがステートレスファーストになることです。これにより、MCP サーバーはシンプルなロードバランサーの背後でスケーリングできるようになります。また `Mcp-Method` ヘッダに基づいたトラフィックのルーティングや、サーバー応答のキャッシュなども可能になります。この記事では 2026-07-28 MCP 仕様リリース候補におけるステートレスなプロトコルの変更点について紹介します。 MCP（Model Context Protocol）サーバーの初期段階ではローカルの stdio を通じて AI エージェントにツールを提供する手段として使用されていました。しかし、ローカルで動作する MCP サーバーは、AI エージェントが動作する環境に依存してしまうため、AI エージェントがクラウド上で動作している場合などに

Hermes Agent は v0.14.0 で xAI の Grok モデルとの統合できるようになりました。Grok モデルは X（旧 Twitter）の投稿を検索できる `x_search` ツールを使えることが特徴で、リアルタイムでトレンドを把握したり、最新の情報を取得できることが強みとなっています。この記事では Hermes Agent と Grok の統合を試してみた様子を紹介します。 Hermes Agent は Nous Research が開発している AI エージェントです。学習したことを記憶し、稼働時間が長くなるほど能力が高まる自律型エージェントとして設計されています。CLI, Slack, Discord など様々なプラットフォームからアクセスできるようになっており、特定の AI モデルに依存しない設計になっています。 v0.14.0 では xAI の Grok モデ

OpenUI は Generative UI を構築するためのフレームワークです。OpenUI 言語と呼ばれる独自の宣言型言語を使用して、AI が UI を構築するための指示を与えるという新しいアプローチを提供します。この記事では OpenUI を使用して Generative UI を実装する方法について解説します。 AI エージェントがチャットの応答で UI を生成する Generative UI と呼ばれる分野が注目を集めています。従来の AI エージェントとの対話はテキストベースが中心です。例えば「京都の旅行の計画をして」といった質問に対して、AI はテキストで観光地の場所を説明したり観光名所の外観を説明しようとしますが、人間の脳は視覚情報で理解する方が得意なため、テキストで長々と説明されるよりも地図や写真を見た方が理解しやすいことが多いです。 Generative UI とは、A

`sibling-index()` は要素の兄弟要素の中でのインデックスを返します。`sibling-index()` 関数により取得したインデックスを使用することにより、スタッガー（時間差）アニメーションや、色相を段階的に変えるといった、兄弟要素の位置に基づいたスタイリングが可能になります。これまでは JavaScript を使用して実装する必要があったような効果も、純粋な CSS で実現できるようになります。 sibling-index() は CSS Values and Units Module Level 5 で定義された関数で、要素の兄弟要素の中でのインデックスを返します。インデックスは 1 から始まり、同じ親を持つ要素の中で、現在の要素が何番目に位置しているかを示します。例えば、ある要素が親の子要素の中で 3 番目に位置している場合、sibling-index() は 3 を

私自身は Web 開発の経験はありますが、iOS アプリ開発の経験はほとんどありません。このようなバックグラウンドを持つ私がコーディングエージェントである Codex を利用して iOS アプリ開発をどこまで進められるか試してみました。コーディングエージェントは単に中身を見ずにアプリケーションを作るいわゆる「バイブコーディング」的な使い方だけでなく、なぜこのコードが必要なのか？より良い設計にできないか？といったことを随時質問しながら進める学習用途の使い方が中心です。 AI エージェントの登場はコーディングの民主化というムーブメントをもたらしました。AI エージェントは、専門的な知識やスキルがなくても、自然言語で指示を与えるだけでコードを書いてくれるため、これまでプログラミングにアクセスできなかった人々も自分のアイデアを形にできるようになりました。私自身は Web 開発の経験はありますが、i

Playwright CLI v0.1.9 で追加されたアノテーション機能は AI エージェントに視覚的なフィードバックを与えるために便利な機能です。アノテーション機能を利用すると、ブラウザの要素を選択して、その要素に対するコメントを残すことができます。AI エージェントはこのアノテーションが残された要素を簡単に特定できるため、どのコードを修正すればよいのかを判断しやすくなります。 AI エージェントを使用してフロントエンドを開発する際、どのように視覚的なフィードバックを提供するかはよくある課題です。AI エージェントは自身が書いたコードに対してテストや Lint から得られるフィードバックをもとに改善するというサイクルを繰り返すことによってコードの品質を向上させることができます。しかし、フロントエンドの開発では、例えば CSS が実際にどのように適用されているか、あるいは JavaScr

AI に UI を生成させる Generative UI の手法が注目されています。しかし、AI の出力が予測不可能であるため、意図しない UI が生成されてしまうリスクもあります。json-render はあらかじめ定義したコンポーネントやアクションのカタログに基づいて AI に JSON を生成させることで、AI が誤った構造の UI を生成するリスクを減らし、アプリケーションの一部として自然に統合された UI を提供するフレームワークです。 AI との対話において単にテキストをやりとりするだけでなく、UI を表示するケースが増えてきました。これはテキストだけでは伝えきれない情報を視覚的に表現したり、ユーザーが操作できるインターフェイスを提供するためです。例えば旅行の計画を立てるとき、単にテキストで目的地までのルートを説明されるよりも、地図上にルートが表示される方がわかりやすいでしょう

スキルをインストールする スキルを検索する それでは gh skill コマンドを使ってスキルをインストールしてみましょう。GitHub 上で公開されているスキルを探すには gh skill search コマンドが使用できます。もしくは skills.sh のようなスキルカタログサイトを参照しても良いでしょう。ここでは例として React に関するスキルを検索してみます。 gh skill search react 上記のコマンドを実行すると、GitHub Code Search API を通じて公開リポジトリ全体から、スキル名や説明に "react" というキーワードを含む SKILL.md が検索されます。検索結果からそのままチェックを入れてインストールできます。 スキルの内容を確認する ここでは https://github.com/vercel-labs/next-skills