shopify

Shopify 開発

Shopify プラットフォーム上でアプリ、拡張機能、テーマ、API 統合を構築するための包括的なガイドです。

プラットフォームの概要

コアコンポーネント：

• Shopify CLI - 開発ワークフローツール
• GraphQL Admin API - データ操作用の主要 API（推奨）
• REST Admin API - レガシー API（メンテナンスモード）
• Polaris UI - 一貫性のあるインターフェースのためのデザインシステム
• Liquid - テーマ用テンプレート言語

拡張ポイント：

• チェックアウト UI - チェックアウト体験をカスタマイズします
• 管理画面 UI - 管理ダッシュボードを拡張します
• POS UI - Point of Sale をカスタマイズします
• 顧客アカウント - 購入後のページ
• テーマアプリ拡張機能 - テーマに組み込む機能

クイックスタート

前提条件

# Install Shopify CLI
npm install -g @shopify/cli@latest

# Verify installation
shopify version

新しいアプリを作成する

# Initialize app
shopify app init

# Start development server
shopify app dev

# Generate extension
shopify app generate extension --type checkout_ui_extension

# Deploy
shopify app deploy

テーマ開発

# Initialize theme
shopify theme init

# Start local preview
shopify theme dev

# Pull from store
shopify theme pull --live

# Push to store
shopify theme push --development

開発ワークフロー

1. アプリ開発

セットアップ：

shopify app init
cd my-app

アクセススコープを設定する（shopify.app.toml）：

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

開発を開始する：

shopify app dev  # Starts local server with tunnel

拡張機能を追加する：

shopify app generate extension --type checkout_ui_extension

デプロイする：

shopify app deploy  # Builds and uploads to Shopify

2. 拡張機能の開発

利用可能な種類：

• チェックアウト UI - checkout_ui_extension
• 管理画面アクション - admin_action
• 管理画面ブロック - admin_block
• POS UI - pos_ui_extension
• Function - function（ディスカウント、決済、配送、検証）

ワークフロー：

shopify app generate extension
# Select type, configure
shopify app dev  # Test locally
shopify app deploy  # Publish

3. テーマ開発

セットアップ：

shopify theme init
# Choose Dawn (reference theme) or start fresh

ローカル開発：

shopify theme dev
# Preview at localhost:9292
# Auto-syncs to development theme

デプロイ：

shopify theme push --development  # Push to dev theme
shopify theme publish --theme=123  # Set as live

何を作るべきか

アプリを作る場合：

• 外部サービスと統合する
• 複数のストアにまたがる機能を追加する
• 販売事業者向けの管理ツールを構築する
• ストアデータをプログラムで管理する
• 複雑なビジネスロジックを実装する
• 機能に対して課金する

拡張機能を作る場合：

• チェックアウトの流れをカスタマイズする
• 管理画面にフィールドや機能を追加する
• 小売向けの POS アクションを作成する
• ディスカウント、決済、配送のルールを実装する
• 顧客アカウントページを拡張する

テーマを作る場合：

• カスタムのストアフロントデザインを作成する
• 独自のショッピング体験を構築する
• 商品ページやコレクションページをカスタマイズする
• ブランド固有のレイアウトを実装する
• ホームページやコンテンツページを変更する

組み合わせる方法：

アプリ + テーマ拡張機能：

• アプリがバックエンドのロジックとデータを処理します
• テーマ拡張機能がストアフロント UI を提供します
• 例：商品レビュー、ウィッシュリスト、サイズガイド

基本的なパターン

GraphQL 商品クエリ

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

チェックアウト拡張機能（React）

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

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

function Extension() {
  const [message, setMessage] = useState('');

  return (
    <BlockStack>
      <TextField label="Gift Message" value={message} onChange={setMessage} />
    </BlockStack>
  );
}

Liquid の商品表示

{% for product in collection.products %}
  <div class="product-card">
    <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
    <a href="{{ product.url }}">View Details</a>
  </div>
{% endfor %}

ベストプラクティス

API の使用：

• 新規開発では REST より GraphQL を優先します
• コストを抑えるため、必要なフィールドのみをリクエストします
• 大規模なデータセットにはページネーションを実装します
• 一括処理には一括操作を使用します
• レート制限を遵守します（GraphQL はコストベースです）

セキュリティ：

• API 認証情報は環境変数に保存します
• Webhook の署名を検証します
• 公開アプリでは OAuth を使用します
• 必要最小限のアクセススコープをリクエストします
• 埋め込みアプリではセッショントークンを実装します

パフォーマンス：

• 適切な場合は API レスポンスをキャッシュします
• テーマ内の画像を最適化します
• Liquid ロジックの複雑さを最小限に抑えます
• 拡張機能では非同期読み込みを使用します
• GraphQL のクエリコストを監視します

テスト：

• テストには開発ストアを使用します
• 異なるストアプランでテストします
• モバイルでのレスポンシブ表示を確認します
• アクセシビリティ（キーボード、スクリーンリーダー）を確認します
• GDPR への準拠を検証します

リファレンスドキュメント

高度なトピックに関する詳細なガイド：

• アプリ開発 - OAuth、API、Webhook、課金
• 拡張機能 - チェックアウト、管理画面、POS、Functions
• テーマ - Liquid、セクション、デプロイ

スクリプト

shopify_init.py - Shopify プロジェクトを対話形式で初期化します

python scripts/shopify_init.py

トラブルシューティング

レート制限エラー：

• X-Shopify-Shop-Api-Call-Limit ヘッダーを監視します
• 指数バックオフを実装します
• 大規模なデータセットには一括操作を使用します

認証エラー：

• アクセストークンの有効性を確認します
• 必要なスコープが付与されているか確認します
• OAuth フローが完了していることを確認します

拡張機能が表示されない場合：

• 拡張機能のターゲットが正しいか確認します
• 拡張機能が公開されているか確認します
• アプリがストアにインストールされていることを確認します

Webhook を受信できない場合：

• Webhook URL にアクセスできることを確認します
• 署名の検証を確認します
• Partner Dashboard のログを確認します

リソース

公式ドキュメント：

• Shopify Docs：https://shopify.dev/docs
• GraphQL API：https://shopify.dev/docs/api/admin-graphql
• Shopify CLI：https://shopify.dev/docs/api/shopify-cli
• Polaris：https://polaris.shopify.com

ツール：

• GraphiQL Explorer（Admin → Settings → Apps → Develop apps）
• Partner Dashboard（アプリ管理）
• 開発ストア（無料テスト）

API のバージョン管理：

• 四半期ごとのリリース（YYYY-MM 形式）
• 現在：2025-01
• 各バージョンのサポート期間は 12 か月です
• バージョンを更新する前にテストします

---

注： このスキルは、2025 年 1 月時点の Shopify プラットフォームを対象としています。最新情報については公式ドキュメントを参照してください。