【Shopify】メタフィールドについて

はじめに

2021年6月30日（日本時間）、「Shopify Unite 2021」が開催され、数多くの画期的な新機能の発表がありました。

Shopify Uniteで発表された内容として以下などがあります。

• Online Store 2.0
• メタフィールド
• 新テーマ『Dawn』
• Shopifyメール
• チェックアウト拡張機能（Shopifyパートナー・開発者向け）
• Hydrogen・Oxygen（Shopifyパートナー・開発者向け）
• ShopifyアプリストアとShopifyテーマストアにおける年間収入の最初の100万ドルについてはレベニューシェアが 0 %（Shopifyパートナー・開発者向け）

新機能の中でも、『メタフィールド』は、商品、顧客、注文などのオブジェクトに追加データを付与できるという面白い機能でした。

今回はその『メタフィールド』についてまとめてみようと思います。

最後までお付き合いいただけますと幸いです。

メタフィールドとは

メタフィールドとは、以前から実装されており、商品やバリエーションに固有の情報を追加できる機能です。

しかし、今までは、アプリやAPIを使用しないとメタフィールドを使用することはできませんでした。

今回の発表で、Online Store 2.0 以降では、メタフィールドは商品情報の一つとして実装され、ストア管理画面から追加・編集できるようになりました。

メタフィールドを使用すると、通常の管理画面で取り込めない特定の情報を保存することができ、Shopifyストアの機能や見た目をカスタマイズすることが可能になります。

例えば、送料がかかる商品なのか、かからない商品なのかを簡単に表示することができます。

メタフィールドに追加できるコンテンツタイプと登録方法

メタフィールドの設定場所

メタフィールドを設定するには、サイドバー左下の設定を押します。

設定の中の「メタフィールド」で設定することができます。

商品メタフィールド

商品メタフィールドでは、『名前』『ネームスペースとキー』『説明』『コンテンツタイプ』『定義をピン留めするかどうか』の5つの共通設定項目があります。
（※コンテンツタイプを選択すると、追加項目が表示されるものがあります。詳細は以下で見ていきます。）

• 名前：定義の名前を入力します。

• ネームスペースとキー：ネームスペースとキーを合わせて、メタフィールドの固有のIDを入力します。ネームスペースとキーは、「.」で区切られ、文字、数字、アンダースコア（_）、ハイフン(-)のみを含めることができます。

• 説明（任意）：メタフィールドに入力する値に関する説明や情報を入力します。

• コンテンツタイプ：テキスト、ファイル、URLなど。ここで指定したコンテンツタイプでサポートされている値だけをメタフィールドに追加することができます。

• 検証：メタフィールドに入力できる値を限定するために設定できます。最小値や最大値、正規表現を使用してメタフィールドを使用できる値の範囲を管理できます。

• ピン留め：メタフィールド適宜をピン留めすることで、管理画面のメタフィールドを整理することができます。メタフィールド定義をピン留めすると、メタフィールド定義のページのリストの表示順序を変更することができます。最初のページにはピン留めされたメタフィールドが表示されます。最大20個のメタフィールドをピン留めすることができます。

色

名前	API名	説明	値の例	値の型（非推奨）
色 (Color)	color	#RRGGBB形式のRGB値	#fff123	string

使用例
商品によって、商品ページの背景を変更する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。

商品管理の登録

商品管理画面のメタフィールドで、色が選択できるようになります。

選択して保存すると、下記のように登録されます。

日付と時刻

日付

名前	API名	説明	値の例	値の型（非推奨）
日付 (Date)	date	タイムゾーンなしのISO 8601形式の日付値	2021-10-02	string

使用例
商品の消費期限や賞味期限を表示する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
日付を選択すると、最小日付（選択できる最初の日付）と最大日付（選択できる最後の日付）の検証欄が表示されるので、ルールを追加したい場合は入力します。

商品管理の登録

日付と時間

名前	API名	説明	値の例	値の型（非推奨）
日付と時間 (Date and time)	date_time	ISO 8601形式の日付値とUTC時間の時間値	2021-10-02T12:30:00	string

使用例
イベントの開催日と開始時間を表示する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
日付を選択すると、最小の日付と時刻（選択できる最初の日時）と最大の日付と時刻（選択できる最後の日時）の検証欄が表示されるので、ルールを追加したい場合は入力します。

商品管理の登録

ファイル

