shopify-development

Name: shopify-development
Author: davila7

github.com/davila7開発33.0k410 回インストール今日更新

リポジトリ

shopify-development について

Shopifyアプリ、エクステンション、テーマの開発向けスキルです。要件に応じたプロジェクト種別の選択を支援し、CLIコマンド、APIパターン、セキュリティ指針、トラブルシューティングを示します。

主な機能

01アプリ・エクステンション・テーマの選択案内
02Shopify CLIコマンド例
03GraphQLのクエリとミューテーションのパターン
04アクセススコープのガイダンス
05セキュリティとトラブルシューティング
06スキャフォールディングとGraphQL用スクリプト

活用シーン

01アプリ、エクステンション、テーマの方式選択
02Shopifyアプリの作成と実行
03チェックアウト、管理画面、POS拡張の構築
04Liquidによるストアフロントテーマの開発

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/davila7/claude-code-templates --skill shopify-development

インストール後、Claude Code で/shopify-developmentを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md

references/

app-development.md

extensions.md

themes.md

scripts/

.gitignore

requirements.txt

shopify_graphql.py

shopify_init.py

scripts/tests/

test_shopify_init.py

詳細

Shopify 開発スキル

このスキルは、ユーザーが次のことについて質問したときに使用します。

Shopify アプリまたは拡張機能の構築
チェックアウト/管理/POS UI のカスタマイズの作成
Liquid テンプレートを使用したテーマの開発
Shopify GraphQL または REST API との連携
Webhook または課金の実装
メタフィールドまたは Shopify Functions の使用

ルーティング: 何を構築するか

ユーザーが外部サービスを連携したい、またはマーチャント向けツールを構築したい、または機能に対して課金したい場合: → アプリを構築します（references/app-development.md を参照）

ユーザーがチェックアウトをカスタマイズしたい、または管理 UI を追加したい、または POS アクションを作成したい、または割引ルールを実装したい場合: → 拡張機能を構築します（references/extensions.md を参照）

ユーザーがストアフロントのデザインをカスタマイズしたい、または商品/コレクションページを変更したい場合: → テーマを構築します（references/themes.md を参照）

ユーザーがバックエンドのロジックとストアフロント UI の両方を必要としている場合: → アプリ + テーマ拡張機能の組み合わせを構築します

Shopify CLI コマンド

CLI をインストール:

npm install -g @shopify/cli@latest

アプリを作成して実行:

shopify app init          # Create new app
shopify app dev           # Start dev server with tunnel
shopify app deploy        # Build and upload to Shopify

拡張機能を生成:

shopify app generate extension --type checkout_ui_extension
shopify app generate extension --type admin_action
shopify app generate extension --type admin_block
shopify app generate extension --type pos_ui_extension
shopify app generate extension --type function

テーマ開発:

shopify theme init        # Create new theme
shopify theme dev         # Start local preview at localhost:9292
shopify theme pull --live # Pull live theme
shopify theme push --development  # Push to dev theme

アクセススコープ

shopify.app.toml で設定します:

[access_scopes]
scopes = "read_products,write_products,read_orders,write_orders,read_customers"

一般的なスコープ:

read_products、write_products - 商品カタログへのアクセス
read_orders、write_orders - 注文管理
read_customers、write_customers - 顧客データ
read_inventory、write_inventory - 在庫レベル
read_fulfillments、write_fulfillments - 注文フルフィルメント

GraphQL パターン（API 2026-01 に対して検証済み）

商品のクエリ

