目次

1. はじめに
2. 解決策の概要
3. Shopifyの注文データを取得し、注文情報のタグ（Tags）欄に出力する流れ

   1.Shopify FlowのRun codeを活用して注文データを取得

   2.Run codeで整形した出力データを注文のタグ(Tags)情報欄に挿入

4. まとめ

   ● Run code用：GraphQL クエリ

   ● Run code用：SDL定義（スキーマ）

   ● Run code用：JavaScript コード（Run code内）

はじめに

Shopifyの注文管理画面には標準でエクスポート機能が備わっていますが、出力されるCSVには注文番号や注文された商品名などの標準的な情報しか含まれていません。そのため、普段からECを運営する事業者様からShopify上で保持されている他の情報を取得できるようにして欲しいという要望は度々受けることがあります。今回は「エクスポートされたファイルに配送先住所の氏名を追加したい」という要望を受けました。

通常、注文データのエクスポートには『Matrixify』などの外部アプリを使うと柔軟なカスタマイズが可能です。しかし、今回のケースでは、Shopifyの標準エクスポート機能で出力されたCSVフォーマットをそのまま使用する必要がありました。なぜなら、このフォーマットに依存した外部システムとの連携がすでに組まれていたからです。そこで、標準のエクスポート機能を活かしながら、配送先住所の氏名をCSVに追加する方法を考えました。

本記事では、Shopify Flowを活用し、エクスポートした注文データの注文情報のタグ（Tags）欄に配送先住所の氏名を自動追加する方法を紹介します。

解決策の概要

今回のアプローチでは、以下の手順で注文情報のタグ（Tags）欄に配送先住所の氏名を自動追加します。

Shopifyの注文データを取得し、注文情報のタグ（Tags）欄に出力する流れ

Shopify Flowの Run code を使用し、GraphQL API を通じてShopifyから注文情報を取得します。取得したデータは、JavaScript を使って表示させたい形に整形し、注文情報のタグ（Tags）欄に出力されるようにします。
今回はクライアント様の要望としては「配送先の氏名を抽出し、氏名の間に全角スペースを入れて注文情報のタグ（Tags）欄出力されるようにして欲しい」という内容でご依頼を頂きました。
記事の冒頭で説明した通り、外部システムとの連携にShopify標準の注文管理のエクスポート機能の出力ファイルをそのまま用いていることもあり、柔軟に編集できず、出力ファイルに注文情報を別途追加する場合には、これまではファイルをExcelで開いて配送先の氏名を調べてわざわざ氏名の間に全角スペースを入れる編集作業をした後に外部連携を実行していたという背景がありました。

実際のワークフローは以下の図のようになります。
注文生成トリガーの発火後に、Wait（待機）処理で5秒を入れているのは、Shopify Flowの仕様上、数秒間の間をあけてから処理を実行しないと上手く処理が実行されないケースがあるためその予防策として入れてます。5秒というのは明確な根拠はないです。今回のケースではWait処理を入れないことでワークフローは成功となったものの実際にはタグ(Tags)情報内に配送先の氏名が出力されないということが起こり得ます。

1.Shopify FlowのRun codeを活用して注文データを取得

Shopify Flowの説明についてはこちらを、Run codeの説明についてこちらのShopifyヘルプセンターの記事を参考にしてください。本記事では詳細な説明については割愛します。
Shopify FlowのRun codeは、カスタムのJavaScriptコードを実行できる機能です。この機能を使用することで、Shopifyの標準的なワークフローにない処理を柔軟に組み込むことができます。Run codeでは、まずGraphQLを使ってShopifyから必要なデータを取得し、そのデータをJavaScriptで処理して最終的な結果を返すという流れになります。これにより、注文データや商品情報など、標準機能では得られないカスタマイズしたデータを取り扱い、ワークフロー内で活用できるようになります。

実際にRun codeアクションに入力したコードのイメージが以下の図の通りになります。実行すると、Shopify Flowで取得された注文データの中の注文IDと配送先の氏名（※氏名の間に全角スペースが入った状態）が取得され、注文情報のタグ（Tags）欄に挿入する準備が整います。コードの詳細は最後に載せてます。

2.Run codeで整形した出力データを注文のタグ(Tags)情報欄に挿入

ワークフローのアクションから「Send Admin API」を選択し、下図の通りにorderUpdateのmutationを用いて「タグ(Tags)情報」に「配送先氏名」を入れる処理が実行されるようにします。orderUpdateのmutationについては以下のShopify開発者サイトの情報を参照ください。

orderUpdate - GraphQL Admin

詳細については下図を拡大してご確認頂くと便利です。「変数を追加する」リンクボタンをクリックし、Run codeで出力される変数を選択します。

この設定により、ワークフローが実行されるたびに、{{runCode.shippingAddressName}} のデータが 注文情報のタグ(Tags)情報に出力されていきます。実際にテスト注文を行い、ワークフローが実行された後のShopifyの注文管理の詳細画面は以下のようになります。

Shopifyの注文管理のエクスポート機能の出力ファイルのタグ(Tags)情報欄にも同様に配送先氏名(※氏名の間に全角スペースあり)が出力されるようになります。

まとめ

今回紹介した方法を使えば、Shopifyの標準エクスポート機能で出力したファイルのタグ(Tags)情報欄に「配送先の氏名」を挿入することが できます。

✅ Shopify FlowのRun codeで注文情報の配送先の氏名を取得し整形
✅ ワークフローの「Send Admin API」アクションで整形したデータを注文のタグ(Tags)情報欄に挿入

今回は「配送先の氏名」を追加するケースでしたが、ShopifyのRun code でGraphQL APIを活用すれば、Shopify内で保持される他の注文情報も注文のタグ(Tags)情報欄に挿入可能です。

Shopifyのエクスポート機能をもっと便利に使いたい方は、ぜひこの方法を試してみてください！読者様のお役に立ちますように！

Run codeの詳細なコードはこちらです↓↓↓

※尚、本稿のコードやワークフローをそのまま利用して不都合が生じた場合のいかなる責任は負いかねますのでご利用の際は必ず検証環境でテストをして頂けますと幸いです。

● Run code用：GraphQL クエリ

query{
  order{
    id
    shippingAddress{
      firstName
      lastName
    }
  }
}

● Run code用：SDL定義（スキーマ）

type Output {
  orderId: ID!
  shippingAddressName: String!
}

● Run code用：JavaScript コード（Run code内）

export default function main(input) {
  const orderId = input?.order?.id;
  const lastName = input?.order?.shippingAddress?.lastName?.trim() || "";
  const firstName = input?.order?.shippingAddress?.firstName?.trim() || "";

  let shippingAddressName = "";
  if (lastName && firstName) {
    shippingAddressName = lastName + '\u3000' + firstName;
  } else {
    // どちらか片方しかない場合はそれだけを表示
    shippingAddressName = lastName || firstName;
  }

  return {
    orderId: orderId,
    shippingAddressName: shippingAddressName
  }
}