ローカルでShopifyテーマの開発環境をセットアップする3ステップ

※2021年のアップデートに伴いこの記事の内容は最新ではなくなりました。

テーマの開発方法については以下をご参照ください。

Shopifyアプリとテーマの開発方法

この記事の中のTheme Kitは最新のテーマはサポートしておりませんので、今後は以下のツールをお使いください。

Shopify CLI for themes

多くの開発者とデザイナーがオンラインのShopifyテーマエディタを愛用しています。これはShopifyの管理画面の中にあって簡単に使えるものです。しかし、もし定期的にShopifyテーマの開発をしたいと考えているなら、オンラインテーマエディタだけに縛られる必要はないことを知っておくべきでしょう。

この記事では、Theme kitのインストール方法と使用法を説明します。このクロスプラットフォームツールはShopifyとの連携を容易にしながら、独自の開発ツールを使用できるようにします。

Theme Kitの設定が済んだら、テーマ開発にGitなどのワークフローツールを統合することが簡単にできます。そうすれば自信を持って開発チームでShopifyテーマに取り組むことができ、テーマ編集にお気に入りのテキストエディタやローカライズされた体験を持ち込むことも可能になります。Shopifyはホスト型プラットフォームなので、Shopifyの開発にはストアデータと連携したLiquidのコンパイルやレンダリングのためにShopifyサーバーとの接続が必要であり、それゆえTheme kitは本質的にローカルなものとは言えません。

Note：Shopifyはホスト型プラットフォームであるため、真にローカル環境でShopifyと連携できるオプション（MAMPやWAMPのようなもの）はなく、そのためローカルで独自ツールを使うオプションとしてはTheme Kitがベストということになります。

それでは、Shopifyテーマをローカルで構築するために使用するツールとそのプロセスについて見ていきましょう。この記事を有効活用するには、コマンドラインの基礎を知っている必要があります。追加の情報はCodecademyで見つけられます。

目次

1. テーマキットをインストール

2. 認証APIの設定

3. アップデートをプッシュする

ステップ1：Theme Kitをインストール

Theme Kitは、Shopifyによって開発＆管理されている、Shopifyテーマ構築のためのクロスプラットフォームのコマンドラインツールです。Theme Kitをダウンロードして少しの設定をおこなえば、テーマ作成を開始することができます。

特徴的なTheme Kitの機能は次のとおりです。

・複数の環境にテーマをアップロード

・高速アップロードとダウンロード

・ローカルでの変更を自動でShopifyにアップロード

・Windows、Linux、macOSで使用可能

LinuxかmacOSを使用している場合、Theme Kitをインストールしてグローバルに設定するには、下記のスクリプトをターミナルで実行します。

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python

別の方法として、Theme KitのサイトからZIPファイルをダウンロードすることでマニュアルインストールも可能です。Theme kitのサイトの手順に従ってください。 

古いバージョンのトラブルシューティングとインストール済みTheme kitのテスト

Theme Kitのコマンドを実行する前に、最新バージョンを使用していることを確認してください。過去にテーマのgemを使用していた場合は、アンインストールを確認しましょう。もし今回初めてTheme kitをインストールするのであれば、以下の指示内容は無視してかまいません。

既存のShopifyテーマのgemをアンインストールするには下記のコマンドを実行します。

gem uninstall shopify-theme

最新バージョンのTheme Kit（こちらで参照可）であることを確認してください。Theme kitのアップデートには以下のコマンドを実行します。

theme update --version=[version number]

たとえば、次のようになります。

theme update --version=v1.0.0

Theme kitがインストールされていることをテストするには、下記を入力します。

theme --help

ステップ2：認証APIの設定

Theme Kitがインストールできたら、あなたのShopifyストアとローカルテーマを連携させる設定が必要になります。ここでは、APIキー、パスワード、テーマIDが要求されます。

APIキーとパスワード

