Shopify アプリの構築: Shopify アプリ エコシステムの開発者ガイド

Shopify App Store は 10,000 を超えるアプリをホストし、開発者に数十億ドルの収益をもたらします。単一の販売者向けのカスタム アプリを構築する場合でも、数千の店舗向けのパブリック アプリを構築する場合でも、Shopify のアプリ アーキテクチャ、API、エコシステムを理解することが不可欠です。このガイドでは、開発者が 2026 年に Shopify アプリを構築、起動、拡張するために知っておくべきことをすべて説明します。

Q: どのような種類の Shopify アプリを構築できますか?

Shopify アプリには 3 種類あります。Shopify アプリ ストアにリストされ、あらゆる販売者がインストールできる パブリック アプリ、単一の特定のストア用に構築された カスタム アプリ、開発およびテスト中に使用される ドラフト アプリです。パブリックアプリはShopifyの審査プロセスを経ますが、カスタムアプリはストアの管理者を通じて直接インストールされます。

アプリの種類の説明

公開アプリ

公開アプリは Shopify App Store にリストされており、Shopify 販売者であれば誰でもインストールできます。認証には OAuth を使用し、Shopify のアプリレビューガイドラインに準拠する必要があります。

特徴:

• 480 万を超えるすべての Shopify ストアで利用可能
• サブスクリプション、使用料、または 1 回限りの購入による収益
• Shopify のアプリ審査プロセスに合格する必要があります
• 加盟店認証に OAuth 2.0 を使用する
• Shopify の App Store ポリシーと品質基準の対象となります

カスタムアプリ

カスタム アプリは単一ストア用に構築され、App Store のレビュー プロセスを経ません。これらはストアの管理パネルから直接インストールされます。

特徴:

• 特定の販売者向けに構築
• App Store のリストは必要ありません
• Shopify 管理画面で生成されたアクセス トークン
• OAuth フローは必要ありません
• オーダーメイドのビジネス ロジックと統合に最適

アプリのドラフト

ドラフト アプリは開発中に使用されます。これらはパブリック アプリのように機能しますが、開発ストアにのみインストールできます。 App Store に送信すると、パブリック アプリに変換されます。

開発環境のセットアップ

Shopify CLI

Shopify CLI は、アプリ開発用の公式コマンドライン ツールです。プロジェクトの足場を築き、開発ストアを管理し、アプリのデプロイメントを処理します。

はじめに:

1. Node.js 18 以降と npm をインストールする
2. Shopify CLIをインストールします: npm install -g @shopify/cli @shopify/app
3. 新しいアプリを作成します: shopify app init
4. フレームワークを選択します (Remix がデフォルトであり、推奨される選択肢です)
5. 開発を開始します: shopify app dev

CLI は、ローカル開発用に ngrok トンネルを自動的にセットアップし、アプリ認証を管理し、ホット モジュールのリロードを提供します。

開発ストア

Shopify パートナー ダッシュボードを通じて無料の開発ストアを作成します。開発ストアはすべての Shopify 機能に完全にアクセスでき、有料プランは必要ありません。テスト用の開発ストアを無制限に作成できます。

Shopify API

Shopify は、さまざまなユースケース向けにいくつかの API を提供しています。

| API |認証 |使用例 | |-----|------|----------| |管理 API (REST) | OAuth / アクセストークン |店舗管理、注文、商品、顧客 | |管理 API (GraphQL) | OAuth / アクセストークン | REST と同じですが、柔軟なクエリを備えています。 |ストアフロント API |ストアフロントアクセストークン |顧客向け機能、ヘッドレス コマース | |チェックアウト API |チェックアウト アクセス トークン |カスタム チェックアウト エクスペリエンス (Plus のみ) | |決済アプリ API |パートナーの資格情報 |支払いゲートウェイの統合 | |関数API | Wasm モジュール |カスタム割引、配送、検証ロジック |

管理 API

Admin API は、ストア データを管理するための主要なインターフェイスです。製品、注文、顧客、在庫、フルフィルメントなどへのアクセスを提供します。

GraphQL と REST:

Shopify は、新規開発には GraphQL Admin API を推奨します。利点は次のとおりです。

