Codex を利用した iOS アプリ開発を試してみた
私自身は Web 開発の経験はありますが、iOS アプリ開発の経験はほとんどありません。このようなバックグラウンドを持つ私がコーディングエージェントである Codex を利用して iOS アプリ開発をどこまで進められるか試してみました。コーディングエージェントは単に中身を見ずにアプリケーションを作るいわゆる「バイブコーディング」的な使い方だけでなく、なぜこのコードが必要なのか？より良い設計にできないか？といったことを随時質問しながら進める学習用途の使い方が中心です。 AI エージェントの登場はコーディングの民主化というムーブメントをもたらしました。AI エージェントは、専門的な知識やスキルがなくても、自然言語で指示を与えるだけでコードを書いてくれるため、これまでプログラミングにアクセスできなかった人々も自分のアイデアを形にできるようになりました。私自身は Web 開発の経験はありますが、i
Playwright CLI で AI エージェントに視覚的なフィードバックを与える
Playwright CLI v0.1.9 で追加されたアノテーション機能は AI エージェントに視覚的なフィードバックを与えるために便利な機能です。アノテーション機能を利用すると、ブラウザの要素を選択して、その要素に対するコメントを残すことができます。AI エージェントはこのアノテーションが残された要素を簡単に特定できるため、どのコードを修正すればよいのかを判断しやすくなります。 AI エージェントを使用してフロントエンドを開発する際、どのように視覚的なフィードバックを提供するかはよくある課題です。AI エージェントは自身が書いたコードに対してテストや Lint から得られるフィードバックをもとに改善するというサイクルを繰り返すことによってコードの品質を向上させることができます。しかし、フロントエンドの開発では、例えば CSS が実際にどのように適用されているか、あるいは JavaScr
大規模にエージェントを構築する Claude Managed Agents を試してみた
Claude Managed Agents は Claude を自律的なエージェントとして動作させるためのハーネスとインフラストラクチャーを提供します。長時間かかるタスクや非同期のタスクを実行するために使用するのが想定されています。この記事では実際に Claude Managed Agents を試してみた内容を紹介します。 クラウドホスト型エージェントを大規模に構築・展開するためのサービスである Claude Managed Agents がパブリックベータとしてリリースされました。Claude Managed Agents は Claude を自律的なエージェントとして動作させるためのハーネスとインフラストラクチャーを提供します。長時間かかるタスクや非同期のタスクを実行するために使用するのが想定されています。 自律的に動作するエージェントを動かす環境を作ろうとすると、安全なサンドボック
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure. デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フ
新時代のフロントエンドツールチェイン Vite+ を試してみた
Vite+ は Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown といった人気のツールを統合し、開発, テスト, ビルド, リント, フォーマットなどのフロントエンド開発に必要な機能を1つのツールチェインで提供する新しいフロントエンドツールチェインです。この記事では実際に Vite+ をインストールして、プロジェクトのセットアップから開発、テスト、ビルドまでの一連の流れを試してみました。 近年の Web 開発のプロセスはますます複雑化しています。フロントエンドの構築のためには、モジュールバンドラー, トランスパイラー, リンター, テストランナーなど、多くのツールが必要になりますが、設定ファイルも複雑になりがちです。Webpack の設定のために専門の職人が必要になるという話もよく聞きましたね。現代でも .eslintrc, .prettierrc
Skill Create スキルを使用したスキルの作成と改善
オープンスタンダードである Agent Skills に従い Claude Code にドメインの専門知識や組織のナレッジを提供するスキルが最近注目を集めていますが、スキルの作成にはいくつかのハードルがあります。Anthropic は skill-creator と呼ばれるスキルの作成と改善のプロセス、パフォーマンス測定を支援するツールを提供しています。この記事では skill-creator を使用してスキルを作成・改善を行うプロセスを実際に体験してみます オープンスタンダードである Agent Skills に従い Claude Code にドメインの専門知識や組織のナレッジを提供するスキルが最近注目を集めています。Opus 4.6 が登場したことでモデルの性能が飛躍的に向上し、プロジェクト全体のワークフローを任せられるレベルに達したことや、非エンジニア領域にも Claude Code
デスクトップ Claude Code の Preview 機能で UI を直接確認する
Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。 Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。 Preview 機能を使用する まずは Claude Code のデスクトップアプリをインストールしましょう。Claude Code のドキュメント からお使いの OS に対応したインストーラーをダウンロードして、インストールを完了
Web アプリケーションをツール化する WebMCP
WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これにより AI エージェントが Web アプリケーションの機能を直接呼び出して操作できるようになります。 WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これは AI エージェントや支援技術から呼び出せる自然言語による説明と構造化スキーマを備えた JavaScript 関数です。WebMCP を使用する Web アプリケーションは MCP サーバーとみなすことができます。これにより従来の AI エージェントがウェブページのスクリーンショットを解析して情報を取得するのではなく、Web アプリケーションが提供するツールを直接呼び出して操作できるようにな
Claude Code のオーケストレーション機能であるエージェントチームを試してみた
Claude Code のエージェントチームを使用すると、複数の Claude Code インスタンスが連携して動作するようになります。この記事では、Claude Code のエージェントチーム機能を試し、どのように動作するかを探ってみます。 Claude Code のエージェントチームを使用すると、複数の Claude Code インスタンスが連携して動作するようになります。1 つのセッションがチームリーダーとして機能し、他のセッションにタスクを割り当てたり作業を調整したりします。チームメンバーは独立したコンテキストで動作し、それぞれのメンバーと直接やり取りできます。 従来のサブエージェント機能では、メインのエージェントがサブエージェントにタスクを委任する一方向の関係であり、サブエージェントはメインエージェントのみに結果を報告できました。一方エージェントチームでは、リーダーを介さずにメン
Claude Code のツール検索ツールを有効にして MCP のトークン使用量を削減する
Claude Code のツール検索ツールを有効にすることで、MCP ツールの定義を事前にコンテキストウィンドウに読み込まず、必要に応じて動的にツールを検索・呼び出しできます。これにより、多数の MCP ツールをインストールしている場合でもトークン使用量を大幅に削減できる可能性があります。この記事では Claude Code のツール検索ツールの概要と使用方法を紹介します。 Claude のツール検索ツール は Claude がすべてのツール定義を事前にコンテキストウィンドウに読み込むのではなく、必要に応じてツールを検索・呼び出すことができる機能です。これにより、不必要なツール定義がコンテキストウィンドウに含まれてコンテキストを圧迫する問題を回避できます。 2025 年 12 月現在、環境変数 ENABLE_TOOL_SEARCH=true を有効にすることで実験的に Claude Cod
Claude Code の LSP サポート
Claude Code のバージョン 2.0.74 から LSP（Language Server Protocol）サポートが追加されました。LSP サポートにより、Claude Code はコードベースに対してシンボルの定義検索、参照検索、ホバー情報の取得などの操作が可能になります。この記事では Claude Code の LSP サポートの概要と使用方法を紹介します。 コーディングエージェントが LSP（Language Server Protocol）を扱えるようになることで、エージェントがより効率的にタスクを遂行できるようになります。文字列でコードベース全体を検索するのではなく、LSP を通じてコードの構造やシンボル情報にアクセスできるため、正確な情報を迅速に取得・編集できるためトークンと時間を大きく節約できます。このことはコーディングエージェントにセマンティックなコード検索・編集
MCP ツールのコンテキスト圧迫の問題とその解決策
MCP の普及に伴い、多数のツール定義が LLM のコンテキストを圧迫する課題が浮上しています。本記事では Progressive disclosure（段階的開示）による最小限の情報提供、MCP を使ったコード実行によるツール呼び出しの効率化、単一の検索ツールによるコンテキスト削減など、実践的な解決策を Claude Skills や Cloudflare Code Mode の事例とともに解説します。 Model Context Protocol (MCP) は登場からおよそ 1 年が経過し、事実的な標準としての地位を確立しつつあります。MCP が普及するにつれて、MCP ツールの課題点も浮き彫りになってきました。その課題の 1 つが、1 つのタスクを達成するために多くのツールが読み込まれ、結果として多くのコンテキストが消費されてしまうという問題です。 前提として、LLM がタスクの達
AI コーディングエージェントの管理を行う Vibe Kanban を試してみた
Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。 AI コーディングエージェントが登場して以来、開発者の仕事はコードの生成からコードのレビューや設計、AI エージェントの管理へとシフトしつつあります。AI コーディングエージェントは大量のコードを高速に生成できる一方で、生成されたコードが正しいか、セキュリティ上の問題がないか、プロジェクトのスタイルガイドに準拠しているかを確認する必要があります。また、AI エージェントに適切なプロンプトを与え、タスクを分割して効率的に作業を進めるための管理も重要です。 Vibe Kanba
LLM へのプロンプトを構造化された文書で管理する POML
POML (Prompt Orchestration Markup Language) は、Microsoft によって提案されたプロンプトを構造化された文書として管理するためのマークアップ言語です。プロンプト開発における構造の欠如や複雑なデータとの統合の困難さ、特定のフォーマットへの依存性といった課題を解決することを目指しています。 高度な AI エージェントを開発する際、システムプロンプトの設計は最も重要な要素の 1 つです。システムプロンプトは AI エージェントが果たす役割や、どのようなツールを使用するか、ユーザーと効率的に会話するための工夫が含まれます。このシステムプロンプトの設計が AI エージェントの性能に大きな影響を与えます。例えばコーディングエージェントである Cline のシステムプロンプトを覗いてみると、800 行ものの長大なプロンプトが定義されていることがわかります
コーディングエージェントの能力を拡張する Serena を試してみた
LSP を活用してセマンティックなコード検索・編集能力を提供する MCP サーバー Serena の導入・使用方法を紹介。Claude Code でのオンボーディングからリファクタリングまでの実践的な活用例を解説します。 Serena はセマンティックなコード検索・編集能力を追加するオープンソースのツールキットです。MCP（Model Context Protocol） サーバーとして動作しているため、Claude Code や Cursor, VS Code のように MCP に対応しているクライアントであれば利用できます。またエージェントフレームワークとして Agno を使用しているため、特定の LLM モデルに依存せずに動作します。 Serena は LSP（Language Server Protocol）を使用してセマンティックなコードを解析するのが特徴です。LSP はコードの構
Claude Code でカスタムサブエージェントを作成する
Claude Code では特定の種類のタスクを処理するために呼び出されるカスタムサブエージェントを作成できます。カスタムサブエージェントを使用することでメインの会話セッションとは別に独立したコンテキストウィンドウを持つことができ、コンテキストの汚染を防ぐことができます。この記事では、Claude Code でカスタムサブエージェントを作成する方法とその利点について解説します。 Claude Code では特定の種類のタスクを処理するために呼び出されるカスタムサブエージェントを作成できます。例えばバックエンド領域に特化したエージェント、コードレビューを専門に行うエージェント、デバッグを行うエージェントといった具合です。 カスタムサブエージェントでは特有のシステムプロンプトやツール、独立したコンテキストウィンドウを持ち、Claude Code はサブエージェントにタスクを委任することでより効
サンドボックス環境を MCP サーバーで提供する Container Use
AI コーディングエージェントは便利ですが、任意の Bash コマンドを実行できるため、ユーザーのシステムに影響を与える可能性があります。Container Use は MCP サーバーとして動作し、AI コーディングエージェントにサンドボックス環境を提供します。この記事では Container Use の利用方法について紹介します。 Claude Code, Cline, Cursor といった AI コーディングエージェントは多くの開発者に受け入れられており、生産性の向上に大きく貢献しています。他方で安全のために AI コーディングエージェントの実行には注意を払う必要があることを忘れてはいけません。基本的にはユーザーに都度許可を求めるように設計されているものの、AI コーディングエージェントは任意の Bash コマンドを実行できます。例えば rm -rf ~/ のようなコマンドを実行さ
TypeScript で MCP サーバーを実装し、Claude Desktop から利用する
MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コードの実行やデータの保存など、さまざまなアクションを実行できるようになります。この記事では MCP サーバーを TypeScript で実装する方法を紹介します。 MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。多くの LLM ではユーザーに適切な回答を提供するために追加のコンテキスト情報を必要とします。例えば、今日の天気の情報をユーザーから求められたとしても LLM が学習したデータにはその情報は含まれていないため、正確な回答ができません。このような状況では L
TypeScript 製の AI エージェントフレームワーク Mastra
import { Mastra } from '@mastra/core/mastra'; import { createLogger } from '@mastra/core/logger'; import { weatherAgent } from './agents'; export const mastra = new Mastra({ agents: { weatherAgent }, logger: createLogger({ name: 'Mastra', level: 'info', }), }); エージェントを定義する src/mastra/agents/index.ts では Agent クラスを使用して天気情報を提供するエージェントを定義しています。 import { anthropic } from '@ai-sdk/anthropic'; import { A
パスキーによる認証をブラウザで実装してみる
<div> <label for="username">Username</label> <input type="text" id="username" name="username" required autocomplete="username webauthn" /> <button id="register">Sign in</button> </div> autocomplete 属性に webauthn を指定している点がポイントです。この属性によりブラウザに保存されているパスキーの情報を表示する必要があることを示します。autocomplete 属性に webauthn を指定しただけではオートフィルはまだ表示されません。JavaScript で navigator.credentials.get() を呼び出す必要があります。 パスキーのオートオフィルを使用しない場合、例
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
