shopify-apps について
Shopifyアプリの実装パターンと注意点を扱うスキルです。React Routerのセットアップ、Adminへの埋め込み、Webhook処理、新しいアプリ開発に向けた実践方法を説明します。
主な機能
- 01React Routerによるアプリ構築
- 02App Bridgeを使ったShopify Adminへの埋め込み
- 03WebhookのHMAC署名検証
- 04Webhookの非同期処理
- 05新規コードでのGraphQL利用
- 06GDPRハンドラーの実装
活用シーン
- 01React RouterベースのShopifyアプリ構築
- 02Shopify Adminに埋め込むアプリの作成
- 03署名検証を伴うWebhook処理
- 04アプリの一般的な実装上の問題の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/shopify-appsを入力して読み込まれたか確認します。
詳細
Shopify アプリ
パターン
React Router アプリのセットアップ
React Router を使用したモダンな Shopify アプリテンプレート
App Bridge による埋め込みアプリ
Shopify 管理画面に埋め込んでアプリを表示
Webhook の処理
HMAC 検証による安全な Webhook 処理
アンチパターン
❌ 新規アプリでの REST API の使用
❌ レスポンス前の Webhook 処理
❌ Webhook の代わりにポーリングを使用
⚠️ 注意すべき落とし穴
| 問題 | 重大度 | 解決策 |
|---|---|---|
| 問題 | 高 | ## すぐにレスポンスを返し、処理は非同期で行う |
| 問題 | 高 | ## レート制限ヘッダーを確認する |
| 問題 | 高 | ## 保護された顧客データへのアクセスをリクエストする |
| 問題 | 中 | ## TOML のみを使用する（推奨） |
| 問題 | 中 | ## 両方の URL 形式に対応する |
| 問題 | 高 | ## 新規コードはすべて GraphQL を使用する |
| 問題 | 高 | ## スクリプトタグ経由で最新の App Bridge を使用する |
| 問題 | 高 | ## すべての GDPR ハンドラーを実装する |
コメント
Markdown 対応