📒

Zennの執筆記事をMCPサーバーに取り込んで、記事を生成してもらう

ma_me

2025/04/07に公開

ブログ

VS Code 拡張機能

Model Context Protocol

tech

 概要こんにちは、booost technologiesバックエンドエンジニアのma_meです。

MCPの勉強がてら、自分が書いた記事群をサーバーにして、技術ブログを書いてもらうことに挑戦しました。

AIに書いてもらうと大げさな表現が多く、くどい文章になりがちなので、手直しを入れることが多かったのですが、MCPを利用するとどうなるのか。

MCPを通した場合、通さなかった場合とで、どこまで自分っぽい文章になるのか、試してみました
生成された記事が気になる方はこちらへ

 手順MCPの基本的な設定については多くの記事で紹介されているため、本記事では割愛します。

 MCPサーバーの設定Zennが公式でエクスポート機能を提供してくれているので、それを利用します。

下記URLからエクスポートします。

https://zenn.dev/settings/export
エクスポートした記事をローカルに保存し、解凍します。

 MCPクライアントの設定1.claude_desktop_config.jsonを編集します。

 claude_desktop_config.jsonの編集{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "ZennからExportしたDL記事のディレクトリパス"
      ]
    }
  }
}
以上、これだけです。

File関連ならfilesystemシステムでサーバー化できるのも本当に便利ですね。

 記事を生成してもらう記事の要件として、下記の要件を抑えてもらったうえで、書いてもらいました。

指示内容
Zennに投稿する技術記事を書いてほしいです。
記事のテーマは下記の拡張機能に関する宣伝記事です。
https://marketplace.visualstudio.com/items?itemName=gmgag.file-filter
この拡張機能は私が作成しました。
広く使ってほしいので、以下の内容を抑えて紹介してください。
- 拡張機能の紹介
- 有用な用途
記事を書くときは下記の内容を抑えてください。
・参考にする範囲は下記のものにしてください
・published_atが2024年以降のもの
・可能な限り私の文体をまねてください
紹介してもらう自作の拡張機能

https://marketplace.visualstudio.com/items?itemName=gmgag.file-filter
以下、実際に生成された記事になります。

（本文は長いので折り畳み）

 （MCP利用）【VS Code】ファイル一覧をサクッと整理できる拡張機能「File Filter」の紹介MCP利用バージョン　（クリックして展開）title: "【VS Code】ファイル一覧をサクッと整理できる拡張機能「File Filter」の紹介"

emoji: "🔍"

type: "tech"

topics:
"vscode"
"visualstudiocode"
"拡張機能"
"開発ツール"

published: true

published_at: "2025-04-06 10:00"

 【VS Code】ファイル一覧をサクッと整理できる拡張機能「File Filter」の紹介今回は自分が作成したVSCode拡張機能「File Filter」という拡張機能を紹介します。

https://marketplace.visualstudio.com/items?itemName=gmgag.file-filter

 File Filterとは？File Filterは、VS Codeのエクスプローラービュー内でファイル一覧を動的にフィルタリングできる拡張機能です。

大規模なプロジェクトやたくさんのファイルがあるディレクトリを扱う際に、特定のファイルだけを表示させることができます。

 主な機能
 1. インクルードフィルター特定のパターンに一致するファイルのみを表示させることができます。例えば、.jsファイルだけを表示したい場合は、*.jsというパターンを指定するだけです。

 2. エクスクルードフィルター特定のパターンに一致するファイルを非表示にすることができます。例えば、.test.jsファイルを除外したい場合は、!*.test.jsというパターンを指定します。

 3. 複数条件の組み合わせ複数のフィルター条件をカンマで区切って指定することができます。例：*.js, *.ts, !*.test.*

 4. ワンクリックでフィルター解除フィルターをクリアするボタンが用意されており、元の表示に戻すのも簡単です。

 使い方VS Codeのエクスプローラービューの上部にあるフィルターアイコンをクリック
テキストボックスにフィルターパターンを入力
Enterキーを押して適用
これだけで、指定したパターンに一致するファイルだけが表示されます。

 便利な使用シーン
 特定のファイル形式だけに集中したい時*.css
このようにすれば、CSSファイルだけが表示されます。

 テスト関連のファイルを除外したい時!*.test.*, !*.spec.*
