Theme Kitを導入してShopifyのローカルな開発環境を構築する

海外でシェアを大きく伸ばしていて、日本でも最近は評判が急上昇中のオンラインストア構築サービス Shopify(ショッピファイ)

Shopifyパートナーとして登録すると、無料で開発環境を貸してもらえます。
仕事でストア制作される方はパートナー登録すると非常に便利ですので、ぜひぜひ(登録自体のかんたん)。
記事を書いていますので、パートナーの利点など参考にどうぞ。

Shopifyパートナーになったので、次はShopifyの開発環境について調べてみました。

Shopifyのダッシュボードからテーマをいじることもあるようですが、コーディングする場合は、テーマをダウンロードして、ローカルで制作して、アップロードする流れが一般的です。

そのあたりは便利ツール Theme Kit でやりとりするので、今回はツール導入とコマンドについて書きました。

Theme Kit 導入手順

導入手順)Shopify Theme Kit

Theme KitはShopifyテーマ用のコマンドラインツールです(コマンドラインに苦手な方もいるかもしれませんが)。

homebrewChocolateyなどのパッケージ管理ソフトをふだんから使っている方はそちらからインストールできます。

それ以外の方は、OSに合ったファイルをダウンロードします。
Shopify Theme Kit のManual Installatioを参照。

インストール方法(Windowsの場合)

  1. C:\Program Files\Theme Kitフォルダを作成
  2. Theme Kit をダウンロードし、上で作成したフォルダ内で移動(解凍不要)
  3. PATH環境変数に「C:\Program Files\Theme Kit」を追加する必要があります。詳細な手順はこちら。日本語で手順を探す場合は「OS名+PATH環境変数の追加」で検索
  4. Theme Kit がインストールされたことを確認するには、コマンド プロンプトやWindows PowerShellを開いてthemeと入力

これでインストールが無事終了です。

Theme Kitコマンド

themeコマンドを入れると、コマンドヘルプが出ます。

プライベートアプリの追加

次にTheme KitとShopifyとの紐づけるところですが、APIでやり取りします。
新規のプライベートアプリで、テーマ関連の権限を与えて、APIのパスワードを取得します。

まず、パートナーダッシュボードのストア管理からストアにログインします。


Shopifyダッシュボードが開きますので、アプリ管理から「プライベートアプリを管理する」をクリック。


ページ移動後に「プライベートアプリの開発を有効にする」をクリック。道なりなので、クリックして進めてください。

プライベートアプリを作成する」をクリック。


プライベートアプリ名と緊急連絡用開発者メールを入力して、
非アクティブなAdmin API権限を表示する」をクリック。


テーマ」のアクセスなしを「読み取りおよび書き込み」に変更して「保存する」。


保存後にページ遷移して、APIキー、パスワードなどが発行されます。
パスワードはあとで使いますので、コピーして保管します。

既存テーマをダウンロードする

Shopifyはテーマライブラリー内に複数のテーマを管理することができます。
どのテーマで作業するか、テーマIDで識別しますので、IDを調べる必要があります。
テーマカスタマイズ時のURLから調べられますが、今回はコマンドを使ってみます。

theme get --list -p=[password] -s=[your-store.myshopify.com]


[password]…上でプライベートアプリを作成した際に入手したパスワード
[your-store.myshopify.com]…登録したストアURL。

私のところがそうですが、-(ハイフン)を含むIDだった場合は、
エラー(invalid store domain must end in '.myshopify.com')になります。

''で囲っておく(-s='naeco-jp.myshopify.com')か、
--store=naeco-jp.myshopify.com としてパラメータを一工夫する必要があります。

コマンドを入力すると、テーマIDとテーマ名が表示されます。
作業するテーマIDをメモしておきます。このあと使います。


テーマをダウンロードします。コマンドは下記のとおり。
テーマIDは上で取得したものを使います。

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


カレントディレクトリにダウンロードしますので、コマンドを入力する前に、ダウンロードしたいディレクトリに移動しておきます(Windowsのcdコマンドなど)。

その他コマンド

参考)Theme Kit Commands

theme deploy…テーマの置き換え。
theme open…ブラウザでテーマのプレビューを開きます。
theme watch…ファイルの更新を監視して、自動でアップロードします。

Shopifyのテーマをダウンロードしたディレクトリに移動して、コマンドを実行します。
カレントディレクトリ内のconfig.yml(パスワード、ストアURL、テーマIDが書いてある設定ファイル)を見てコマンドを実行するようで、ファイルがないとエラーになります。
config.ymlは、Theme Kit Configurationを見て、設定を追加したりできます。directoryを入れておくと使い勝手がよさそう。

テーマのコード修正はふだん使っているテキストエディタなどで行います。

おわりに

Shopifyはコードのいじれる範囲が広いので、ローカルで作業することも多そうです(テーマをダウンロードして修正箇所を検索すると便利)。
Theme Kitは準備しておくとよいです。

アフィリエイトリンク
マーチャント(ストアオーナー)の方は14日間無料で試用できます。
Shopifyを始めたい方はぜひご利用ください。

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら