Shopify Admin上での日々の運営業務をよりスムーズに行うためには、標準機能では対応しにくい特定の操作を効率化できる拡張手段が求められます。たとえば、特定条件に合致する商品を一括で更新したり、特定の注文に対して外部サービスとの連携処理をトリガーしたりすることが考えられます。
日々の運用で何度も違うページを行き来して操作するのは非効率でトイルであり、販売者の負担になります。
そこで役立つのが「Admin actions」です。Admin actionsを利用すれば、管理画面内にカスタムボタンを追加し、販売者がワンクリックでトランザクションワークフローを起動できるようになります。外部APIとの連携や独自のビジネスロジックを組み込んだカスタム処理を簡易化し、販売者の時間と手間を省くことが可能です。
Admin actionsとは
Admin actionsは、Shopify Admin Extensionsの一種で、Shopify Admin上で直接起動できるカスタムアクションを追加する機能です。これにより、販売者は既存の管理画面を拡張して、任意の条件に合った商品や注文といったリソースに対する特別な処理を簡単に実行できます。
具体的には以下のような特徴があります。
- トランザクションワークフローの統合: Admin画面内で定義したアクションを通じて、一括処理や条件分岐、外部APIコールなど、複雑なワークフローを円滑に実行可能。
- 既存UIへのシームレスな統合: 販売者は、リソースページの「その他のアクション」メニューや、インデックステーブル上での一括アクションメニューからアクションを起動できるため、新規機能を直感的に利用できる。
- 柔軟なリソースターゲット: 商品や注文など、Shopify Adminが標準で取り扱うさまざまなリソースに対してアクションを適用できるので、運用上の自由度が高い。
このようなAdmin actionsを活用することで、販売者は自社固有のビジネスニーズに合わせて管理画面を最適化し、業務効率を大幅に改善することができます。
Admin actionsの設定方法
以下の方法で、Admin actionsを設定していきます。
- Admin actionsのextension作成
- Admin actionsの追加場所の指定
- Admin actionsのアクションボタンの追加
今回は開発ストアなどでサンプル商品登録したいことがあると思うので、ワンクリックで商品を追加できるようなactionを作成していきます。
1. Admin actionsのextension作成
shopify cliを使ってextensionを作成します。
また、アプリの初期化をしていない場合は、Scaffold an appを参考にアプリのセットアップを行ってください。
shopify app generate extension --template admin_action --name create-sample-product --flavor react
このコマンドは、アプリのextensionsディレクトリに、以下の構造を持つ新しいextensionテンプレートを作成します。
extensions/create-sample-product
├── README.md
├── locales
│ ├── en.default.json // デフォルトの英語言語設定
│ └── fr.json // フランス語言語設定
├── package.json
├── shopify.extension.toml // extensionの設定ファイル
└── src
└── AdminAction.jsx // Admin actionsのコンポーネント
2. Admin actionsの追加場所の指定
Admin actionsを追加する場所を指定します。今回は商品追加アクションなので、商品一覧ページに追加します。
shopify.extension.tomlを開き、extensions.targeting > targetを探してadmin.product-index.action.renderに設定します。
[[extensions.targeting]]
module = "./src/ActionExtension.jsx"
- target = "admin.product-details.action.render"
+ target = "admin.product-index.action.render"
ついでに、extension名も変更しておきます。以下の箇所を探してください。
[[extensions]]
name = "t:name"
handle = "create-sample-product"
type = "ui_extension"
このt:nameはlocaleファイルに設定されている名前を参照しているので、en.default.jsonを開いて"t:name": "Create Sample Product"と設定してください。一緒に作成されているfr.jsonは "name": "Créer un produit d'exemple"と設定しておきます。
また、日本語表記も欲しいのでja.jsonも作成しておきます。
{
"t:name": "サンプル商品を追加する"
}
このnameがactionボタン名になります。
3. Admin actionsのアクションボタンの追加
最後に、Admin actionsのアクションボタンを追加します。src/ActionExtension.jsxを開いて以下のように記述します。
import { useCallback, useState } from "react";
import {
reactExtension,
useApi,
TextField,
AdminAction,
Button,
} from "@shopify/ui-extensions-react/admin";
import { createProduct, productVariantsBulkCreate } from "./utils";
function validateForm({ name, vendor }) {
return {
isValid: Boolean(name) && Boolean(vendor),
errors: {
name: !name,
vendor: !vendor,
},
};
}
const TARGET = "admin.product-index.action.render";
export default reactExtension(TARGET, () => <App />);
function App() {
const { close } = useApi(TARGET);
const [product, setProduct] = useState({ name: "", vendor: "" });
const [formErrors, setFormErrors] = useState(null);
const { name, vendor } = product;
const onSubmit = useCallback(async () => {
const { isValid, errors } = validateForm(product);
setFormErrors(errors);
if (isValid) {
// 商品作成
const { data } = await createProduct(name, vendor);
// 商品の種類作成 在庫も登録する
await productVariantsBulkCreate(data.productCreate.product.id);
console.log("Product created successfully");
close();
}
}, [product, close]);
return (
<AdminAction
title="サンプル商品を作成"
primaryAction={<Button onPress={onSubmit}>Create</Button>}
secondaryAction={<Button onPress={close}>Cancel</Button>}
>
<TextField
value={name}
error={formErrors?.name ? "商品名" : undefined}
onChange={(val) => setProduct((prev) => ({ ...prev, name: val }))}
label="Name"
maxLength={50}
/>
<TextField
value={vendor}
error={formErrors?.vendor ? "販売元" : undefined}
onChange={(val) => setProduct((prev) => ({ ...prev, vendor: val }))}
label="Vendor"
maxLength={50}
/>
</AdminAction>
);
}
すると、商品一覧ページに「サンプル商品を追加する」というボタンが追加されます。ボタンをクリックすると、商品名と販売元を入力するフォームが表示され、入力後に「Create」ボタンをクリックすると商品が作成されます。後ほど画面確認します。
続いて、商品作成と商品種類作成を行うutils.jsを作成します。srcディレクトリにutils.jsを作成し、以下のコードを記述します。
export async function createProduct(name, vendor) {
return await makeGraphQLQuery(
`mutation ProductCreate($name: String!, $vendor: String!) {
productCreate(input: {
title: $name,
vendor: $vendor,
descriptionHtml: "<p>This is a sample product</p>",
}) {
product {
id
}
}
}
`,
{
name: name,
vendor: vendor,
}
);
}
export async function productVariantsBulkCreate(productId) {
const sku = `sample-${Math.random().toString(36).slice(-10)}`;
const barcode = `sample${Math.random().toString(36).slice(-10)}`;
return await makeGraphQLQuery(
`mutation productVariantsBulkCreate($productId: ID!) {
productVariantsBulkCreate(
productId: $productId
variants: [
{
barcode: "${barcode}",
price: "100.00",
inventoryItem: {
sku: "${sku}",
cost: 0,
tracked: true
},
inventoryQuantities: [
{
availableQuantity: 100,
locationId: "gid://shopify/Location/1111111"
},
{
availableQuantity: 100,
locationId: "gid://shopify/Location/2222222"
},
{
availableQuantity: 100,
locationId: "gid://shopify/Location/3333333"
}
],
}
],
strategy: REMOVE_STANDALONE_VARIANT,
) {
productVariants {
id
title
}
userErrors {
field
message
}
}
}
`,
{
productId: productId,
}
);
}
async function makeGraphQLQuery(query, variables) {
const graphQLQuery = {
query,
variables,
};
const res = await fetch("shopify:admin/api/graphql.json", {
method: "POST",
body: JSON.stringify(graphQLQuery),
});
if (!res.ok) {
console.error("Network error");
}
return await res.json();
}
このようにAdmin apiを定義してproductCreate mutationで商品を作成し、productVariantsBulkCreate mutationで商品種類を作成しています。このときオンラインで購入テストがすぐできるように在庫も登録しています。
もし、複数種類の商品を作成したい場合は、variantsにoptionValuesを追加してください。
ここまでできたらshopify app devを実行しましょう。実行後、商品一覧画面を開きましょう。
「その他の操作」ボタンをクリックすると、「サンプル商品を追加する」ボタンが表示されます。ボタンをクリックすると、商品名と販売元を入力するフォームが表示されます。
フォーム入力後、「Create」ボタンをクリックすると、商品が作成されます。商品詳細画面を見ると、想定通りのデータになり在庫が300個登録されていることが確認できます。
これから開発ストアで商品を追加する際には、このAdmin actionsを使って簡単に商品を追加できるようになります。
補足
- 商品作成で権限がなくてエラーが発生する場合は、App configurationを参考に
read_products write_productsスコープを追加してください。
まとめ
Shopify Admin actionsを活用することで、管理画面にカスタムアクションを追加し、販売者の業務効率を大幅に向上させることが可能です。具体的には、商品の一括更新や外部API連携など、標準機能では実現しづらい操作を簡易化できます。 また、販売者にとって直感的に利用できる「その他の操作」メニューや一括操作メニューへの統合により、運用の負担を軽減します。
今回の実装例を参考に、独自のビジネスニーズに応じたアクションボタンを追加し、運営業務をさらに効率化していきましょう。