【Shopify】 開発環境構築

# 目次

- [前提](#前提)
- [環境構築](#環境構築)
    - [1. Theme kit のインストール](#1-theme-kit-のインストール)
    - [2. 認証APIの作成](#2-認証apiの作成)
  - [3. テーマを複製](#3-テーマを複製)
  - [4. ローカルにテーマをDLし、開発環境を整える](#4-ローカルにテーマをdlし開発環境を整える)
    - [4-1. 本番・開発環境の configファイル を設定する](#4-1-本番開発環境の-configファイル-を設定する)
    - [4-2. 開発環境テーマファイルをダウンロードする](#4-2-開発環境テーマファイルをダウンロードする)
  - [5. 本番環境へのデプロイ](#5-本番環境へのデプロイ)
- [開発の流れ](#開発の流れ)
  - [1. 開発](#1-開発)
  - [2. プレビューを表示する](#2-プレビューを表示する)
  - [3. 作業が終わったら、gitへプッシュ](#3-作業が終わったらgitへプッシュ)
  - [4. 本番環境へデプロイ](#4-本番環境へデプロイ)
- [終わり](#終わり)


# 前提
この記事では、下記を前提として説明していきます。
1. Homebrew がインストールされている
2. Shopify アカウント作成がされている

# 環境構築
では、さっそく開発環境の構築をしていきます。

流れは、
1. Theme Kitをインストール
2. 認証APIの作成
3. テーマを複製
4. ローカルにテーマをDLし、開発環境を整える
5. 本番環境へのデプロイ

になります。

### 1. Theme kit のインストール
```sh
$ brew tap shopify/shopify
$ brew install themekit
```

### 2. 認証APIの作成
1. ストアにログインし、アプリ管理 > プライベートアプリを管理する をクリックし、プライベートアプリを有効にする
![Shopify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/3e521b57-a140-123d-5c92-c7eb42eb22ba.png)
![Example_com_Store___アプリ___プライベートアプリ___Shopify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/30725a5c-6f87-9189-a11a-31bf7d5b461d.png)

2. すべてにチェックを入れ、有効にする
![Example_com_Store___アプリ___プライベートアプリの開発を有効にする___Shopify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/0469aad6-aa81-7810-b966-6402aaff9d78.png)

3. プライベートアプリを作成
プライベートアプリを有効にしたら、プライベートアプリを作成するボタンが出てくるので、クリックして作成する
![Example_com_Store___アプリ___プライベートアプリ___Shopify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/f1ab63ed-91e1-dcfd-4e3a-d0ec68ad6337.png)

4. 各種詳細を設定する

- アプリの詳細

自分の場合、プライベートアプリ名は環境名にしています。
![スクリーンショット 2021-05-18 22.44.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/a107343c-472e-6448-fe52-63c909e21dd4.png)

- Admin API
APIの権限設定を行います。
各自必要な権限を割り当ててください。
ただし、テーマ（テーマテンプレートとアセットを表示または管理する） は必ず「読み取りおよび書き込み」権限を割り当てて下さい。
![スクリーンショット 2021-05-18 22.48.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/2415df0d-0ed5-2503-1c03-bd339348337c.png)

各種詳細設定が終わったら、保存する をクリックしてアプリを作成してください。

作成すると、APIキーとパスワードなどが作成されます。

**パスワードは後で使うので、どこかにメモとして残しておくか、コピーしておいてください！！**


## 3. テーマを複製

次に、テーマを複製します。
Shopifyでは、同じテーマで本番環境、開発環境のような切り替えができないため、同じテーマを複製して１つは本番、もう１つは開発環境として使います。

まず、オンラインストア > テーマに移動します。
使いたいテーマのアクションをクリックし、プルダウンから複製するを選択します。

![スクリーンショット 2021-05-18 23.03.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/d05a6f68-c60e-2c8d-a12f-59887553322f.png)

すると、テーマライブラリーにコピーが作成されます。
![Example_com_Store___テーマ___Shopify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/88d72a5e-d984-111a-7ecc-870570233888.png)

次に名前の変更を行います。
現在のテーマ（いわゆる本番環境）、複製したコピーのテーマの名前をわかりやすい名前に変更します。
今回は、「Production」、「Development」と命名します。
名前の変更は アクション > 名前の変更　から行えます。
![スクリーンショット 2021-05-18 23.32.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/c77e54ec-dc00-c931-127f-b4d115136f2e.png)

## 4. ローカルにテーマをDLし、開発環境を整える

### 4-1. 本番・開発環境の configファイル を設定する
`config.yml`を作成します。

```sh
$ vim config.yml
```

中身は、以下のように設定してください

```yaml
development:
  password: shppa_1234567890987654321
  theme_id: "123456789098"
  store: example-store.myshopify.com
production:
  password: shppa_1234567890987654321
  theme_id: "098765432123"
  store: example-store.myshopify.com
```

- password
パスワードには、先程作成したAPIのパスワードを入力します。
パスワードは、アプリ管理 > プライベートアプリ > 作成したAPI の Admin API内で確認できます。

- store
ストアには、`shoppifyURL`を入力します。
URL確認方法は、ホームのURLから admin を除いたものがあなたのshopifyURLになります。
例: `example-store.myshopify.com`

- themeid
テーマIDには themeに振り当てられているidを入力します。
`themeid` の確認方法は、オンラインストア > 現在のテーマ > アクションをクリックしプルダウンから「コードを編集する」をクリックし、URLの末尾の数字が`themeid` です。
開発環境テーマID、本番環境テーマIDをそれぞれ設定してください。
![スクリーンショット_2021_05_24_23_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512261/98429505-a20b-8c0a-1356-c9ebe110365b.png)

### 4-2. 開発環境テーマファイルをダウンロードする
先程、`config.yml` で書いた設定を元に `theme kit` がダウンロードしてくれます。
エラーが出る人は `config.yml`の`development`設定が間違っている可能性があるので、再度確認してください。
```sh
$ theme get --env=development
```

## 5. 本番環境へのデプロイ

本番環境テーマへデプロイを行います。
現在のライブテーマに変更を加えるため、オプションで`allow-live`を追加します。

```sh
$ theme deploy --env=production --allow-live
```
エラーが出る人は `config.yml`の`production`設定が間違っている可能性があるので、再度確認してください。


# 開発の流れ
これは自己流です。

## 1. 開発

テーマファイルを編集しているときは、変更を確認したいので`theme watch`コマンドで変更内容を開発環境に反映させています。

```sh
$ theme watch --env=development
```

## 2. プレビューを表示する
```sh
$ theme open --env=development
```

## 3. 作業が終わったら、gitへプッシュ
ソースコードは、Github上で管理しています。

## 4. 本番環境へデプロイ
```sh
theme deploy --env=production --allow-live
```

# 終わり
ここまで見ていただき、ありがとうございました。
なにか、意見等ありましたらコメントしていただけると幸いです。