目次
前提
この記事では、下記を前提として説明していきます。
- Homebrew がインストールされている
- Shopify アカウント作成がされている
環境構築
では、さっそく開発環境の構築をしていきます。
流れは、
- Theme Kitをインストール
- 認証APIの作成
- テーマを複製
- ローカルにテーマをDLし、開発環境を整える
- 本番環境へのデプロイ
になります。
1. Theme kit のインストール
$ brew tap shopify/shopify
$ brew install themekit
2. 認証APIの作成
-
ストアにログインし、アプリ管理 > プライベートアプリを管理する をクリックし、プライベートアプリを有効にする
-
すべてにチェックを入れ、有効にする
-
プライベートアプリを作成
プライベートアプリを有効にしたら、プライベートアプリを作成するボタンが出てくるので、クリックして作成する
-
各種詳細を設定する
- アプリの詳細
自分の場合、プライベートアプリ名は環境名にしています。
- Admin API
APIの権限設定を行います。
各自必要な権限を割り当ててください。
ただし、テーマ（テーマテンプレートとアセットを表示または管理する） は必ず「読み取りおよび書き込み」権限を割り当てて下さい。
各種詳細設定が終わったら、保存する をクリックしてアプリを作成してください。
作成すると、APIキーとパスワードなどが作成されます。
パスワードは後で使うので、どこかにメモとして残しておくか、コピーしておいてください！！
3. テーマを複製
次に、テーマを複製します。
Shopifyでは、同じテーマで本番環境、開発環境のような切り替えができないため、同じテーマを複製して１つは本番、もう１つは開発環境として使います。
まず、オンラインストア > テーマに移動します。
使いたいテーマのアクションをクリックし、プルダウンから複製するを選択します。
すると、テーマライブラリーにコピーが作成されます。
次に名前の変更を行います。
現在のテーマ（いわゆる本番環境）、複製したコピーのテーマの名前をわかりやすい名前に変更します。
今回は、「Production」、「Development」と命名します。
名前の変更は アクション > 名前の変更 から行えます。
4. ローカルにテーマをDLし、開発環境を整える
4-1. 本番・開発環境の configファイル を設定する
config.ymlを作成します。
$ vim config.yml
中身は、以下のように設定してください
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をそれぞれ設定してください。
4-2. 開発環境テーマファイルをダウンロードする
先程、config.yml で書いた設定を元に theme kit がダウンロードしてくれます。
エラーが出る人は config.ymlのdevelopment設定が間違っている可能性があるので、再度確認してください。
$ theme get --env=development
5. 本番環境へのデプロイ
本番環境テーマへデプロイを行います。
現在のライブテーマに変更を加えるため、オプションでallow-liveを追加します。
$ theme deploy --env=production --allow-live
エラーが出る人は config.ymlのproduction設定が間違っている可能性があるので、再度確認してください。
開発の流れ
これは自己流です。
1. 開発
テーマファイルを編集しているときは、変更を確認したいのでtheme watchコマンドで変更内容を開発環境に反映させています。
$ theme watch --env=development
2. プレビューを表示する
$ theme open --env=development
3. 作業が終わったら、gitへプッシュ
ソースコードは、Github上で管理しています。
4. 本番環境へデプロイ
theme deploy --env=production --allow-live
終わり
ここまで見ていただき、ありがとうございました。
なにか、意見等ありましたらコメントしていただけると幸いです。