Claude Codeプラグインを実際に作ってみた - 作成からGitHub公開まで

Claude Codeプラグインの作成と公開手順

前回の記事では、Anthropic公式プラグインのインストールと使用方法を紹介しました。
今回は、実際に自分でプラグインを作成し、GitHubで公開するまでをやってみたいと思います。

目次

• プラグインの基本構造
• プラグインの作成手順
• ローカルでのテスト
• GitHubでの公開
• その他のコンポーネント

---

プラグインの基本構造

Claude Codeのプラグインは以下のような構造を持ちます:

test-marketplace/
├── .claude-plugin/
│   ├── marketplace.json    # マーケットプレイスの設定ファイル
│   └── plugin.json          # プラグインのメタデータ
└── my-first-plugin/
    └── commands/
        └── hello.md         # コマンドの定義ファイル

主要なファイルの役割

• marketplace.json: プラグインを配布するためのマーケットプレイス設定
• plugin.json: プラグイン自体のメタデータ
• commands/: スラッシュコマンドを定義するディレクトリ

---

プラグインの作成手順

ステップ1: プロジェクトディレクトリの作成

まず、プラグイン用のディレクトリを作成します。

mkdir test-marketplace
cd test-marketplace

ステップ2: .claude-pluginフォルダーの作成

プラグインの設定ファイルを格納するフォルダーを作成します。

mkdir .claude-plugin

ステップ3: plugin.jsonの作成

プラグイン自体のメタデータファイルを作成します。

cat > .claude-plugin/plugin.json << 'EOF'
{
  "name": "my-first-plugin",
  "description": "A simple greeting plugin to learn the basics",
  "version": "1.0.0",
  "author": {
    "name": "Your Name"
  }
}
EOF

各項目の説明:

• name: プラグインの識別子（ケバブケース推奨）
• description: プラグインの簡単な説明
• version: バージョン番号（セマンティックバージョニング推奨）
• author: 作成者の情報

ステップ4: marketplace.jsonの作成

マーケットプレイスの設定ファイルを作成します。

cat > .claude-plugin/marketplace.json << 'EOF'
{
  "name": "test-marketplace",
  "owner": {
    "name": "Test User"
  },
  "plugins": [
    {
      "name": "my-first-plugin",
      "source": "./my-first-plugin",
      "description": "My first test plugin"
    }
  ]
}
EOF

各項目の説明:

• name: マーケットプレイス名
• owner: マーケットプレイスの所有者情報
• plugins: 登録されているプラグインのリスト
  • name: プラグイン名
  • source: プラグインのディレクトリパス（./my-first-pluginを指定）
  • description: プラグインの説明

ステップ5: プラグインディレクトリの作成

marketplace.jsonのsourceで指定したディレクトリを作成します。

mkdir my-first-plugin
cd my-first-plugin

ステップ6: コマンドの作成

実際に実行されるコマンドを作成します。

mkdir commands
cat > commands/hello.md << 'EOF'

---
description: Greet the user with a personalized message
---

# Hello Command

Greet the user warmly and ask how you can help them today. Make the greeting personal and encouraging.
EOF

コマンドファイルの構成:

• フロントマター（---で囲まれた部分）: コマンドの説明
• マークダウン本文: Claude Codeが実行する際の指示内容

これでプラグインの作成は完了です！

---

ローカルでのテスト

作成したプラグインをローカル環境でテストしてみましょう。

ステップ1: ディレクトリを移動

プラグインディレクトリから一つ上の階層に戻ります。

cd ..

ステップ2: マーケットプレイスの追加

Claude Codeにローカルマーケットプレイスを追加します。

/plugin marketplace add ./test-marketplace

ステップ3: プラグインのインストール

追加したマーケットプレイスからプラグインをインストールします。

/plugin install my-first-plugin@test-marketplace

ステップ4: プラグインの実行

Claude Codeを再起動し、以下のコマンドを実行します。

/my-first-plugin:hello

これで、helloスラッシュコマンドが実行されます。成功すれば、Claudeが温かい挨拶をしてくれました！

---

GitHubでの公開

ローカルでテストが完了したら、GitHubで公開して他のユーザーと共有しましょう。

ステップ1: GitHubリポジトリの作成

1. GitHubにログインし、新しいリポジトリを作成
2. リポジトリ名を決定（例: my-claude-plugins）
3. 公開設定を「Public」に設定

ステップ2: ローカルリポジトリの初期化とプッシュ

cd test-marketplace
git init
git add .
git commit -m "Initial commit: Add my first Claude Code plugin"
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git
git push -u origin main

ステップ3: 他のユーザーが使用する方法

公開後、他のユーザー（または別の環境の自分）は以下の手順で使用できます。

方法1: GitHubユーザー名/リポジトリ名で追加

/plugin marketplace add あなたのGitHubユーザー名/リポジトリ名

方法2: GitリポジトリのURLで追加

/plugin marketplace add https://github.com/あなたのGitHubユーザー名/リポジトリ名.git

プラグインのインストール

マーケットプレイスを追加したら、プラグインをインストールします。

/plugin install my-first-plugin@test-marketplace

注意: マーケットプレイス名はmarketplace.jsonのnameフィールドで指定した名前を使用します。

---

その他のコンポーネント

今回はスラッシュコマンド（commands）を作成しましたが、Claude Codeのプラグインには他にも以下のコンポーネントを追加できます。

利用可能なコンポーネント

my-first-plugin/
├── .claude-plugin/
│   └── plugin.json          # プラグインメタデータ
├── commands/                 # カスタムスラッシュコマンド（オプション）
│   └── hello.md
├── agents/                   # カスタムエージェント（オプション）
│   └── helper.md
├── hooks/                    # イベントハンドラー（オプション）
│   └── hooks.json
└── .mcp.json                # MCPサーバー設定（オプション）

各コンポーネントの説明

1. Commands（コマンド）

• 場所: commands/ディレクトリ
• 形式: マークダウンファイル（.md）
• 用途: カスタムスラッシュコマンドの定義

2. Agents（エージェント）

• 場所: agents/ディレクトリ
• 形式: マークダウンファイル（.md）
• 用途: 特定のタスクに特化したエージェントの定義

例:

mkdir agents
cat > agents/helper.md << 'EOF'
---
description: A helpful assistant for code review
---

# Code Review Helper

Provide constructive feedback on code quality, best practices, and potential improvements.
EOF

3. Hooks（フック）

• 場所: hooks/ディレクトリ
• 形式: hooks.jsonファイル
• 用途: 特定のイベントに対する処理を定義

例:

{
  "PostToolUse": [
    {
      "matcher": "Write|Edit",
      "hooks": [
        {
          "type": "command",
          "command": "./scripts/validate.sh"
        }
      ]
    }
  ]
}

4. MCP Servers（MCPサーバー）

• 場所: .mcp.jsonファイル
• 用途: 外部ツールとの統合

例:

{
  "mcpServers": {
    "custom-tool": {
      "command": "node",
      "args": ["./server.js"]
    }
  }
}

---

まとめ

この記事では、Claude Codeのプラグインを作成し、GitHubで公開する方法を紹介しました。

重要なポイント

1. 基本構造: .claude-plugin/フォルダーに設定ファイルを配置
2. マーケットプレイス: marketplace.jsonでプラグインを管理
3. 公開方法: GitHubで公開すれば誰でも利用可能
4. 拡張性: commands以外にもagents、hooks、MCPサーバーなど様々なコンポーネントを追加可能

---

参考リンク

• Claude Code公式ドキュメント
• プラグインマーケットプレイス
• プラグインリファレンス