「ローカル環境でShopify（ショッピファイ）をカスタマイズできたらな……」そう思ったことはないでしょうか？Shopify CLIを使うことで、ローカル環境でテーマをカスタマイズすることができます。Online Store2.0で、Theme KitからShopify CLIの使用が推奨されるようになりました。
今回は、Shopify CLIを使ってローカル環境でテーマをカスタマイズする方法について解説します。従来のTheme Kitとの違いやShopify CLIのインストールからテーマアップロードなども併せて紹介します。
Contents
Shopify CLIとその使い方
Shopify CLIは、Shopify（ショッピファイ）のアプリやテーマの構築を支援するコマンドラインインターフェースツールで、開発者が使用するコマンドラインです。Shopify CLIをダウンロードすれば、アプリやテーマを開発できるだけでなく、ローカルで編集したコードをご自身のShopifyストアに反映させることができます。
本番環境でテーマをコピーして編集してから公開するといった流れから、Shopify CLIを使うことで、ローカル環境でテーマを編集できるようになります。いままでTheme Kitを使っていたかもしれませんが、より便利な開発環境で構築できるということです。
Shopifyでは、2021年8月にアップデートがありました。
参照：Shopify Online Store 2.0：開発者にとっての意義
このアップデートで既存のShopify CLIツールにも大きな変更がありました。今までアプリ開発者は、素早くNode.jsとRuby on Railsアプリおよびアプリ拡張機能を生成するためにCLIを活用していましたが、ツールの範囲がさらに広がり、テーマが含まれるようになりました。
Shopify CLIとTheme Kitの違い
Shopify CLIとTheme Kitの違いは、使用しているテーマがOnline Store 2.0以降かどうかです。Shopify Online Store 2.0以降のテーマをローカル環境で扱いたい方はShopify CLIになりますが、Shopify Online Store 2.0以前のテーマの場合は、Theme Kit を利用する必要があります。
参照：Tools for building Shopify themes
テーマを手動で移行することで、以前のテーマでもShopify Online Store 2.0に対応させることは可能です。
まずは、LiquidテンプレートをJSON テンプレートに変換します。そして、必要なLiquid コードまたは、HTMLを新しいJSONテンプレートに含めることができるセクションに移動することで、Online Store 2.0の機能をテーマに追加することができます。
テーマの特定の部分で Online Store 2.0の機能を利用するために、個々のテンプレートを移行することもできますし、すべてのテンプレートを移行することでテーマ全体を移行することもできます。開発者やパートナーに依頼せず、ご自身でテーマを手動で移行することも可能ですが、Liquid、HTML、CSS、JavaScriptの理解が必要です。
Liquid、HTML、CSS、JavaScriptなどを使ってテーマの編集や開発、アプリ開発などをお考えの場合、Shopify Guideにご相談ください。Shopify Guideは、メディアの運営によってShopifyに関する幅広く情報を得ていますので、Shopifyでの運営ノウハウを共有したりコンサルティングしたりすることができます。
Shopifyで困った時はShopifyの運営知識を持ったパートナーを見つけることが近道。Shopifyの運営に関する疑問をお持ちの方やお困りの方は、こちらの問い合わせフォームからお気軽にお問い合わせください。
Shopify CLIをインストールする方法
続いては、Shopify CLIをインストールする方法を紹介します。
- Ruby 2.7以上がインストールされていること
- ストア管理者、もしくはアカウント権限がコラボレーター、スタッフであること
上記の前提条件を確認し、Mac、Windowsでそれぞれの方法でインストールを行います。権限が付与されていないとストアとの接続ができませんのでご注意ください。
まずは、ターミナルを開いて下記のコマンドを入力します（インストールにはGemsを、Macの場合はHomebrewも使用可能）。
Windowsの場合
新規ターミナルウィンドウで、ホームディレクトリに移動してから次のコマンドを実行してください。
“gem install shopify-cli”
次は、Shopify CLIが正しくインストールされているか確認します。次のコマンドを実行してください。
“shopify version”
このコマンドを実行するとバージョン番号が表示されます。
“2.7.1”
これでインストール完了です。
Macの場合
上記のようにGemでインストール、もしくはHomebrewでインストールします。
Gemでインストール
新規ターミナルウィンドウで、ホームディレクトリに移動してから次のコマンドを実行してください。
“gem install shopify-cli”
次は、Shopify CLIがインストールされているか確認します。次のコマンドを実行してください。
“shopify version”
このコマンドを実行するとバージョン番号が表示されます。
これでインストール完了です。
Homebrewでインストール
Gem同様、ターミナルを開いて下記のコマンドを入力、実行してください。
“brew tap shopify/shopify”
“brew install shopify-cli”
Shopify CLIがインストールされていることを確認するために次のコマンドを実行します。
“shopify version”
このコマンドを実行するとバージョン番号が表示されます。
Shopify CLIで環境構築する方法
上記の方法でShopify CLIをインストールすることができれば、実際に環境構築していきましょう。
STEP①：ShopifyストアとShopify CLIを接続（認証）する
Shopify CLIを接続（認証）するには、Shopifyストアのドメイン（Shopify developmentドメインでも可）が必要です。
上記の前提条件でも記載しておりますが、接続するための権限はオーナー、ストアのスタッフ、コラボレーターに限ります。
以上の確認が完了したら、下記コマンドを実行してください。
“shopify login –store [ストアurl（ドメイン）]”
例：shopify login –store [abcdefg.myshopify.com]”
コマンドを実行し警告が出る場合、allow accessをクリックしてください。メールアドレスとパスワード入力後、下記の文字が表示されたら完了です。
Authenticated successfully. You may now close this page
コマンドは以下のように表示されます。
“Logged into store [ストアurl（ドメイン）] in partner organization [アカウント名]”
以上でストアとShopify CLIの接続（認証）が完了します。
STEP②：開発したいテーマを作成する
接続完了後は、開発するテーマを作成していきます。
“shopify theme init [テーマ名] [-u Gitリポジトリのurl]”
shopify theme initのみを入力するとtheme nameを求められます。そこでお好きなテーマタイトルを入力すると「Dawn」のコピーが作成されます。
Shopify Online 2.0は、デフォルトでテーマが「Dawn」になっています。
STEP③：既存のテーマをダウンロードする
既存のテーマをダウンロードする場合は、下記コマンドを実行してください。
“shopify theme pull [-i テーマID]”
ディレクトリに注意してください。共同開発する場合は、こちらのコマンドを使用せずに、Githubのソースコードをしてクローンして開発を進めるほうが安全です。
pullすると現在のディレクトリにテーマフォルダが展開されます。移動するときは下記コマンドを実行してください。
“cd [移動先]”
また、テーマIDは「テーマ」→「カスタマイズ」のURLの数字部分になります。
「https://〇〇.myshopify.com/admin/themes/12桁の数字/editor」
STEP④：ShopifyストアとローカルのShopify CLIを接続する
下記のコマンドを実行するとローカル環境でテーマを確認することができます。
“shopify theme serve”
URLが3つ表示されます。
Please open this URL in your browser:
http://127.0.0.1:9292
Customize this theme in the Online Store Editor:
https://〇〇.myshopify.com/admin/themes/12桁の数字/editor
Share this theme preview:
https://〇〇.myshopify.com/?preview_theme_id=12桁の数字
ローカル環境にブラウザが立ち上がります。どのurlをクリックしても開発しているテーマをプレビューすることができます。ストアに反映されているわけではありませんが、コードを編集すると同時にプレビューされるので非常に確認がラクになります。
STEP⑤：ローカルをShopifyストアにアップする
ローカル環境で編集したものをストアにアップロードするために下記コマンドを実行してください。
“shopify theme push”
非公開でアップロードや既存テーマを更新するなど、さまざまなpushがあります。下記の公式ドキュメントでご確認ください。
エラーがでた場合はログアウトし再度ログインしてください。
“shopify logout”
“shopify login –store [ストアurl]”
もしくは、下記urlを直で入力しadminでログインしてください。
“https://[ストアurl].myshopify.com/admin”
Shopify CLIのバージョンの確認と更新方法
Shopify CLIのバージョンは、下記コマンドを実行することで確認できます。
“shopify version”
インストールでも紹介しましたが、上記コマンドを入力すると現在のバージョン番号が返ってきます。古い場合は、新しいバージョンが案内されます。コマンドラインにあるURLをクリックすれば更新方法が記載されています。
Homebrew、gemの更新コマンドを紹介します。
Homebrew
“brew update”
“brew upgrade shopify-cli”
gem
“gem update shopify-cli”
まとめ
Shopify CLIについて解説しました。Theme Kitに比べて、簡単にローカル環境でカスタマイズすることができるようになりました。
Shopify Guideは、メディアの運営によってShopifyに関する幅広く情報を得ていますので、Shopifyでの運営ノウハウを共有したりコンサルティングしたりすることができます。
Shopifyで困った時はShopifyの運営知識を持ったパートナーを見つけることが近道。Shopifyの運営に関する疑問をお持ちの方やお困りの方は、こちらの問い合わせフォームからお気軽にお問い合わせください。