query GetProducts($first: Int!, $query: String) {
  products(first: $first, query: $query) {
    edges {
      node {
        id
        title
        handle
        status
        variants(first: 5) {
          edges {
            node {
              id
              price
              inventoryQuantity
            }
          }
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

注文のクエリ

query GetOrders($first: Int!) {
  orders(first: $first) {
    edges {
      node {
        id
        name
        createdAt
        displayFinancialStatus
        totalPriceSet {
          shopMoney {
            amount
            currencyCode
          }
        }
      }
    }
  }
}

メタフィールドの設定

mutation SetMetafields($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      id
      namespace
      key
      value
    }
    userErrors {
      field
      message
    }
  }
}

変数の例:

{
  "metafields": [
    {
      "ownerId": "gid://shopify/Product/123",
      "namespace": "custom",
      "key": "care_instructions",
      "value": "Handle with care",
      "type": "single_line_text_field"
    }
  ]
}

チェックアウト拡張機能の例

import {
  reactExtension,
  BlockStack,
  TextField,
  Checkbox,
  useApplyAttributeChange,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.block.render", () => (
  <GiftMessage />
));

function GiftMessage() {
  const [isGift, setIsGift] = useState(false);
  const [message, setMessage] = useState("");
  const applyAttributeChange = useApplyAttributeChange();

  useEffect(() => {
    if (isGift && message) {
      applyAttributeChange({
        type: "updateAttribute",
        key: "gift_message",
        value: message,
      });
    }
  }, [isGift, message]);

  return (
    <BlockStack spacing="loose">
      <Checkbox checked={isGift} onChange={setIsGift}>
        This is a gift
      </Checkbox>
      {isGift && (
        <TextField
          label="Gift Message"
          value={message}
          onChange={setMessage}
          multiline={3}
        />
      )}
    </BlockStack>
  );
}

Liquid テンプレートの例

{% comment %} Product Card Snippet {% endcomment %}
<div class="product-card">
  <a href="{{ product.url }}">
    {% if product.featured_image %}
      <img
        src="{{ product.featured_image | img_url: 'medium' }}"
        alt="{{ product.title | escape }}"
        loading="lazy"
      >
    {% endif %}
    <h3>{{ product.title }}</h3>
    <p class="price">{{ product.price | money }}</p>
    {% if product.compare_at_price > product.price %}
      <p class="sale-badge">Sale</p>
    {% endif %}
  </a>
</div>

Webhook の設定

shopify.app.toml 内:

[webhooks]
api_version = "2026-01"

[[webhooks.subscriptions]]
topics = ["orders/create", "orders/updated"]
uri = "/webhooks/orders"

[[webhooks.subscriptions]]
topics = ["products/update"]
uri = "/webhooks/products"

# GDPR mandatory webhooks (required for app approval)
[webhooks.privacy_compliance]
customer_data_request_url = "/webhooks/gdpr/data-request"
customer_deletion_url = "/webhooks/gdpr/customer-deletion"
shop_deletion_url = "/webhooks/gdpr/shop-deletion"

ベストプラクティス

API の使用

新規開発では REST ではなく GraphQL を使用する
必要なフィールドのみをリクエストする（クエリコストを削減します）
pageInfo.endCursor を使用したカーソルベースのページネーションを実装する
250 件を超えるアイテムを処理する場合は一括操作を使用する
指数バックオフでレート制限を処理する

セキュリティ

API 認証情報は環境変数に保存する
処理の前に必ず Webhook の HMAC 署名を検証する
CSRF を防ぐために OAuth の state パラメータを検証する
最小限のアクセススコープをリクエストする
埋め込みアプリにはセッショントークンを使用する

パフォーマンス

データがあまり頻繁に変わらない場合は API レスポンスをキャッシュする
拡張機能では遅延読み込みを使用する
テーマ内の画像は img_url フィルターを使用して最適化する
レスポンスヘッダーを介して GraphQL クエリコストを監視する

トラブルシューティング

レート制限エラーが表示される場合: → 指数バックオフの再試行ロジックを実装します → 大規模なデータセットには一括操作に切り替えます → X-Shopify-Shop-Api-Call-Limit ヘッダーを監視します

認証が失敗する場合: → アクセストークンがまだ有効であることを確認します → 必要なすべてのスコープが付与されていることを確認します → OAuth フローが正常に完了したことを確認します

拡張機能が表示されない場合: → 拡張機能のターゲットが正しいことを確認します → 拡張機能が shopify app deploy を介して公開されていることを確認します → アプリがテストストアにインストールされていることを確認します

Webhook がイベントを受信しない場合: → Webhook URL が公開アクセス可能であることを確認します → HMAC 署名の検証ロジックを確認します → Partner Dashboard で Webhook ログを確認します

GraphQL クエリが失敗する場合: → スキーマに対してクエリを検証します（GraphiQL エクスプローラーを使用） → エラーメッセージに非推奨のフィールドがないか確認します → 必要なアクセススコープがあることを確認します

参照ファイル

詳細な実装ガイドについては、次のファイルを参照してください。

references/app-development.md - OAuth 認証フロー、商品/注文/課金のための GraphQL ミューテーション、Webhook ハンドラー、課金 API 連携
references/extensions.md - チェックアウト UI コンポーネント、管理 UI 拡張機能、POS 拡張機能、割引/決済/配送のための Shopify Functions
references/themes.md - Liquid 構文リファレンス、テーマのディレクトリ構造、セクションとスニペット、一般的なパターン

スクリプト

scripts/shopify_init.py - 対話形式のプロジェクト雛形作成。実行: python scripts/shopify_init.py
scripts/shopify_graphql.py - クエリテンプレート、ページネーション、レート制限に対応した GraphQL ユーティリティ。インポート: from shopify_graphql import ShopifyGraphQL

公式ドキュメントのリンク

Shopify Developer Docs: https://shopify.dev/docs
GraphQL Admin API リファレンス: https://shopify.dev/docs/api/admin-graphql
Shopify CLI リファレンス: https://shopify.dev/docs/api/shopify-cli
Polaris デザインシステム: https://polaris.shopify.com

API バージョン: 2026-01（四半期ごとにリリース、非推奨化までの猶予期間は 12 か月）

Markdown 対応

ログインしてコメント

基本情報

作者: davila7
リポジトリ: davila7/claude-code-templates
カテゴリ: 開発
インストール数: 410
GitHub スター: 33,002

問題を報告