こんにちは、Shopifyと使ったオンラインショップ構築を個人でしておりますたかぼー(@taka_forward)です。
環境構築って聞いただけで難しいイメージがあるのですが、、。
この記事を読みながらやれば、1時間足らずでShopifyでの開発環境の構築ができます！
この記事では、ShopifyのTheme kitを使用した開発環境構築のやり方について、誰でもゼロからできる方法をまとめました。
<この記事を読むことのメリット>
① Shopifyの開発環境を整えることができる。
② 「環境構築＝難しそう、時間がかかりそう」というイメージが無くなる。
<この記事を読むことの対象の人>
① これからShopifyのテーマ開発をしていく人
② WordPress等のサイト制作をすでにしていて、ECサイト制作に興味を持っている人
③ ECサイトになんとなく興味がある人
この記事はMacOSでの環境構築について記載しております。Windowsを使用されている方はこちらの記事を参考にして環境構築を行ってください。
※環境構築に際し、Shopifyで作られているサイトが必要のため、Shopifyパートナーへの登録が必要になります。
目次
なぜ環境構築が必要なのか
Shopifyで作られたサイトを変更するためには、2種類の変更方法があります。
テーマのカスタマイズから変更をする
※「ペライチやwixでのホームページ作成、WordPressでのブロックエディターでの編集」というイメージ。誰でも簡単にホームページ作成・編集ができます。
コードを書き換えることで編集をする
※「WordPressのテーマエディターからの編集」というイメージ。編集をするには、Shopifyのテーマ言語であるLiquidやhtml, CSS, Javascriptの知識が必要です。
ここからコードを書き換えることでテーマ編集もすることもできますが、
① 普段使用しているatomやVisual Studio Codeなどのエディターで変更をしたい（emmetなど使いたい）
② この場合、コードの変更管理ができないので、複数人で開発を行う場合、「変更管理をGitを使ってやりたい」
と行った場合にtheme kitを使った環境構築をする必要が出てきます。
※Shopifyの開発環境は、WordPressと違って「ローカル環境」ではないです。
理由は、Shopifyはテーマ開発をするにあたって、データ連携やテーマ言語（Liquid）の出力のために、Shopifyサーバーとの接続が必要だからです。現状Theme kitで開発を行うのがベスト、とされております。（Theme kitで開発をすれば、変更した部分だけ本番環境にアップロードできるのも魅力の一つです。）
※WordPressのローカル開発環境に使用されるMAMPや、Local by FlywheelはShopify開発では使用できません。
Homebrewのインストール
まずはHomebrew（簡単にソフトウェアをインストールできるツール）をインストールします。
やり方は、
①ターミナルを起動（ショートカット：Command + スペースでターミナルと検索）
②下記コードを入力して、Homebrewをインストールします。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"※入力後に「Press RETURN to continue or any other key to abort.（RETURNキーを押した場合インストール実行、その他のキーを押した場合は終了）」と確認される場合は、RETURNキーを押してインストールしてください。
Theme kitのインストール
Homebrewをインストールできたら、Theme kitのインストールです。
ターミナルを起動（ショートカット：Command + スペースでターミナルと検索すると簡単）し、下記のコードを入力します。
brew tap shopify/shopify brew install themekit
これでインストールが完了します。
サイト上のテーマを作成・連動していきます！
Theme kitをインストールしたあとは、Shopifyで作っているサイトと連携を行います。
事前準備：認証API, パスワードの取得
① Shopifyの管理画面にアクセス
② メニューの「アプリ管理」から「新しいプライベートアプリを作成」
③ 「アプリの詳細」を入力＋「Admin API」内のTheme templates and theme assetsを「読み取りおよび書き込み」に変更
④ 「保存」→「プライベートアプリを作成」するとAPIとパスワードが発行されます。
テーマとの連動
新規でテーマを作成をする場合
ターミナルで、テーマファイルを作成したいディレクトリまで移動し（お好きなところでOK）、下記を入力します。
theme new --password=[your-password（先ほど発行されたパスワード）] --store=[your-store.myshopify.com（ストアのURL）] --name=[theme name(テーマ名)]
※注意：[]も含めて変更してください。これを入力すると、自動で基本テーマを作ります。
これでテーマファイルを新規に作成することができました。
※この後、「theme watch」と入力すると、ローカル環境の変更がリアルタイムに反映されていきます。
2020年10月のTheme kitの更新により、公開しているテーマに対して変更を加える場合は、末尾に「–allow -live」と入力しないといけなくなりました。お気をつけください。
既存テーマの変更をしていく場合
既存テーマの変更には、テーマIDの取得が必要になります。
確認方法
★（簡単、おすすめ） Shopifyの管理画面にアクセスし、テーマ→カスタマイズ→ブラウザのURLに記載の数字をメモする
これで表示されたURLの末尾の数字がテーマID
★ ターミナルを開き、作成したいファイルに移動し、下記のコマンドを入力します。
theme get --list -p=[your-password(先ほど発行されたパスワード)] -s=[you-store.myshopify.com(ストアのURL)]
※注意：[]も含めて変更してください。入力すると下記のように、サイト内に入っている全てのテーマ情報がわかり、ID番号の後に[live]と入っているものが現在使用しているテーマになります。
Available theme versions:
[79686959169] Debut
[79687319617][live] BrooklynテーマIDを取得したら、以下のコマンドを入力し、テーマファイルのダウンロードを行います。
theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]※ドメインを取得していないとできませんのでご注意ください。
これでShopifyローカル環境の構築が終了しました。お疲れさまでした。
初めてやる人でも、1時間もあればできますのでどうぞチャレンジしてみてください。
既存テーマの連動ですが、config.ymlを使用したダウンロード方法もありますのでご紹介します。
①ShopのURL, ID, パスワードを用意する（事前準備とテーマとの連動を参考にしてください）
②テーマをダウンロードするファイルを作成する
③そのファイルをエディターで開き、 「config.yml」ファイルを新規で作る
development:
password: ここにパスワード
theme_id: "ここにid"
store: ここにストアURL(you-store.myshopify.comの部分のみ)例えば、僕の場合は
development:
password: shppa_123456789
theme_id: "123456789"
store: takaforward.myshopify.comとなります。
④ターミナルでそのファイルに移動し、「theme download」と入力する。（完了）
※ダウンロードが終了したらターミナル上で「theme watch」と入力することで、ローカルの変更がリアルタイムに反映することができます。（停止する場合はターミナル上でcontrol+cをおしてください（commandではないので注意））
2020年10月のTheme kitの更新により、公開しているテーマに対して変更を加える場合は、末尾に「–allow -live」と入力しないといけなくなりました。お気をつけください。
こちらのサイトでも詳しく紹介されていますのでご覧ください！
Shopify公式：ローカルでShopifyテーマの開発環境をセットアップする3ステップ
non-standard world株式会社：Shopifyテーマカスタマイズの始め方。ローカル構築〜複数環境への反映まで【2019秋版】
Windows使用者はこちらのサイトを参考にしてください。：【Shopify】Theme kit設定をしてローカル開発環境を整えよう！
