2024/03/14

Shopify ストアでのしを実現する方法を徹底解説！

@ 信条刃

Shopify

はじめに

今回は、Shopify ストアでのしを実現する 2 つの方法について解説していきます。

1 つ目は、メタフィールドを用いたコーディングでのし機能を導入する方法です。

2 つ目は、アプリを用いてのし機能を導入する方法です。

それぞれの方法について詳しく解説していきます。

のしとは？

のしは、日本独特の贈り物を包む伝統的な手法として広く認知されています。これは、祝事や哀事に際して、尊敬やお祝いの気持ちを形にするために利用されます。のしには、贈る相手との関係性や贈る理由に合わせて、さまざまな形の結び目（例えば、結び切りや蝶結び）が描かれていることが一般的です。

のしのメリット

顧客体験の向上

「のし」を贈り物に添える習慣は、商品に対する思いやりと心遣いを形にし、それを贈る行為に深い価値と意味を加えます。
商品を贈る際の付加価値として「のし」を提供することで、顧客により良いショッピング体験を提供することができます。

文化的習慣への対応

「のし」という日本固有の包装手法を採用することにより、日本の独特な消費者文化への深い理解と地域に密着したサービスを顧客に提供することが可能になります。この伝統的な包装方法は、贈り物に対する敬意と心からの祝福を表現する独特の手段であり、受け取る人に特別な感動を与えることができます。

メタフィールドを用いたコーディングでのし機能を導入する方法

まずは、メタフィールドを用いたコーティングでのし機能を導入する方法について解説します。

今回は、GraphQL を用いてメタフィールドを作成していきます。

「Shopify GraphQL App」にアクセスしてください。「Shopify GraphQL App」はストア上で GraphQL を使用できるように Shopify が用意しているアプリです。

上記の Install の部分に Shopify の開発ストアの URL を入力し、Select all をクリックして、「インストール」ボタンを押すと、Shopify の開発ストアに「Shopify GraphQL App」をインストールすることができます。

Shopify GraphQL App

ストアのメタフィールドにのしの情報を設定する

ストアのメタフィールドにのしの情報を設定します。

以下の画像は、今回実装する GraphQL コードです。Mutation の部分と Variables の部分を順に解説していきます。

まずは、Mutation の部分です。以下のコードをそのまま貼り付けてください。

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      key
      namespace
      value
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
      code
    }
  }
}

今回は、metafieldsSet という API を使います。これは、メタフィールドの値を作成・更新するための API です。こちらの API には引数として、以下のものを渡します。

key
namespace
ownerId
type
value

順に説明します。

key
メタフィールドを識別する一意の値です。
namespace
メタフィールドのグループのコンテナです。メタフィールドが集まった箱のようなものです。
ownerId
メタフィールドが関連付けられているリソースの固有の識別子です。
type
メタフィールドに格納されるデータの種類を指定します。
value
メタフィールドに格納されるデータです。文字列として格納します。

具体的に渡す引数は、Variables に設定します。

metafields ブロックには、登録されたメタフィールドの情報が入ります。

実行結果として、以下のものが返ってきます。

key
namespace
value
createdAt
updateAt

key・namespace・value に関しては、先程と同様です。

createdAt
メタフィールドが作成された日時です。
updateAt
メタフィールドが更新された日時です。

userErrors ブロックには GraphQL の実行中に発生したエラーに関する情報が入ります。

実行結果として、以下のものが返ってきます。

field
message
code

順に説明します。

field
エラーが発生した入力フィールドの場所を示しています。
message
エラーメッセージです。
code
エラーコードです。

次に、metafieldSet に渡す引数、Variables の部分について解説します。

完成形のコードがこちらです。

{
  "metafields": [
    {
      "key": "noshi_setting",
      "namespace": "noshi_app",
      "ownerId": "gid://shopify/Shop/67358163174",
      "value": "{\"noshi_handle\": \"のし\"}",
      "type": "json"
    }
  ]
}

各設定項目について詳しく見ていきましょう。まず、メタフィールドの key と namespace です。今回は、key に noshi_setting、namespace に noshi_app を指定しています。

次に、ownerId を設定します。以下の GraphQL クエリを実行して Shop の id を取得してください。

{
  shop {
    id
  }
}


============================================
実行後のレスポンス

{
  "data": {
    "shop": {
      "id": "gid://shopify/Shop/67358163174"
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 1,
      "actualQueryCost": 1,
      "throttleStatus": {
        "maximumAvailable": 2000,
        "currentlyAvailable": 1895,
        "restoreRate": 100
      }
    }
  }
}

ownerId に、取得した Shop の id を設定してください。

次に、value にのし機能に必要な情報を設定します。

今回は、以下の json データを文字列にエスケープしたものを設定します。