【Shopify】環境開発を構築する-改定版-

Shopify
Shopify

以前、同様の記事を書いたが、めちゃくちゃ不親切だったので、改訂版として更新しようと思う。

ShopifyによるECサイトの開発で、一番初めにぶつかる壁が、この間髪環境の構築だろう。

Shopifyの開発環境とはどのようなものか

まず、Shopifyの「開発環境」だが、Wordpressなどと違い、ローカル上に環境を再現するということはできない。

ローカルに構築できるのは、ソースコードであり、Shopify上にて登録した商品データなど、いわゆるデータベースで補完されているような情報はまるっとローカルに落とすことができない。

商品情報などは、csv形式でエクスポートしてローカルに出力することはできるが、あくまでそうやって部分部分でのみデータベースを更新することしかできない。

ローカルで構築できるソースコードは、以下のような構成となっている。

このディレクトリ構成は、Shopifyの管理画面内の、「テーマのコードを編集」の画面で見ることのできるディレクトリ構成と同じものだ。

このそれぞれのディレクトリの中は、以下のように構成されている。

theme
├assets/
|├application.js
|└application.scss
├config/
|├settings_data.json
|└settings_schema.json
├layout/
|└theme.liquid
├(sections/ ※自身で追加する)
├(snippets/ ※自身で追加する)
├locales/
|└en.default.json
└templates/
 ├404.liquid
 ├article.liquid
 ├blog.liquid
 ├cart.liquid
 ├collection.liquid
 ├collections.list.liquid(※collection.liquidとほぼ同内容。Shopifyドキュメント上の言及がないため、Theme Kit側の旧ファイルと思われます)
 ├gift_card.liquid
 ├index.liquid
 ├list_collections.liquid
 ├page.contact.liquid
 ├page.liquid
 ├product.liquid
 ├search.liquid
 └customers
  ├account.liquid
  ├activate.liquid
  ├addresses.liquid
  ├login.liquid
  ├order.liquid
  ├register.liquid
  └reset_password.liquid

参考サイト:

Shopifyテーマの構造解説。各ディレクトリとファイルの役割を知る | non-standard world株式会社
こんにちは、エンジニアの川島です。 先日の記事で、ECプラットフォームShopifyのテーマカスタマイズの始め方について述べました。 今回は、Shopfyテーマの構造に加えて、各ディレクトリとファイル

Shopifyテーマは、Shopifyによって開発されたオープンソースのテンプレート言語Liquidで構築されています。
拡張子.liquidで終わるLiquidファイル内では、Liquidの記法や変数を用いて、Shopifyストア上のデータを動的に追加することができます。

assetsディレクトリには、テーマで利用するCSS、Javascript、画像、フォントなどを格納します。
assetsディレクトリ内に格納したファイルは、各Liquidファイル内から、

<script src="{{ 'theme.js' | asset_url }}"></script>

といった形式のLiquidオブジェクトで呼び出せます。

Shopify上で自分が指定したテーマのソースコードをローカルにダウンロードして、コードであれば、それを自分のお気に入りのテキストエディタで編集し、保存すれば、FTPを使用することなく、本番環境に保存したコードが反映される。画像も、ローカルのassetディレクトリ内に追加すれば、本番上のassetディレクトリにファイルが追加される。

注意しなければいけないのは、このようにローカルと本番環境の同期ができるのは、「ライブ」状態になっていないテーマでしかできないということ。

つまり、「非公開」状態のテーマにでないと、この同期は不可である。

「Theme Kit」をインストール、するために「home brew」(Mac)または「Chocolately」(Windows)をインストール

さて、上記で記載したような同期を行うためには、「Theme Kit」というものをインストールする必要がある。

インストールといっても、これを「コマンド」にて行わなければいけないため、普段コマンドを使用していない者にとってはガクブルな障壁となっている。

僕も、ちょっと気持ちをセットしてからでないとコマンドは使い慣れていないが、ご安心を。

基本的に、決められた手順に従って操作をすれば、インストールできる。

参考:

ページが見つかりませんでした – たかぼーらいふ

上記たかぼーさんの開発環境の構築記事が優しく解説してくれているが、以下の手順で済むのは、Macユーザーの話。

「ターミナル」で以下のコマンドを順に入力するだけ。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