• 必要なフィールドを正確にリクエストします (オーバーフェッチなし)
• 単一のリクエストで関連リソースを取得します
• イントロスペクションを備えた厳密に型指定されたスキーマ
• レート制限の使用率の向上 (リクエストベースではなくコストベース)

GraphQL の例 -- 製品の取得:

query {
  products(first: 10) {
    edges {
      node {
        id
        title
        variants(first: 5) {
          edges {
            node {
              price
              inventoryQuantity
            }
          }
        }
      }
    }
  }
}

レート制限:

• GraphQL Admin API: 1 秒あたり 1,000 コスト ポイント (各フィールドにはコストがあります)
• REST Admin API: 1 秒あたり 40 リクエスト (Basic/Shopify)、80 (Advanced/Plus)
• ストアフロント API: 1 秒あたり 100 コスト ポイント

ストアフロント API

Storefront API は、顧客対応エクスペリエンスのために設計されています。製品、コレクション、カート機能への非認証アクセスを提供します。構築するときに使用します。

• カスタムストアフロント（ヘッドレスコマース）
• モバイルアプリ
• 外部ウェブサイトに埋め込まれた購入ボタン
• 製品推奨ウィジェット

Webhook

Webhook は、販売者のストアでイベントが発生したときにアプリに通知します。データが変更されると、API をポーリングする代わりに、Shopify は HTTP POST リクエストをエンドポイントに送信します。

ほとんどのアプリに必須の Webhook:

• orders/create -- 新しい注文が行われました
• orders/updated -- 注文ステータスが変更されました
• products/update -- 製品データが変更されました
• products/delete -- 製品が削除されました
• app/uninstalled -- 販売者がアプリをアンインストールしました
• shop/update -- ストア設定が変更されました

Webhook のベスト プラクティス:

1. 迅速に応答 -- 5 秒以内に 200 ステータスを返します。データを非同期的に処理する
2. 重複の処理 -- Shopify は同じ Webhook を複数回送信する場合があります。冪等性を実装する
3. 署名を検証 -- X-Shopify-Hmac-SHA256 ヘッダーを検証して信頼性を確認します
4. 再試行ロジックを実装する -- エンドポイントが失敗した場合、Shopify は 48 時間で最大 19 回再試行します。
5. 必須 Webhook を使用する -- コンプライアンスのために app/uninstalled、customers/data_request、customers/redact、および shop/redact を登録します

App Bridge と Polaris を使用したアプリ UI の構築

Shopify アプリブリッジ

App Bridge を使用すると、アプリの UI を Shopify 管理画面内でレンダリングできるようになります。それは以下を提供します:

• Shopify の管理サイドバーとのナビゲーション統合
• モーダル ダイアログ、トースト通知、読み込みバー
• 製品、コレクション、顧客を選択するためのリソースピッカー
• プライマリおよびセカンダリアクションを含むタイトルバー

ポラリスデザインシステム

Polaris は Shopify の React コンポーネント ライブラリです。 Shopify の管理デザイン言語に一致する、事前に構築された UI コンポーネントが提供されます。

• フォーム、ボタン、入力フィールド
• データテーブルとリソースリスト
• カード、バナー、レイアウトコンポーネント
• 日付ピッカー、フィルター、ページネーション

Polaris を使用すると、アプリが Shopify 管理内でネイティブに感じられ、設計レビューに合格することが保証されます。

Shopify の機能

Shopify Functions を使用すると、WebAssembly (Wasm) を使用して Shopify インフラストラクチャ上でカスタム ビジネス ロジックを実行できます。これらは従来の Script Editor スクリプトを置き換え、コマース フローの重要なポイントで実行されます。

• 割引機能 -- カスタム割引ロジック (BOGO、段階的価格設定、ボリューム ディスカウント)
• 配送機能 -- カスタム配送料と配送オプション
• 支払い機能 -- チェックアウト時に支払い方法を非表示または並べ替えます
• 検証関数 -- カスタム カートおよびチェックアウト検証ルール
• フルフィルメント機能 -- カスタムフルフィルメント場所のルーティング

関数は 5 ミリ秒未満で実行され、Shopify のサーバー上で実行されるため、店頭テクノロジー (リキッド、水素、サードパーティ) に関係なく機能します。

アプリのレビュープロセス

公開アプリは、App Store に掲載する前に Shopify の審査に合格する必要があります。レビューでは次のように評価されます。

技術的要件:

• アプリは最新バージョンの Shopify API を使用する必要があります
• 正しいスコープを備えた適切な OAuth 実装
• すべてのエンドポイントの HTTPS
• GDPR 準拠のための必須の Webhook ハンドラー
• エラー処理と正常な機能低下

ユーザー エクスペリエンスの要件:

• 管理UIにPolarisコンポーネントを使用する
• 明確なオンボーディングとセットアップ手順を提供する
• アプリ内にヘルプ/サポートのリンクを含めます
• すべての管理画面サイズに対応したレスポンシブデザイン

ビジネス要件:

• 明確かつ正確な App Store のリスト
• 透明性のある価格設定と請求
• プライバシーポリシーと利用規約
• 適切な応答時間でサポート チャネルを実現

一般的な拒否理由:

1. 不要なAPI権限スコープのリクエスト
2. GDPR Webhook ハンドラーが欠落している
3. Polaris ガイドラインに従わない貧弱な UI
4. 不適切なエラー処理
5. レビュー中に壊れた機能

審査プロセスには通常 7 ～ 14 営業日かかります。フィードバックに速やかに対応 -- Shopify は、必要な変更に関する具体的なガイダンスを提供します。

収益化戦略

Shopify は、Billing API を通じていくつかの請求モデルをサポートしています。

|モデル |最適な用途 |例 | |----------|----------|----------| |月額購読 |アプリのコア機能 |ベーシックで月額 9.99 ドル、プロで月額 29.99 ドル | |年間サブスクリプション |献身的な顧客 | $99/年 (月額より割引) | |従量制課金 |変動消費 | API 呼び出しまたはメール送信ごとに $0.01 | |ワンタイムチャージ |生涯アクセス | $49.99 の 1 回限りの購入 | |フリーミアム |ユーザー獲得 |有料アップグレード付きの無料枠 |

価格設定のヒント:

• Shopify takes a 15% revenue share on the first $1M in revenue, then 0% (as of their current partner program terms)
• 無料トライアルを提供します (7 ～ 14 日間が標準です)
• Create clear value differentiation between pricing tiers
• Consider usage-based pricing for apps with variable resource consumption

テストと品質保証

アプリを審査のために送信する前に:

1. Unit tests -- Test core business logic in isolation
2. Integration tests -- Test API interactions with Shopify's development store
3. UI tests -- Verify Polaris components render correctly
4. Webhook tests -- Validate webhook processing with test payloads
5. Performance tests -- Ensure API calls stay within rate limits under load
6. Security audit -- Check for XSS, CSRF, and injection vulnerabilities
7. OAuth flow test -- Verify installation, authentication, and uninstallation

Use Shopify's partner dashboard to simulate different store configurations and plan types.

プロフェッショナルなアプリ開発

Building a Shopify app requires expertise in React, GraphQL, Node.js, and Shopify's specific platform patterns. ECOSIRE は、既存のアプリが提供する機能を超えるカスタム機能を必要とする企業向けに、プロフェッショナルな Shopify アプリ開発サービス を提供します。

独自のストア用のカスタム アプリが必要な場合でも、Shopify エコシステム用のパブリック アプリを構築したい場合でも、当社の開発チームがアーキテクチャ、開発、テスト、App Store への申請を処理します。 We also offer automation solutions that integrate with Shopify's APIs and webhooks.

Contact our team to discuss your Shopify app development project.

重要なポイント

• Shopify は、パブリック (App Store)、カスタム (単一ストア)、およびドラフト (開発) の 3 つのアプリ タイプを提供します。
• 新規開発には REST よりも GraphQL Admin API をお勧めします
• Webhooks enable real-time event processing without polling
• Shopify Functions は、WebAssembly を介して Shopify のインフラストラクチャ上でカスタム ビジネス ロジックを実行します
• App Bridge and Polaris ensure your app integrates seamlessly with the Shopify admin
• アプリのレビュー プロセスには 7 ～ 14 日かかり、技術的な品質、UX、ビジネス要件が評価されます。
• Billing API を介したサブスクリプション、使用量ベースの請求、または 1 回限りの請求を通じて収益化します。