ShopifyのTheme kitでローカル開発環境を設定する方法【初心者でも大丈夫】
YOSUKE DESIGN
ShopifyのTheme kitでローカル開発環境を設定する方法を勉強したので、まとめました。
そして学習したことのアウトプットして整理しました。少しでもお役に立てればと。
この記事のテーマ
この記事の内容
- ShopifyのTheme kitでローカル開発環境を設定する手順を解説
ShopifyのTheme kitでローカル開発環境を設定するメリット
ShopifyのTheme kitでローカル開発環境を設定するメリットは、Shopifyのカスタマイズ画面の Online code editor を使うのではなく、自分の好きなエディタを使って、自分のPC（開発環境）でコードを書く設定をすることです。
少しだけの変更だけだと、わざわざこの開発環境にする必要はないですが、
いろいろとShopifyのテーマをいじっていくのなら、ローカル環境を設定した方が絶対にいいと思います。
ShopifyのTheme kitでローカル開発環境を設定は２段階
- homebrewをインストール
- ShopifyのTheme Kitをインストール
homebrewをインストール
まず、ShopifyのTheme Kitのページに行きます。
Getting started （https://shopify.github.io/themekit/）
そこから、homebrewというものをインストールします。
（ShopifyのTheme Kitの前に事前にインストールするものになります。）
僕は、Macユーザーなので、
コマンド（ターミナル）を開いて
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
と入力してインストールしました。
ShopifyのTheme Kitをインストール
次にコマンド（ターミナル）から、Theme Kitをインストールします。
ShopifyのTheme Kitのインストールする手順は２つです
＜１つ目の手順＞
brew tap shopify/shopify
をコマンド（ターミナル）に入力。
＜２つ目の段階＞
brew install themekit
をコマンド（ターミナル）に入力。
ストアとローカル開発環境を結びつけ
次にストアとローカル開発環境を結びつけることをしていきます。
https://shopify.github.io/themekit/commands/
結びつけるのに必要なものは３つです。
- ①API
- ②ストアネーム
- ③ID
①API
自分のストア管理画面からAPIを発行します。
（このAPIを使うことで、ローカルのPCとShopifyのサーバーが繋がります。）
発行方法
管理画面のアプリ管理を選択 → プライベートアプリを管理する → 新しいプライベートアプリを作成する
→プライベートアプリ名 →緊急連絡用開発者メール → API設定 → 保存
これで APIキーのパスワードが発行されます。
そして、config.ymlをいうファイルを作成して、その中に
- APIキーのパスワード
- ショップアカウントの後に出るID
- 自分のショップアカウント
を下記のように入力します。
development:
password: ＊＊＊＊＊＊＊＊＊＊＊＊ (your-api-password)
theme_id: "123456789（your-theme-id）"
store: （your-store）.myshopify.com
これで紐付け環境
コマンド（ターミナル）に theme download と入力して実行すると
全てのテーマ情報をダウンロードできます。
これで開発環境が完了！！
簡単なので、ぜひトライしましょう！！
常にAPIを通じてローカルで変更した内容をShopifyの方に反映されるには
コマンド（ターミナル）に theme watch と入力して実行すればOKです！！
