2020.7.7

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

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

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

 

■バックナンバー

はじめに

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

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

手順

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

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

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

Shopifyアカウントの作り方|江口 晋之介|note
前の記事(大規模ECから個人のネットショップまで活躍"Shopify"とは?)でShopifyの概要については説明しましたが、実際に触ってみるのが一番の近道です。 そこで、今回はShopifyのアカウント作成方法をご説明します。 Shopifyには、 ・ECショップ運営のためのオーナーアカウント ・EC制作者(...

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

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

Shopifyテーマカスタマイズの始め方。ローカル構築〜複数環境への反映まで【2019秋版】 | non-standard world株式会社
こんにちは、エンジニアの川島です。技術記事ではお久しぶりですね:) 私たちの会社では、現在、Shopifyを活用したECサイトのコンサルティング&開発案件を多く進めています。 「Shopify」って?
【Shopify】Theme kit設定をしてローカル開発環境を整えよう!|江口 晋之介|note
Shopifyのテーマを開発・編集する上でネックとなるのが、下の画像のように管理画面からのコード編集ではないでしょうか。 今回は、Shopifyテーマを編集するための開発環境の作り方についてご紹介します。 今回ご紹介する方法でShopifyテーマ開発環境を整えると、以下のことが実現できるので、...

 

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

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

 

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

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

【簡単】MacにHomebrewをインストールする方法と基本的な使い方
ターミナルでパッケージのインストールを行う際に、やり方がわからなかったり、謎のエラーが立ちはだかって苦戦するこ…

 

プチ情報

Homebrewをインストールする方法の解説記事でよく「Xcodeをインストールしてね」と説明されていますが、こちらの記事の手順でHomebrewのインストールを進めればXcodeを自身でインストールする必要はありません。

こちらの記事によると、どうやら自動でインストールしてくれるように仕様が変わったみたいです。

 

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

 

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

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

 

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

 

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

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

まとめ

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

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

(私もそうでした...)

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

 

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア