矢印キーによるフォーカス移動を宣言的に実装する `focusgroup` 属性
`focusgroup` 属性は、ツールバーやタブリストなどの複合ウィジェットにおける矢印キーのフォーカス移動を宣言的に実装する HTML 属性です。従来必要だった roving tabindex の JavaScript をブラウザに任せ
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
CSS Grid Lanes で Masonry レイアウトを実装する
CSS Grid Lanes は、高さの異なるアイテムを複数のレーンへ隙間なく配置するレイアウト方式です。`display: grid-lanes` を指定することで、JavaScript を使わずに Masonry レイアウトを実装できま
HTML-in-Canvas コンポーネントライブラリ Canvas UI
Canvas UI は HTML-in-Canvas API を活用し、液体シミュレーションやシェーダーといったクリエイティブな UI を構築するためのコンポーネントライブラリです。
Hermes Agent と Slack で設計し、Linear のチケットから Draft PR まで作成するワークフローの素振りをした
Hermes Agent と Slack を連携して要件を整理し、Linear のチケット作成から Coding Worker による実装・検証・Draft PR 作成までを自動化するワークフローを紹介します。
最近の AI コーディングで実践している、設計を中心とした開発の進め方
AI コーディングエージェントの自律性が向上し、複数のエージェントを並行して動かすことが日常になったことで、開発の中で最も時間を使う工程が実装から設計へ移りつつあります。この記事では、設計セッション、Git worktree を使った並列実
Next.js の Instant Navigations を試してみた
Next.js 16.3 Preview では、Instant Navigations という新機能が導入されました。画面遷移で即時表示できない箇所を開発時に検出し、修正を促すための機能です。この記事では Instant Navigatio
Safari MCP サーバーでエージェントが Safari ブラウザを操作できるようにする
Web アプリケーションの開発には実ブラウザでの動作確認が必要不可欠です。Playwright CLI や chrome-devtools-mcp などエージェント向けのブラウザ操作ツールは多くが Chromium に依存しています。Saf
AI SDK の MCP Apps 対応でインタラクティブな UI を返す
AI SDK の v7 では MCP Apps 対応が追加されました。AI モデルはツールを呼び出す際に `ui://` リソースが紐付けられていれば、アプリケーション側でその UI をサンドボックス化された環境でレンダリングすることができ
AI エージェントフレームワーク Flue を試してみた
Flue は AI エージェントを構築するための TypeScript フレームワークです。ハーネス駆動のアーキテクチャを採用しており、エージェントの構築に必要な機能を包括的に提供しています。この記事では SRE エージェントを構築する例を
Deno で Desktop アプリを作れるようになっていた
Deno v2.9.0 以降で `deno desktop` コマンドが使えるようになりました。`deno desktop` コマンドは単一の TypeScript ファイルから Next.js プロジェクトまで、デスクトップアプリに変換で
Vercel で Feature Flags を管理する
今日のアプリケーション開発において、Feature Flags（機能フラグ）は欠かせないツールとなっています。Vercel Flags を使用することで、Vercel 上でホストされているアプリケーションに Feature Flags を簡
Cloudflare の一時アカウントを使って即座にデプロイできるようになった
Cloudflare の Temporary Cloudflare Accounts を使用すると、人間が介入することなく AI エージェントが即座に Cloudflare Workers にデプロイできるようになります。この記事では、Te
ワークフローを再利用可能なスキルに変換する Record & Replay を試してみた
Codex の Record & Replay は macOS 上でのユーザーの操作を実演することで再利用可能なスキルに変換する機能です。例えば経費精算の提出や勤怠アプリへの打刻や工数入力、定期的なレポートの作成などをスキルとして記録し、煩
AI エージェントフレームワーク eve を試してみた
Vercel が新しい AI エージェントフレームワーク eve を発表しました。Next.js の設計思想に基づいて構築された eve は、AI エージェントの開発に必要な機能がすべて揃ったフレームワークです。この記事では、eve を使っ
実装前に設計を徹底的にインタビューし、要件を明確にするためのスキル `/grill-me`
コーディングエージェントの自律性が向上し、並行して複数のエージェントを動かすことが当たり前になってきた今、エージェントの動きを逐一監視することは現実的ではなくなっています。そのため実装前に人間と AI の間で共通理解を形成することが重要にな
`/goal` コマンドの活用例: Vitest の実行時間を 6 倍高速化した話
Vitest の `isolate: false` オプションを有効にすることで、テストの実行時間を大幅に短縮できましたが、その際に大規模なコードの修正が必要でした。Claude Code の `/goal` コマンドを活用することで、最終
エディタを Zed に乗り換えてみた
Zed は Rust で書かれたネイティブアプリケーションで、非常に高速な動作と軽量な設計が特徴の新しいエディタです。この記事では、Zed のインストール方法と、実際に使ってみて感じた主要な機能や特徴について紹介していきたいと思います。
OpenAI の Secure MCP Tunnel を試してみた
OpenAI の Secure MCP Tunnel を利用すると、プライベートな MCP サーバーをパブリックなインターネットに公開することなく OpenAI のプロダクトに接続できるようになります。この記事では Secure MCP T
Claude Code の Dynamic Workflow を試してみた
Claude Code v2.1.154 で Dynamic Workflow と呼ばれる機能が追加されました。Dynamic Workflow は数時間から数日かかるような大規模な作業を実行するために設計されています。ワークフローは Ja
2026-07-28 MCP 仕様ではステートレスファーストになる
2026-07-28 MCP 仕様リリース候補の最も大きな変更点は、MCP サーバーがステートレスファーストになることです。これにより、MCP サーバーはシンプルなロードバランサーの背後でスケーリングできるようになります。また `Mcp-M
Hermes Agent と Grok の統合を試してみた
Hermes Agent は v0.14.0 で xAI の Grok モデルとの統合できるようになりました。Grok モデルは X（旧 Twitter）の投稿を検索できる `x_search` ツールを使えることが特徴で、リアルタイムでト
Generative UI のためのフレームワーク OpenUI
OpenUI は Generative UI を構築するためのフレームワークです。OpenUI 言語と呼ばれる独自の宣言型言語を使用して、AI が UI を構築するための指示を与えるという新しいアプローチを提供します。この記事では Open
CSS Grid Layout の gap を装飾する `column-rule` と `row-rule`
グリッドレイアウトで「列の間に線を引く」といった装飾は多くの場面で必要になります。しかし、flexbox や grid で列の間に線を引くためのプロパティは存在せず、ボーダーや背景色を利用して線のように見せるといったワークアラウンドが必要で
兄弟要素のインデックスを返す CSS 関数 sibling-index()
`sibling-index()` は要素の兄弟要素の中でのインデックスを返します。`sibling-index()` 関数により取得したインデックスを使用することにより、スタッガー（時間差）アニメーションや、色相を段階的に変えるといった、
Codex を利用した iOS アプリ開発を試してみた
私自身は Web 開発の経験はありますが、iOS アプリ開発の経験はほとんどありません。このようなバックグラウンドを持つ私がコーディングエージェントである Codex を利用して iOS アプリ開発をどこまで進められるか試してみました。コー
Playwright CLI で AI エージェントに視覚的なフィードバックを与える
Playwright CLI v0.1.9 で追加されたアノテーション機能は AI エージェントに視覚的なフィードバックを与えるために便利な機能です。アノテーション機能を利用すると、ブラウザの要素を選択して、その要素に対するコメントを残すこ
`contrast-color()` 関数を使用した自動コントラスト調整
`contrast-color()` 関数は、指定した色に対して `white` もしくは `black` のどちらがより高いコントラスト比を持つかを自動的に判断し、適切な色を返す関数です。動的に色が変わる場合やユーザーがカスタムテーマを使
AI エージェントが UI を安全に生成して描画するためのプロトコル A2UI とは？
Google が提唱する A2UI（Agent-to-UI）プロトコルは、AI エージェントが安全に UI を生成してクライアントに送信し、クライアントがそれを描画するための標準的な方法を提供します。A2UI は、AI エージェントがテキス
事前に定義した UI を AI に生成させる json-render を試してみた
AI に UI を生成させる Generative UI の手法が注目されています。しかし、AI の出力が予測不可能であるため、意図しない UI が生成されてしまうリスクもあります。json-render はあらかじめ定義したコンポーネント
命令的な方法で支援技術に通知する `ariaNotify()` メソッド
`ariaNotify()` メソッドは、支援技術を使用しているユーザーに対して、動的なコンテンツの更新を通知するための命令的な方法を提供する Web API です。従来の WAI-ARIA の仕様では宣言的な属性を使用して支援技術に情報を
gh コマンドでエージェントスキルをインストール・管理できるようになった
GitHub CLI に `gh skill` コマンドが追加され、GitHub 上のエージェントスキルを簡単にインストール・検索・管理できるようになりました。この記事では `gh skill` コマンドの使い方について紹介します。
AI エージェント向けのパッケージマネージャー apm
apm は Microsoft が開発した AI エージェント向けパッケージマネージャーです。npm や pip のように依存関係を解決しながら、エージェントのスキルや MCP をパッケージ化して管理・共有できます。この記事では apm の
Claude の Advisor tool を活用して性能とコストのバランスを最適化する
Claude に新たに追加された advisor tool を使用すると、通常のタスクは軽量モデルに任せつつ、必要に応じて高性能モデルに相談することで、性能とコストのバランスを最適化できます。この記事では Claude Code 内で ad
Canvas 内に直接 HTML を描画できる HTML in Canvas API について
HTML in Canvas API は WICG で提案されている API で、Canvas 内に直接 HTML を描画できるようにするものです。現在の `` 要素にはリッチテキストや HTML コンテンツを描画する標準的な方法が存在しな
大規模にエージェントを構築する Claude Managed Agents を試してみた
Claude Managed Agents は Claude を自律的なエージェントとして動作させるためのハーネスとインフラストラクチャーを提供します。長時間かかるタスクや非同期のタスクを実行するために使用するのが想定されています。この記事
Codex の Sandbox とエージェントの承認について
コーディングエージェントの自動承認の範囲をどこまで許可するかは、ユーザー体験とセキュリティのバランスを取る上で重要な設計指針の1つです。Codex ではサンドボックス機能を提供することで、エージェントが安全に自律的に動作できる環境を実現して
Boneyard で正確なスケルトンローダーを生成する
スケルトンローダーは、コンテンツが読み込まれる前に表示されるプレースホルダーで、ユーザーに対して読み込み中であることを視覚的に示すためのものです。Boneyard はスケルトンローダーの手動の計測と更新の手間を解消するためのフレームワークで
Codex のネットワークアクセス設定
デフォルトの `workspace-write` サンドボックスではネットワークアクセスは無効です。外部通信を許可したい場合は、`config.toml` で明示的に有効にします。
Codex Hooks で終了時に通知を出す
Codex では `hooks` を使って、特定のタイミングで任意のコマンドを実行できます。例えば応答が終わるたびに通知したい場合は `Stop hook` を使います。
Codex の smart_approvals で承認の負担を軽減する
コーディングエージェントに多く承認を求められると、本当に確認が必要なコマンドの実行を見落とす確率が高まります。Codex には `smart_approvals` という設定があります。これは承認が必要になったとき、その一部をそのままユーザ