Shopifyでは管理画面から直接コードを編集して、ECサイトをカスタマイズできますが、やはり使い慣れたエディタの環境でコーディングしたいものですね。今回はShopifyでテーマのカスタマイズや作成などがローカルで進められる環境を構築してみたいと思います。Shopifyのローカル開発環境として「Shopify Theme Kit」と「Shopify CLI」というのがあります。このうちShopify Theme Kitの方は現在は非推奨とされており、Shopify CLIをお勧めしますが従来のテーマでのカスタマイズや、環境構築やコマンド操作が比較的シンプルということもあり、まだ触れる機会もあるのかなということで、まずはこちらについてまとめてみたいと思います。なお、今回はmacOSでの環境構築を前提としております。    

Theme Kitの環境構築

まずは環境に必要なものをインストールしていきます。macOSであればHomebrewを使って進めていきます。

$ brew tap shopify/shopify
$ brew install themekit

  Theme Kitがインストールできたらヘルプコマンドで正しくインストールできているかをチェックしておきます。

$ theme --help
Theme Kit is a tool kit for manipulating shopify themes....

  続いて、ストア環境と同期するためのパスワードを設定していきます。以前は後述するShopifyの管理画面からAPIのトークンを発行してパスワードを作成していましたが、現在では「Theme Acsess」という専用のアプリを使います。   アプリストアよりTheme Acsessのアプリをインストールしていきます。   インストール後、アプリ内の画面よりパスワードを作成していきます。このパスワードを使ってデプロイやテーマテンプレートのダウンロードを行います。   画面の案内にしたがって進めていきますが、パスワードの発行にはメールアドレスが必要となります。開発者用のメールアドレスを入力し、パスワード作成を進めていきます。   設定したメールアドレス宛に、認証用のリンクが含まれたメールが送られてきますのでメール内のリンクより認証ページへアクセスします。   遷移後の認証ページではパスワード表示用のボタンがあるので、クリックするとパスワードが表示されるようになります。   なお、このパスワードですが表示は1度だけになりますので忘れずに控えておきましょう。   パスワードを確認できたら実際にコマンドで操作してみます。Theme Kitではコマンドを使って様々なことができるようになります。まずはストア環境にあるテーマのリストをチェックしてみます。先ほど設定したパスワードと、ストア名を指定して実行します。するとテーマIDと合わせて現在のストア環境にあるテーマ一覧が確認できます。

$ theme get --list -p=[PASSWORD] -s=[STORE_NAME.myshopify.com]

Available theme versions:
 [THEME_ID] Debut
 [THEME_ID] [live] Debutのコピー
 [THEME_ID] Sample_Theme

  実際にこのテーマのファイルをローカル側にダウンロードしてみます。下記のコマンドで、対象となるテーマのIDを指定します。

$ theme get -p=[PASSWORD] -s=[STORE_NAME.myshopify.com] -t=[THEME_ID]

  これでコマンドを実行しているディレクトリにテーマファイル一式がダウンロードされます。既存テーマを元にカスタマイズする場合にはここからローカルで作業をしていく形になりますね。   先ほどは既存テーマを使って構築をしていく方法ですが、Theme Kitではブランクテーマも用意されており、より柔軟なECサイト構築が可能です。下記のコマンドで、作成する任意のテーマ名を指定します。

$ theme new -p=[PASSWORD] -s=[STORE_NAME.myshopify.com] --name=[NEW_THEME_NAME]

  すると、必要最小限の機能とコードが用意されたテーマが新規作成されていきます。実際のブランクテーマは下記のような構成になっています。Shopifyのテーマとして必要なファイルが揃っているのが確認できます。ここから新たにコードを追加していったり、セクションを作成したりなどで進めていきます。

theme_dir
  ┣ assets
    ┣ application.css.liquid
    ┗ application.js
  ┣ config
    ┣ settings_data.json
    ┗ settings_schema.json
  ┣ layout
    ┗ theme.liquid
  ┣ locales
    ┗ en.default.json
  ┣ template
    ┣ customers
      ┣ account.liquid
      ┣ activate_account.liquid
      ┣ addresses.liquid
      ┣ login.liquid
      ┣ order.liquid
      ┣ register.liquid
      ┗ reset_password.liquid
    ┣ 404.liquid
    ┣ article.liquid
    ┣ blog.liquid
    ┣ cart.liquid
    ┣ collection.liquid
    ┣ collection.list.liquid
    ┣ gift_card.liquid
    ┣ index.liquid
    ┣ list-collections.liquid
    ┣ page.contact.liquid
    ┣ page.liquid
    ┣ product.liquid
    ┗ search.liquid
  ┣ sections（テーマ新規作成時には含まれない）
  ┣ snippets（テーマ新規作成時には含まれない）
  ┗ config.yml

  コードを編集している際には、「watch」コマンドを使うと便利です。このコマンドは編集後に保存を検知して、そのタイミングでストア環境のテーマに反映することができます。ただし、公開しているテーマに反映させる場合には「--allow-live」オプションを追加する必要があり、このオプションがある状態でコマンドを実行したときは公開中のテーマへの反映を許可することができます。

$ theme watch --allow-live

 [development] Warning, this is the live theme on STORE_NAME.
 [development] STORE_NAME: Watching for file changes to theme

  その他にもTheme Kitにはいろんなコマンドが用意されています。下記はその一部になります。

// テーマをShopify環境にデプロイ
$ theme deploy

// Shopify環境からテーマ内のファイルを指定してダウンロード
$ theme download PATH/FILE_NAME

   

Admin APIへの接続

今回は必要ありませんでしたが、Shopifyでは各種機能に関連する様々なAPIが用意されています。従来はここからパスワードを生成する必要がありましたが、現在では専用のアプリを使うため不要になりました。とは言っても、Shopifyと機能連携する場合には使う可能性もあり、せっかくですので合わせて確認しておきたいと思います。まずはShopifyの管理画面から「アプリと販売チャンネル」のメニューで「アプリを開発」に進みます。   アプリを開発のメニューから「カスタムアプリ開発を許可」をクリックします。   許可すると画面の内容が変わり「アプリを作成」に進んでいきます。   アプリ名を適当に入力し、開発者を選択します。   カスタムアプリとして項目が新規作成されました。ここから「Admin APIスコープを設定する」に進みます。   ここでAPIの項目ごとに権限を設定することでAdmin API経由で参照できるようになります。   保存するとアプリがインストールできるようになります。インストール後にアクセストークンが取得できます。以前はTheme Kitの接続パスワードの発行にこのトークンが使われていました。  

---

  今回はShopifyのテーマ開発に使えるローカル環境構築ということでTheme Kitを導入する方法をまとめてみました。現在はShopify CLIが推奨されているようですが、プロジェクトによってはTheme Kitが使われていたり、ブランクテーマも作成することができるので合わせて覚えておきたいですね。次回はShopify CLIを使った環境構築についてまとめていきたいと思います。