blog.kaname.dev

Claudeのアーティファクト、気になってたので試しにアプリを作ってみました。「ちょっとしたデモが作れる機能でしょ？」くらいの認識だったんですが、実際に触ってみたら想像以上に本格的なものが作れて驚きました。この記事では、作ったものの紹介と、開発中に見つけた技術的な気づきを共有します。 作ったもの 子供の国語力を鍛えるための学習アプリを作りました。毎朝10〜20分で1セッション完了する想定で、メニュー画面から4つの機能を選んで使う構成です。 読解トレーニング  — AIが文章を生成し、選択式の理解チェック2問＋記述式の要約問題1問＋事実統合問題（表の読み取り）を出題します。回答するとAIがフィードバックを返してくれます。物語文と説明文の比率を変えながら、フェーズ1〜4で段階的に難易度が上がる設計です。 漢字クイズ  — 学年別の配当漢字から出題される4択クイズ。「よみ→かんじ」「いみ」「あてはめ」の3タイプをランダムに混ぜて5問出題します。正解履歴を追跡して、まだ正解していない漢字を優先的に出題する仕組みも入れました。 写真で解説  — 問題の写真を撮ると、AIがストリーミングで解説してくれる機能。複数枚対応、画像の回転・トリミング、max_tokens到達時の自動再接続（最大3回）まで実装しています。 漢字スキャナー  — 写真から漢字を認識して、読み方・書き順・部首・使い方を調べられる機能。文字抽出→詳細解析の2段階API呼び出しで、書き順はオープンソースのSVGデータを使って表示しています。 全部1ファイルのReactコンポーネントで、コードは約800行くらいです。 アーキテクチャ このアプリの面白いところは、アーティファクトの中からAnthropic Messages APIを直接叩いている点です。アーティファクトには window.claude.complete() というビルトインのAPIがあるんですが、今回はあえてfetchでMessages APIを直接呼んでいます。理由は、ストリーミング対応やMCP連携など、より細かい制御が必要だったからです。 参考リンク Prototype AI-Powered Apps with Claude artifacts (Claude Help Center) システム構成図 モデ...

はじめに Claude Coworkの存在を知って最初に思ったのが「これ、Claude Codeと何が違うの？」でした。気になったので、実際に業務自動化の仕組みを構築して試してみることにしました。 題材は「MCP利用申請の審査」です。社員が「このMCPサーバーを使いたい」と申請してきたら、GitHubリポジトリのセキュリティ監査を自動で回して結果をNotionに書き戻す——という仕組みです。一つ一つリポジトリを開いてコードを読んで……とやってたら時間がいくらあっても足りないので、まさにAIに任せたい仕事だなと。 この記事では、その構築過程で見えてきたCoworkの特徴やできることを簡単にまとめていきます。 想定する業務フローとシステム全体像 業務フロー まず、今回想定した業務フローがこちらです。 ポイントは、最後の判断だけ人間に残しているところです。監査レポートの生成まではすべて自動で、管理者はレポートを読んで「OK」か「NG」を決めるだけ。ステータスを「完了」じゃなくあえて「進行中」で止めてるのは、この人間のレビューステップを確保するためです。 システム構成 構成要素は3つ。Notionのデータベース、Cowork上の2つのスキル、そしてGitHubです。 Notionは問い合わせの受付窓口と結果の格納先を兼ねてます。Coworkのスキルは2つに分かれていて、ワークフロー全体を制御する「mcp-review-processor」と、実際のセキュリティ監査を行う「mcp-audit」です。mcp-review-processorがmcp-auditを呼び出す構造になっています。 Coworkでの実装ステップ ここからは、Cowork上で実際にどう実装したかを順を追って説明します。スキルの細かい中身には踏み込みませんが、「Coworkで何ができるのか」が伝わるように書いていきます。 スキルの登録 Coworkには、Claude Codeと同じように「スキル」を登録する機能があります。スキルというのは、Claudeに特定のタスクの実行手順を教えるためのMarkdownファイルです。「このタスクが来たら、この手順で処理してね」という指示書みたいなもので、一度登録すれば何度でも呼び出せます。 今回は2つのスキルを登録しました。 1つ目が「mcp-audit」。GitHubリ...

  第一章〜第七章では、Claude Code・Cursor・Antigravity の機能を比較してきました。ここからは視点を変えて、 組織の管理者として AI エージェントツールをどう安全に運用するか   に焦点を当てます。 第八章の前編では Claude Code を取り上げます。「managed-settings.json って何？」「権限をどう絞ればいい？」「MCP サーバーの野良追加をどう防ぐ？」といった、管理者が実際にぶつかる疑問に答えていきます。 まずはチェックリストで全体像を把握して、気になる項目から詳細セクションに飛んでもらう、という読み方がおすすめです。 ⚠️ 本記事は、筆者がこれから Claude Code を組織で管理するために事前学習した内容をまとめたものです。実環境での検証を経ていない、公式ドキュメントや調査ベースの記述も含まれます。実運用で気付いた点があれば随時更新します。 管理者向け「知っておいた方が良さそうなこと」リスト ①最低限やるべきこと Spend Limit を設定する 組織外アカウントの利用を防ぐ 機密ファイルの読み取りをブロックする 使える MCP サーバーをコントロールする ポリシー未適用なら起動させない ②セキュリティを強化するなら 権限をコントロールする 権限モードを決める 実行環境を隔離する MCP サーバーのコントロール プラグイン・エージェント・スキル・フック・MCP・チャネルを安全に配布する プラグイン経由（推奨） ファイル配置 配布のロックダウン 自律稼働をコントロールする 自律稼働モードを禁止する フックの制限 リモート・チャネルをコントロールする ③コストと運用を最適化するなら コストの目安 コストの確認方法 総額を把握する 誰が使っているかを把握する 異常検知 トークンをコントロールする トークンを節約する設定 Rate Limit(瞬間の利用速度上限) ④運用を監視・監査する デフォルトで取れるログ 操作ログを取得する リアルタイムで利用状況を観測する 設定変更履歴を追跡する 以下、各セクションで詳細を解説していきます。 設定の階層を理解する すべてのセクションの前提となる知識です。Claude Code の設定には  優先順位  があり、上の行ほど強い設定...