【Shopify】Theme Kitによるテーマカスタマイズの環境構築

Shopifyテーマカスタマイズのメモです。

# 開発までのフロー

## 1. Shopify Theme Kitをインストールする （初回のみ）

### Mac版

`homebrew`にてインストール（`homebrew`が入ってない場合は入れる）

```plaintext:ターミナル
brew tap shopify/shopify
brew install themekit
```    

### Windows版

以下を参考に...
[【Shopify】Theme kit設定をしてローカル開発環境を整えよう！](https://note.mu/egushin/n/nb3b38708c4ce)

## 2. プライベートアプリを作成し、APIキーを生成する

```plaintext:手順
1. 管理画面の左メニューから [アプリ管理] をクリック
2. アプリ管理画面でページ下部にある [プライベートアプリを管理] からアプリを作成
3. [アプリの詳細] で、任意のプライベートアプリ名と緊急連絡用開発者メールを記入
4. [Admin API] の [Theme templates and theme assets] を [Read and Write] に変更して保存
```

## 3. ストアとローカル環境のTheme Kitを接続させる

**1. テーマIDを取得**

```plaintext:ターミナル
theme get --list -p=[password] -s=[store.myshopify.com]
（例） theme get --list -p=abcdefgh -s=xxxxxx.myshopify.com
```

**2. ローカル環境とストアを接続。`config.yml`が作成される（作業ディレクトリ上で行う）**

```plaintext:ターミナル
theme get -p=[password] -s=[store.myshopify.com] -t=[theme-id]
（例） theme get -p=abcdefgh -s=xxxxxx.myshopify.com -t=123456789
```

## ★その他やっておくべきこと

### クライアントのストアへのアクセスをリクエスト

必要があれば、パートナーアカウントでクライアントのストアにアクセスできるように申請します。

**1. [パートナーアカウント](https://www.shopify.jp/partners) を作成**
※すでに持っている場合はOK

**2. クライアントのストアへのアクセスをリクエスト**

```plaintext:手順
1. パートナー管理画面の左メニューから [ストア管理] をクリック
2. [ストアを追加する] をクリック
3. [ストアタイプ] で [ストア管理] を選択
4. [ストアのアドレス] に本番ストアのURLを入力
5. [権限] でアクセスしたい機能を選択
6. [保存] をクリック
```

### `config.yml` の値を変数化

ストア情報を安全に扱うために変数化します。

**1. 環境変数設定ファイル (`variables`) を下記に作成**

```
${HOME}/Library/Application Support/Shopify/Themekit/variables
```

**2. 下記のように環境変数を定義**

```plaintext:variables
DEV_PASSWD=abcdefghabcdefghabcdefgh
DEV_THEMEID="123456789"
DEV_SHOP=xxxxxx.myshopify.com
```

**3. `config.yml` を下記のように書き換える**

```yml:config.yml
development:
  password: ${DEV_PASS}
  theme_id: ${DEV_THEMEID}
  store: ${DEV_SHOP}
```

### 開発用のストアを作成

パートナーアカウントでは複数のテスト用ストアを無料で作成することができます。

**1. [パートナーアカウント](https://www.shopify.jp/partners) を作成**
※すでに持っている場合はOK

**2. 開発用のストアを作成**

```plaintext:手順
1. パートナー管理画面から [ストア管理] をクリック
2. [ストアを追加する] をクリック
3. [ストアタイプ] で [ストア構築] を選択
4. [ログイン情報] で、開発用のストア情報を設定
5. [ストアのアドレス]で住所を設定
6. [ストアの目的] でいずれかを選択 （この場合 [アプリまたはテーマをテストする] になるかと）
```

**3. 開発用のストアにパスワードを設定**

```plaintext:手順
1. 管理画面から、 [オンラインストア] > [各種設定] に移動
2. パスワード保護エリアに移動
3. [パスワードページを有効にする] にチェックを入れる
4. パスワードを設定
5. [ストア訪問者へのメッセージ] にパスワードページに表示するメッセージを入力
6. [保存] をクリック
```
   
**4. `config.yml` を下記のように書き換える**

```yml:config.yml
# 本番環境
production:
  password: ${PRO_PASS}
  theme_id: ${PRO_THEMEID}
  store: ${PRO_SHOP}
      
# テスト環境 （必要あれば）
staging:
  password: ${STG_PASS}
  theme_id: ${STG_THEMEID}
  store: ${STG_SHOP}
      
# 開発環境
development:
  password: ${DEV_PASS}
  theme_id: ${DEV_THEMEID}
  store: ${DEV_SHOP}
```

# 開発中のフロー

**1. 本番環境から最新データをダウンロード**

```plaintext:ターミナル
theme download --env=production
```

**2. watch（開発環境に自動アップロード）**

```plaintext:ターミナル
theme watch (= theme watch --env=development)
```

**3. テスト環境にアップロード**

```plaintext:ターミナル
theme deploy --env=staging
```

**4. 本番環境にアップロード**

```plaintext:ターミナル
theme deploy --env=production
```

# Theme Kit コマンド集
**バージョン確認**

```plaintext:ターミナル
theme version
```

**ストアからthemeのファイルをローカル環境にダウンロード**

```plaintext:ターミナル
theme download
theme download templates/404.liquid templates/article.liquid
```

**ファイルをローカルからストアにアップロード**

```plaintext:ターミナル
theme deploy
```

**ストアのプレビューを開く**

```plaintext:ターミナル
theme open
```

**テーマのリアルタイム反映**

```plaintext:ターミナル
theme watch
```


# 参考サイト

## Shopify

- [shopifyヘルプセンター](https://help.shopify.com/ja)
- [開発用ストアの作り方](https://note.mu/egushin/n/n11b01733a94d)
- [クライアントのストアへのアクセスをリクエストする](https://help.shopify.com/ja/partners/dashboard/request-access)
- [ストアへのパートナーのアクセス権を与える](https://help.shopify.com/ja/manual/your-account/staff-accounts/collaborator-accounts)

## Theme Kit

- [公式ドキュメント](https://shopify.github.io/themekit/)
- [【Shopify】Theme kit設定をしてローカル開発環境を整えよう！](https://note.mu/egushin/n/nb3b38708c4ce)
- [Shopifyテーマカスタマイズの始め方。ローカル構築〜複数環境への反映まで【2019秋版】](https://www.non-standardworld.co.jp/22987/)