claudeのMCP連携が便利すぎて泣きそう

MCPやばい！
なかなか感動したのでメモ。

# やったこと

## ☑️macでちょっとした便利スクリプトの作成

### インターネット速度モニターアプリの作成

ネット回線の速度モニターアプリを入れていて、計測したログがcsvファイルで残るのだが、これをグラフで可視化していつでも見れるようにしたかった。

#### 導入しているのは以下のアプリ
https://apps.apple.com/us/app/internet-speed-test-speedio/id1087442457?mt=12


#### csv形式でログが残る
このアプリでは、スピードテストを実行した結果をcsvファイルで自動保存してくれる。

![CleanShot 2024-12-22 at 13.51.35@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117937/48e33c7c-56a4-29da-5d1d-cccbc690ea6d.png)


#### このログから、以下のように過去の推移をグラフで見れるアプリを作った
![CleanShot 2024-12-22 at 14.18.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117937/4b90719a-5576-90fc-de64-c6634b682628.png)



## ☑️これをMCP✖️claudeで開発
claudeに相談しながら実装していっただけなのだが、これをMCPでファイルシステムに連携した状態で行うことで、

1. 実際のディレクトリ構成に合わせてアドバイスもらえる
2. 相談内容から、実装メモを自身の環境に合わせて自動作成してくれてる
3. さらにそれをobsidianに自動保存までしてくれる

というのが感動ポイント。

1.はcursorやcopilotでもできるが、対話で作り上げる部分は非エンジニアにより優しいと感じたのと、環境に合わせたドキュメント生成やobsidianとの連携は強みでかなり感動。


# claudeのMCP連携とは

Claudeと外部アプリを連携できる。
特に自身のPCのファイルシステムと統合できるのが便利。
以下のKEITOさんの動画が非常にわかりやすいのでこちらをご覧ください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/eHrp9hKZed8?si=19lxKSGf8Edv4-g_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


<iframe width="560" height="315" src="https://www.youtube.com/embed/0GeZGVvLDKE?si=Xr_g0xktR57Mizrx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


# 作業手順
## ☑️まずはcsvファイルを直接指定して、可視化するコードの生成にトライ

![CleanShot 2024-12-22 at 14.27.38@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117937/8c1cd45a-fd49-3a36-c40e-339d44e6c0c2.png)

artifactで一発でいい感じの作ってくれるまでは、まあ目新しくないが、
MCPでファイル連携していることで、csvファイルのパスを指定するだけで、直接ファイルを検索してそれを元に生成してくれるのがまずポイント。

## ☑️定期実行するアプリ化の相談

![CleanShot 2024-12-22 at 14.32.57@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117937/747b8b8d-f19e-00db-97f8-e15137c1c854.png)


ふむふむ。
まあこの辺は普通。

便利なのは、自身の環境のディレクトリ構成に基づいて、スクリプトやディレクトリ配置を提案してくれるところ。



![CleanShot 2024-12-22 at 14.39.24@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117937/f235ac71-a76f-47fe-4d9e-31a63fcd6a3d.png)

そのままコピペで行ける！


## ☑️完成したらコーディングメモを自動生成してもらう

![CleanShot 2024-12-22 at 14.43.07@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117937/f2f98610-436d-bd68-cde8-85385368ec2c.png)

自分でまとめ直さなくて良いのと、こちらも自身の環境下に合わせて、正しくパス構成まで記述してくれるのが素晴らしい。

## ☑️メモをそのままobsidianに保存してもらう

![CleanShot 2024-12-22 at 14.46.24@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117937/ed9bc2f7-51e3-2e79-9800-ffdb3db734b2.png)


obsidianとの連携は本当に最強。
無事に保存されました。


![CleanShot 2024-12-22 at 14.48.11@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117937/344db9be-f033-74b1-7307-082ea4842b74.png)



# ひとこと
まだ、claude✖️MCP✖️obsidianの実力10%くらいしか引き出せていない気がする。
引き続き探っていきます。

上記内容も、ちゃんと調べればコード生成やディレクトリへの配置、エラー修正や実行まで自動でやってくれる方法もありそう。