【Shopify】メタフィールド・メタオブジェクトの値（フィールドの値）の出力方法を解説！
Published： Updated：
こんにちは、Webデザイナーの 夢拓（MUHIRO）です。
Shopifyでオンラインストアを構築する際、商品やページに追加情報を表示したいことがよくあります。
そんな時に便利なのが「メタフィールド」と「メタオブジェクト」機能です。これらの機能を使うことで、Shopifyの標準フィールド以外にカスタムフィールドを追加し、より詳細な情報を管理・表示できるようになります。
しかし、メタフィールドやメタオブジェクトを設定しても、その値をテーマに表示させる方法が分からず困っている方も多いのではないでしょうか。
実際、これらの値を正しく出力するには、Liquidテンプレート言語の基本的な知識と、メタフィールド・メタオブジェクトの構造を理解する必要があります。
この記事では、メタフィールドとメタオブジェクトの基本的な概念を押さえた上で、それぞれの値をShopifyのテーマに出力する方法を具体的に解説します。
単一の値の出力から、リスト形式のデータの扱い方、さらにはメタオブジェクトの複雑な構造を持つデータの出力方法まで、実践的なコード例を交えて説明していきます。
この記事はこんな方におすすめ！
- Shopifyのストアフロント開発をする方
この記事を読んで、技術を習得することで、より柔軟で情報豊かなオンラインストアを構築できるようになるでしょう。
Shopifyでのカスタマイズの幅を広げ、顧客により良い購買体験を提供したい方は、ぜひ最後までお読みください。
それでは、どうぞ！
Index
［ CloseOpen ］
メタフィールドとメタオブジェクトの基本概念
メタフィールドとは？
Shopifyで商品やページに追加情報を関連付けるための機能です。
これにより、標準フィールド以外のカスタムデータを柔軟に追加できます。
メタフィールドはテキストや数値、画像など様々なデータ型に対応しており、動的にコンテンツを表示することが可能です。管理画面から簡単に設定できるため、技術的な知識がなくても利用できます。
また、Shopify APIを通じてアプリ開発者も活用できるため、ストアの機能を大幅に拡張することができます。
メタオブジェクトとは？
2023年1月にアーリーアクセスされたShopifyの機能です。
メタオブジェクトは、カスタムデータを構造化して保存・管理するための機能です。
製品、コレクション、顧客など、様々なリソースに関連付けて追加情報を保存できます。メタオブジェクトは、フィールドと呼ばれる複数の属性で構成され、テキスト、画像、日付など様々なデータ型をサポートしています。
管理画面から簡単に作成・編集でき、オンラインストアのテーマやAPIを通じてアクセスできます。
これにより、製品仕様、サイズ表、FAQなど、構造化されたカスタムコンテンツを柔軟に作成し、ストアフロントに表示することが可能になります。
メタフィールドの活用
メタフィールドの取得方法
メタフィールドは以下の構文で取得できます。
「object」はテンプレートタイプに応じた特定のオブジェクトを指します。
{%- assign metafields = object.metafields.namespace.key -%}
テンプレートタイプと利用可能なオブジェクト
Shopifyのテンプレート構造では、各テンプレートタイプで利用可能なオブジェクトが異なります。
例えば、pagesテンプレート（/pages/〜）ではpageオブジェクトが利用可能で、blogオブジェクトは利用不可能になります。
この設計により、コードの一貫性と予測可能性が確保されています。
メタフィールド値の出力（テキストの場合）
メタフィールドの値を出力する方法は、フィールドタイプと設定（単一またはリスト（複数値））によって異なります。
単一値の出力
{%- assign metafields = object.metafields.namespace.key -%}
{{ metafields }}
単一値のメタフィールドでは、直接メタフィールドオブジェクトを参照することで値が出力されます。
リスト（複数値）の出力
{%- assign metafields = object.metafields.namespace.key -%}
{%- assign metafields = metafields.value -%}
{%- for item in metafields -%}
{{ item }}
{%- endfor -%}
リストの場合、valueプロパティを使用して値にアクセスをして、for文で反復処理を行います。
valueプロパティを使用することで、直接文字列の配列に変換されます。
valueプロパティを使用する前は、JSONエンコードされた配列として保存されています。
valueプロパティを使用した場合、Liquidで直接使用可能な文字列の配列に変換されます。これによりfor文で反復処理を行うことができるようになります。
メタフィールド値の出力（メタオブジェクトの場合）
メタフィールドの値を出力する方法は、フィールドタイプと設定（単一またはリスト（複数））によって異なります。
単一値の出力
「title」はメタオブジェクトのエントリーのフィールドのキーを指します。
{%- assign metafields = object.metafields.namespace.key -%}
{%- assign metafields = metafields.value -%}
{{ metafields.title }}
単一値のメタオブジェクトを指定したメタフィールドでは、valueプロパティを使用して値にアクセスし、返ってくるMetaobjectDropオブジェクトを取得します。
valueプロパティを使用する前は、メタオブジェクトを一意に識別するためのGloba IDが取得されます。
例：gid://shopify/Metaobject/メタオブジェクトのID
valueプロパティを使用することで、このGlobal IDが指すメタオブジェクトの実際のデータにアクセスできます。
このGlobal IDは、メタオブジェクトへの参照を保持するための効率的な方法であり、.valueプロパティを使用することで、必要に応じて実際のデータにアクセスできるようになります。
リスト（複数値）の出力
「title」はメタオブジェクトのエントリーのフィールドのキーを指します。
{%- assign metafields = object.metafields.namespace.key -%}
{%- assign metafields = metafields.value -%}
{%- for item in metafields -%}
{{ item.title }}
{%- endfor -%}
リストでメタオブジェクトを指定したメタフィールドでは、valueプロパティを使用して値にアクセスし、返ってくるMetaobjectListDropオブジェクトを取得します。
取得したMetaobjectListDropオブジェクトをfor文で反復処理を行います。この時、MetaobjectDropオブジェクトを取得することができます。
MetaobjectDropオブジェクトにフィールドキーを使い値を出力することができます。
valueプロパティを使用する前は、メタオブジェクトを一意に識別するためのGloba IDの配列が格納されています。
メタオブジェクトの活用
メタオブジェクトの出力は、メタフィールドで参照する方法と、Liquidに直接記述する方法があります。
メタフィールドで参照する方法は、前の項目「メタフィールドの活用」を確認してください。
メタフィールドの取得方法
メタオブジェクトをLiquidで取得する場合、2つのパターンがあります。
- 直接メタオブジェクトを取得
- 「エントリーをウェブページとして公開する」を使用したページでメタオブジェクトを取得
直接メタオブジェクトを取得
「type」は定義のタイプを指します。
「field」はフィールドのキーを指します。
{%- assign metaobjects = shop.metaobjects.type.field -%}
{{ metaobjects }}
基本的なフィールドの出力方法は、前の項目「メタフィールドの活用」を確認してください。
「エントリーをウェブページとして公開する」を使用したページでメタオブジェクトを取得
「field」はフィールドのキーを指します。
{%- assign metaobjects = metaobject.field -%}
{{ metaobjects }}
基本的なフィールドの出力方法は、前の項目「メタフィールドの活用」を確認してください。
リッチテキストの出力方法（メタフィールド・メタオブジェクト共通）
まとめ
いかでしたでしょうか？
今回の記事では、Shopifyのメタフィールドとメタオブジェクトの値を効果的にテーマに出力する方法を解説しました。
今回の記事のまとめ
- メタフィールドとメタオブジェクトの基本概念
- メタフィールドの活用、取得方法
- メタオブジェクトの活用、取得方法
これらの技術を習得することで、Shopifyストアのカスタマイズ性が大幅に向上し、より豊かな商品情報やコンテンツを顧客に提供できるようになります。
メタフィールドとメタオブジェクトを適切に活用することで、ユニークで魅力的なオンラインストアの構築が可能になります。
今後のストア開発では、これらの機能を積極的に取り入れ、顧客体験の向上とビジネスの成長につなげていくことをおすすめします。
最後までお読みいただきありがとうございました！
この記事を書いた人
夢拓（MUHIRO）/ Webデザイナー（フロントエンド）
大学中退して飲食業界に就職。飲食業界のブラックな部分を知り退職、その後無職。職業訓練校と独学で今勤めている制作会社に入社。 主にデザイン・構築をメインにUI/UXやアクセシビリティに考慮したWebサイト制作。スクラッチ案件多数、Shopifyテーマカスタマイズは60件以上の実績あり。
免責事項
- 当ブログでは、執筆者の経験に基づいた技術情報や知識を提供していますが、その正確性や普遍性を保証するものではありません。情報は執筆時点のものであり、技術の進展により古くなる可能性があります。これらの情報を利用する際は、自己責任で行ってください。必要に応じて専門家の助言を求めることをお勧めします。
- 当ブログで提供するプログラムコードは、執筆者の最善の知識に基づいていますが、その正確性や完全性を保証するものではありません。コードの利用や実行により生じた損害や問題については、一切の責任を負いかねます。コードの使用は、自己責任で行ってください。
- 当サイトで使用しているスクリーンショット画像について、著作権はサイトの権利者に帰属します。掲載に不都合がある場合、お手数ですがお問い合わせフォームよりご連絡ください。
- 当サイトからリンクよって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いかねますのでご了承ください。
- 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。