導入でつまづいたのでメモしておきます。
Shopify CLIってなに
黒い画面でShopifyテーマをいじれるツールです。
Shopify CLI is a command-line interface tool that helps you build Shopify apps and themes.
（Shopify CLI は、Shopify アプリとテーマの構築に役立つコマンドライン インターフェイス ツールです。）
by Shopify CLI for themes
現在(2023/04/19)のShopify CLIは3系で、2系は2023/05/31までのサポートになります。
とくに理由がなければ最新バージョンを使用します。
ただ、古いテーマを使っている場合はThemekitというさらに以前のツールでしか操作できないときもあります。
参考:
Shopify CLI 2.x
Shopify Theme Kit
環境構築
1. WSLを有効にする
WLSが使えるか確認し、なければインストールします。
- コマンドプロンプトを管理者モードで開きます。
- 以下のコマンドを実行しバージョン情報が表示されればインストールされています。
次のステップへ進んでください。wsl --version - wslがインストールされていない場合は以下のコマンドでインストールします。
インストールできたらPCを再起動してください。wsl --install
参考:
WSL のインストール | Microsoft Learn
2. Ubuntuをインストールする
次に、Ubuntuをインストールします。
- Microsoft Storeを開きます。
- 「Ubuntu」で検索します。
- 「Ubuntu」をクリックします。
Ubuntuがいくつかありますが、今回使うのはただのUbuntuです。
Ubuntu - Microsoft Store アプリ - 「入手」をクリックします。
- インストールできたらUbuntuを起動します。
- ユーザー名とパスワードの設定を求められるので、おのおの設定してください。
- パッケージを最新化するため、以下のコマンドを実行します。
途中でDo you want to continue?など確認されたら、yと入力して続行します。sudo apt update sudo apt upgrade
3. Ubuntuでnvmを使ってNode.jsをインストールする
引き続きUbuntu上で作業します。
- curlコマンドを使うためインストールします。以下のコマンドを実行します。
sudo apt-get install curl - Node.jsのバージョン管理ツールnvmをインストールします。以下のコマンドを実行します。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash - Ubuntuを再起動します。ウィンドウを閉じてもう一度起動すればOKです。
- nvmがインストールされているか確認します。以下のコマンドを実行してバージョンが表示されればOKです。
nvm --version - Node.jsの安定版をインストールします。以下のコマンドを実行します。
nvm install --lts - Node.jsがインストールされたか確認します。以下のコマンドを実行しバージョンが表示されればOKです。
node -v
参考:
WSL 2 上で Node.js を設定する | Microsoft Learn
nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
Windows に WSL を使って Node 環境を構築する - Qiita
4. UbuntuでShopify CLIをインストールする
やっとShopifyにたどり着きました。引き続きUbuntu上で作業します。
- Shopify CLI実行に必要なツールをインストールします。以下のコマンドを実行します。
sudo apt install curl gcc g++ make sudo apt install ruby-full sudo apt install ruby-dev sudo apt install git sudo gem install bundler - Shopify CLIをインストールします。以下のコマンドを実行します。
npm install -g @shopify/cli @shopify/theme - shopifyコマンドが使えるか確認します。以下のコマンドを実行しバージョンが表示されればOKです。
shopify version
5. Shopifyストアに接続する
shopifyコマンドが使えるようになったので、実際にストアと接続してみます。
- 以下のコマンドを実行して、ストアのテーマ情報を取得してみます。ストア名は管理画面URLの末尾と同じです。
admin.shopify.com/store/ストア名shopify theme list --store ストア名 - 初回接続時はメッセージが出て、ログインを求められます。
なにかしらのキーを押すと、ブラウザでShopifyログイン画面が開きます。
To run this command, log in to Shopify Partners. 👉 Press any key to open the login page on your browser
ショップの権限を持ったアカウントでログインしてください。
✔ Logged in.と表示され、テーマのリストが表示されたらOKです。
これでshopify themeコマンドが使えるようになりました。