Blog

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

事前に定義した UI を AI に生成させる json-render を試してみた

AI に UI を生成させる Generative UI の手法が注目されています。しかし、AI の出力が予測不可能であるため、意図しない UI が生成されてしまうリスクもあります。json-render はあらかじめ定義したコンポーネントやアクションのカタログに基づいて AI に JSON を生成させることで、AI が誤った構造の UI を生成するリスクを減らし、アプリケーションの一部として自然に統合された UI を提供するフレームワークです。

命令的な方法で支援技術に通知する `ariaNotify()` メソッド

`ariaNotify()` メソッドは、支援技術を使用しているユーザーに対して、動的なコンテンツの更新を通知するための命令的な方法を提供する Web API です。従来の WAI-ARIA の仕様では宣言的な属性を使用して支援技術に情報を伝える方法が一般的でしたが、`ariaNotify()` メソッドは JavaScript を使用して、特定のタイミングで支援技術に通知を送ることができるという点が特徴です。

Canvas 内に直接 HTML を描画できる HTML in Canvas API について

HTML in Canvas API は WICG で提案されている API で、Canvas 内に直接 HTML を描画できるようにするものです。現在の `<canvas>` 要素にはリッチテキストや HTML コンテンツを描画する標準的な方法が存在しないという課題があります。この記事では HTML in Canvas の使用方法やユースケースについて説明します。

大規模にエージェントを構築する Claude Managed Agents を試してみた

Claude Managed Agents は Claude を自律的なエージェントとして動作させるためのハーネスとインフラストラクチャーを提供します。長時間かかるタスクや非同期のタスクを実行するために使用するのが想定されています。この記事では実際に Claude Managed Agents を試してみた内容を紹介します。

Codex の Sandbox とエージェントの承認について

コーディングエージェントの自動承認の範囲をどこまで許可するかは、ユーザー体験とセキュリティのバランスを取る上で重要な設計指針の1つです。Codex ではサンドボックス機能を提供することで、エージェントが安全に自律的に動作できる環境を実現しています。この記事では、Codex のサンドボックスの仕組みと、サンドボックス外でコマンドを実行する際の承認プロセスについて説明します。

Boneyard で正確なスケルトンローダーを生成する

スケルトンローダーは、コンテンツが読み込まれる前に表示されるプレースホルダーで、ユーザーに対して読み込み中であることを視覚的に示すためのものです。Boneyard はスケルトンローダーの手動の計測と更新の手間を解消するためのフレームワークです。この記事では、Boneyard を使用してスケルトンローダーを簡単に実装する方法について説明します。

difit-review スキルでエージェント自身に変更点をコメントしてもらおう

difit はローカルの git 差分を GitHub スタイルのインターフェースで確認できる CLI ツールです。difit-review スキルを使用することでエージェントがコードの変更点にコメントを残した状態で difit を起動できます。この記事では、difit-review スキルを使用してエージェント自身にコードの変更点をコメントしてもらう方法を紹介します。

Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc

Codex プラグインを使用すると、Claude Code から Codex を呼び出してコードレビューをしたり、タスクを委任するといったことが簡単にできるようになります。この記事では、Codex プラグインの使用方法と、どのような方法で Codex を呼び出しているのかといった内部の仕組みについて紹介します。

Cline Kanban で複数のコーディングエージェントを一括管理する

Cline Kanban は人間が数十個のエージェントを運用するうえで正気を保つためにはどうすればいいか、という問いに対する 1 つの答えとして、Cline が開発したツールです。Cline Kanban はカンバン方式のビューを提供します。各カードは稼働中のエージェントを表しており、どのエージェントが実行中で、どのエージェントが作業がブロックされているのか、どのエージェントが完了しているのかを一目で把握できるようになっています。