Blog

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

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 はカンバン方式のビューを提供します。各カードは稼働中のエージェントを表しており、どのエージェントが実行中で、どのエージェントが作業がブロックされているのか、どのエージェントが完了しているのかを一目で把握できるようになっています。

Figma のキャンバスを AI エージェントから操作してデザインしよう

2026 年 3 月末、Figma の MCP サーバーに Figma のキャンバスを直接操作できる `use_figma` ツールが追加されました。`use_figma` ツールは Figma Plugin API を通じて Figma ファイル上で JavaScript を直接実行する汎用ツールとして設計されている点が特徴です。この記事では、実際に `use_figma` ツールを使用して Figma のキャンバスを操作する方法を試してみます。

Storybook MCP を試してみた

Storybook MCP は Storybook と AI エージェントを接続し、エージェントがコンポーネントドキュメントを参照しつつコードを生成したり、ストーリーを作成して UI コンポーネントをテストしたりできるようにする機能です。この記事では、Storybook MCP を実際に試してみた内容を紹介します。

Claude Code と Discord 連携はどのように動作しているのか?

Claude Code v2.1.80 から Research Preview 版として Claude Code channels(以下、チャンネル)が利用できるようになりました。チャンネルとは実行中の Claude Code のセッションに対して、外部からイベントを送ることができる MCP サーバーのことです。この記事では、Claude Code と Discord 連携がどのように動作しているのか、その仕組みを解説します。

Discord から Claude Code とやり取りしてみた

Claude Code v2.1.80 から Research Preview 版として Claude Code channels(以下、チャンネル)が利用できるようになりました。チャンネルとは実行中の Claude Code のセッションに対して、外部からイベントを送ることができる MCP サーバーのことです。この記事では、Discord からチャンネルを通じて Claude Code とやり取りする方法を紹介します。

新時代のフロントエンドツールチェイン Vite+ を試してみた

Vite+ は Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown といった人気のツールを統合し、開発, テスト, ビルド, リント, フォーマットなどのフロントエンド開発に必要な機能を1つのツールチェインで提供する新しいフロントエンドツールチェインです。この記事では実際に Vite+ をインストールして、プロジェクトのセットアップから開発、テスト、ビルドまでの一連の流れを試してみました。

CSS によるスクロールトリガーアニメーション

要素が画面内に入った時にアニメーションを開始するスクロールトリガーアニメーションは、これまでは JavaScript を使用して `Intersection Observer API` を利用する方法が一般的でした。JavaScript を使わずに CSS だけで実装を完結できるようになる `animation-trigger` という新しい CSS プロパティが登場しました。