Shopify

ShopifyCLIx3で仮想環境を作る(2024年5月6日に公開された、Shopifyの公式無料テーマ Rise)

前回の記事では、ShopifyCLIx3を使うための開発環境構築を行いました。

前回の記事は以下となります。

まだ、開発環境構築を行っていない人は上記の記事を見ることで開発環境が構築でき、今回の記事が参考になります。

では、今回はShopifyCLIx3とShopifyのショップをつないで、仮想環境を作ります。
今回は以下の手順で進みます。

ShopifyCLIx3でShopifyのテストストアのソースコードをダウンロード

まず、PCの任意の場所(例えばデスクトップなど)にShopifyの専用フォルダを1つ作ります。

デスクトップ Shopifyフォルダ作成

powershellで作ったフォルダに入ります。
例えば以下のコマンドとなります。

cd Desktop

cd Shopify

これで、デスクトップに作った「Shopify」フォルダの中に入りました。


これから、このフォルダの中にテストストアのソースコードをダウンロードします。

以下のコマンドを叩きます。

shopify theme pull --store xxxxx(自身のストア名)

コマンドを叩くと、以下のようなエラーが出ることがあります。

shopify : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\lookz\AppData\Roa
ming\npm\shopify.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https:/
/go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ shopify theme dev
+ ~~~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

一時的にセキュリティーを解除するコマンドを叩きます。

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

再度、以下のコマンドを叩きます。

shopify theme pull --store xxxxx(自身のストア名)

すると、ソースコードのダウンロードが始まります。

テストストアソースダウンロード

デスクトップに作ったShopifyフォルダーにソースコードがダウンロードされているはずです。確認してみてください。

以下のようなデータが存在しているはずです。

  1. assets
  2. config
  3. layout
  4. locales
  5. sections
  6. snippets
  7. templates

上記のファイルがあるか確かめてください。ここで注意ですが、今回取り上げるテーマは2024年5月6日に公開された、Shopifyの公式無料テーマRiseです。Riseのソースコードがダウンロードされています。

即時反映(ホットリロード)で開発を進める方法

Shopifyのサーバー上で開発環境と呼ばれる仮想環境を作ってもらいそこで開発を進める方法を紹介します。仮想環境で開発を進めることで、本番環境を直接触ることなく、変更をその都度確かめながらできるので、思わぬミスを反映してしまってストアの表示を壊してしまうことはなくなります。

先ほどのレクチャーで、デスクトップにShopifyフォルダを作ったと思います。その中にダウンロードしたRiseのソースコードが入っているのでpowershellでアクセスします。

以下のコマンドを叩いてください。

cd Desktop

cd Shopify

これでフォルダにアクセスできました。

この、アクセスした状態で以下のコマンドを叩きます。

shopify theme dev

ソースコードがロードされていくので完了までしばらく待ちます。

http://127.0.0.1:9292

上記が仮想環境のURLです。アクセスして確かめてください。

最初は、ストアのログインパスワードが求められます。
自分のパスワードが分からない場合は、以下のURLから確かめて仮想環境のストアにログインしてください。

https://admin.shopify.com/store/xxxxx(自身のスト名)/online_store/preferences?tutorial=unlock

ログインすると、以下のようにカスタマイズ前の新品のストアが表示されます。
これから先のレクチャーではこの環境でカスタマイズをしていきます。

後述しますが、本番反映の方法も解説しますのでこのまま開発を進めてください。

Gitでソースコードを管理する

必要であればGitでソースコードを管理することをお勧めします。Gitで管理することでどのファイルになんの変更を加えたのかの管理ができるようになります。何日にどのファイルをどう変更したなど覚えておくのは到底不可能な話です。Gitで管理することを強くお勧めします。また、Gitを簡単に操作できるツール「ソースツリー」も同時にインストールしましょう。

以下のサイトからGitをダウンロードします。

https://git-scm.com/downloads

Gitダウンロードページ

Windows・Macの選択肢がありますので、選択してください。

Windows版Gitのインストール

Gitダウンロードページ2

矢印のところをクリックすると、ファイルがダウンロードされます。
ファイルを開いてください。

PCに変更を加えることを許可すると、インストーラーが起動します。

基本的にインストーラーの指示に従って「Next」をクリックしていきます。

Gitがダウンロードされたか確認するコマンドを叩きます。

git --version

上記のようにバージョンの出力があればGitがインストールできています。

Windows版ソースツリーのインストール

次は簡単にGitを操作できるツールである「ソースツリー」をインストールします。

以下のURLからダウンロードページにアクセスしてください。
https://www.sourcetreeapp.com/

ソースツリーダウンロードサイト

「Download for Windows」ボタンをクリックしてください。

ダウンロード規約の同意の案内が出ますので、チェックボックスをチェックして「Download」ボタンをクリックしてください。