ストアとTheme Kitを連携させるためのAPIキーを設定します。APIキーはストアとテーマファイルへのアクセスを可能にします。

そのためには、Shopifyストアにログインし、プライベートアプリを作成する必要があります。管理画面の「アプリ管理」セクションの「プライベートアプリを管理」をクリックします。次に「新しいプライベートアプリを作成する」を選択し、名前を入力します（クライアント名と環境を使うとわかりやすくなります）。権限の項目で、「テーマテンプレートとアセット（Theme templates and theme assets）」の許可内容が「読み込みと書き込み（Read and write）」になっているよう注意してください。これは適切なAPI認証を生成するために必要になります。その後、「保存する」をクリックします。

Shopifyが新しいページを読み込み、ユニークなAPIキーとパスワードが提供されます。

テーマID

既存テーマにアクセスするために、テーマIDが必要となります。テーマIDを取得する方法はいくつかありますが、一番早い方法は「テーマ」のセクションに行って、「アクション」＞「コードを編集する」をクリックし、URLの末尾の数字をコピーすることです。 ‘mystore.myshopify.com/admin/themes/’の後に続く数字になります。

ほかの方法としては、次のコマンドを実行します。

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

これはテーマのリストと特定のストアの中にある themeidのリストを返します。

config.ymlでフックする

これで、ここまでの情報を使ってテーマの中にconfig.ymlファイルを作成し、ローカルにダウンロードできるようになりました。config.ymlは、あなたのShopifyストアテーマとの連携をローカルで実行するのに不可欠です。

まずテーマのためのディレクトリを作成します。

mkdir [your-theme-name]

それから、作成したディレクトリに移動します。

cd [your-theme-name]

特定のテーマをダウンロードし、ディレクトリ内でそのテーマのローカル版と連携するためのconfig.ymlファイルを作成するには、次のコマンドをテーマディレクトリ内で実行します。[ ]のプレースホルダー内はあなたのテーマの情報に置き換えてください。

theme get --password=[your-api-password] --store=[your-store.myshopify.com] --themeid=[your-theme-id]

たとえば、次のようになります。

theme get --password=01464d4e02a45f60a23193ffc3a8c1b3 --store=the-soap-store.myshopify.com --themeid=170199178

これで自動的にconfig.ymlファイルが作られ、ストアからテーマ（themeidで特定されたもの）がダウンロードされます。config.ymlファイルをマニュアルでテキストエディタを使ってディレクトリに作成することもできます。その場合は次のようになります。

テーマを最初から作成する

テーマを1から作りたい場合、次のコマンドを実行することで可能になります。

theme new --password=[your-password] --store=[your-store.myshopify.com] --name="New Blank Theme"

これでディレクトリ内に新規テーマが作成され、同じ名前のテーマのコピーがあなたのストアにアップロードされます。また、あなたのテーマのconfig.ymlによってその2つが結び付けられます。

エラーが表示されたら

APIキーが生成されたときに、APIの権限を正しく設定したか確認してください。上述したように、「テーマテンプレートとアセット（Theme templates and theme assets）」の権限を「読み込みと書き込み（Read and write）」にして、「保存する」をクリックします。

テーマgemをアンインストールしたか、最新バージョンのTheme Kitを使用しているか、この2点もご確認ください。

ステップ3：アップデートをプッシュする

これでShopifyテーマとの連携が構築されたので、次のコマンドをディレクトリで実行できます。

theme watch

Theme Kitはあなたのローカルファイルの変更を検出して、自動的にあなたのテーマにそれをプッシュします。watchを停止するには、ctrl + cを入力します。

これでTheme Kitの設定ができました🎉

やるべきことは完了です！これでバージョンコントロールや開発チームとの共同作業が容易になり、お気に入りのテキストエディタも使えますし、ショートカットの設定など、あなたがいつもローカル環境でおこなっていることなら何でもできるようになりました。

 

原文：Tiffany Tse 翻訳：深津望