Zenn
⛏

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

2021/09/30に公開
Shopify
#
themes
tech

この記事について

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

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

Shopify アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Shopify CLI の使用方法 | Getting started with Shopify CLI

Shopify CLIは、Shopify のテーマやアプリを構築するのに役立ちます。

Node.js アプリ、Ruby on Rails アプリ、Shopify テーマを素早く作成でき、多くの開発タスクを自動化します。

このドキュメントでは、テーマ開発のための Shopify CLI の使い方を説明します。

アプリ開発のための Shopify CLI の使い方を学ぶには、Shopify CLI for appsをご覧ください。

始める前に | Before you start

テーマを開発するために Shopify CLI を使い始める前に、以下の作業を行っていることを確認してください。

  • Windows 用の RubyInstaller(2.7 以上)を使って、RubyまたはRuby+Devkitをインストールする。
  • 開発ストアを使ってテーマを作りたいのであれば、Shopify Partner アカウントを作るかログインして、開発ストアを作る。
  • あなたが作業したいストアのテーマ管理権限またはテーマ権限を持ったコラボレーターアカウントまたはスタッフアカウントを持っているか、あなたがストアのオーナーであることを確認してください。
  • 作業したいストアの URL をメモしておきます。
  • インターネットに接続されていることを確認してください。ほとんどの Shopify CLI コマンドは実行するのにインターネット接続が必要です。

Shopify CLI のインストール | Install Shopify CLI

macOS または Windows に Shopify CLI をインストールします。

その他のプラットフォームやパッケージマネージャーについては、Shopify CLI のインストールを参照してください。

macOS (Homebrew)
$ brew tap shopify/shopify
$ brew install shopify-cli
Windows (RudyGems.org)
$ gem install shopify-cli

認証 | Authenticate

shopify loginを使って、Shopify CLI と作業したいストアを接続します。

開発ストアや Shopify ストアにログインすることができます。ストアへのコラボレーターアクセス権を持っているか、ストアのスタッフメンバーかオーナーである必要があります。あなたがアクセス権を持っているストアを切り替えるには、shopify switchを使ってください。

  1. ターミナルで shopify login --store <DOMAIN> と入力してください。<DOMAIN> はログインしたいストアです。
    Terminal
    $ shopify login --store johns-apparel.myshopify.com
  2. ブラウザのウィンドウで、開発に使用したいストアに付随するアカウントにログインします。

新しいテーマを作成 | Create a new theme

shopify theme initを使って、ローカルマシンに新しいテーマを作成します。このコマンドは、Git リポジトリをローカルマシンにクローンして、テーマ構築の出発点として使用します。デフォルトでは、このコマンドは Shopify のサンプルテーマであるDawnのコピーを作成します。

テーマのクローンを作成するには、次のコマンドを実行します。テーマのタイトルを入力するよう促されますが、これはディレクトリの名前でもあります。

Terminal
$ shopify theme init
$
$ ? Theme name
$ > DawnBFCM
$ ┏━━ Cloning https://github.com/Shopify/dawn.git into DawnBFCM...
  ━━━━━
$ ┃ ██████████████████████████████████████████████████████████████ 100%
$ ┗━━ ✓ Cloned into DawnBFCM
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

既存のテーマを使う | Use an existing theme

既存のローカルテーマを開発に使いたい場合は、cd [path/to/theme] でローカルマシンのテーマのディレクトリに移動します。実行する Shopify CLI のテーマコマンドは、そのディレクトリにあるテーマを使用します。

既存のリモートテーマを使用するには、以下のオプションのいずれかを使用します。

  • shopify theme pull を使って、ローカルマシンにテーマを取り込む。ストアにあるテーマのリストからテーマを選択するように促されます。
  • テーマが GitHub にある場合は、shopify theme initを使い、--clone-urlフラグを使ってリモート URL を指定します。

テストデータの入力 | Populate test data

shopify populate <object> を使って、商品、顧客、ドラフトオーダーなどのサンプルデータを入力し、テーマの動作をテストします。

テストデータを投入するには、追加したいデータの種類を指定して以下のコマンドを実行します。

Terminal
$ shopify populate products

出力は以下のようになります。

Terminal
$ ✓ spring glitter added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161466504
$ ✓ frosty frost added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161499272
$ ✓ floral voice added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161532040
$ ✓ dark bird added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161564808
$ ✓ long shape added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161597576
$ Successfully added 5 Products to johns-apparel.myshopify.com
$ ⭑ View all Products at https://johns-apparel.myshopify.com/admin/products