名前	API名	説明	値の例	値の型（非推奨）
ファイル (File Reference)	file_reference	以下のいずれかのファイルタイプで、20MB未満の単一ファイルをアップロードできます ・画像 ・すべてのファイルタイプ JPEG、PNG、GIF形式の画像は、オンラインストアに表示することができます。他のファイルは、ダウンロード可能になります。	gid://shopify/MediaImage/123	string

使用例
使用説明書のPDFファイルを追加する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
ファイルを選択すると、「画像のみを受け付けます」（JPEG、PNG、GIF）か「すべてのファイルタイプを受け付ける」を選択するラジオボタンが表示されます。
ストアに表示する際は、「画像のみを受け付けます」を選択します。

ダウンロードを目的としている際は、「すべてのファイルタイプを受け付ける」を選択します。

商品管理の登録
「画像を選択する」ボタンを押して、追加する画像を選択することで登録できます。

JSON

名前	API名	説明	値の例	値の型（非推奨）
JSON (JSON string)	json	構造化データソースが必要な高度なユースケースで未処理のJSONデータ	[{ "k": "v1" }, { "k": "v2" }]	json_string

使用例
原材料の表など、それぞれの列で異なる商品を扱う仕様表を追加する等

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。

商品管理の登録
入力フォームにJSONデータを入力します。
「JSONをフォーマットする」を押すと、下記の画像のように整列してくれます。

測定

重量

名前	API名	説明	値の例	値の型（非推奨）
重量 (Weight)	weight	重量の値 (整数・小数)と単位 (oz、lb、g、kg)	{ "unit": "kg", "value": 2.5 }	json_string

使用例
商品や原材料の重量を追加する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
重量を選択すると、最小重量と最大重量の検証欄が表示されるので、ルールを追加したい場合は入力します。

商品管理の登録

量

名前	API名	説明	値の例	値の型（非推奨）
量 (Volume)	volume	量の値 (整数・小数) と単位 (ml, cl, l, m3 ,us_fl_oz ,us_pt, us_qt, us_gal, imp_fl_oz, imp_pt, imp_qt, imp_gal)	{ "unit": "ml", "value": 20.0 }	json_string

使用例
水筒の容積容量を追加する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
量を選択すると、最小数量と最大数量の検証欄が表示されるので、ルールを追加したい場合は入力します。

商品管理の登録

寸法

名前	API名	説明	値の例	値の型（非推奨）
寸法 (Dimension)	dimension	寸法の値と単位 (in,ft,yd,mm,cm,m)	{ "unit": "cm", "value": 25.0 }	json_string

使用例
商品の高さ、幅など長さに関係する値を表示する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
寸法を選択すると、最小寸法と最大寸法の検証欄が表示されるので、ルールを追加したい場合は入力します。

商品管理の登録

数値

整数

名前	API名	説明	値の例	値の型（非推奨）
整数 (Integer)	number_integer	-9,007,199,254,740,991 から 9,007,199,254,740,991 までの数値	10	integer

使用例
書籍のページ数を追加する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
整数を選択すると、最小値と最大値の検証欄が表示されるので、ルールを追加したい場合は入力します。

商品管理の登録

小数

名前	API名	説明	値の例	値の型（非推奨）
小数 (Decimal)	number_decimal	-9999999999999.999999999 から 9999999999999.999999999 までの小数 ( 整数部は13桁、小数部は9桁まで入力可 )	10.4	string

使用例
宝石のカラット重量を表示する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
小数を選択すると、最小値、最大値、最高精度（小数点以降の数：最大 9）の検証欄が表示されるので、ルールを追加したい場合は入力します。

商品管理の登録

評価

名前	API名	説明	値の例	値の型（非推奨）
評価 (Rating)	rating	特定の尺度で測定された評価	{ "value": "3.5", "scale_min": "1.0", "scale_max": "5.0" }	json_string

使用例
商品の評価数を表示する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
評価を選択すると、最小評価指標と最大評価指標の検証欄が表示されるので、ルールを追加したい場合は入力します。

商品管理の登録

リファレンス

ページ

名前	API名	説明	値の例	値の型（非推奨）
ページリファレンス ( Page reference )	page_reference	オンライン上のページヘの参照	gid://shopify/OnlineStorePage/1	string

使用例
オンラインストアのポリシーページなどのリンクを追加する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。

商品管理の登録

商品

名前	API名	説明	値の例	値の型（非推奨）
商品リファレンス (Product Reference)	product_reference	単一商品のリンク	gid://shopify/Product/1	string

使用例
オンラインストアの商品ページに関連商品を保存及び表示する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。

商品管理の登録

商品バリエーション

