Shopify App CLIに関して

Cat WEBサイト構築Tag by cubismer
窓辺

かなり荒い個人的メモです。

[追記:2021.8.16]
Unite以降でテーマ作成においてもCLIの利用が必須(なのか少々疑問ですが)になったので、再度試し直し、記事の内容も書き換えています。

Shopify App CLI

上記は一部でしかなく、https://shopify.dev/themes/tools/cli/の中にドキュメントがまとまっています。

日本語情報では以下の記事が分かりやすかったので、とりあえず触って覚えるからともかく動かしたいという場合にはお勧めできます。

メモ

以下は触ってみてのメモ。

インストールの手順

前述の日本語記事で概ね問題ないと思いますので、当記事では多少具体的な事柄を中心に記載します。

Shopify CLIはグローバルインストール

基本的にはShopify CLIはグローバルインストールになると思います。
そのためインストールだけではなくインストール後の再起動であっても、どのディレクトリにいても実行できるはずです。

テーマの編集権限を持つアカウントが必要

You can log into a development store or a Shopify store. You need to have collaborator access to the store, or be a staff member or owner of the store. To switch between stores that you have access to, use shopify switch.

当然ではありますがテーマを編集するのですから、上記にあるように編集権限のあるアカウントが必要になります。

権限さえあれば良いともいえるので、スタッフアカウントでもコラボレーターアカウントでもよいと思われます(※実際にそれぞれでクライアントのストアにアクセスしたことがないため未確認)。

テーマはディレクトリにインストール

開発用ディレクトリに移動して、そこで以下のようにテーマを新規作成すると、　開発ディレクトリの下層に指定したテーマ名でディレクトリが作成し、その中にテーマのファイルが入ってきます。


$ shopoify theme init [テーマの名前]

なお、$ shopoify theme initのようにテーマ名を省略したコマンドを打った場合は、以下に書かれているように現在はDawnテーマがインストールされます。

By default, this command creates a copy of Dawn, Shopify’s example theme.

インストール後の操作1:theme serverを使う場合

CLIをインストールしテーマを入れたところで作業を止め、後日theme serverを使用して作業を開始するという前提で記載します。

  1. ターミナルで、インストールしたテーマディレクトリに移動
  2. shopify login –store https://example.myshopify.com/で目的のストアにログイン
  3. shopify theme serveでローカル内で環境立ち上げ
  4. ターミナル内にViewing theme…という枠線で囲まれたURL情報が出力されるので、必要に応じてテーマにアクセスする
  5. 作業を終えたり休止したりする場合は、Ctrl+Cでtheme serveを止める

テーマコマンド

色々ありますが、注意が特に必要なのはpushする時だと思いますのでそちらのみ記載します。

テーマのアップロード


$ shopify theme push [ options ]
Flag Alias Description Environment variable
–store <store> -s <store> The development store that you want to use to preview your theme.

