LoginSignup
9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@satokenichi

【開発効率爆上げ】Shopify Dev MCPサーバーの導入と活用法

Posted at

どうも、みなさん！普段からShopifyのAPI開発で苦労している皆さんに朗報です。最近、僕が触ってみて「これマジですごい！」と思ったモデルコンテキストプロトコル（MCP）サーバーについて、今日は熱く語らせてください！

MCPサーバーって何よ？実際どうなの？

ソフト開発の世界って本当に日進月歩で、ついていくのが大変ですよね。そんな中で登場したMCPサーバーは、AIアシスタントと専門知識をつなぐ超便利ツールなんです。簡単に言うと、AIツールがAPI仕様書やドキュメント、スキーマにサクッとアクセスできるようにして、開発をめちゃくちゃ効率的にしてくれるんですよ。

正直言って、これまでの開発って「ドキュメント見て→コード書いて→また分からなくなってドキュメント見て...」の無限ループでしたよね。MCPサーバーを使えば、そんな面倒なコンテキスト切り替えがほぼなくなります。AIに「これどうやるの？」って聞くだけで、AIが最新のAPI仕様書を参照してくれるんです。超楽ちん！

Shopify Dev MCP Serverは、このアプローチの実証例で、AIアシスタントをShopifyのeコマースAPIエコシステムに直結させてくれます。これ使えば、AIがShopifyのドキュメントを検索したり、GraphQLスキーマを調べたりできるので、あのややこしいShopify APIがグッと身近になりますよ。

マジで助かる！MCPサーバーの利点

  • ドキュメントとコードの間を行ったり来たりする無駄な時間が激減！
  • API仕様書に沿ったコードが自動生成されるから、バグも減る！
  • よく使うパターンを自動生成してくれるから、開発スピードが爆上げ！
  • 難しいAPI概念も平易な言葉で説明してくれるから理解しやすい！
  • 仕様書と実装の一貫性が保たれるから、後から「あれ？」ってなることも少ない！

複数のAPIを扱うチームなら、異なるMCPサーバーを組み合わせることで、AIアシスタントが複数のAPIに詳しくなって、もう最強の開発環境の完成ですよ！

Shopify Dev MCPサーバーの機能を触ってみた

Shopify Dev MCPサーバーには、こんな便利機能があります：

  • ドキュメント検索

    • search_dev_docs：いちいちブラウザでShopifyのドキュメントを探す必要なし！AIが勝手に検索してくれます。これ、地味に超便利

  • GraphQLスキーマの調査

    • introspect_admin_schema：Shopifyの管理APIのGraphQLスキーマを自動で探索。クエリ、ミューテーション、タイプ、フィールドなど、全部AIが把握してくれます

  • 特殊なプロンプト

    • shopify_admin_graphqlみたいなツールで、有効なGraphQL操作を書くのを手伝ってくれます。これがあるだけでGraphQLの学習曲線がグッと下がりますよ

これらの機能のおかげで、Shopifyの統合やアプリ開発が格段に楽になります。特に初心者の方には、学習コストが大幅に削減されるのでオススメです！

環境構築も超簡単！

Shopify Dev MCPサーバーの設定は、めちゃくちゃ簡単です。

前提条件

  • Node.js（バージョン14以上）
  • MCPをサポートするAIツール（CursorやClaude Desktopなど）

インストール方法

以下のコマンドをターミナルに打ち込むだけ！

npx -y @shopify/dev-mcp@latest

shopify-mcp-1.png

Cursorでの設定方法

  1. Cursorの設定を開いて、「MCP」を選択
  2. 新しいグローバルMCPサーバーを追加（以下の設定で）：
{
  "mcpServers": {
    "shopify-dev-mcp": {
      "command": "npx",
      "args": ["-y", "@shopify/dev-mcp@latest"]
    }
  }
}

shopify-mcp-2.png

動作確認

AIアシスタントに以下のように質問してみてください：

"ShopifyのドキュメンテーションでProductリソースに関する情報を検索できますか？"

AIアシスタントは、search_dev_docs ツールを使用して、以下のような応答を返します：

ShopifyのProductリソースに関する情報を検索しました。主な情報は以下の通りです：
1.**Productリソースの基本構造**:
- `id`: 製品の一意の識別子
- `title`: 製品のタイトル
- `description`: 製品の説明
- `handle`: URLフレンドリーな製品名
- `vendor`: ベンダー名
- `productType`: 製品タイプ
- `status`: 製品のステータス
- `createdAt`: 作成日時
- `updatedAt`: 更新日時
2.**価格関連**:
- `priceRangeV2`: 価格範囲
- `compareAtPriceRange`: 比較価格範囲
- `contextualPricing`: コンテキスト価格
3.**在庫管理**:
- `totalInventory`: 総在庫数
- `tracksInventory`: 在庫管理の有無
- `hasOutOfStockVariants`: 在庫切れバリアントの有無
4.**メディア関連**:
- `media`: メディア接続
- `mediaCount`: メディア数
- `featuredMedia`: 注目のメディア
5.**バリアント関連**:
- `variants`: 製品バリアント接続
- `variantsCount`: バリアント数
- `hasOnlyDefaultVariant`: デフォルトバリアントのみの有無
- `options`: 製品オプション
6.**SEO関連**:
- `seo`: SEO情報
- `onlineStoreUrl`: オンラインストアURL
- `onlineStorePreviewUrl`: プレビューURL
7.**メタデータ**:
- `metafields`: メタフィールド接続
- `tags`: タグ
- `translations`: 翻訳

