# tubone BOYAKI > 技術ブログ by Yu Otsubo (tubone24). AIエージェント開発、AWS/クラウドインフラ、Web技術について執筆。 ## 著者について - GitHub: https://github.com/tubone24 - 技術書著者: 「やさしいMCP入門」「AIエージェント開発/運用入門」他 - 専門分野: AI Agent開発、Webアプリ開発、インフラストラクチャ ## 最新記事 - [ループエンジニアリングとサイト作成と](https://tubone-project24.xyz/2026/06/28/ai-coding-agent-loop-engineering/): 妻の友人が運営する犬の幼稚園KNOT for dogsのサイトを、Figmaデザインを元にClaude Codeのループエンジニアリングで構築しました。design-reviewスキルによるピクセル差分の自動検出、サブエージェント構成、そして90%の壁に至るまでの振り返りです。 - [mspecという仕様駆動開発フレームワークを作っている](https://tubone-project24.xyz/2026/05/29/mspec-spec-driven-development-framework/): AIで仕様駆動開発をやっていると、仕様とコードのドリフト、AIが書くドキュメントの読みにくさ、LLMがLLMを採点する閉鎖ループ、TDDの形骸化...と気になる点が積もってきます。それを埋めるために作った自分用の仕様駆動開発フレームワーク mspec を、実際の使い方から設計思想まで紹介します(v0.1.7時点)。 - [x402のペイウォールをAIエージェントがアンロックする未来](https://tubone-project24.xyz/2026/05/09/x402-paywall-ai-agent-autonomous-unlock/): 前回作ったx402ペイウォールを、今度はAIエージェント側からアンロックして読ませる仕組みをClaude Codeのスキルとして実装しました。なぜリモートMCPだけで完結できないのか、鍵の所在問題と2系統アーキテクチャ、yarnコマンド一発で決済から復号までを自律実行する実装の話を、デモ動画付きで紹介します。 - [x402プロトコルでブログにペイウォールを実装してみた](https://tubone-project24.xyz/2026/05/08/x402-protocol-ai-agent-micropayment/): AWS Bedrock AgentCore Paymentsの発表をきっかけにx402プロトコルを勉強したくなり、自分のブログにペイウォールとして実装してみました。HTTP 402を使ったプロトコルの仕組み、EIP-712によるUSDC送金許可署名、Netlify FunctionとMetaMaskで完結するクライアント実装、そしてAIエージェントが自律決済する世界との対比までを実装ベースで解説します。 - [Langfuse v4はなぜobservation-centricになったのか](https://tubone-project24.xyz/2026/05/02/langfuse-v4-observation-centric-clickhouse-deep-dive/): Langfuse v4で導入された events_full / events_core という単一Spanモデルを、ClickHouseのカラムナーストレージ・Granule・スパースインデックス・ReplacingMergeTree・Part/Partition・Materialized Viewといった内部の仕組みから深掘りし、なぜtraces/observations分離型から非正規化されたobservation-centricモデルへ移行する必要があったのかを公式ドキュメントの引用付きで解説します。 - [MCP AppsでMIDIの譜面をリアルタイムに可視化する](https://tubone-project24.xyz/2026/04/11/midi-mcp-server-mcp-apps/): MCP Appsの仕様を活用して、AIが作曲したMIDI楽曲のピアノロール譜面をClaude.ai上でリアルタイムに可視化するMCPサーバーを作りました。MCP Appsのアーキテクチャやライフサイクル、ontoolinputpartialによるプログレッシブレンダリング、Viewからの双方向通信(callServerTool・readServerResource・sendMessage)の仕組みを仕様レベルで解説しつつ、Cloudflare Workersへのデプロイ方法も紹介します。 - [Claude Codeのサブスクリプションで動くSlack常駐AIエージェントを作った](https://tubone-project24.xyz/2026/03/27/mugi-claw-slack-personal-ai-agent/): Claude Code CLIの `-p` フラグとサブスクリプションを活用して、Slack上で常駐するパーソナルAIエージェント「むぎ苦労(mugi-claw)」を開発しました。Chrome DevTools Protocolによるブラウザ操作、機密情報をLLMに渡さないCredential Server、macOSのsandbox-execとプロキシによる多層防御など、実装の技術的な詳細を紹介します。 - [大統領デイリーブリーフィングに学ぶ、忙しく平凡なエンジニアの技術キャッチアップ方法](https://tubone-project24.xyz/2026/03/17/obsidian-slack-efficient-learning/): 育休中で時間がない。ツェッテルカステンも挫折し、Obsidian Gitのコンフリクトにも悩まされた。そこでSlackをメモの入口にするObsidianプラグインを自作し、Claude Codeでリンク先を自動要約する自分用ブリーフィングシステムを構築した。忙しいエンジニアの情報収集・学習ワークフローを紹介します。 - [Claude CodeのHooksとLangfuseで、コーディングエージェントの動きを丸裸にする](https://tubone-project24.xyz/2026/03/13/claude-code-langfuse-hooks-tracing/): Claude CodeのHooksとLangfuse Ingestion APIを組み合わせて、コーディングエージェントのオブザーバビリティを確保する方法を解説します。OTELでは取得できないLLMの入出力やツール実行の詳細、サブエージェントの親子構造まで、シェルスクリプトで泥臭く可視化する実装手法を紹介します。 - [Claude CodeのRemote Controlを使い倒すために、Slackを使ったスマホ通知を作ってみた](https://tubone-project24.xyz/2026/03/05/claude-code-remote-control-slack-notification/): Claude CodeのRemote Controlはスマホからセッション操作が可能ですが、承認待ちのプッシュ通知がないのが課題です。Slack Incoming WebhookとClaude Code Hooksを組み合わせて、承認待ちをスマホに即座に通知するシェルスクリプトとsettings.jsonの設定方法を紹介します。 ## ライセンス このコンテンツはクリエイティブ・コモンズ 表示 4.0 国際ライセンスの下で提供されています。 ## 連絡先 - GitHub: https://github.com/tubone24 - Blog: https://tubone-project24.xyz