【ITニュース解説】How to Download Shopify Theme & Start Development

Shopifyストアでオリジナルのデザインや機能を実装するために、テーマ開発を始める際の手順と、初心者がつまずきやすいポイントとその解決策を解説する。この手引きは、筆者が実際に直面した課題を乗り越えて得た知識をまとめたものであり、開発を始める人々が時間と労力を節約できるように作成されている。

Shopifyテーマの開発を進めるには、いくつかの準備が必要である。まず、開発ツールとして、JavaScriptの実行環境であるNode.jsの最新LTS（Long Term Support）バージョンがインストールされていることを確認する。コードを記述するためのエディタとしては、VS Codeが推奨される。さらに、開発対象となるShopifyストアのオーナー権限を持っているか、またはテーマを編集できるスタッフ権限が付与されている必要があり、ストア自体も一時停止や凍結されていないアクティブな状態であることが不可欠である。

開発を始める最初のステップは、Shopify CLI（コマンドラインインターフェース）のインストールである。これは、ターミナルやコマンドプロンプトといったテキストベースの画面からShopifyストアと連携するための公式ツールである。Node.jsがインストールされていれば、npm install -g @shopify/cli @shopify/themeというコマンドを実行することで、Shopify CLIとテーマ開発に必要なツールをグローバルにインストールできる。インストールが完了したら、shopify versionと入力して、正しくインストールされ、バージョン情報が表示されるかを確認することが推奨される。

次に、開発環境とShopifyストアを連携させるために認証を行う必要がある。shopify auth loginコマンドを実行すると、Webブラウザが自動的に開き、Shopifyストアへのログインと、CLIがストアにアクセスすることを許可する画面が表示される。ここでログインしアクセスを許可することで、CLIからストアのテーマを操作できるようになる。もし後で認証に関する問題が発生した場合は、shopify auth logoutで一度ログアウトし、再度shopify auth loginを実行して認証し直すことで解決することが多い。

テーマを開発するためのファイルは、大きく分けて三つの方法で取得できる。最も推奨されるのはShopify CLIを使う方法である。プロジェクトを作成したいディレクトリに移動し、shopify theme pull --store=your-store.myshopify.comとコマンドを入力すると、Shopifyストアに存在するテーマの一覧が表示され、そこから開発したいテーマを選択してダウンロードできる。これにより、選択したテーマの全てのファイルが現在のディレクトリにダウンロードされる。二つ目の方法は、Shopifyの管理画面からテーマファイルをダウンロードする方法である。ストアの管理画面にログインし、「オンラインストア」から「テーマ」のページへ進み、編集したいテーマの「アクション」ボタン（三点リーダー）をクリックして「テーマファイルをダウンロード」を選択する。ダウンロードされた.zipファイルをプロジェクトディレクトリに解凍して使用する。三つ目の方法は、新しいテーマをゼロから開発する場合や、Shopifyの標準的なテーマであるDawnテーマをベースにしたい場合である。shopify theme initコマンドを実行し、プロンプトに従って「Dawn」を選択することで、新しいDawnテーマの構造を持つプロジェクトが初期化される。あるいは、GitHubからDawnテーマのリポジトリを直接クローンすることも可能である。

