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

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

Shopifyパートナーに登録したら、そこは親切さにあふれていた

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

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

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

Theme Kit 導入手順

導入手順）Shopify Theme Kit

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

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

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

インストール方法（Windowsの場合）

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

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

Theme Kitコマンド

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

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

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

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

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

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

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

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

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

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

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

テーマIDを調べる

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

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

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

-（ハイフン）を含むパラメータの場合は、エラー（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について記事にしています。

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