Zenn
👚

Shopify埋め込みアプリを作るためにメモしたこと

2023/05/10に公開
Shopify
tech

この記事について

この記事ではShopify埋め込みアプリを開発するためにメモしたことを書いています。なお、開発中のカスタムアプリ自体はまだ未完成であり、今後また記事の続きを書くつもりです。

なぜカスタムアプリを作るのか

知り合いがShopifyでオンラインストアを出店しており、SKUの自動採番や商品タグをプリンタで出力できるようにする機能を作って欲しいとのことで、カスタムアプリを作成することになりました。

開発の流れ

開発対象と開発環境の立ち上げからカスタムアプリの配布までの大まかな流れを説明します。

アプリの種類

そもそも、Shopifyでのアプリ開発対象が複数あり、公開アプリやカスタムアプリ、カスタムアプリの中にも「パートナーダッシュボードから作成するもの」と「ストア管理画面から作成するもの」があります。
今回は単一ストア向けのShopify埋め込みアプリを作成したいので「パートナーダッシュボードから作成するもの」のカスタムアプリを作成しています。
「ストア管理画面から作成するもの」のカスタムアプリを作成を選ばない理由としては埋め込みアプリに必要なAppBridgeなどが使用できない等があります。

埋め込みのカスタムアプリを作る手順

基本的には

  1. 開発環境の立ち上げ
  2. 機能の実装
  3. デプロイ
  4. カスタムアプリの配布

の順で開発していくと思います。幸い公式のドキュメントに細かな手順が載っているので、そちらを読むと良いかもしれません。

  1. https://shopify.dev/docs/apps/getting-started/create を読みShopifyCLIを使った開発環境のセットアップをする。
  2. https://shopify.dev/docs/apps/getting-started/build-app-example を読みフロントエンドとバックエンドを実装。
  3. https://shopify.dev/docs/apps/deployment を読み作成したカスタムアプリをデプロイ。
  4. https://shopify.dev/docs/apps/distribution/select-distribution-method を読み作成したカスタムアプリを使用できるようにインストールリンクを作成。

といった流れです。
2ではAdminAPIから在庫データを取得する際にフロントエンドからのAPIリクエストを受け付けるミドルウェア(カスタムREST API)をあらかじめ用意する必要があります。GraphQLのリクエストもここで記述するのですが、一度GraphiQL Explorerをつかってクエリの確認をした方が良いでしょう。

個人的な機能実装の問題点

今回カスタムアプリで必要な機能としてSKUの自動採番がありますが、GraphQL AdminAPI でProductVariantsのSKUを部分一致で検索できないという問題があります。

https://community.shopify.com/c/shopify-apis-and-sdks/graphql-api-search-products-variant-with-part-of-sku/m-p/664130

リプライにもある通り、Productsからワイルドカードの部分一致の検索はできるようになりましたが、variantごとにSKUを設定している場合firstの指定次第で結果からいくつかの要素が失われてしまいます。

対策としてチュートリアルにもあったようにデータをSQLiteなどデータベースに保存する仕組みが考えられますが、Shopify側の在庫データと同期を取れないと自動採番に誤りが起きてしまったり、そもそもデータはShopify側で一元管理したいので、悩みどころです。

さいごに

Shopifyの埋め込みアプリを作るためにメモしたことをいくつか説明しました。
カスタムアプリにもいくつか種類があることやGraphQLでAdminAPIを叩くためにカスタムREST APIが必要だという点が個人的には重要かなと思いました。

参考

Discussion