ダウンロードまたは初期化したテーマのファイル構造を理解することは、開発を進める上で重要である。テーマのディレクトリ内には、assets/（CSS、JavaScript、画像、フォントなど）、config/（テーマの設定ファイル）、layout/（全てのページの基本となるtheme.liquidファイル）、locales/（多言語対応のための翻訳ファイル）、sections/（再利用可能でカスタマイズ可能なコンテンツブロック）、snippets/（再利用可能な小さなコードブロック）、templates/（商品ページやコレクションページなどのテンプレート）といったフォルダが存在する。特に重要なファイルとしては、サイト全体の枠組みを定義するlayout/theme.liquid、管理画面でのカスタマイズオプションを定義するconfig/settings_schema.json、動的なコンテンツブロックを定義するsections/*.liquid、そして各ページの構造を定義するtemplates/*.jsonが挙げられる。

テーマのファイルを準備したら、shopify theme dev --store=your-store.myshopify.comコマンドを実行して開発サーバーを起動する。このコマンドは、ローカル環境に開発サーバーを立ち上げ、ブラウザでアクセスできるプレビューURL（通常はhttp://127.0.0.1:9292）を提供する。このサーバーは「ホットリロード」機能を備えており、ローカルのファイルに変更を加えると、即座にブラウザのプレビューに反映されるため、効率的に開発を進めることができる。また、このコマンドを実行すると、Shopifyストア上にも「開発テーマ」が自動的に作成される。この開発テーマは、実際のライブストアとは独立した環境であり、安全にテストや変更を行える場所となる。

開発中に遭遇しやすい一般的な問題とその解決策も理解しておく必要がある。 よくあるエラーの一つに、「Couldn't find an app toml file」というメッセージがある。これは、Shopify CLIのコマンドを誤って使用している場合に発生する。Shopify CLIは、テーマ開発用とアプリ開発用のコマンド群に分かれており、テーマを操作する際は必ずshopify theme pull、shopify theme dev、shopify theme pushのようにthemeキーワードを含むコマンドを使用する必要がある。shopify devやshopify deployといったthemeを含まないコマンドは、Shopifyアプリの開発用であり、テーマ開発では使用できない。 もう一つの一般的なエラーは、「404 Not Found」やGraphQL接続に関するエラーである。これにはいくつかの原因が考えられる。まず、ストアURLの指定が間違っている場合がある。your-store.myshopify.comのように、プロトコル（https://）やカスタムドメインを含めずに指定する必要がある。また、Shopify CLIの認証情報が期限切れになっている場合もエラーが発生するため、その際はshopify auth logoutとshopify auth loginで再認証を試みると良い。開発を行うユーザーがストアオーナーであるか、テーマの編集権限を持つスタッフであるか、適切な権限が付与されていることを確認することも重要である。コラボレーターアカウントの場合、「テーマ」の権限が有効になっているかをストア管理画面で確認する。さらに、開発対象のShopifyストアが一時停止や凍結されておらず、アクティブな状態であるかも確認が必要である。Shopify CLI自体が古いバージョンであるために問題が発生することもあるので、npm update -g @shopify/cli @shopify/themeで最新バージョンに更新することを推奨する。最後に、常に--store=your-store.myshopify.comのようにストアを明示的に指定することで、接続の問題が解決する場合がある。 もしShopify CLIでの作業がどうしても上手くいかない場合は、Theme Kitというレガシーなツールを代替として検討することも可能である。これはgem install theme_kitでインストールし、Shopify管理画面で作成したプライベートアプリのパスワード（アクセストークン）を使用してテーマを操作する。

開発のワークフローにおけるベストプラクティスとしては、常に安全な方法で作業を進めることが挙げられる。完成した変更をストアに反映するには、shopify theme push --store=your-store.myshopify.comコマンドを使用する。特定のテーマIDにプッシュしたい場合は、--theme=THEME_IDオプションを追加する。 開発中は決してライブテーマを直接編集しないことが重要である。常に開発テーマや複製したテーマで作業し、変更を公開する前には十分にテストを行うべきである。また、テーマファイルの変更履歴を管理するために、Gitなどのバージョン管理システムを導入することを強く推奨する。プロジェクトの初期段階でgit init、git add .、git commit -m "Initial theme setup"を実行し、.gitignoreファイルに.DS_Store、node_modules/、config/settings_data.jsonなどの不要なファイルを記述して、バージョン管理の対象から外すことが一般的である。

全ての開発とテストが完了し、テーマを本番環境に公開する準備が整ったら、Shopify管理画面の「オンラインストア」から「テーマ」にアクセスし、開発テーマの「アクション」から「公開」を選択する。CLIで公開する場合は、shopify theme push --theme=THEME_ID --publishコマンドを使用する。

テーマ開発を進める上で、特に頻繁に利用するShopify CLIコマンドをまとめておく。ストアからテーマをダウンロードするshopify theme pull、開発サーバーを起動するshopify theme dev、ローカルの変更をストアにプッシュするshopify theme push、ストア上の全テーマをリスト表示するshopify theme list、新規テーマを初期化するshopify theme init、テーマのエラーをチェックするshopify theme check、そして開発テーマのプレビューURLを共有するshopify theme shareがある。

開発環境のセットアップが完了すれば、Liquidテンプレートのカスタマイズ、動的なコンテンツブロックであるセクションの作成、カスタムCSSやJavaScriptの追加によるデザインや機能の拡張、マーチャントがテーマをカスタマイズできる設定の追加、スマートフォンなど多様なデバイスでの表示を確認する応答性テスト、そしてサイトの読み込み速度を向上させるパフォーマンス最適化など、Shopifyテーマ開発の次のステップに進むことができる。これらの詳細な学習には、Shopifyの公式ドキュメントやLiquid言語のドキュメント、DawnテーマのGitHubリポジトリ、そしてShopify CLIのドキュメントが役立つ情報源となる。

初心者がShopifyテーマ開発を始める際のよくあるシナリオとして、まずプロジェクトフォルダでshopify theme pullを実行してテーマを取得し、その後shopify theme devで開発サーバーを起動する手順が挙げられる。接続問題が発生した場合は、shopify auth logoutとshopify auth loginで再認証を試み、その後shopify theme devを再度実行する。全く新しいテーマを作成する場合は、shopify theme initでテーマを初期化し、作成されたテーマフォルダに移動してからshopify theme devを実行する。

この手引きが、これからShopifyテーマ開発に挑戦する人々が、筆者が経験したような初期のフラストレーションを解消し、スムーズに開発を始められる一助となることを期待する。常に開発テーマで作業を行い、定期的にバックアップを取ることで、安全かつ効率的な開発が可能となる。