Shopify Flowは、設定した条件に応じてトリガーを発動し、さまざまなアクションを実行できる自動化プラットフォームです。標準のトリガーだけでも一般的なストア運営でよく利用されるイベントをカバーしていますが、特定のビジネスプロセスやユースケースに対応するために、オリジナルのトリガーを組み込むアプローチは大きな強みを発揮します。
たとえば、商品が入荷したタイミングを検出して自動的にメール配信を行う、注文ステータス変更時に外部サービスへ通知する、といったシナリオは、工夫次第でさらに多彩なプロセスへ拡張可能です。公式ドキュメント（Create Flow triggers）では、新しいトリガーの設計から実装手順までが詳しく解説されており、自社のニーズに合わせた高度な自動化ワークフローを構築する手掛かりになります。
本記事では、カスタムトリガーを利用するメリットや導入時の基本的な流れに触れながら、Shopify Flowをさらに活用するためのポイントを整理していきます。多様化するEC環境のなかで効率と精度を両立させる取り組みとして、ぜひ検討してみてください。
Shopify Flowとは
Shopify Flowは、ドラッグ＆ドロップ操作を中心としたノーコードの自動化プラットフォームであり、ビジネス上のさまざまなタスクを効率化するために設計されています。ストア内での注文や在庫の管理をはじめ、顧客対応、リスク分析といった幅広い領域に対応することで、ショップ運営者の業務負荷を大幅に軽減します。標準で用意された豊富なトリガーとアクションを、直感的に構築できるワークフローとして組み合わせることで、多数の繰り返し作業を自動化し、人為的なミスの削減やレスポンススピードの向上にも寄与します。
さらに、Shopify Flowはプログラミングの専門知識を必須としないため、開発リソースに限りがある中小規模の事業者でも導入しやすいのが魅力です。シンプルなフローで簡単に始めることができる一方で、高度なワークフローを構築すれば、エンタープライズレベルの大規模事業にも対応可能です。バックオフィス業務だけでなく、マーケティングや顧客ロイヤルティ向上の取り組みにも生かしやすいため、ビジネスを拡大する際にも柔軟性を発揮します。
カスタムトリガーの導入
Shopify Flowのトリガーにあるように標準でほとんどのユースケースをカバーしています。しかし、特定のビジネスプロセスやユースケースに対応するために、オリジナルのトリガーを組み込むことが有効です。カスタムトリガーを導入することで、Shopify Flowの自動化範囲を拡大し、より効率的なオンラインビジネス運営を実現できます。
カスタムトリガーを使うケースとして以下のような例が挙げられます。
- 独自レビューアプリでレビューが投稿されたとき オンラインサイト上での商品レビューを自動的に収集し、レビュー内容に応じて商品の評価メタフィールドを更新する。
- 埋め込みアプリの監査として 影響の大きいアプリの変更を検知し、変更内容に応じてメール通知をするflowのトリガーとして利用する。
カスタムトリガーの実装紹介
今回は埋め込みアプリから手動でトリガーをフックする簡単な例を紹介します。アプリの初期化が完了していることを前提としてします。
まだの場合は、Scaffold an appを参考にアプリを作成してください。
カスタムトリガーの作成
トリガーのApp extensions を作成します。以下のコマンドを実行して、新しいApp extensionsを作成します。
shopify app generate extension --template flow_trigger --name custom_trigger
これで、extensions/custom-trigger ディレクトリが作成され、Triggerの雛形が生成されます。
入力データの定義
トリガーに渡すデータを定義します。作成したextensionのshopify.extension.tomlを編集して、トリガーの入力データの定義を追加します。
[[extensions]]
name = "custom_trigger"
handle = "custom-trigger"
type = "flow_trigger"
description = "Custom Trigger"
[settings]
[[settings.fields]]
type = "single_line_text_field"
key = "FlowName"
[[settings.fields]]
type = "product_reference"
[[settings.fields]]が入力データの定義です。typeには入力データの型を指定します。keyには入力データの名前を指定します。
今回はシングルテキストのフィールドFlowNameと商品リファレンスのフィールドを定義しています。リファレンス型は商品以外にも注文データやカスタマーデータなど、Shopifyのデータ型を指定できます。詳細はTrigger referenceを参照してください。
アプリスコープの設定
商品リファレンスを使うために、アプリスコープを設定します。アプリルートのshopify.app.tomlにread_productsを追加します。
[access_scopes]
scopes = "read_products"
トリガー実行ページの作成
トリガーが実行されたときに表示されるページを作成します。app/routes/app._index.jsxを編集して、トリガーが実行ボタンがあるページを準備します。
import { useEffect, useState } from "react";
import { useFetcher } from "@remix-run/react";
import { Page, Button, Banner } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }) => {
await authenticate.admin(request);
return null;
};
export const action = async ({ request }) => {
const { admin } = await authenticate.admin(request);
const response = await admin.graphql(
`#graphql
mutation flowTriggerReceive($handle: String, $payload: JSON) {
flowTriggerReceive(handle: $handle, payload: $payload) {
userErrors {
field
message
}
}
}`,
{
variables: {
handle: "custom-trigger",
payload: {
FlowName: "flow1",
product_id: 7956429963364,
},
},
},
);
const responseJson = await response.json();
const errors = responseJson.data.flowTriggerReceive.userErrors;
if (errors.length) {
return {
status: 400,
json: {
errors,
},
};
} else {
return {
status: 201,
};
}
};
export default function Index() {
const fetcher = useFetcher();
const [showBanner, setShowBanner] = useState(false);
const isLoading =
["loading", "submitting"].includes(fetcher.state) &&
fetcher.formMethod === "POST";
useEffect(() => {
if (fetcher.data?.status) {
setShowBanner(true);
}
}, [fetcher.data]);
const generateProduct = () => fetcher.submit({}, { method: "POST" });
return (
<Page>
<TitleBar title="Flow Trigger App">
<button variant="primary" onClick={generateProduct}>
Kick off flow
</button>
</TitleBar>
{showBanner && (
<Banner
title={fetcher.data?.status === 201 ? "Success" : "Error"}
tone={fetcher.data?.status === 201 ? "success" : "critical"}
onDismiss={() => setShowBanner(false)}
>
{fetcher.data?.status === 201
? "Flow triggered successfully"
: fetcher.data?.json?.errors?.[0]?.message ||
"Failed to trigger flow"}
</Banner>
)}
<Button
loading={isLoading}
onClick={generateProduct}
fullWidth
size="large"
>
Kick off flow
</Button>
</Page>
);
}
重要なのはflowTriggerReceive mutationの呼び出しです。このmutationを実行することでトリガーがフックされます。
handleには作成したextensionのhandleを指定します。payloadにはトリガーに渡すデータを指定します。flow_nameにはトリガーの入力データの名前を指定します。product_idには商品IDを指定します（サンプルストアには7956429963364の商品があります）。gidの形式で指定しない点に注意してください。
デプロイ
設定が完了したら、スコープも変更しているのでデプロイします。
shopify app deploy
Shopify Flowの作成
新しいワークフローを作成します。このとき、トリガー一覧に先ほど作成したカスタムトリガーが表示されていることを確認してください。トリガーを選択し、アクションを追加してワークフローを構築します。
条件を設定してみます。商品リファレンスが設定されているので、商品の情報を取得して条件分岐を行うことができます。商品在庫が10個以上あるかチェックします。
条件に合わせてアクションを追加します。変数を使ってログを出すだけのシンプルなアクションです。設定できたらワークフローを有効化してください。
動作確認
以下のコードを実行しサーバーを起動します。
shopify app dev
埋め込みアプリを開いて、ボタンをクリックするとトリガーが発動し、Flowが実行されます。
実行後、flowの実行結果を確認してみます。ログが出力されていれば成功です。
在庫を減らして再度ボタンをクリックすると、少ないことを示すログが出力されます。
以上でカスタムトリガーの実装が完了しました。あとはストアの要件に合わせてタグ付けしたり、メール送信などのアクションを追加していくことで、より高度な自動化ワークフローを構築できます。
補足
クイックに動作確認したく、Shopify GraphiQL Appで確認しようとしましたが、JSON型の引数をうまくパースしてくれず、エラーが発生しました。そのため、Shopify Admin APIを利用してmutationを実行しました。もしShopify GraphiQL Appでの実行方法があれば、ぜひ教えていただきたいです。
まとめ
Shopify Flowのカスタムトリガーを活用することで、ビジネスプロセスの自動化範囲を拡大し、ストア運営の効率化を図ることができます。本記事では、カスタムトリガーの導入手順と実装例を紹介しましたが、Shopify Flowの機能はさまざまなユースケースに対応可能です。自社のニーズに合わせたワークフローを構築するために、公式ドキュメントやコミュニティの情報を積極的に活用してみてください。Shopify Flowを活用して、より効率的なオンラインビジネス運営を実現しましょう。