⛏

【Shopify.dev和訳】Themes/Dev tools/Shopify CLI/Overview

2021/09/30に公開

Shopify

themes

tech

【Shopify.dev 和訳】Themes/Developer tools/Shopify CLI/Overview

この記事について

この記事は、Themes/Developer tools/Shopify CLI/Overviewの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

テーマのための Shopify CLI

Shopify CLI は、Shopify のテーマやアプリの構築に役立ちます。Node.js アプリ、Ruby on Rails アプリ、アプリの拡張機能、Shopify Scripts (beta)、Shopify テーマを素早く生成します。また、多くの一般的な開発タスクを自動化します。

このドキュメントでは、テーマ開発のための Shopify CLI の使い方を説明します。アプリ開発のための Shopify CLI の使い方については、Shopify CLI for appsをご覧ください。

Shopify CLI と Theme Kit の選択

Shopify CLI はほとんどの Shopify テーマ開発作業において Theme Kit に取って代わるものです。Online Store 2.0 のテーマを扱っている場合は Shopify CLI を使うべきです。古いテーマを扱っている場合や、既存のテーマ開発ワークフローに Theme Kit が組み込まれている場合のみ、Shopify CLI の代わりに Theme Kit を使うべきです。

特徴

Shopify CLI は以下の機能により、テーマの開発プロセスを加速させます:

開発テーマを使って、テーマの変更を安全にプレビュー、テスト、共有できる
テーマのプレビュー時に CSS やセクションの変更をホットリロード
Dawnを出発点として新しいテーマを初期化
コマンドラインからのテーマのプッシュと公開
テーマでテーマチェックを実行
商品、顧客、下書き注文など、テーマのテストデータを入力する

開発テーマ

発テーマとは、開発に使用している Shopify ストアに接続されている一時的な隠しテーマです。テーマを開発テーマとしてストアに接続すると、そのストアのデータをローカルテストに使用することができます。

shopify theme serve コマンドを使って開発テーマを作ることができます。

開発テーマは Shopify ストアや開発ストアで使うことができます。開発テーマはテーマの上限にはカウントされず、7 日間使用されないとストアから削除されます。

あなたの開発テーマは shopify logout を実行すると削除されます。もしログアウト後にアクセスできるテーマのプレビューリンクが欲しい場合は、開発テーマをストアの未公開テーマにプッシュしてください。

開発テーマは以下のような作業に使用できます:

ローカルで開発しているテーマの変更点をリアルタイムで確認する。
Shopify 管理画面のテーマエディタを使って、テーマのカスタマイズや操作を行う。
パスワードで保護されたテーマのプレビューを他の開発者と共有する。

インストール方法

Windows、macOS、Linux に Shopify CLI をインストールする方法については、「Shopify CLI のインストール」を参照してください。

スタート時

Shopify CLI を始めるにあたって、以下のトピックについての説明:

Shopify CLI を使うための要件
ストアへの接続
新しいテーマの作成
テーマをプレビューする
テーマのエラーをチェックする

ディレクトリ構造

shopify theme serve などの特定のテーマコマンドを実行できるのは、使用しているディレクトリがデフォルトの Shopify テーマのフォルダ構造と一致している場合のみです。この構造は、ビルドされていないテーマ、つまり必要なファイル変換が既に行われているテーマを表します。ビルドツールを使ってテーマファイルを生成している場合は、生成されたファイルが保存されているディレクトリからコマンドを実行する必要があるかもしれません。

デフォルトの Shopify テーマのフォルダ構造は以下の通りです:

Shopify theme folder structure

└── project
    ├── assets
    ├── config
    ├── layout
    ├── locales
    ├── sections
    ├── snippets
    └── templates
        └── customers

Shopify CLI からファイルを除外する

テーマと同じリポジトリに、Shopify CLI を使って操作したくないファイルがある場合、テーマのルートにある.shopifyignoreにそれらのファイルを追加することができます。

.shopifyignoreは、以下の形式のファイルへの参照を受け付けます。

単純なファイル名： templates/product.temp.json
ワイルドカード： config/*_secret.json, *.jpg
正規表現 : /\.(txt|gif|bat)$/

コマンドリファレンス

Shopify CLI には、Shopify との認証や通信のための基本的なコマンドと、テーマ開発のための特定のコマンドがあります。

トラブルシューティング

Shopify CLI のアップグレード、レガシーバージョンからの移行、Shopify CLI のアンインストールの方法については、Shopify CLI のトラブルシューティングを参照してください。

Shopify CLI に貢献する

Shopify CLI はオープンソースです。私たちの GitHub リポジトリに貢献する方法を学んでください。

その他のヘルプ

GitHub issue を開く - バグを報告したり、新機能をリクエストするには、Shopify CLI リポジトリに issue を開いてください。
Shopify Community Forums - 私たちのフォーラムに参加して、コミュニティに参加したり、Shopify CLI を使った開発について学んでください

Shopify アプリのご紹介

Discussion

ログインするとコメントできます