ソースツリーダウンロード規約

するとファイルがダウンロードされます。
ファイルを開いてください。

インストーラーが起動します。

ソースツリーインストーラー1

Bitbuketの利用を促す画面が出ますので、今回は使いませんので「スキップ」をクリックしてください。

ソースツリーインストーラー2

ツールのインストール画面が表示されます。特に気にすることはないですので「次へ」をクリックしてください。

ソースツリーインストーラー3

環境設定画面が表示されたら、コミット時などに利用されるユーザー名とメールアドレスを入力し、「次へ」をクリックして進みます。

ソースツリーインストーラー4

SSHキーを読み込むかどうかのポップアップが表示されます。今回は使用しませんので「いいえ」をクリックしてください。

ソースツリーインストーラー5

すると、ソースツリーが起動します。これでインストールは完了です。

Windows版ソースツリーのリポジトリ作成とファーストコミット

ソースツリーを開きます。

ソースツリーファーストコミットの手順1

ソースツリーを起動させて、上記画像の矢印「Create」をクリックします。

ソースツリーファーストコミットの手順2

「参照」をクリックして、リポジトリを作る(追跡する対象)ファイルを選択します。
今回のレクチャーでは、デスクトップにあるShopifyフォルダを参照します。
デスクトップにあるShopifyフォルダには、前のレクチャーで取得した「Rise」のソースコードが入っています。Shopifyフォルダを参照させることによって、ソースコードに加えた変更を追跡できるようになります。

ソースツリーファーストコミットの手順3

「作成」をクリックします。

すると、以下のようにポップアップが出ます。

ソースツリーファーストコミットの手順4

気にせず「はい」をクリックします。

ソースツリーファーストコミットの手順5

「全てインデックスに追加」をクリックします。

ソースツリーファーストコミットの手順6

すると、すべてのソースコードのファイルがインデックスに追加されました。
緑のプラスマークになって、画面上の領域に移動しています。

確認ができたら、コミットコメントフォームに「ファーストコミット」と入力し、「コミット」ボタンをクリックします。

ソースツリーファーストコミットの手順7

すると、矢印で示しているように、マスターブランチとして樹形図ができました。
以上でファーストコミットは完了です。

仮想環境でHello Worldを表示させる

いよいよ、仮想環境で開発が開始できます。

まずは、仮想環境を開いてください。
http://127.0.0.1:9292

サイトタイトル下あたりに、試しに「Hello World」を表示させます。

コードエディターで、デスクトップのShopifyフォルダを開いてください。

VSCODE Shopifyフォルダを開く

フォルダを開いたら、中にある
layout>theme.liquid
を開きます。

そして、298行目。{% sections ‘header-group’ %}の下に以下をコピペします。

<p>Hello World</p>

コピペしたのが以下です。

<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
    <a class="skip-to-content-link button visually-hidden" href="#MainContent">
      {{ 'accessibility.skip_to_text' | t }}
    </a>

    {%- if settings.cart_type == 'drawer' -%}
      {%- render 'cart-drawer' -%}
    {%- endif -%}

    {% sections 'header-group' %}
    <p>Hello World</p>
    <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
      {{ content_for_layout }}
    </main>

仮想環境に表示したのが以下です。

仮想環境にHello World表示

これで、仮想環境の準備も整い、開発ができるようになったのを確認できました。

次は、仮想環境で行った変更を本番環境にアップロードする方法です。

変更を本番反映する

まずは、本番環境の確認をします。

自分のサイトに合わせた以下のようなURLにアクセスしてください。

https://xxxxx(自身のスト名).myshopify.com/

すると、真っ新な本番環境が表示されます。

本番環境(真っ新な状態)


先ほどHello Worldを表示させたのは仮想環境でした。ここで間違わないように認識合わせをしておきます。

では、本番反映の手順です。

①powershellを開く
②デスクトップ>Shopifyフォルダにアクセス
③以下のコマンドを実行

shopify theme push

powershellから、どの環境に反映するのかの問いかけがありますので
今回のレクチャーでは「Rise」を取り扱っているので、キーボードの矢印キーで「Rise」を選んでエンターを押します。ここの選択は決して間違えないようにしてください。

powershell本番反映中

すると、本番環境に本番反映でき、ショップ名の下に「Hello World」が表示されます。

本番反映済み(Hello World)

これで、一連の流れの解説は終了です。

まとめ

この記事では、Shopifyの仮想環境を使って、本番環境を直接変更せずに確認しながら開発する手順を解説しました。

この記事で分からなかったことがあれば、お気軽に質問をしてくださいね!

この記事は、今後再編集され最新版に更新しKindleで販売される予定です。

他の関連している記事も散らばっているので、更新してKindle電子書籍として販売予定です。

お仕事のご依頼は、ダイレクトメールからお願いいたします。

この記事が開発の参考になれば幸いです。