Blog

Web開発とフロントエンド技術に関する記事を探索しましょう

ストリーミングされるチャット UI の回答をスクリーンリーダーに伝える手法の調査

生成 AI のチャット UI では、回答が少しずつ画面に表示されます。このような更新をそのままライブリージョンに入れると、スクリーンリーダーが生成途中の回答を細切れに読み上げることがあります。ChatGPT と Claude、チャット UI ライブラリの実装を調査し、回答本文と状態通知を分離したサンプルを実装します。

`aria-actions` 属性で要素に関連する操作を支援技術へ伝える

`aria-actions` 属性は、ある要素に対して実行できる操作を提供する別のインタラクティブ要素を関連付けるための WAI-ARIA のプロパティです。この記事では、メール一覧の各項目と「既読にする」「スターを付ける」「削除する」ボタンを関連付ける例を使い、`aria-actions` が解決する問題と使い方を紹介します。

Hono のログを Pino と OpenTelemetry で計装する

OpenTelemetry を使用すると、アプリケーションのログをベンダーに依存しない形式で収集し、トレースと関連付けることができます。この記事では Node.js で動作する Hono バックエンドの構造化ログを Pino で出力し、OpenTelemetry Collector を通じて Loki と Tempo に送信する方法を紹介します。

Flue 2.0 で導入された hook ベースのエージェントフレームワーク

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

矢印キーによるフォーカス移動を宣言的に実装する `focusgroup` 属性

`focusgroup` 属性は、ツールバーやタブリストなどの複合ウィジェットにおける矢印キーのフォーカス移動を宣言的に実装する HTML 属性です。従来必要だった roving tabindex の JavaScript をブラウザに任せ、単一の Tab ストップ、折り返し、最後にフォーカスした項目の記憶などを提供します。この記事では Chrome 150 で利用可能になった `focusgroup` 属性の使い方を紹介します。

CSS Grid Lanes で Masonry レイアウトを実装する

CSS Grid Lanes は、高さの異なるアイテムを複数のレーンへ隙間なく配置するレイアウト方式です。`display: grid-lanes` を指定することで、JavaScript を使わずに Masonry レイアウトを実装できます。この記事では `display: grid-lanes` の基本的な使い方を紹介します。

最近の AI コーディングで実践している、設計を中心とした開発の進め方

AI コーディングエージェントの自律性が向上し、複数のエージェントを並行して動かすことが日常になったことで、開発の中で最も時間を使う工程が実装から設計へ移りつつあります。この記事では、設計セッション、Git worktree を使った並列実行、自律的な検証、AI によるコードレビューなど、最近の私が実践している開発の進め方を紹介します。

Next.js の Instant Navigations を試してみた

Next.js 16.3 Preview では、Instant Navigations という新機能が導入されました。画面遷移で即時表示できない箇所を開発時に検出し、修正を促すための機能です。この記事では Instant Navigations を実際に試してみた様子を紹介します。

Safari MCP サーバーでエージェントが Safari ブラウザを操作できるようにする

Web アプリケーションの開発には実ブラウザでの動作確認が必要不可欠です。Playwright CLI や chrome-devtools-mcp などエージェント向けのブラウザ操作ツールは多くが Chromium に依存しています。Safari Technology Preview 247 の MCP サーバーは、エージェントを Safari に接続し操作できるようにします。