How to use “Shopify App CLI”

こんにちは！3児のパパエンジニアの笹垣です。

先日カナダで開催されたShopifyパートナー＆デベロッパー向けのカンファレンスShopify Unite 2019に私も参加させていただいたのですが、今回はその中で発表された “Shopify App CLI” について書きたいと思います。

Shopify Unite 2019の話はこちらをご覧ください。

“Shopify App CLI”とは

The Shopify App CLI automatically generates the code you need to build a Shopify app within a command-line interface (CLI) tool.
With a few commands, developers can scaffold their app in seconds and easily generate sample data—like products, orders, or customers—on test stores, without having to switch tools.

https://www.shopify.com/partners/blog/shopify-unite-announcements-2019

Shopifyアプリを構築するために必要なコードをコマンドにより自動生成することができ、開発者は数秒でアプリを作成できるようになるというもの。

これまでもRubyやNode.js向けのShopify製SDKやパートナーが作成したPHPのプラグイン等は存在し、比較的容易にアプリの立ち上げを行うことはできましたが、アプリ開発にまだ慣れていない人にとっては、Shopify App CLIがあることで、アプリの立ち上げにかかる労力を少なくし、本機能の開発に集中できるのではないかと思います。

それでは早速Shopify App CLIを使用し、コードの自動生成から実際にShopifyの管理画面上でアプリを動かすところまでやってみます。

はじめに

まずはShopify App CLIをインストールします。
以下のコマンドをターミナルで実行します。

$ eval "$(curl -sS https://raw.githubusercontent.com/Shopify/shopify-app-cli/master/install.sh)"

インストールが完了したら、今回作成するアプリのプロジェクトを作成します。

$ shopify create project sample_cli_app

上記コマンドを実行すると、Node.jsで作るか、Ruby on railsで作るかを聞かれます。

今回はNode.jsで作成するため「1」を選択します。

? What type of app project would you like to create? (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. node embedded app
  2. rails embedded app    

しばらくすると以下の画面が表示されます。
ngrokのURLは後ほど使用するためメモをとっておきましょう。（https://xxxxxxxx.ngrok.io）

? What type of app project would you like to create? (You chose: node embedded app)
 ✓ ngrok tunnel running at  https://xxxxxxxx.ngrok.io
 ✔︎ node v12.8.0
 ✔︎ npm 6.10.2
 ┏━━ Cloning into sample_cli_app… 

... 
（省略）

次に実際にアプリをShopify上で動かすために、パートナーダッシュボードから今回作成するアプリとテスト用ストアを作成します。

アプリの作成

Shopifyパートナーダッシュボードにログインし App ＞ Create app からアプリを作成します。

アプリの作成が完了すると、API keyとAPI secret keyが表示されるのでメモをとります。

テスト用ストアの作成

続いてアプリの動作を確認するためのテスト用ストアを Stores ＞ Add store から作成します。

ローカルサーバーを起動

Shopify App CLIの serve コマンドによりローカルサーバーを起動し、Shopifyプロジェクト作成時に表示されたngrokのURLでアクセスできるようにします。

$ shopify serve
? What is your Shopify API key?
 > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX　← API key
? What is your Shopify API secret key?
 > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX　← API secret key

Shopify API keyとAPI secret keyを聞かれるので先程メモした各keyをコピペします。

? What is your development store URL? (e.g. my-test-shop.myshopify.com)
 > app-cli-develop.myshopify.com　← テスト用ストアURL

次にアプリを使用するストアのURLを聞かれるので、先程作成したテスト用ストアのURLを入力します。

テスト用ストアへのアプリインストール

ローカルサーバーが起動しインターネットからアクセスできるようになったら、テスト用ストアにアプリをインストールします。
アプリをインストールするには、ブラウザから以下のインストール用URLにアクセスします。

https://xxxxxxx.ngrok.io/auth/?shop=app-cli-develop.myshopify.com

するとテスト用ストアにリダイレクトされアプリインストール画面が表示されるためインストールボタンをクリックすれば完了です。

インストールが完了するとリダイレクトされ管理画面内でアプリの画面が表示されます。

ここまででShopifyアプリの立ち上げは完了です！

ここから本格的に機能を実装して行く形になりますが…次回以降乞うご期待！

おまけ

Shopify App CLIには、アプリ開発の他にページやダミーデータを作成するコマンドなども存在します。

詳しくはこちら

ダミーデータを作成するコマンドはアプリ開発だけではなく、ストア構築を行う際にもとても便利なのでぜひ使ってみてください。

# ダミー商品を10点追加
$ shopify populate products

# ダミーカスタマーを10人追加
$ shopify populate customers

# ダミーのオーダー（下書き）を25件追加
$ shopify populate draftorders --count 25

では！