【Shopify】ローカルで開発する環境を構築する手順 - #01

ShopifyでECサイトを開発する際に、Shopifyの管理画面上でも開発はできるのですが、やはりローカルで開発したほうが効率がいいので、その手順をまとめました。

細かい手順は他の方が詳しく解説してくれているので、今回はローカルに開発環境を構築する大まかな流れを解説します。

 

■バックナンバー

• #01 - ローカルで開発する環境を構築する手順
• #02 - 無料テーマのディレクトリ構造の解説
• #03 - 仕様や用語、開発の流れの解説
• #04 - 独自言語「liquid」の基本的な書き方
• #05 - 動的な情報を出力できるオブジェクトとプロパティについて
• #06 - 商品一覧ページのカスタマイズ方法
• #07 - TOPページに商品一覧を新着順で出力する
• #08 - Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする
• #09 - 商品検索を理解する
• #番外編 - （随時更新）開発Tips
• #番外編 - （随時更新）便利なオブジェクト
• #オブジェクトの中身を確認する（PHPのprint_rやJavaScriptのconsole.logのようなイメージ）

はじめに

ローカルに開発環境を構築するには、以下のような手順になります。

1. Shopifyのアカウントを開設
2. 管理画面でAPIキーなど必要な情報の取得
3. ターミナルでShopifyの開発ファイルをダウンロード

手順

1. Shopifyのアカウントを開設

Shopifyの公式サイトでアカウントを開設します。

細かい手順はこちらの記事で解説されています。

https://note.com/egushin/n/n11b01733a94d

2. アカウント開設後の手順

アカウント開設後に行う「管理画面でAPIキーなど必要な情報の取得」と「ターミナルでShopifyの開発ファイルをダウンロード」は以下の記事で解説されているので、私の記事では特に細かい解説はしません。

https://www.non-standardworld.co.jp/22987

https://note.com/egushin/n/nb3b38708c4ce

 

上記で2つの解説記事を紹介しましたが、どちらを参考にしても同じ開発環境を構築できます。

なので、1つ目の記事で躓いてしまったら2つ目の記事を読んでみる...のようにして構築を進めるでも良いと思います。

 

参考記事の「Theme Kitをインストール」ですが、「Homebrew」というパッケージ管理システムを先にインストールしなければいけません。

まだインストールしていない方は以下の記事を参考にインストールして下さい。

https://fukatsu.tech/homebrew

 

 

ここまでの手順が終われば、ローカルでShopifyを開発できるようになります。

 

注意点としては、Shopifyはローカルで表示する環境がありません。

ここで指す「ローカルで表示する環境」とはMAMPやXAMPPなどで作るローカル環境のことです。

 

今回構築したローカルの開発環境でファイルを編集してwatchやbuild（作業ファイルをShopifyのサイトに反映させるコマンド）したら、それがShopifyのサイトにすぐ反映されます。

 

なので、初回の開発時はサイトを公開していなければ特に問題ないですが、リリース後に修正などの対応をする場合、運用方法を考えなければいけません。

（開発環境用のアカウントを別途作成して、そちらで表示確認をするなど）

まとめ

Shopifyの開発環境の構築は今回紹介した記事でとても詳しく説明をしてくれているので、比較的スムーズに構築できると思います。

しかし、その後Shopifyをカスタマイズしようとすると、仕様がまったく分からず躓いてしまう方も多いと思います。

（私もそうでした...）

なので、今後は「Shopify独自の仕様」や「開発者向けのShopifyのカスタマイズ方法」などの解説を紹介しようと思います。