これらの情報は、ShopifyのGraphQL Admin APIを使用してアクセスできます。REST APIは2024年10月1日以降、レガシーAPIとして扱われるため、新しい開発ではGraphQL APIの使用が推奨されています。

正しく応答があれば設定完了です！簡単でしょ？
shopify-mcp-3.png

Apidog MCPサーバーと組み合わせたら最強に！

個人的に超おすすめなのが、Shopify Dev MCPサーバーとApidog MCPサーバーを組み合わせること。これやると、AIアシスタントがShopifyのAPIとカスタムAPI仕様の両方にアクセスできる統合環境ができあがります。最高かよ！

Apidog MCPサーバーの設定方法

前提条件

  • Node.js（バージョン18以上）
  • APIプロジェクトへのアクセス権があるApidogアカウント
  • Apidog APIアクセストークンとプロジェクトID

手順

  1. Apidogアクセストークンを取得：

    Apidogアカウントにログイン → アカウント設定 → APIアクセスToken

apidog-Token.png
2. ApidogプロジェクトIDを確認：

プロジェクトを開く → 設定 → 基本設定

apidog-id.png
3. CursorでApidog MCPサーバーを設定：

{
  "mcpServers": {
    "API specification": {
      "command": "npx",
      "args": [
        "-y",
        "apidog-mcp-server@latest",
        "--project=<project-id>"
      ],
      "env": {
        "APIDOG_ACCESS_TOKEN": "<access-token>"
      }
    }
  }
}

<project-id>と<access-token>は、自分の値に置き換えてくださいね！

apidog-mcp-3.png
4. 動作確認：
両方のAPIについて質問してみましょう：

"Shopifyのドキュメンテーションで商品バリアントを検索"
"Apidog MCPを介して私のAPI仕様を取得し、利用可能なエンドポイントを一覧します"

AIアシスタントは、search_dev_docsとread_project_oas_iq16u4 ツールを使用して、以下のような応答を返します：

Shopify-VS-apidog.png

実際の使い方：こんな感じで使えます！

Shopify Dev MCPサーバーとApidog MCPサーバーを組み合わせると、こんな感じで使えます：

eコマース統合の開発

Shopifyとカスタムバックエンドを連携させるアプリを作るとき：

  • Shopifyのパターンに沿ったAPIクライアントを自動生成（コピペじゃなくてAIに任せる！）
  • Shopifyデータを処理するカスタムエンドポイントを実装（両方のAPI仕様を参照しながら）
  • システム間のデータ変換関数を作成（面倒な型変換もAIにお任せ）

プロンプト例：

"Shopify Admin APIを使って商品情報を取得して、うちのAPI仕様に合わせてDBに保存するTypeScriptクライアント作って！"

テストとドキュメントも楽々

品質保証も簡単に：

  • システム間のデータ処理を確認するテストスイートを自動生成
  • 統合パターンのドキュメント例を作成（これ、地味に面倒な作業なんですよね...）
  • ShopifyとカスタムサービスのAPI互換性を検証（不整合を早期発見！）

プロンプト例：

"うちの注文処理エンドポイントのテスト作って。ShopifyのWebhookデータが正しく処理できるか確認したい"

リアルな使用シーン

カスタムShopifyアプリ開発

開発者として：

  • Shopify APIクライアントコードを生成（面倒なボイラープレートコードはAIにお任せ）
  • チームのコーディング規約に沿ったAPIエンドポイントを作成（一貫性バッチリ）
  • データ同期の実装（複雑なマッピングロジックもAIが提案）
  • 統合テストの自動生成（テストカバレッジ爆上げ）

API移行作業

APIがバージョンアップしたとき：

  • バージョン間の変更点を特定（差分を自動検出）
  • 新要件に合わせてコードを更新（互換性を保ちながら）
  • データ変換用の移行スクリプトを生成（面倒な移行作業も楽々）
  • 互換性テストを作成（リグレッションを防止）

トラブルシューティング

問題発生時：

  • 両方のAPI仕様に基づいた的確な説明をAIから取得（原因究明が早い！）
  • データ構造を検証する診断コードを生成（デバッグが捗る）
  • 互換性を維持する修正を作成（一時的な回避策も提案してくれる）
  • 解決策を文書化（次回のために知見を蓄積）

まとめ：これは本当に使える！

Shopify Dev MCPサーバーとApidog MCPサーバーの組み合わせは、API開発の革命と言っても過言じゃないです。AIアシスタントがShopifyのAPIとカスタムAPI仕様の両方を理解できる環境を作ることで、複数APIシステムの連携という永遠の課題に対する解決策を提供してくれます。

この統合アプローチのおかげで、開発ライフサイクル全体が効率化されます。ドキュメント探しの時間が減り、コード生成の精度が上がり、テストの品質も向上します。特にeコマース開発チームにとっては、Shopifyとの統合方法が根本から変わるでしょう。

僕自身、これを導入してから開発効率が格段に上がりました。特に複雑なGraphQLクエリの作成や、APIの互換性確保の面で、本当に助かっています。皆さんもぜひ試してみてください！

最後に、API開発の未来は複数の知識源を統合したインテリジェントな環境にあると思います。そして、Shopify Dev MCPサーバーとApidog MCPサーバーの組み合わせは、その未来を今日から実現できる素晴らしいソリューションです！

9
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?