Shopify PR

[Shopify] CLIを使ってローカルでテーマを構築する方法

  /
記事内に商品プロモーションを含む場合があります
この記事で解決できるお悩み
  • Shopify CLI の使い方を知りたい
  • Shopify CLI と Theme Kit との違いを知りたい
  • オンラインストア2.0 のローカル開発方法を知りたい

早速「Shopify CLI」を使ってテーマを構築する方法について解説します。

Shopifyの無料体験をはじめる

Shopify CLI for テーマとは

これまではローカル環境でShopifyテーマを構築する場合は、「Theme Kit」という開発ツールを使用する必要がありました。これを使用することにより、ローカルでの変更を自動でアップロード（プッシュ）することができました。

ただし今後は、2021年6月30日にオンラインで開催された「Shopify Unite 2021」にて発表された「オンラインストア2.0」のテーマで作業をする場合は、「Theme Kit」ではなく、「Shopify CLI」を使用する必要があります。

  • 今まで通り管理画面上でコードを編集することも可能。
  • オンラインストア2.0ではない古いテーマで開発する場合は、引き続きTheme Kitを使用することが可能。

Shopify CLIでは以下のような機能が利用できます。

  • テーマのプレビュー・ホットリロード
  • 新しいテーマの作成（Dawnがベース）
  • テーマをプッシュして公開
  • テーマチェックを実行
  • テストデータを入力

Shopify CLIをインストールする

まずはShopify CLIをコマンドラインでインストールする必要があります。

OSによりインストール方法が異なるため、以下を参照にインストールします。

Install Shopify CLI

今回はMacでHomebrewを介してインストールしました。

$ brew tap shopify/shopify
$ brew install shopify-cli

Shopify CLIを使用してテーマを構築する

「開発ストア」にてテーマを構築するためには、以下のいずれかが必要になります。

  • Shopifyパートナーアカウントを作成し、開発ストアを作成（ストアの所有者である）
  • スタッフアカウントであること

ストアの所有者の場合は、Shopify CLIを使用してログインする前に、ストアのURL（xxxxx.myshopify.com/admin）でストアに直接ログインする必要があります。ログインすると、開発ストアがShopifyログインに直接接続されるとのこと。

ストアにログインする

次に、ストアにログインをします。

$ shopify login --store xxxxx.myshopify.com

xxxxxには自身のドメインが入ります。

するとブラウザでShopifyログイン画面が開き、以下が表示されればログイン完了です。

Authenticated successfully. You may now close this page.

（ログイン後はブラウザ上に開いたページは閉じてOK）

パートナーアカウントが複数存在する場合は、以下も表示されますので上下キーで選択してEnterキーで決定します。

