Shopify Editions Summer ‘25 で発表された新機能の中から、Shopify Flow のアクション Send HTTP request のレスポンスを変数として扱う方法を解説します。
該当の Changelog はこちらです。日本語訳は「フロー： HTTPリクエスト送信アクションの改善により、外部システムへのセキュアな接続が可能になり、ワークフローにデータを返します。」です。
Flow: Improved Send HTTP request action enables secure connections to external systems and returns data to the workflow
https://changelog.shopify.com/posts/flow-improved-send-http-request-action-enables-secure-connections-to-external-systems-and-returns-data-to-the-workflow
以下、Changelogの翻訳抜粋です。
Shopify Flow の HTTP リクエスト送信アクションが改良され、シークレットを安全に保存し、後続のワークフローステップにデータを返すことで、外部サービスとの幅広い統合をサポートします。
このアクションは、Flow 内で暗号化・難読化されたアクセストークンやパスワードなどのシークレットで安全に設定することができます。
HTTP リクエストを送信した後、完全なレスポンスがワークフローに返され、JSON.parse メソッドでスキーマを定義する Run code アクションを使用して解析することで、返されたデータを条件やアクションの変数として使用することができます。
API Key や Secret を安全に保存する方法
本題からは逸れるのですが、こちらも重要なアップデートなので簡単に解説します。
Send HTTP request を使う際に設定する API Key や Secret を Flow の設定に保存して Flow 上では変数として呼び出すことができるようになりました。
シークレットを追加するテキストリンクが増えました。クリックすると シークレット追加 画面が表示されます。
新しく追加された Flow の設定画面へ遷移します。Flow のページからもいけます。
シークレットを追加 をクリックすると項目を入力する画面に遷移します。
- ハンドル：変数として指定する文字列
- シークレット値：API Key や Secret
- 説明：何のAPI Key や Secret なのか他の人もわかるようにテキストで補足
一通り入力すると シークレットを管理する 画面に変数と共に表示されます。これでシークレットを追加する設定は終わりです。
実際に Flow を作成してみましょう。トリガーはなんでも良いです。アクションに Send HTTP request を選んでください。シークレットを追加するボタンから呼び出したいシークレットを選択すると変数として設定されます。ここでは {{secrets.fullAPIKey}} という変数になっています。
これでセキュアに API Key や Secret を Flow 上で扱うことができます。
Run code アクションでレスポンスを変数にする
ここからが本番です。
Send HTTP request のレスポンスがワークフローに返されるようになり、条件としても活用できるようになりました。今回の記事では条件はすっ飛ばします。
headers の選択肢です。
レスポンスをワークフローに返されるようになり、外部サービスの WebAPI で受け取ったデータをFlow上の変数として扱い、メタフィールドを更新したり、さらにWebAPIを呼び出すことが可能になりました。
今回は最初に実行した Send HTTP request のレスポンスが下記のケースで書いてます。レスポンスの Key が id なので Run code 上の変数は {{runCode.id}} になる流れです。
{
"id": "123456789-abcd"
}
では早速ですが、先ほど作成した Send HTTP request のあとにアクション Run code を作成します。
ちょっと難しそうな画面が出てきますが3箇所それぞれ入力すべきコードを書いておきます。WebAPIのレスポンスが違うパターンの場合は、ShopifyのヘルプセンターアシスタントかChatGPTにでも聞いてください。
左上の 入力を定義する です。
query {
sendHttpRequest {
body
}
}
続いて左下の 出力を定義する です。
"The output of Run Code"
type Output {
id: String!
}
最後に右側の コードを書く です。
export default function main(input) {
const body = JSON.parse(input.sendHttpRequest.body);
return {
id: body.id
};
}
これで完成です。この Run code 以降のアクションで Send HTTP request のレスポンスが変数として指定できるようになります。ここまでくればあとは簡単な設定のみです。
↓
変数を使ってメタフィールドの追加・更新
Run code のアクションに繋げて次のアクション Update customer metafield を作成してください。メタフィールドは更新したいメタフィールドを選択肢、Valueは右下の 変数を追加する から Run code > id を指定してください。
これで WebAPI のレスポンスの値を使ってメタフィールドが追加・更新できます。素晴らしい！
変数を使いさらに別の WebAPI を呼び出す
これは変数を WebAPI の URL に変数を追加するパターンです。アクション Send HTTP request を繋げて上記と同様に右下の 変数を追加する から Run code > id を指定してください。Bodyへ変数を追加する場合も同じ要領です。
エレガント！
まとめ
この機能のリリースのおかげで Shopify App はない外部サービスと Shopify を連携させたい時に、外部サービスが WebAPI さえ提供していればだいたいのケースでなんとかなりそうな気がします。
これで Shopify へリプレイスする障壁がまた一つ減ったのではないでしょうか。Flow を初期からプッシュしてた身としては本当に待望のアップデートで実際に使ってみてこんなリッチな機能があるのに Flow は無料のアプリなのか感動しました。
