Shopifyをカスタマイズしたいと思ったことはありませんか？
例えば
「テーマを自社のブランドイメージに合わせたい」
「オリジナルのアプリを使って新たな機能をECサイトに追加したい」
などです。
その時に役立つツールが「Shopify CLI」です。
そこでここでは、Shopify CLIの使い方や、以前から使用されていた「Theme Kit」との違いについてまとめています。早速、続きをお読みください。
目次
Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。
Shopify CLIとは？
引用：Shopify.dev
Shopify CLIとは、Shopifyのアプリやテーマをローカル環境で開発・カスタマイズするツールのことで、CLIは「コマンドラインインタフェース」の略です。Shopify CLIなら、ローカル環境で編集したコードを自社のECサイトに反映させることができます。
このような場合、以前ならTheme Kitを使用していたかもしれませんが、Shopify CLIならより便利な開発環境で作業を行うことができるということです。
そこで、ここではShopify CLIとTheme Kitの違いや、導入方法などについて詳しくお伝えします。
Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。
Shopify CLIとTheme Kitの相違点と選び方
Shopifyでは、2021年8月に「Online Store 2.0」というアップデートに関する発表が行われ、その際に、ローカル環境での開発には「Shopify CLI」の使用が推奨されています。
これまで、Shopifyで歴史的に使われてきたCLIは次の3つです。
- Slate
- Shopify Theme Kit
- Shopify CLI
Slateは、2020年7月にサポートが終了しているため、2022年9月26日現在で使用できるCLIは「Shopify Theme Kit」と「Shopify CLI」の2つになります。
この2つのにはどういった違いがあるのか？不明瞭な点もあると思いますので、それぞれの特徴を整理しておきます。
Shopify Theme Kitの特徴
Shopify Theme Kitの特徴は「開発環境やステージング環境など複数環境で管理できる」、「Gitによるソースコード管理ができる」、「ローカルで加えた編集をリアルタイムでShopifyのサーバに同期できる」などが挙げられます。
ただし、Shopify Theme Kitでは、Online Store 2.0のサポートはありません。そのため、Shopify Online Store 2.0以前のテーマをローカル環境で扱いたい場合や、Online Store 2.0の機能を活用せず、新しいテーマを開発する場合などに限って使用が可能です。
Shopify CLIの特徴
Shopify CLIは前述のShopify Theme Kitの機能をほぼ全て引き継いでいます。Shopify CLIにしかない特徴としては、Online Store 2.0に基づいた開発のサポートが可能なことです。
これからOnline Store 2.0に基づいたテーマ開発を始める際には、Shopify CLIの使用が推奨されています。
その他、Shopify CLIに関しての特徴をまとめておくと下記の通りです。
- コマンドラインからプッシュすることで簡単にテーマを公開できます
- テーマが開発途中であっても、変更点をリアルタイムで確認できます
- 開発中のテーマはパスワードで保護し、チームで共有することができます
- 開発中のテーマは、テーマの制限にカウントされなません
- 「Shopify logout」を実行すれば、開発中のテーマは削除となります
Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。
Shopify CLIのインストール方法
ここではShopify CLIのインストール方法についてお伝えします。まずShopify CLIを使用するための前提条件として以下の3つを満たしている必要があります。
- Ruby2.7以上がインストールされていること
- Homebrewがインストールされていること（Mac OSの場合）
- ストア管理者、もしくはアカウント権限がコラボレーター、スタッフである
Rubyをインストールするには、RubyInstaller公式サイトからインストーラーをダウンロードし、環境のセットアップを行います。
公式サイト RubyInstaller
Rubyのバージョンは 2.7か、それより最新のものが必要です。
Homebrewをインストールするには、Homebrewのページに移動し、記載されている「インストールコマンド」をMacのターミナル画面にペーストし実行します。
公式サイト Homebrew
以上で準備が整いましたので、次は実際にShopify CLIをWindowsやMacにインストールしていきます。
Windowsにインストール
Windowsでインストールする場合、新規ターミナルウィンドウで、ホームディレクトリに移動し、その後、次のコマンドを実行します。
“gem install shopify-cli”
さらに、正しくインストールが行われているか確認するために下記のコマンドを打ちます。
“shopify version”
問題がなければ「2.7.1」のようなバージョン番号が表示されます。
Macにインストール
Macでインストールする場合、新規ターミナルウィンドウで、ホームディレクトリに移動してから次のコマンドを実行します。
“brew tap shopify/shopify”
“brew install shopify-cli”
Shopify CLIが正しくインストールされているか確認するために、Windowsの場合と同様に下記のコマンドを入力します。
“shopify version”
以上で、問題がなければバージョンが表示されます。
Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。
Shopify CLIでの環境構築方法
Shopify CLIのインストールが完了すれば、次は環境を構築していきます。
Step1.Shopfy CLIでストアと接続
まず最初に、インストールしたShopify CLIの認証作業を行います。
認証を行うには、ストア管理者もしくは、コラボレーター、スタッフの権限が必要です。また、Shopifyストアのドメイン( [ストアURL].myshopify.com )を用意しておいてください。
接続するコマンドは次の通りです。
“shopify login –store [ストアURL]”
ストアURLには、Shopifyの自社ドメインが入ります。そのため、実際には下記のようなコマンドに修正します。
shopify login–store [abccompany.myshopify.com]
また、この際、Windowsのセキュリティアラートが表示される事があります。その場合は「allow access」のボタンをクリックして対処します。
「shopify login –store [ストアURL]」のコマンドを入力後、自動的にブラウザが立ち上がりますので、アカウント選択後、ログインします。
接続が正しく行われれば「Authenticated successfully. You may now close this page」という文字が表示されます。
その後、このタブは閉じてしまっても問題ありません。しばらく待機しているとターミナル上でアカウントを選択する画面が表示されます。
アカウント選択後、下記の内容が表示され全て完了となります。
“Logged into store [ストアurl（ドメイン）] in partner organization [アカウント名]”
Theme Kitを使用していた人なら、環境構築が圧倒的に簡単になったことを実感していただけると思います。
Step2.テーマを新規作成
接続完了後は、テーマを新規作成できます。コマンドは下記の通りです。
“shopify theme init [テーマ名] [-u Gitリポジトリのurl]”
上記を入力するとtheme nameを求められますので、好きなテーマタイトルを入力します。
Shopify Online 2.0では、デフォルトのテーマが「Dawn」ですので、このコピーが作成されることになります。
Step3.既存テーマのダウンロード
既存テーマをダウンロードするには2つの方法があります。
1つは「テーマのIDを指定する」方法。2つ目は「IDを指定せず、ターミナルでダウンロードしたいものを選択する」というものです。
IDを指定する場合、Shopifyストアの管理画面から「オンラインストア→テーマ→カスタマイズ」へと進み、画面上部に表示されるIDを確認します。その後、下記のコマンドを実行してください。
“shopify theme pull [-i テーマのID]”
現在選択しているディレクトリにテーマが展開しますので、あらかじめ特定のディレクトリに移動後、「pull」するようにしてください。
IDを指定せず、ターミナルでダウンロードしたものを選択する場合は、下記のコマンドを実行します。
“shopify theme pull”
上記のコマンドを実行すると、現在インストールされているテーマが一覧で表示されます。この中から、ダウンロードしたいものを選択して「Enter」を押せば、ダウンロードが開始されます。
上記、どちらの方法を使っても適切にダウンロードされれば「Theme pulled successfully」と表示されますので、これで完了となります。
Step4.開発する
テーマがローカル環境で準備できましたので、開発を進めます。ローカル環境で開発したテーマをブラウザで確認するには下記のコマンドを使用します。
“shopify theme serve”
上記コマンドを実行すると、次の3つのURLが表示されます。
- Please open this URL in your browser:http://127.0.0.1:9292
- Customize this theme in the Online Store Editor:https://[ストアURL].myshopify.com/admin/themes/[12桁の数字]/editor
- Share this theme preview:https://[ストアURL].myshopify.com/?preview_theme_id=[12桁の数字]
1は開発テーマへのリンクとなっています。2は管理画面のエディター、3は他の開発者と共有することができるリンクです。
ただ、どれも実際のECストアにアップロードされているものではなく、あくまでもプレビューされている画面ですので、間違えないように注意してください。
実際にコードを編集すると、プレビュー画面にリアルタイムでその内容が反映されていることを確認いただけると思います。
Step5.編集したものをアップロード
編集が完了したら、次に実際のECストアにアップロードします。必要なコマンドは次の通りです。
“shopify theme push”
テーマIDを指定してアップロードする場合は下記のコマンドになります。
“shopify theme push –themeid [テーマのID]”
その他、pushコマンドにはいろいろなオプションがあります。
例えば「ユーザーにはまだ非公開の状態でECサイトにアップロードする」、「Shopifyからリモートファイルを削除することなく、ローカルファイルをアップロードする」、「指定されたファイルのみをShopifyにアップロードします」などが用意されています。
詳しくは下記のページでオプションの種類を確認することができます。
引用：Shopify.dev
よく使用するコマンド
Shopify CLIで環境を構築する際、よく使用するコマンドがいくつかありますので、ここで整理しておきます。
loginコマンド
Shopify CLIで指定したストアに認証し、ログインする際に利用します。
“shopify login –store <domain>”
また、アクセスするストアを変更する場合は、下記のコマンドを利用します。
“shopify switch –store <domain>”
logoutコマンド
Shopifyアカウントやパートナーアカウントからログアウトする際に使用します。logoutコマンドは、認証情報をクリアしてしまいますので、再度ストアに接続する場合は、再認証してください。
“shopify logout”
whoamiコマンド
どの店舗にログインしているかを判断します。
“shopify whoami”
populateコマンド
テーマの動作をテストするためのデータをストアに追加するコマンドです。現在接続しているストアが表示されます。populateコマンドは、入力するデータの種類をあらかじめ指定することができます。
“shopify populate [ products | customers | draftorders ] [ –count <NUMBER> ]”
エラーが出た場合の対応
「pull」や「push」、その他様々なコマンドを利用していると、エラーが表示されることがあります。
その場合はRubyを最新バージョンにアップデートしたり、開発ストアやターミナルでログアウト後、再度ログインするなどを試してみてください。その後、「pull」や「push」コマンドを実行し直すことで、エラーを解消できる可能性があります。
Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。
Shopify CLIのバージョンを確認・更新する方法
Shopify CLIのバージョンは、下記コマンドを実行し確認します。
“shopify version”
上記コマンドを実行後、すぐに現在のバージョンが表示されます。
万が一、新しいバージョンがある場合は、下記の文言が表示されます。
A new version of Shopify CLI is available! You have version [現在のバージョン名] and the latest version is [最新のバージョン名].
To upgrade, follow the instructions for the package manager you’re using:
https://shopify.dev/tools/cli/troubleshooting#upgrade-shopify-cli
コマンドラインの最終行にURLが表示されますので、こちらをクリックすれば更新が行われます。
Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。
Shopify CLIについてお悩みなら
引用：Shopi Lab
Shopify CLIなら、Theme Kitに比べて、簡単にローカル環境でテーマをカスタマイズすることができます。
ただ、実際に使用していると、疑問点が生じたり、上手くカスタマイズできないこともあります。その場合は、Shopifyの運用知識が豊富なShopi Labに直接、無料相談をしてください。
Shopi LabではShopify CLIの利用法から、ECサイトの収益を最大化するマーケティング方法まで、Shopifyに関する幅広い知識に精通していますので安心してご相談いただけます。
Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。
まとめ
今回は、Online Store2.0で推奨されているShopify CLIについて解説してきました。
Shopify CLIは、Shopify Theme Kitの機能をほぼ全て引き継いでいますので、Online Store 2.0の機能を活用せずにテーマ開発をするなどの場合を除いて、ぜひ利用を検討してみてください。
Shopify制作のお見積もり・ご相談
また、初めてのお取組みで不安のある方などもご不明点などはお気軽にご連絡ください。
に相談する 