名前	API名	説明	値の例	値の型（非推奨）
バリエーションリファレンス (Variation Reference)	variation_reference	単一商品のバリエーションのリンク	gid://shopify/ProductVariant/1	string

使用例
オンラインストアの商品ページで同じ色の他の医療アイテムを保存及び表示する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。

商品管理の登録

テキスト

単一のテキスト

名前	API名	説明	値の例	値の型（非推奨）
単一のテキスト (Singrle line text)	single_line_text_field	単一行のプレーンテキスト。 メタフィールド定義のときに指定したプリセットの選択肢に限定することも可能。	この商品には乳製品が含まれております	string

使用例
配送メモ、告知をする場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
単一テキストを選択すると、最小の長さ、最大の長さ、正規表現の検証欄が表示されるので、ルールを追加したい場合は入力します。

正規表現は、下記のルールを参考にして入力してください。

プリセットの選択肢を制限するにチェックを入れると、入力できるテキストを絞ることができます。
「アイテムを追加」ボタンを押して選択肢を増やすことができます。

商品管理の登録

正規表現を満たしていないものはエラーが出ます。（例では@が最低一つ無いとエラーが出ます）

複数行のテキスト

名前	API名	説明	値の例	値の型（非推奨）
複数行フィールド (Multi-line text)	multi_line_text_field	複数行のプレーンテキスト 改行を含めることが可能。	Ingredients: Flour Water Milk Eggs	string

使用例
配送メモ、告知をする場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
複数テキストを選択すると、最小の長さ、最大の長さ、正規表現の検証欄が表示されるので、ルールを追加したい場合は入力します。

正規表現は、下記のルールを参考にして入力してください。

商品管理の登録

正規表現を満たしていないものはエラーが出ます。（例では@が最低一つ無いとエラーが出ます）

trueまたはfalse

名前	API名	説明	値の例	値の型（非推奨）
trueまたはfalse (Boolean)	boolean	条件に対しての true か false の値。	true	boolean

使用例
商品に刻印できるかどうかや、あるオプションが利用可能かどうかを追加する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。

商品管理の登録
下記のように、ラジオボタンが表示されるので、trueかfalseを選択します。

URL

名前	API名	説明	値の例	値の型（非推奨）
URL	url	http、https、mailto、sms、telのURL。 メタフィールド定義を作成するときに、 URLを特定のドメインのものに制限することが可能。	https://www.shopify.com	string

使用例
特定のウェブサイトでホストされている書籍レビューまたは商品ビデオへのリンクを追加する場合

メタフィールドの登録
下記のように、名前、ネームスペースとキー、説明を入力して保存します。
URLを選択すると、「ドメインの使用を制限する」の検証欄が表示されるので、ルールを追加したい場合は入力します。
追加で入力したドメインのみを使用することができます。（例：unreact.jp）

商品管理の登録

登録したドメイン以外のものはエラーが出ます。（例ではunreact.jpのドメインでないとエラーが出ます）

バリエーションメタフィールド

基本的に商品メタフィールドと同様に設定が可能です。

各バリエーションの設定ページでメタフィールドの登録が可能です。

バリエーション設定ページの一番下にメタフィールドを設定する場所があります。

メタフィールドの表示

メタフィールドを表示する方法は、カスタマイズ画面で表示する方法とLiquidオブジェクトで出力する方法の2パターンあります。

カスタマイズ画面で表示する方法

テキストフィールドやテキストエリアには、登録した値の型がstringやnumberであるメタフィールドを使用することができます。

データベースのアイコンを押すと、動的ソースの挿入と出てきます。
ここに表示されているメタフィールドを選択すると各商品に登録した値を出力することができます。

ページピッカーや商品ピッカーでは、ページリファレンスや商品リファレンスで登録したメタフィールドを使用することができます。

これにより、商品によって関連商品を変更することが可能になります。

イメージピッカーでは、ファイルで登録した画像をしようすることができます。

Liquidオブジェクトで出力する方法

各商品メタフィールドには、product.metafields.namespace.keyでアクセスすることが可能です。

出力例

メタフィールドオブジェクトを使用することで、値を使用したり出力したりできます。

登録内容

Liquid

ストア出力

参考記事

終わりに

今回は、メタフィールドについてまとめてみました。

メタフィールドを使用することで、各商品ごとにテキストや画像を変更できるようになり、デザインの幅がかなり上がったと思います。

現在はまだ商品とバリエーションのメタフィールドしか公開されておりませんが、
今後、顧客やコレクションといったメタフィールドが提供されていくと思いますので、とても楽しみです！

公開されたらこの記事に追加していこうと思います。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。