ClaudeDesktop MCPサーバで記事からMarp形式のファイルを作成する
先日 Amazon Qで初めてバイブコーディングを行って非常に勉強になった。
同時に、そもそもの認識を変えていく必要があることを思い知った。
この勢いのままに、MCPサーバについての理解を深めるために、
Claude DesktopのMCPサーバ機能を使用してファイル操作を行う。
- Claude Freeプラン
- MacOS
MCPサーバのセットアップ
公式の手順を参考にMCPサーバのセットアップを実行していく。
手順に従い、MCPサーバ指定用のJSONファイルを編集し、アクセスをするディレクトリを指定する。
*macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/fullen/mcp"
]
}
}
}
アクセス先のディレクトリを/Users/fullen/mcpを作成した上で
npxコマンドを使用するために、nodeパッケージをインストールする
% brew install node
Running `brew update --auto-update`...
==> Downloading https://ghcr.io/v2/homebrew/portable-ruby/portable-ruby/blobs/sha256:45cea656cc5b5f5b53a9d4fc9e6c88d3a29b3aac862d1a55f1c70df534df5636
##################################################################################################################################################################### 100.0%
==> Pouring portable-ruby-3.4.4.el_capitan.bottle.tar.gz
==> Homebrew collects anonymous analytics.
Read the analytics documentation (and how to opt-out) here:
(中略)
% which npx
/usr/local/bin/npx
% npx --version
11.3.0
最後にClaude Desktopを再起動して、設定画面を確認する。
エラーが出ていないため問題なくセットアップを完了できたようだ。
setting
MCPサーバを使用したテキストファイル出力
こちらの記事を参考に、mcpディレクトリへの出力を試す。
prompt)
MCPサーバの仕組みについてまとめて、mcpフォルダ内にテキストファイルで保存して
ファイルやディレクトリの操作の際に、実行段階に応じた許可を求められた。
操作によって個別に許可を求めてくるのはとてもわかりやすいと感じた。
今回はディレクトリを限定しているので、全て許可していく。
===
Claude)
MCPサーバの仕組みについて詳しくまとめて、mcpフォルダに保存いたします。まず、現在のディレクト
リ構造を確認してから進めます。mcpフォルダが空のようですね。MCPサーバの仕組みについて詳細にまとめたテキストファイルを作成します。MCPサーバの仕組みについて詳細にまとめたテキストファイルを `/Users/fullen/mcp/MCP_server_architecture.txt` に保存しました。
このドキュメントには以下の内容が含まれています：
- **MCPの概要**：Model Context Protocolの基本的な説明と目的
- **アーキテクチャ**：クライアント・サーバモデルと主要コンポーネント
- **通信プロトコル**：JSON-RPC 2.0の使用方法とTransport層
- **主要機能**：Tools、Resources、Promptsの詳細説明
- **セキュリティ**：認証・認可とベストプラクティス
- **実装例**：PythonとJavaScriptでの具体的なコード例
- **開発・デバッグ**：ログ記録、テスト戦略、デバッグツール
- **ベストプラクティス**：サーバ設計、セキュリティ、パフォーマンス
- **トラブルシューティング**：よくある問題と解決手順
このファイルを参考にして、MCPサーバの開発や運用に活用していただけます。追加で質問がございましたら、お気軽にお聞かせください。
mcpディレクトリを確認すると、MCP_server_architecture.txtファイルが作成されていた
内容は以下のとおり
MCP_server_architecture.txt)
# MCP (Model Context Protocol) サーバの仕組み
## 概要
MCPは、AI モデルが外部のデータソースやツールと安全に接続するための標準プロトコルです。
このプロトコルにより、LLM（大規模言語モデル）は、ファイルシステム、データベース、
Web API、その他のサービスと統合された機能を提供できます。
## アーキテクチャの基本構成
### 1. クライアント・サーバモデル
- **MCPクライアント**: AI アプリケーション（Claude Desktop、IDEなど）
- **MCPサーバ**: 外部リソースへのアクセスを提供するサービス
- **Transport層**: 両者間の通信を仲介
### 2. 主要コンポーネント
#### MCPサーバ
- 特定のリソースやサービスへのアクセスを提供
- ツール、リソース、プロンプトの3つの主要な機能を実装
- JSON-RPC 2.0プロトコルを使用してクライアントと通信
#### MCPクライアント
- ユーザーのリクエストを受け取り、適切なMCPサーバに転送
- 複数のMCPサーバを同時に管理可能
- セキュリティとアクセス制御を担当
## 通信プロトコル
### JSON-RPC 2.0
MCPは、JSON-RPC 2.0をベースとした通信プロトコルを使用します。
(中略)
このドキュメントは、MCPサーバの基本的な仕組みから実装まで、
包括的な理解を提供することを目的としています。
具体的な実装を行う際は、公式ドキュメントと合わせて参照してください。
出力は問題なく機能したので、次へ進む。
MCPサーバを使用したテキストファイル入力
記事をマークダウン形式で出力してmcpディレクトリに配置して読み込ませて、Claudeにローカルファイルの内容の要約を指示する。
prompt)
マークダウン形式のファイルで、AmazonQでタイマーを作った〜というようなタイトルのファイルをmcpに置きましたので内容を要約してください
Claude)
まず、利用可能なディレクトリを確認してから、ファイルを探してみますね。AmazonQでタイマーを作成したマークダウンファイルが見つかりました。内容を読み取って要約します。以下がマークダウンファイルの内容要約です：
## 文書の概要
**タイトル**: "Amazon Q で一息つけるタイマーを作成する"
JAWS-UG 茨城のイベント（2025年6月18日）に参加し、イベント後にAmazon Qを使ってタイマーアプリを完成させた開発記録です。
## 作成したアプリについて
**一息つけるタイマー**の仕様：
- 3分〜60分の時間設定が可能
- キャラクターが左端から1分かけてベンチに移動
- 残り時間1分まではベンチで休憩
- 最後の1分で右端まで移動して完了
## 開発プロセス
### 1. 初期の問題対応
- イベント時に発生していた残像バグとキャラクターがベンチに座らないバグを修正
- 明確な機能要求を伝えることで、Amazon Qがロジックの問題（Phase管理システム）を特定・修正
### 2. 機能拡張
**ウィンドウリサイズ機能**
- OSネイティブなウィンドウリサイズに対応
- リサイズに応じて歩行速度や背景要素を動的に調整
- リアルタイムで比例スケーリングを実装
**ベンチアクションの追加**
- ベンチのサイズを3倍に拡張
- 8種類の座位活動を追加（空を見上げる、ストレッチ、犬を撫でる、スマホチェックなど）
- ランダムに活動が切り替わる仕組み
### 3. 没入感の向上
**視点同期システム**
- トップ画面を部屋の中のPC作業シーンに変更
- CRT画面での時間設定
- 椅子から立ち上がって窓に近づく3段階遷移アニメーション
- ユーザーとゲーム内キャラクター（K）の視点を同期
## 技術的特徴
- Pygameを使用した2Dグラフィックス
- 時間帯や季節に応じた背景変化
- 動的なカメラシステムとイージング関数
- フェーズベースの状態管理
## 開発時間
- イベント時間：2時間（未完成）
- イベント後の追加開発：約2時間
- 合計：約4時間で完成
作者はAmazon Qとの対話的な開発プロセス自体を「ゲーム性がある」と評価し、非常に没頭できる体験だったと述べています。完成したタイマーはGitHubで公開されています。
ファイル読み込み、要約もうまく機能した
さらに要約をマークダウン形式で出力して、次へ進む
prompt)
要約した内容をmcpディレクトリに、マークダウン形式のファイルで出力して
Claude)
要約をマークダウンファイルとして /Users/fullen/mcp/Amazon_Q_タイマー開発記録_要約.md に出力しました。
(以下略)
読み込んだファイルをmarp形式に変換する
Amazon_Q_タイマー開発記録_要約.mdをMarp形式に変換して、LT用のスライドにしてもらう。
prompt)
mcpディレクトリの以下のファイルを元に、技術LT用の資料を作成します。
・Amazon_Q_タイマー開発記録_要約.md
まず、LTの構成を考えた上で、marp形式で保存してください。
保存先についてはmcpディレクトリ直下に "LT_timer_gen"というディレクトリを作成してそこに保存してください。何度かやりとりして作成しますので出力するファイルはバージョン番号を入れてください。
さらに許可を求められるのでそれぞれ許可
Claude)
mcpディレクトリの内容を確認して、Amazon Q タイマー開発記録の要約ファイルを読み込み、技術LT用の資料を作成します。
まず、利用可能なディレクトリとファイルを確認しましょう。Amazon Q タイマー開発記録の要約ファイルを読み込みます。ファイルを読み込みました。それでは、技術LT用の構成を考えて、Marp形式のスライドを作成します。
まず、LT用のディレクトリを作成します。LTの構成を以下のように考えました：
**構成案：**
1. **オープニング** - タイトル・自己紹介
2. **きっかけ** - JAWS-UG茨城のイベント参加
3. **作ったもの** - 一息つけるタイマーの紹介
4. **開発プロセス** - Amazon Qとの開発体験
5. **技術的な工夫** - 主要機能の解説
6. **開発時間と成果** - 効率性の強調
7. **デモ** - 実際の動作紹介
8. **まとめ** - 学びと今後
それでは、v1として最初のMarpスライドを作成します。技術LT用のMarpスライド（v1）を作成しました！
## 作成したLTの構成
1. **オープニング** - インパクトのあるタイトルと自己紹介
2. **きっかけ** - JAWS-UG茨城イベントでの体験
3. **作ったもの** - 一息つけるタイマーの基本コンセプト
4. **なぜ「体験」にこだわったか** - 従来タイマーとの差別化
5. **Amazon Qとの開発体験** - AI支援開発の特徴
6. **技術的な工夫** - 3つの主要機能を詳しく解説
- ウィンドウリサイズ機能
- ベンチアクションシステム
- 視点同期システム
7. **使用技術** - 技術スタック
8. **開発時間と成果** - 効率性の強調
9. **デモタイム** - 実際の動作紹介
10. **学び** - Amazon Q活用のコツ
11. **今後の展開** - 拡張予定
12. **まとめ** - メッセージ
## スライドの特徴
- **視覚的**: 16:9のワイド画面を活用
- **ストーリー性**: 開発の流れを時系列で構成
- **技術詳細**: コードスニペットと具体的な実装内容
- **体験重視**: デモタイムを組み込み
- **メッセージ性**: Amazon Qの価値を明確に伝達
ファイルは `/Users/fullen/mcp/LT_timer_gen/amazon_q_timer_lt_v1.md` に保存しました。内容を確認して、修正点や追加したい部分があればお聞かせください。次のバージョンで改善していきましょう！
指示通り、LT用のディレクトリとmarp形式のファイルが作成された
terminal)
% tree mcp/LT_timer_gen/
mcp/LT_timer_gen/
└─── amazon_q_timer_lt_v1.md
VScodeのMarpプラグインでプレビューで確認すると、しっかりプレビューできた。
この後さらに、スライドのデザインの指示へ進んだが、背景画像のSVGファイル生成や、それをMarpで読み込むなど基本的な機能は問題なく動作したが、スライドと背景画像が重なり文字が見づらくなるなどの課題もあったため、リトライとした。
まとめ
Amazon Q CLIにしろ、Claude Desktopにしろ、Web版で十分では？と考えていたが、ローカルで動作させて、ファイルシステムと連携するだけで、利用体験が格段に向上することに驚いた。
スライド作成については、生成AIを使用したスライド作成サービスは数多くあるが、編集だったりデザインの調整に課題がある印象を持っている。MarpではCSSを扱えることに加え、生成AIでは画像の生成もできるため、スライド作成において、"ローカルマシンでLLMエージェントを動作させて、Marp機能で出力させる"というフローは改めて検討の余地があると感じた。
しかし、スライドにおいては、デザインは最終的に多くの調整が必要な部分であるので、構成やスライド単位の文章の分割が実施できている現状のMarp出力でも、汎用的な背景画像を指定すれば十分という認識なので、優先度高く取り組もうとは思っていない。
MCPサーバの力を知りたくて、とりあえずやってみたが非常に価値がある体験だった。
仕様面についても確認の上、MCPサーバの追加や作成へと進んでいきたい。
補足調査
何にも調べず実施したので、今回編集したMCPを指定するファイルの内容やMCPについて調査
about MCP
about claude_desktop_config.json
・Perplexity claude_desktop_config.json ファイルについて
・Perplexity mcp-server-filesysteとnpxの関係や探し方など
・MCPサーバのリスト
Discussion