Rokad
すべてのドキュメント
kingsbellドキュメント

インストールとローカル開発

Kingsbell のインストール、Shopify CLI 接続、プレビュー、検証、安全なパッケージ生成を説明します。

リポジトリを見る
kingsbellドキュメント
9ページ中2ページ

Kingsbell は開発、検証、リモートプレビュー、パッケージ生成に Shopify CLI を使用します。稼働中の本番ストアではなく、専用の開発ストアで作業してください。

インストール

bash
node --version
npm install --global @shopify/cli @shopify/theme
shopify version
git clone https://github.com/rokadhq/kingsbell.git
cd kingsbell

Node.js 20 以降が必要です。

開発ストアへ接続

bash
npm run dev -- --store your-store.myshopify.com

必要に応じて Shopify CLI が認証を求め、開発テーマを作成または再利用します。開発、ステージング、本番は分離してください。

shopify.theme.toml.example は非機密の例です。パスワード、トークン、Cookie、顧客データ、アプリの秘密情報をコミットしないでください。

基本コマンド

bash
npm run dev -- --store your-store.myshopify.com
npm run check
npm run package
  • dev はプレビューと同期を開始します。
  • check は Theme Check を実行します。
  • package は Shopify にインストール可能な ZIP を生成します。

開発フロー

  1. 変更ごとにブランチを作成します。
  2. 変更前後に Theme Check を実行します。
  3. 対象セクションをテーマエディターで確認します。
  4. 保存後にテンプレートを再読み込みします。
  5. デスクトップ、モバイル、キーボード操作を確認します。
  6. 空、エラー、売り切れ、セール、多数バリアントの状態をテストします。

ランタイム境界

text
assets/
blocks/
config/
layout/
locales/
sections/
snippets/
templates/

.design、QA 文書、スクリプト、コンパニオン契約はストアフロントのランタイムではありません。.shopifyignore が Shopify CLI の対象外にします。

セクションとテンプレート

新しいセクションには有効な JSON スキーマ、実用的なデフォルト、Shopify のルートとフォーム、正しい意味構造、可視フォーカス、モーション低減対応が必要です。

新しい JSON テンプレートは既存セクションを正しく参照し、順序を明示し、空コンテナを避け、テーマエディターで開いて保存できる必要があります。

アセットと JavaScript

Shopify がホストするメディアを使い、代替テキスト、レスポンシブサイズ、クロップを確認してください。

JavaScript は段階的拡張とし、可能なら遅延し、セクション再読み込みに対応させます。重複リスナーを避け、JavaScript なしでも利用可能な状態を保ちます。

検証とパッケージ

bash
npm run check
npm run package

Phase 8 のワークフローは Kingsbell-0.8.0.zip を生成します。承認前に同じパッケージを新しい開発ストアへインストールしてください。

パッケージ成功は、コマース、アカウント、B2B、性能、アクセシビリティの合格を意味しません。