The –store flag accepts the following inputs:

  • The store prefix (johns-apparel)
  • The myshopify.com URL (johns-apparel.myshopify.com, https://johns-apparel.myshopify.com)
 SHOPIFY_FLAG_STORE
–password A custom app access token or Theme Access password for the store. SHOPIFY_CLI_THEME_TOKEN
–theme <NAME_OR_ID> -t <NAME_OR_ID> The name or ID of the theme that you want to overwrite. SHOPIFY_FLAG_THEME_ID
–development -d Pushes to your development theme. If you don’t have a development theme, then one is created. This option doesn’t require –theme. SHOPIFY_FLAG_DEVELOPMENT
–nodelete -n Pushes your local files without deleting remote files from Shopify. SHOPIFY_FLAG_NODELETE
–json -j Returns information about the pushed theme as a JSON object. SHOPIFY_FLAG_JSON
–allow-live -a Allows Shopify CLI to overwrite the live (published) theme. SHOPIFY_FLAG_ALLOW_LIVE
–live -l Pushes to the live (published) theme. This option doesn’t require –theme or –allow-live. SHOPIFY_FLAG_LIVE
–publish -p After the theme is pushed, publishes the theme so it is live in the store. SHOPIFY_FLAG_PUBLISH
–unpublished -u Uploads the theme to the theme library as a new unpublished theme.

You’re prompted to provide a name for the theme. Use the –theme flag to provide a name as a part of the command.

 SHOPIFY_FLAG_UNPUBLISHED
–ignore -x Skips uploading the specified files to Shopify. Specify multiple patterns to ignore by using the flag multiple times in a single command.

If files are excluded using .shopifyignore, then both the contents of .shopifyignore and the –ignore flag are respected.

Accepts references to files in the following formats:

  • Simple file names: templates/product.temp.json
  • Wildcards: config/*_secret.json, *.jpg
  • Regular expressions: /\.jpe?g$/. If you’re entering the command in a shell, then you might need to add additional escape characters.
 SHOPIFY_FLAG_IGNORE
–only -o Uploads only the specified files to Shopify. Specify multiple patterns by using the flag multiple times in a single command.

Accepts references to files in the following formats:

  • Simple file names: templates/product.temp.json
  • Wildcards: config/*_secret.json, *.jpg
  • Regular expressions: /\.jpe?g$/. If you’re entering the command in a shell, then you might need to add additional escape characters.
 SHOPIFY_FLAG_ONLY
–environment <ENV_NAME> -e <ENV_NAME> The environment that you want to use. SHOPIFY_FLAG_ENVIRONMENT
–path <PATH> The path to your theme directory. SHOPIFY_FLAG_PATH
–verbose Provides more detailed output in the logs. SHOPIFY_FLAG_VERBOSE
–no-color Disables color output in the logs. SHOPIFY_FLAG_NO_COLOR

CLIでテーマを生成し、新規でストアにアップロードする場合は以下の何かを実行します。


// いきなり公開テーマとして登録
$ shopify theme push --publish
// 未公開テーマとしてテーマライブラリ内に登録
$ shopify theme push --unpublished

すでに存在するテーマに対して上書き処理をする場合は以下の何かになります。
IDを指定しない方が楽な反面、対象テーマの選択を間違うと大変なので注意が必要です。


// コマンド実行後に上書き対象のテーマを選ぶ選択肢がでる
$ shopify theme push　
// IDを指定して上書きする
$ shopify theme push　--themeid <THEMEID>
本番環境のテーマエディタの内容が上書きされる場合の対処法

既存テーマにpushする際に、本番環境のテーマエディタで編集した内容が開発環境の内容で上書きされてしまいます。
この点に関しては以下が参考になるかもしれません。


// jsonファイルの除外する
$ shopify theme push --ignore */*.json

別の観点では、例えば新規で開発したセクションだけをpushできればよいということあれば、以下のように–onlyフラッグを使うことで指定ファイルのみアップロードするのが安全で効率的とも考えられます。


// ファイルを指定してpushする
$ shopify theme push　--only section/foo.liquid

CLIで新規作成したテーマをアップロードする

CLIで作業を行う際、テーマはDevelopment Themeとなり以下のような特徴を持ちます。

  • プレビュー中は開発用の非公開テーマとなり、そのままでは他のアカウントからでは確認できない
    ※共有する方法はある
    ※当然ストアにアクセスしてくるユーザーにも見えない
  • shopify logoutでCLIを終了するとストアから削除される

ただし、既にストアにあるテーマをpullしていた場合は$ shopify theme pushでストアにアップロードできるのですが、CLIで新規作成したテーマは同じコマンドではテーマが選べずpushできません。

そのためCLIで新規作成したテーマをアップロードするには、以下のコマンドを使い非公開テーマ(テーマライブラリテーマ内テーマ)としてpushする必要があります(多分)。


# 作成したテーマディレクトリ内に移動して以下のコマンドを使用
$ shopify theme push --unpublished

ダミーデータ


$ shopify populate products

上記のコマンドを打つと以下のように5商品のダミーデータをインストール可能です。


✓ spring glitter added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161466504
✓ frosty frost added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161499272
✓ floral voice added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161532040
✓ dark bird added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161564808
✓ long shape added to johns-apparel.myshopify.com at https://johns-apparel.myshopify.com/admin/products/6572161597576
Successfully added 5 Products to johns-apparel.myshopify.com
⭑ View all Products at https://johns-apparel.myshopify.com/admin/products

ダミーデータの留意点

商品のダミーデータを試しましたが、商品写真と商品説明文が空欄のようでデータがありません。

ダミーデータに求められる表示や動作確認という用途を考えると、このままでは色々不足していますので、他のダミーデータ用CSVを使った方が実用的かもしれません。

アプリで対応する

使用経験はありませんが以下のようなダミーデータを入れるアプリもあるようです。

トラブルシューティング

ストアの立ち上げやテーマの作成や編集ができない


$ shopify login --store=example.myshopify.com

上記のようにストアにログインしてから以下のようなテーマに関するコマンドを打ち込んだとします。


$ shopify theme serve
$ shopify theme pull
$ shopify theme push

すると以下のようなエラーが出る場合があります。

✗ You are not authorized to edit themes on example.myshopify.com.
Make sure you are a user of that store, and allowed to edit themes.

✗ Command not allowed with current login. Please check your login details with shopify whoami. You may need to request additional permissions for this action.

基本的には権限がないという警告になると思いますが、この解決方法は以下のドキュメントにあります。

Caution
You can’t use Shopify CLI with development stores if you only have Partner staff member access. If you want to use Shopify CLI to work on a development store, then you should be the store owner or create a staff account on the store.

If you’re the store owner, then you need to log in to the store directly using the store URL at least once (for example, using my-example-store.myshopify.com/admin) before you log in using Shopify CLI. Logging in to the Shopify admin directly connects the development store with your Shopify login.

つまり手順としては以下のようになります。

  1. 作業対象ストアにログイン(example.myshopify.com/admin)
  2. Shopify CLIを使用してログイン($ shopify loginコマンド)

上記でもエラーが消えない場合は、可能性は低いですが以下を試すことでエラーが消えるかもしれません。

スレッド内にいくつか方法が挙げられていますが、概ねストアとパートナーアカウントからログインしてまっさら状態にしてから作業を行う、というもののようです。

古い情報

主に2020.10時点でアプリ開発用の試した際の内容です。

古い情報を見る

調べたこと

こういったことをすると参照するのが公式非公式かかわらず、手順に従ってもエラーがでたり、表示される画面や内容が違うのはなぜなのか…。
なおmacOS利用が前提の内容です。

インストール/アンインストール

Shopify App CLIのインストール

//https://shopify.github.io/shopify-app-cli/getting-started/install/ に従う
//ターミナルで以下を入力(Homebrew必須)
$ brew tap shopify/shopify
$ brew install shopify-cli
パスフレーズを求められる

//場合によっては以下のような指示がでる
Enter passphrase for key '/Users/user/.ssh/rsa':

//SSHのパスフレーズがわからず間違った内容で記述すると以下のような表示になる
┃ git@github.com: Permission denied (publickey).
┃ fatal: Could not read from remote repository.
┃ 
┃ Please make sure you have the correct access rights
┃ and the repository exists.
┃ ✗ git clone failed. Have you set up SSH keys yet?
┃ ✗ https://help.github.com/articles/generating-an-ssh-key
┃ ✗ 
┃ ✗ If you know that you've set up auth for HTTPS but not SSH, run:
┃ ✗   export SHOPIFY_CLI_BOOTSTRAP_GIT_URL=https://github.com/shopify/shopify-app-cli.git
┃ ✗ And then run this script again.

//GithubにSSHの公開鍵を登録していないからエラーが出るので、作成して登録する
//ついで、ローカルに/Users/user/.ssh/configを作成して必要な記述を行い設定する
//SSH公開鍵作成の参考記事:https://www.nri-digital.jp/tech/20200525-2042/
//設定できていれば、以下を再度記述して実行するだけで完了できる
eval "$(curl -sS https://raw.githubusercontent.com/Shopify/shopify-app-cli/master/install.sh)"
//上記を使わない場合は、起動時に毎回パスフレーズを入力する必要あり？

shopify serveで起動時に毎回パスフレーズを求められる場合、入力してEnter押すとまたパスフレーズを求められ、これが延々繰り返される。何も入力せずにEnter押すとfailedと表示されるが、再度shopify serveで起動すると何もせずとも起動する。前はこうではなかったはずだが…。

Shopify App CLIのアンインストール

$ brew uninstall shopify-cli

以下は必要に応じてやることの補足。

  • shopifyシェルプロファイルからコマンドを削除する
    同じ階層にあるはずの.bash_profileの中の以下の記述を削除
    if [[ -f /HOME_DIR/.shopify-cli/shopify.sh ]]; then source /HOME_DIR/.shopify-cli/shopify.sh; fi
    シェルのリロードが必要かも。
  • 作成したアプリも不要なら手動で消す必要がある

アプリ作成

アプリの作成

カスタムアプリかパブリックアプリを選ぶ必要があるが、詳細は上記に情報あり。

アプリはターミナルの現在地点に作成される。そのためアプリを作成する前に目的のディレクトリに移動している必要がある。


//開始するには以下を入力。
//nameの値は任意だが、--name=app-name を付けずに実行すると ?App Name とでて設定できる。
//$ shopify create project apps と書かれている記事もあるが、これだとエラーになる。
//projectの部分をnodeかrailsのどちらかを記載する必要がある
$ shopify create node apps --name=app-name

//以下のように Public か Custom のどちらかをを選ぶ。配布目的ではなく単一の案件に用いるものならばCustom(カスタムアプリ)を選べば良いはず。
? What type of app are you building? (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Public: An app built for a wide merchant audience.
  2. Custom: An app custom built for a single client.

//以下の記述のあとで、以下のようなURLが表示される。
//アクセスしてアカウントを選べば Authenticated Successfully, this page will close shortly. とでてターミナルの処理が進む。
Please open this URL in your browser:
https://accounts.shopify.com/oauth/authorize?client_id...(省略)

//この時点で Shopify Partners ダッシュボードの「アプリの管理」の画面に、作成したアプリが追加されている。
アプリを起動して作業を行う

//以下でアプリを起動。
$ shopify serve

//以下の文言が表示され、続いてURLが出力される
Please open this URL in your browser:

//上記で出力されたURLをコピペしてブラウザでアクセスすると以下が表示される
//ngrokにアカウントを作っている場合は、以下のngrok.ioの次に, with account アカウント名がつく
✓ ngrok tunnel running at https://xxxxxx.ngrok.io
✓ .env saved to project root

//URL変更するかどうかを確認
? Do you want to update your application url? (You chose: yes)

//以下に書かれているようにControl-T(単純にキーボードのControlとTを押すだけ)を押す
//URLが表示されるのでそこにアクセス
✓ Whitelist URLS updated in Partners Dashboard
⭑ Press  Control-T to open this project 〇〇〇〇.myshopify.com 

//監視状態なる
//以降はファイルを保存する度に自動で反映される
┃ [ event ] build page: /
┃ [ wait ]  compiling ...

//shopify serve　を終了する
//ctrl+c で止める
//以下も必要?
$ shopify logout
時間経過でngrok側がエラーを出した場合の対応方法

Tunnel Expired
This tunnel expired 9 hours ago.
Sign up for a free account so that your tunnels don’t time out or you can restart ngrok to get a new tunnel.
Anybody can use ngrok without an account, but there are limits on how long tunnels can stay open and how much bandwidth they can process. Sign up for a free account so your tunnel don’t time out and also get more bandwidth, http basic auth, tcp tunnels, custom subdomains and more.
The error encountered was: ERR_NGROK_708

ngrokにアカウント登録していないと時間経過でトンネルがタイムアウトになり、上記のようなエラーがでる。

具体的な対策は以下ページにあるので結論部分のみ引用

shopify cli をインストールした次の日、いきなりつまづいた – Qiita

  1. ctrl+cで立ち上がってるshopify serveを止める。
  2. ngrokにサインアップ
  3. shopify tunnel auth [authkey] で認証キーを登録
  4. shopify tunnel stop でngrokのトンネルをストップ
  5. shopify serve　で起動

なお、ngrokのauthkeyはサイドナビの「Authentication」の「Your Authtoken」ページの「2. Connect your accountにある」
「Tunnel Authtokens」ではないので注意。

コマンドの確認

//ターミナルで以下を入力するとコマンドの一覧が表示される
$ shopify help

connect: Connect a Shopify App CLI project. Restores the ENV file.
  Usage: shopify connect

create: Create a new project.
  Usage: shopify create [ node | rails ]

logout: Log out of a currently authenticated Organization and Shop, or clear invalid credentials
  Usage: shopify logout

update: Update Shopify App CLI.
  Usage: shopify update

Project: 2006_shopyfi_custom_apps (Node.js App)
Available commands for Node.js App projects:

deploy: Deploy the current Node project to a hosting service. Heroku (https://www.heroku.com) is currently the only option, but more will be added in the future.
  Usage: shopify deploy [ heroku ]

generate: Generate code in your Node project. Supports generating new billing API calls, new pages, or new webhooks.
  Usage: shopify generate [ billing | page | webhook ]

open: Open your local development app in the default browser.
  Usage: shopify open

populate: Populate your Shopify development store with example customers, orders, or products.
  Usage: shopify populate [ customers | draftorders | products ]

serve: Start a local development node server for your project, as well as a public ngrok tunnel to your localhost.
  Usage: shopify serve

tunnel: Start or stop an http tunnel to your local development app using ngrok.
  Usage: shopify tunnel [ auth | start | stop ]

Shopifyのアプリ作成のチュートリアル

上記が公式のチュートリアルですが、これはShopify App CLIを使ったものではなく、Shopify App CLIでやっている環境構築からの模様です。

しかし「Build a Shopify App with Node.js and React」のページなどはそのままチュートリアルに使えるため、前半は流し見でこの辺りから取り組むのもよいかと思います。

Shopify CLIとTheme Kit

個人的な認識なので間違っているかもしれませんが、以下のような理解です。

  • OS2.0のテーマでもTheme Kitで作業可能だが、今後もずっと使えるのかは不明
  • CLIはSlateだけではなくTheme Kitの進化版でもあり、Shopify CLIの使用は強い推奨
  • OS2.0に絡まない古いテーマはTheme Kitの利用を推奨
  • CLIは開発に必要な環境が付属しているので高機能

公式でもその他のサイトでも「CLI以外では絶対ダメ」という情報は目にしないように思われ、対して「CLIを使う必要がある」という表記はよく見ます。
しかしその後に続く説明はCLIの機能ばかりで、肝心の必要性に関する根拠が明確に書かれている情報を見たことはないように思います。

他には「最新のテーマをサポートしていない」という表記もありますが、具体的に何がどうなるのかという点は不明です。
ただしサポートしないことでなんらかの編集不可要素がでてくるかもしれず、その場合はTheme Kitは使用不可と言えるでしょう。

なおSlateのようにTheme Kitを廃止する可能性はそれなりにありますが、OS2.0公開付近で以下のようなTheme Kitでアクセスを簡易にするアプリも公開されたことを考えると、即座に廃止される可能性は低そうに見えます。

Theme KitでもOS2.0が編集可能である根拠

  • OS2.0であってもコンパイル前の状態でアップロードしているのであって、コンパイルされた後の状態をShopifyにアップロードしているわけではない
  • Shopify管理画面で行えるコード編集機能で作業可能なので、最低限ファイルの書き換えさえできればよいはず

OS2.0のテーマがローカルでコンパイルしたファイルをサーバーにアップロードする形であれば、Shopify CLIは必須でTheme KItは利用不可と言えますが、そういう形ではないようなので、必然的にTheme Kitでも編集は可能という判断です。

Shopify CLIは不要といいたいのではありませんが、簡単な文言の編集をする目的であれば、前出のアプリの以下のメリットによりクライアントの負担が減る点からTheme Kitの有用性はあるとは思います。

  • Share Theme Kit passwords that provide theme-only access to your developer partners, without the need to create a staff account
  • Create as many Theme Kit passwords as you want
  • View and manage all of your Theme Kit passwords in one place
  • Revoke any partner’s theme access with one click
  • Share Theme Kit passwords over email using a secure link that expires in 7 days or after it has been viewed

Theme Kitの利用に関して「今後問題がでる」「現時点でも問題が出ている」などであれば具体的知りたいところです。

結び

まだまだ調べ中。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