1. Top
  2. ブログ一覧
  3. Shopify Admin link extensionsで管理画面にリンクを追加しよう
Eコマース

Shopify Admin link extensionsで管理画面にリンクを追加しよう

公開日

2024.12.17

Shopify Admin link extensionsで管理画面にリンクを追加しようのサムネイル

これまで管理画面にリンクを追加する機能はShopify パートナーダッシュボードで作成する仕組みでした。しかし、2024年12月11日のchangelogの発表にあるように、App Extensionの一環としてshopify cliで開発できるようになりました。
この記事では、Shopify Admin link extensionsを使って、管理画面にカスタムリンクを追加し、特定ページや手続きを効率化する方法を解説します。

管理者リンク拡張機能を使用すると、Shopify 管理画面のページから、アプリ内の関連する複雑なワークフローに販売者を誘導できます。たとえば、Shopify Flow アプリには、販売者をアプリのページに誘導し、そこで任意の注文の自動化を実行できる管理者リンク拡張機能があります。

管理リンク拡張機能は、アクションを開始したストアと現在選択または表示されているリソースのリソース ID を識別する生成された URL パラメータを動的に追加するため、アプリで関連性の高いエクスペリエンスを作成できます。

要件

作成するにあたって以下の要件が必要です。

  • アプリのスコープ
    • 今回は商品画面に配置するのでwrite_productsスコープが必要です。
  • バージョン3.71以上にアップグレードされたShopify CLI

Admin link extensionを作成するには、次のコマンドを実行します。

shopify app generate extension --template admin_link --name admin-link-extension

作成後は以下のようなディレクトリ構造が生成されます。

extensions/admin-link-extension
  ├── README.md
  ├── locales
  │   ├── en.default.json // デフォルトの英語言語翻訳ファイル
  │   └── fr.json // フランス語言語翻訳ファイル
  └── shopify.extension.toml // extensionの設定ファイル

extensionの設定

shopify.extension.tomlを編集して、リンクを追加するページを指定します。

リンクのターゲットは商品画面以外にも注文・コレクション画面でも埋め込むことができます。詳細はこちらを参照してください。

[[extensions]]
name = "t:name"
handle = "admin-link-extension"
type = "admin_link"

[[extensions.targeting]]
target = "admin.product-details.action.link"
url = "/test/12345"

urlは相対パスで指定します。つまりextensionを内包しているアプリのあるページに飛ばすことができるのです。

翻訳ファイルの設定

shopify.extension.tomlの extensions > name が表示されるリンク名になります。さまざまな言語をサポートするには、localesディレクトリ内に言語ごとのファイルを作成します。

まず、localesディレクトリ内のen.default.jsonファイルを編集して、リンクの表示名を設定します。

{
  "name": "link extension"
}

続いてに日本語対応するために一旦不要なfr.jsonをja.jsonに変更して、リンクの表示名を日本語に設定します。

{
  "name": "拡張リンク"
}

リンク先のページを作成

リンク先のページを作成します。今回は/testにリンクを設定しているので、/testにアクセスした際に表示されるページを作成します。
routes/test.$number.jsxを作成し、以下のように記述します。

import { Link } from "@shopify/polaris";
import { useLoaderData } from "@remix-run/react";

export const loader = async ({ params }) => {
  const text = params.number;
  return { text };
};

export default function Test() {
  const { text } = useLoaderData();

  return (
    <div>
      <h1>Admin link extension テスト</h1>
      <p>{text}を受け取りました。</p>
      <Link url="https://help.shopify.com/manual">Shopify manual</Link>
    </div>
  );
}

動作確認

設定が完了したら以下のコマンドを実行して、開発サーバーを起動します。

shopify app dev

アプリが実行されたら、ターゲットの場所に移動し、リンクをクリックするとアプリの正しいページに移動することを確認します。

alt text

alt text

実際の運用なら、パラメータを受け取って処理を行うことが多いと思いますが、今回は簡単なテキストを受け取るだけの処理にしています。

デプロイ

リンク拡張機能をテストした後、新しいアプリ バージョンを展開して、変更をユーザーにリリースできます。

新しいバージョンをデプロイするには、次のコマンドを実行します。

shopify app deploy

アプリのバージョンをリリースすると、アプリがインストールされているストアに提供されている現在のアクティブなバージョンが置き換えられます。

補足：以前のパートナーダッシュボードでの管理からの移行について

ダッシュボードで作成したextensionは引き続き利用できますが、ソースコードをGitHubなどでバージョン管理したいケースがあるかと思います。その場合は、Shopify CLIを使ってローカルダッシュボード上のアプリを取り込むことができます。

1. 既存の拡張機能をインポートする

パートナー ダッシュボードから既存のAdmin link extensionをインポートするには、次のコマンドを実行します。

shopify app import-extensions

プロンプトが表示されたら、admin linkを選択して続行します。インポートが完了すると、admin linkがアプリのextensionsディレクトリに新しいディレクトリとして作成されます。extensionを検証するには、各extensionsディレクトリの shopify.extension.toml ファイルを調べます。

新しいバージョンとしてアプリをデプロイすることで移行を完了できます。これにより、パートナーダッシュボードから既存のadmin linkが削除され、これらのextensionをアプリのソース コードの一部として管理できるようになります。

アプリのバージョンをリリースすると、アプリがインストールされているストアに提供されている現在のアクティブなバージョンが置き換えられます。アプリのユーザーが新しいバージョンにアップグレードされるまでに数分かかる場合があります。

まとめ

この記事では、Shopify Admin link extensionsを使って、管理画面にカスタムリンクを追加し、特定ページや手続を効率化する方法を解説しました。Shopify CLIを使ってローカルダッシュボード上のアプリを取り込む方法も紹介しました。ぜひShopify Admin link extensionsを使って、管理画面をカスタマイズしてみてください。

参考