yasuoka こんにちは鈴木祐登です。
今回はshopifyテーマの開発環境をローカルで構築する方法に関して解説していこうと思います。
shopifyはローカルで開発環境を作らなくても、管理画面上でコードがいじれるようになってますが、本格的に開発を進めていくならローカルのテキストエディタ上で開発を進めれた方が効率が良いかなと思います。
Shopify Theme Kitをインストールする
ここではローカルでshopifyテーマコードをいじるために必要な「Theme Kit」というツールをインストールしていきます。
みなさんが使ってるパソコンのOSによってインストール方法が違うので自分が使ってるパソコンのOSにあったインストール方法を行ってください。
Macの場合
ターミナルに下記のコマンドを打ち込んでください。
brew tap shopify/shopify
brew install themekitいつも通りbrewコマンドでインストールできます。
ちなみにbrew tapコマンドは初めて使った人もいるかもしれませんが、公式以外のリポジトリからbrewでインストールする際に必要になるコマンドです。
Windowsの場合
下記のコマンドでインストールできるみたいです。
choco install themekitLinuxの場合
端末でcurlコマンドを使ってインストールすることができます。
curl -s https://shopify.github.io/themekit/scripts/install.py | sudo pythonストアとTheme Kitを接続させるためのAPIキーを生成する
こちらからshopifyの管理画面に入ります。
管理画面に入ったら左のメニューからアプリ管理をクリックします。
すると上記の画面になるので下の方にスクロールして、「プライベートアプリ管理する」をクリックします
すると下記のような画面になるので「新しいプライベートアプリを作成する」をクリックします。
すると下記のような画面になるので「プライベートアプリ名」にアプリの名前、「緊急連絡用開発者メール」に連絡用のメールアドレスを入力します。
その後、「非アクティブなAdmin API権限を表示する」をクリックします。
すると多くの入力項目が出てくるので、その中から「テーマ」という項目を探し、「読み取り及び書き込み」に変更します。
次に一番下までスクロールして保存を押します。
保存を押すと「プライベートアプリを作成する」が出てくるのでクリックします。
保存して一番上までスクロールするとAPIキーとパスワードが確認できます。
これでAPIの生成の方はできました。
ストアとローカル環境のTheme Kitを接続させる
次は取得したAPIを使ってローカル環境から実際に接続します。
まずは接続したshopifyテーマのIDを確認します。
theme get --list -p=[your-password] -s=[you-store.myshopify.com]your-password: こちらはAPIキーを発行した際に乗っていたパスワードです。 you-store.myshopify.com: はデフォルトのショップURLです。
実行すると下記のようになります。赤で囲んでるのがテーマIDです。
テーマIDがわかったら、下記のコマンドでテーマファイルをローカルにダウンロードします。
theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]
your-password: こちらはAPIキーを発行した際に乗っていたパスワードです。 you-store.myshopify.com: はデフォルトのショップURLです。 your-theme-id: こちらが確認したテーマIDです。
これでローカルにテーマファイルがダウンロードされます。
theme kitを使った開発の進め方
これでローカルでの環境構築は終わりました。
ここから基本的にはローカルにダウンロードしたファイルを編集して開発を進めていくことになります。
theme kitには色々なコマンドが用意されていますが、基本的に下記の3つのコマンドだけ知っておけば開発ができます。
theme watchコマンドでローカルファイルの変更を確認する
theme watchコマンドを使うことでローカルファイルの変更をリモートのshopify画面で確認することができます。
試しにローカルのファイルに変更を加え、下記のコマンドを試してみてください。
theme watch
ブラウザからshopifyのフロント画面を確認すると変更が確認できると思います。
この時点ではリモートにはローカルの変更が反映されておらず、一時的に確認できているだけであることに注意しましょう。
theme deployコマンドでローカルファイルの変更をアップロード
theme watchコマンドでローカルの変更を確認したら、次はtheme deployコマンドでファイルの変更をリモートに反映させましょう。
theme deploy
theme downloadコマンドでリモートの変更をローカルに反映
ローカルでファイルを変更するだけじゃなく、リモートのshopifyの管理画面からカスタマイズしたりしていじることがあると思います。
shopifyのテーマファイルには様々なテーマの設定が格納されています。
管理画面から変更を加えたあとはリモートの変更を忘れずにローカルにも反映させておきましょう。
theme download