テストファイルを一時的に非表示にして、実装に集中できます。

 複数の条件を組み合わせたい時src/*.js, !*.min.js
srcディレクトリ内のJSファイルのうち、minify済みのファイルを除外して表示します。

 開発作業が劇的に効率化する場面
 1. 大規模プロジェクトでの作業数百、数千ものファイルがあるプロジェクトでも、必要なファイルだけをフィルタリングして表示できるので、探す手間が省けます。

 2. 特定の機能実装時例えば、CSSのスタイリングに集中したい場合は.cssや.scssファイルだけを表示させることで、余計なファイルに気を取られずに済みます。

 3. コードレビュー時変更があったファイルだけをフィルタリングして表示させることで、レビューの効率が上がります。

 4. リファクタリング作業特定のモジュールや機能に関連するファイルだけを表示させることで、リファクタリングの範囲を明確にできます。

 まとめFile Filterは非常にシンプルでありながら、VS Codeでの開発効率を大きく向上させる拡張機能です。特に大規模なプロジェクトでは、必要なファイルだけに集中できるため、作業効率が格段に上がります。
インストールも簡単で、使い方も直感的なので、すぐに日常のワークフローに組み込むことができます。VS Codeユーザーの方は、ぜひ一度試してみてください！

 インストール方法VS Codeの拡張機能タブを開く
検索ボックスに「File Filter」と入力
gmgagが提供している「File Filter」を選択してインストール
もしくは以下のURLから直接インストールすることもできます：

https://marketplace.visualstudio.com/items?itemName=gmgag.file-filter
上記記事生成途中の様子。きっちり生成過程で参照されているのが分かりますね！

 （MCPなし）VSCode作業効率化！File Filterで必要なファイルだけをサクッと表示MCPなしバージョン　（クリックして展開）
 VSCode作業効率化！File Filterで必要なファイルだけをサクッと表示
 はじめにみなさん、こんにちは！今回は私が作成したVSCode拡張機能「File Filter」を紹介します。大規模プロジェクトで作業していると、エクスプローラーに表示されるファイルが多すぎて目的のファイルを見つけるのに苦労することありませんか？そんな悩みを解決するための拡張機能を開発しました！

 File Filterとは？File Filterは、VSCodeのエクスプローラーに表示されるファイルを柔軟にフィルタリングできる拡張機能です。必要なファイルだけを表示することで、作業効率を大幅に向上させることができます。

 主な機能
柔軟なフィルタリング: 拡張子、ファイル名、パターンなどでフィルタリング

簡単な操作: コマンドパレットから直感的に操作可能

設定のカスタマイズ: 自分の作業スタイルに合わせた設定が可能

高速な動作: 大規模プロジェクトでもスムーズに動作

 使い方VSCodeの拡張機能マーケットプレイスから「File Filter」をインストール

Ctrl+Shift+P（Macの場合はCmd+Shift+P）でコマンドパレットを開く
「File Filter: フィルター設定」を選択
フィルタリングしたい条件を入力

 実践的な活用シーン
 1. フロントエンド開発での活用フロントエンド開発では様々な種類のファイルを扱いますが、時にはCSSファイルだけに集中したい場合もあります。そんな時はFile Filterで.cssや.scssファイルだけをフィルタリングして表示させましょう。
*.css, *.scss
このようにフィルターを設定するだけで、スタイルファイルだけが表示され、作業効率が格段に上がります！

 2. バグ修正時の活用特定のコンポーネントに関連するバグを修正する場合、そのコンポーネントに関連するファイルだけを表示したいですよね。例えば「Button」コンポーネントに関連するファイルだけを表示したい場合：
*Button*
と設定するだけで、関連ファイルだけが表示されます。

 3. テスト作業での活用テストファイルだけに集中したい場合は：
*.test.js, *.spec.js
このように設定すれば、テストファイルだけが表示されます。

 カスタマイズ設定settings.jsonで以下のように設定をカスタマイズできます：
{
  "fileFilter.excludePatterns": ["node_modules", ".git"],
  "fileFilter.favorites": [
    {
      "name": "React Components",
      "pattern": "*.jsx, *.tsx"
    },
    {
      "name": "Styles",
      "pattern": "*.css, *.scss"
    }
  ]
}

 まとめFile Filterを使えば、大規模プロジェクトでも必要なファイルだけにフォーカスでき、作業効率が大幅に向上します。拡張機能のインストールはこちらからどうぞ！
みなさんの開発ライフがより快適になることを願っています。ぜひ使ってみて、フィードバックもいただけると嬉しいです！

 関連リンクGitHub リポジトリ
問題の報告
VSCode Marketplace
ここまで

 感想MCPを利用して自分のブログ記事をリソースにした方が大分表現が抑えられていて、文章も簡素に纏まっており、とても好印象です。

またよくAIにお願いするとフロントエンドを強調しがちだったのが、ずいぶん抑えられています。

MCPを通すことで、AI生成記事が自分の文体に近づき、余計な誇張やくどさが抑えられると実感できたので、Blog記事作成時にもより気軽にAIに頼れるようになりそうです。今後もどんどん活用していこうと思います！

BooostPublication

Climate/Sustainability TechスタートアップBooost開発チームの公式アカウント

概要

手順

MCPサーバーの設定

MCPクライアントの設定

claude_desktop_config.jsonの編集

記事を生成してもらう

（MCP利用）【VS Code】ファイル一覧をサクッと整理できる拡張機能「File Filter」の紹介

【VS Code】ファイル一覧をサクッと整理できる拡張機能「File Filter」の紹介

File Filterとは？

主な機能

1. インクルードフィルター

2. エクスクルードフィルター

3. 複数条件の組み合わせ

4. ワンクリックでフィルター解除

使い方

便利な使用シーン

特定のファイル形式だけに集中したい時

テスト関連のファイルを除外したい時

複数の条件を組み合わせたい時

開発作業が劇的に効率化する場面

1. 大規模プロジェクトでの作業

2. 特定の機能実装時

3. コードレビュー時

4. リファクタリング作業

まとめ

インストール方法

（MCPなし）VSCode作業効率化！File Filterで必要なファイルだけをサクッと表示

VSCode作業効率化！File Filterで必要なファイルだけをサクッと表示

はじめに

File Filterとは？

主な機能

使い方

実践的な活用シーン

1. フロントエンド開発での活用

2. バグ修正時の活用

3. テスト作業での活用

カスタマイズ設定

まとめ

関連リンク

感想

Discussion