テーマのプレビュー、テスト、共有 | Preview,test,and share your theme

テーマを作成するか、テーマにナビゲートした後、ブラウザでテーマと対話するために shopify theme serve を実行することができます。Shopify CLI は、接続しているストアに開発テーマとしてテーマをアップロードし、以下のように返します。

  • http://127.0.0.1:9292 の開発テーマへのリンクです。この URL は、CSS やセクションのローカルな変更をホットリロードし、ストアのデータを使用してリアルタイムに変更をプレビューすることができます。このプレビューは Google Chrome でのみ利用できます。
  • テーマのオンラインストアエディターへのリンクです。
  • 他の人と共有できるプレビューリンクです。

テーマを提供するには、以下のコマンドを実行します。

Terminal
$ shopify theme serve

出力は以下のようになります。

Terminal
$ ┏━━ Viewing theme... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
$ ┃ * Syncing theme #108267175958 on johns-apparel.myshopify.com
$ ┃ ████████████████████████████████████████████████████ 100%
$ ┃
$ ┃ Serving .
$ ┃
$ ┃ Please open this URL in your browser:
$ ┃ http://127.0.0.1:9292
$ ┃
$ ┃ Customize this theme in the Online Store Editor:
$ ┃ https://johns-apparel.myshopify.com/admin/themes/108267175958/editor
$ ┃
$ ┃ Share this theme preview:
$ ┃ https://johns-apparel.myshopify.com/?preview_theme_id=108267175958
$ ┃
$ ┃ (Use Ctrl-C to stop)
$ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

テーマのコードを Lint する | Lint your theme's code

shopify theme checkを使って、コードにエラーがないか分析し、テーマとリキッドのベストプラクティスに従っているかどうかを確認します。テーマチェックが実行するチェック項目についてはこちらをご覧ください。

現在のテーマに対してテーマチェックを実行するには、以下のコマンドを実行します。

Terminal
$ shopify theme check

出力は以下のようになります。

Terminal
$ Checking . ...
$ sections/image-banner.liquid:28: style: SpaceInsideBraces: Too many spaces before '|'.
$    alt="{{ section.settings.image.alt  | escape }}"
                                    ^^^
$ snippets/icon-star.liquid: suggestion: UnusedSnippet: This template is not used.

$ 101 files inspected, 2 offenses detected, 0 offenses auto-correctable

作成したテーマをストアにアップロード | Push your theme to your store

shopify theme push を使って、ローカルのテーマファイルを Shopify にアップロードし、リモートバージョンを上書きします。ストア内のテーマのリストから上書きするテーマを選択するように促されます。既存のテーマを上書きせずにテーマをテーマライブラリにアップロードするには、--unpublished フラグを使用します。

Terminal
$ shopify theme push
$
$ ? Select theme to push to (Choose with ↑ ↓ ⏎, filter with 'f')
$   1. Dawn [live]
$ > 2. Dawn - BFCM [unpublished]

テーマの公開 | Publish your theme

shopify theme publish を使うと、テーマライブラリから未公開のテーマを選択して公開することができます。もしローカルのテーマを公開したい場合は、まず shopify theme push を実行する必要があります。

Terminal
$ shopify theme publish
$
$ ? Select theme to push to (Choose with ↑ ↓ ⏎, filter with 'f')
$ > 1. Dawn - BFCM [unpublished]

テーマ ID の確認 | Find your theme ID

Shopify CLI を使用してテーマを pull、push、publish、または delete する際に、テーマの ID を使用したい場合があります。

テーマを serve、push、または publish すると、テーマの ID がレスポンスに表示されます。

Terminal
$ shopify theme serve
$ ┏━━ Viewing theme... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
$ ┃ * Syncing theme #THEME_ID on johns-apparel.myshopify.com
$ ┃ ████████████████████████████████████████████████████ 100%

また、テーマの ID は、テーマの編集やプレビューに関連するすべての URL で見つけることができます。

URL
オンラインストアエディター https://johns-apparel.myshopify.com/admin/themes/THEME_ID/editor
コードエディター https://johns-apparel.myshopify.com/admin/themes/THEME_ID
テーマプレビュー https://johns-apparel.myshopify.com/?preview_theme_id=THEME_ID

次のステップ | Next steps

Shopify アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

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