$ shopify login --store xxxxx.myshopify.com
? Select partner organization (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. test1 (1111111)
  2. test2 (1234567)

これ以降の操作でShopify CLIのテーマコマンドを実行する場合は全て、そのテーマが存在する（作成する）ディレクトリに移動してから実行します。

テーマファイルを取得する

新しいテーマを作成する場合

新しいテーマを作成したい場合は、以下のコマンドを実行することで、DawnテーマのGitリポジトリから全てのファイルがローカルにコピーされます。

$ shopify theme init themename

themename はテーマの名前＝ディレクトリ名となります。

最後のテーマ名を省略した場合は、いずれにしてもコマンドを実行後にテーマ名の入力が求められますので、テーマ名を入れてEnterを押します。

このコマンドを実行したフォルダ以下に、指定したディレクトリ名でコピーされます。

例えば

/Users/username/Shopify

がカレントディレクトリ（現在地）の時に「Dawn」というテーマ名にして実行すると、

$ shopify theme init Dawn

/Users/username/Shopify/Dawn 以下にDawnテーマがローカルにコピーされます。

既存のテーマを使用する場合

新しいテーマを作成するのではなく、開発ストアにある既存のテーマを編集したい場合は、ファイルを同期（格納）したいフォルダを作成し、そのフォルダに移動します。

例えば

/Users/username/Shopify/Dawn

にファイルを置きたい場合、上記フォルダを作成（中身は空）し、そのフォルダに移動してから、以下のコマンドを実行します。

$ shopify theme pull

複数のテーマが存在する場合は、以下のように表示されるため、上下キーで選択してEnterを押します。

? Select a theme to pull from (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Dawn/master [live]
  2. Dawn [unpublished]

これでテーマがpullされますので100％になるまでしばらく待ちます。

テーマをプレビューする

テーマを作成または既存のテーマを同期した後は、編集したテーマをプレビューするために、そのフォルダがカレントディレクトリの状態で、以下のコマンドを実行します。

$ shopify theme serve

 

しばらく待って100％になると、以下の表示になります。

例）

┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ * Syncing theme #111111111111 on xxxxx.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://xxxxx.myshopify.com/admin/themes/111111111111/editor
┃ 
┃ Share this theme preview:
┃ https://xxxxx.myshopify.com/?preview_theme_id=111111111111
┃ 
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (56.64s) ━━

これでローカルで編集し保存したものが上記の通り http://127.0.0.1:9292 にてホットリロードされます。このプレビューはGoogleChromeでのみ利用できます。

「Share this theme preview:」の下に記載されているURLは、プレビューを共有するときに利用します。こちらはホットリロードされません。

ホットリロードとは、手動でブラウザをリロードしなくとも、自動でリロードしてくれることを言います。便利！

Theme Kitの時のように、保存→ブラウザでCommand+Rなどの必要はありません。

テーマのプレビューを終了する

プレビューを終了する場合は、Ctrl+Cを押して終了します。

テーマをプッシュする

テーマをプッシュするためには、以下のコマンドを実行します。

新しい未公開のテーマをpushする場合は以下。

$ shopify theme push --unpublished

 

すでにアップロードしているテーマを更新する場合は以下。

$ shopify theme push

 

実行すると、どのテーマにpushするのかを聞かれるため、上書きするテーマを上下キーで選択してEnterを押します。

Select theme to push to (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Dawn/master [live]
  2. Dawn [unpublished]

もし公開中のliveテーマを選択した場合は以下が表示されるため、確認して問題なければYesを選択します。（公開中のテーマが即時変更されます）

? Select theme to push to (You chose: Dawn/master [live])
? Are you sure you want to push to your live theme? (Choose with ↑ ↓ ⏎)                                             
> 1. yes
  2. no

 

これでテーマがpushされますので100％になるまでしばらく待ちます。

pushしたテーマが公開中でない場合は、この時点ではまだそのテーマは公開されていません。

テーマを公開する

非公開のテーマを公開するためには、以下のコマンドを実行します。

$ shopify theme publish

実行すると、以下のようにまだ非公開のテーマのみが表示されるため、公開するテーマを上下キーで選択してEnterを押します。

? Select theme to push to (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Dawn [unpublished]

次に以下のように、本当に公開するかを聞かれるため、yesを選択すれば公開されます。

? Select theme to push to (You chose: Dawn/master [unpublished])
? Are you sure you want to make Dawn/master the new live theme on xxxxx.myshopify.com? (Choose with ↑ ↓ ⏎)
  1. no
> 2. yes

この作業は、管理画面の「オンラインストア」で行うものと全く同じです。

ショップからログアウトする

最後に作業が完了したら、ショップからログアウトを忘れずに。

$ shopify logout

ログアウトすると、shopify theme serve でプレビューしていた内容は破棄されます。破棄したくない場合はログアウト前にプッシュする必要があります。ログアウトしていない状態では、7日間操作がないと破棄されます。

Shopify CLIで利用できるテーマコマンド一覧

サンプルデータを追加する

開発ストアにサンプルデータを追加する場合は、以下のコマンドを実行します。

$ shopify populate customers

上記は顧客データですが、顧客の他にも商品・下書き注文が追加できます。

$ shopify populate products
$ shopify populate draftorders

実行すると確認が表示されるため、yesを選択します。

$ shopify populate customers
? You are currently logged into shopshopshoptokyo.myshopify.com. Do you want to proceed using this store? (Choose with ↑ ↓ ⏎)
  1. no
> 2. yes

以下のように–count=をつければ数の指定も可能です。

shopify populate products --count=2

これで管理画面にサンプルデータが追加されました。

※ただしどれも最低限すぎるデータしか入らないため、あまり使えないかも・・・

テーマのエラーチェックをする

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

$ shopify theme check

テーマのチェックは、特定のエラーまたはベストプラクティスに従わないコード内の場所をチェックします。

テーマチェックが実行するチェックの詳細はこちらに記載されています。

別の開発ストアに切り替える

現在ログインしているストアとは別のストアに切り替えたい場合は、ログアウト→ログインをしなくても、以下よりスイッチできます。

$ shopify switch

次にログインしているアカウントに紐づくストアが表示されるため、選択します。

$ shopify switch
? Select a development store (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. xxxxx.myshopify.com
  2. yyyyy.myshopify.com
  3. zzzzz.myshopify.com

現在ログインしているストアとユーザーを確認する

現在ログインしているパートナーアカウントと、開発ストアを確認するためには、以下のコマンドを実行します。

$ shopify whoami

すると以下のように表示されます。

$ shopify whoami
Logged into store xxxxx.myshopify.com in partner organization Taro Yamada

Shopify CLIのバージョンを確認する

バージョンを確認する場合は以下のコマンドを実行します。

$ shopify version

コマンド一覧を参照する

他にもあるため、helpコマンドで調べてみてください。

$ shopify help

Shopify CLIをアップデートする方法

Shopify CLIにアップデートがある場合は、以下のように表示されるため、

$ shopify login --store xxxxx.myshopify.com
⭑ A new version of Shopify CLI is available! You have version 2.0.1 and the latest version is 2.0.2.

  To upgrade, follow the instructions for the package manager you’re using:
  https://shopify.dev/tools/cli/troubleshooting#upgrade-shopify-cli

上記のURLの通りに実行します。

Homebrew(MacOS)の場合は以下です。

$ brew update
$ brew upgrade shopify-cli

 

以上です！

[Shopify] Dawnテーマの概要と追加できるセクション一覧 早速ShopifyのDawnテーマについて解説していきます。 Shopify Dawnテーマの概要 「Dawn」は、...
[Shopify] 既存テーマをオンラインストア2.0に移行する方法 早速Shopifyの既存テーマをオンラインストア2.0に移行する方法についてまとめます。 Liquidコードを編集する...

Shopifyの無料体験をはじめる

ABOUT ME
toru
フリーランスWebディレクター・UI/UXデザイナー。大手Web制作会社10年・フリーランス6年の経験をもとに、Webサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信しています。
関連記事