※すでに過去にXcodeやpythonなどをインストールするために「home brew」をインストールしてあるという方は上記は不要。

brew tap shopify/shopify
brew install themekit

これだけで、macの方は次の項目「ShopifyストアAPIアクセス、およびテーマIDを取得」に進んでいただいて問題ない。

コマンド実行中の表示

Windowsユーザーは、Macの「ターミナル」と違い、コマンド操作を「PowerShell」というアプリで実行する必要があるのだが、「PowerShell」だと少し手順が違うのだ。。

具体的に言うと、「Theme Kit」をインストールするための「home brew」というコマンドのパッケージのインストールが「PowerShell」ではできない。なんのこっちゃ。

ドラクエでいうと、Aというアイテムを手に入れるためには、Bというアイテムを手に入れていなければいけないのだが、Bというアイテムを手に入れるためには、Cという村人をパーティーに入れている必要があるが、Cという村人はSwitch版でないと登場しないから、Wii U版だとDという村人でないといけない。。みたいな。。

なので、Windowsの方は、以下を参考に、「Chocolately」というパッケージをインストールする必要がある。

参考:

Shopify Theme Kit を使ったテーマ開発
Shopify Theme Kit は Shopify テーマを開発する為のコマンドラインツールです。初めてテーマ開発に関わる方には Shopify Theme Kit の利用がおすすめです。

さて、ここでもまた落とし穴がある。

注意点として、「PowerShell」を起動する際に、右クリックで「管理者権限で実行」をする必要がある!!!

もう、いくつ落とし穴があるんだよっていう。。

で、以下のコマンドを入力してエンターキーを押す。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

で、コマンドが勝手に進んで、Chocolatelyがインストールされる。

続いて、以下のコマンドを入力し、エンターキー。

choco install themekit

すると、以下のようにするすると勝手にインストールが実行される。

これで「Theme Kit」のインストールが完了!

ShopifyストアAPIアクセス、およびテーマIDを取得

次に、Shopify上の、どのテーマをローカル同期させるかを設定するために、

ストアAPIアクセス設定、およびテーマIDを取得する必要がある。

Shopifyの管理画面の「アプリ管理」>「プライベートアプリを管理する」より、

以下のように設定をする。

プライベートアプリ名の設定>任意の名前でOK。

メールアドレス>開発者のメールアドレスでOK。

そして、編集権限は何も考えずにずべて最高の権限を選択。

そうして、次に同期させたいテーマのIDを取得する。

IDは、以下のようにテーマのカスタマイズ画面に進んだ際にURLに表示される数字である。

Theme Kitを使って、テーマのソースコードをダウンロード&同期設定

テーマIDを取得したら、以下のコマンドを入力し、テーマファイルのダウンロードを行います。

ダウンロードしたいローカルの場所を指定したほうがいいので、以下のコマンドを入力してください。

cd [指定したいディレクトリのローカルパス]

以下のようにコマンド先頭に、指定したパスが記述されるようになったら、ディレクトリの指定の準備ができているということです。

次に、以下をコマンドし、指定したディレクトリにテーマのソースコードをダウンロードする。

theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]

※[ ]部分について、

 [your-password] はプライベートアプリの設定で入力したもの

 [you-store.myshopify.com] は、ご自身のmyshopify.comドメイン(独自ドメインではないので注意!)

 [your-theme-id] は、上記で調べたURLについているテーマID

何かしらのエラーが返ってきた場合は、タイプミスをしている可能性がある。

注意深くコマンドを確認し、再度トライしてみてください。

うまくいくと、以下のようにローカルにダウンロードが行わる。

ここまでくれば、もう大丈夫です。

あとは、同期させたいテーマが「公開」状態(「ライブ状態」)になっていないことを確認し、もしなっていたら、管理画面上でテーマを複製するなどして、複製したほうのテーマを公開状態にしてあげましょう。

そして、以下のコマンドで同期が開始します。同期を終了したい場合は、cmd + C(Ctrl + C)を押せば終了する。

theme watch

いかがでしたか?

わかりやすく解説したつもりですが、不備や説明不足な点があれば、お手数ながらご教示いただければ修正していきますので、ご連絡くださいませ。

それでは、快適な開発の旅をお過ごしください!

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    タイトルとURLをコピーしました