Shopifyに新たに追加されたメタオブジェクトという機能があります。今回は、このメタオブジェクトというのがどのような機能なのか、実際にどのように使うのかなどを、事例を交えて解説していきます。
この記事のポイント
- メタオブジェクトの概要を理解できる
- メタオブジェクトの基本的な使い方を理解できる
メタオブジェクトって？
従来のShopifyでは商品、顧客情報、注文情報などの各種情報（オブジェクト）には、決められたデータを格納するフィールドしかありませんでした。
そこで新しく登場したのが「メタフィールド」という機能です。「メタフィールド」は各種情報に追加で、独自のデータを格納するフィールドを作成できるようになり、Shopifyのサイト構築における設計の幅が広がりました。
さらに、今回新たな機能として注目されていた「メタオブジェクト」が登場し、従来よりもさらに設計の自由度が高くなりました。
メタオブジェクトは、以下の2つの特徴をもった新しい構造体となっています。
メタフィールドをグルーピングしたような構造体
商品、顧客情報、注文情報などの各種情報（オブジェクト）に属しない新しいオブジェクトの構造体
メタオブジェクトを使うには？
2023年3月現在では、すべてのShopifyストアに開放されておらず、有料プランのストア、開発ストアに限らず管理画面で表示されているストアでのみ使用可能となっています。
使用可能なストアの場合は、管理画面にアクセスすると以下のような表示となっております。
※「顧客管理」と「ストア分析」のメニューの間に「コンテンツ」というメニューが追加される。
メタオブジェクトの作り方
例えば実店舗を持っているECサイトで、店舗一覧のページを作りたいケースがあります。こういったページを作る際、従来は各店舗の情報をHTML上に直書きして作ることが多かったですが、メタオブジェクトを使う事で各店舗の情報を管理することができます。且つ、更新も管理画面上から簡単に行うことができるようになります。
メタオブジェクトの定義作成
1-1. 管理画面で「設定」＞「カスタムデータ」をクリックします。
1-2. 画面下部にある「メタオブジェクト」の「＋定義を追加」をクリックします。
1-3. 「ネーム」のテキストにメタオブジェクトの名称を入力します。
例）店舗一覧
1-4. 「ネーム」のテキストの下の「タイプ」の右に出現する「編集」リンクをクリックします。
1-5. 「タイプ」のテキストにメタオブジェクトのタイプを入力します。
例）shopList
※タイプとはメタオブジェクトのIDのようなもので、メタオブジェクト内で一意となり重複して設定することができません。
1-6. 「フィールド」の「＋フィールドを追加」をクリックします。
1-7. 「フィールド」に設定するデータのコンテンツタイプをリストより選択します。
例えば、1行テキスト、数値、URLや日付、画像などを選択することができます。
例）単一行テキストを選択
1-8. 「単一行テキスト」の名前やキーを入力、必要に応じてその他の項目も設定し、最後に「追加」ボタンをクリックします。
例）名前：店舗名称、タイプ：name
※キーはフィールドのIDのようなもので、同一メタオブジェクト内で一意となり重複して設定することができません。
※「このフィールドを表示名として使用する」にチェック入れると、このフィールドがエントリーの一覧の表示名となります。（エントリーについては後ほど説明します。）
1-9. 「店舗名称」フィールドが作成されます。
1-10. 1-6から1-9を繰り返して、店舗一覧のメタオブジェクトに必要なフィールドを作成します。
例）「店舗住所」フィールドを作成
1-11. 作成が全て完了したら「保存」ボタンをクリックします。
メタオブジェクトのエントリー作成
メタオブジェクトの定義が作成できたら、次にそこに登録するエントリーを作成していきます。
【エントリーとは？】
メタオブジェクトに登録するデータ（レコード）を表します。
2-1. 管理画面で「コンテンツ」＞「メタオブジェクト」をクリックし「エントリーを追加」をクリックします。すると「エントリーを追加」ボタンの下に定義の一覧リストが表示されるので「店舗一覧」を選択します。
2-2. 「店舗一覧」メタオブジェクトのエントリーの登録フォームが表示されます。各フィールドに登録したいデータを入力します。
例）店舗名：東京店、店舗住所：東京都千代田区1-1-1
※ステータスはデフォルトでは「Active」となっており公開されます。「Draft」に変えることで非公開のエントリーを作成することができます。
2-3. 「ハンドル」の「編集」リンクをクリックして、ハンドル名を変更します。
例）tokyo_store
※ハンドルはエントリーごとの固有のIDとなり重複して設定することができません。デフォルトでは表示名に設定されたフィールドのデータが設定されますが、全角文字が使用できないため、半角英数、記号に変更する必要があります。ハンドルは主にフロントから参照する際に使用されます。
2-4. 「保存」ボタンをクリックします。
2-5. 他に作成したいエントリーがあれば2-2から2-4を繰り返して作成します。
例）「千葉店」や「埼玉店」を作成
2-6. 管理画面で「コンテンツ」＞「メタオブジェクト」をクリックすると、作成したエントリーの一覧を確認することができます。
メタオブジェクトの表示方法
作成したメタオブジェクトをliquid上で表示していきます。実際の画面とコードを例に説明していきます。
フロント表示イメージ
コード
<p>本店</p>
<div class="shop_info">
<p>店舗名：{{ shop.metaobjects.shopList.tokyo_store.name }}</p>
<p>店舗住所：{{ shop.metaobjects.shopList.tokyo_store.address }}</p>
</div>
<br>
<p>店舗一覧</p>
<div class="shop_list">
{%- for shopInfo in shop.metaobjects.shopList.values -%}
<div class="shop_info">
<p>店舗名：{{ shopInfo.name }}</p>
<p>店舗住所：{{ shopInfo.address }}</p>
</div>
{%- endfor -%}
</div>
解説
本店はメタオブジェクトの指定したエントリーの情報を参照しています。
上記コードだと、東京店の情報を参照しています。
{{ shop.metaobjects.shopList.tokyo_store.name }}
shop：固定
metaobjects：固定
shopList：参照したいメタオブジェクトのタイプ
tokyo_store：参照したいエントリーのハンドル
name：参照したいエントリーのフィールド
店舗一覧はメタオブジェクトに登録されているエントリー全てをforでループさせて1つずつ参照しています。
{%- for shopInfo in shop.metaobjects.shopList.values -%}
参照したいメタオブジェクトのタイプの後にvaluesを付けることで、登録されているエントリー全て参照することができます。
応用した使い方の事例
上記までの作り方を応用して作った店舗一覧がこちらです。（デザインは未調整となります）
エリア一覧とエリア別店舗一覧の2つのメタオブジェクトで構成されています。
エリア一覧のメタオブジェクトにIDを持たせて、そのIDと紐付くエリアの店舗一覧を表示させています。
各店舗の情報の更新、店舗やエリアが増えた場合でも、管理画面からエントリーの更新、追加というかたちで手軽に更新、追加することが可能となります。
最後に
今回、メタオブジェクトの簡単な使い方を説明させていただきました。ストア独自のカスタムデータの構造体を管理画面から簡単に作ることができ、且つデータの登録、更新も簡単にできるので、今後は従来より保守性の高いストア構築ができるのではないかと思います。
メタオブジェクトは使う上で重要な点としては、メタオブジェクトの設計ができるかどうか。
メタオブジェクトの概念、仕組みを理解した上でマーチャントからの要件をメタオブジェクトに落とし込める事が重要になってきます。
現状は限られたストアでしか使用できませんが、徐々に使えるストアが増えていくと思われます。
また、メタオブジェクトのデータの更新は管理画面からしか行えませんが、APIを使う事でアプリから更新することもできるようです。今後、メタオブジェクトを絡めたアプリが増えてくると思われます。
※この記事は2023年3月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容どおりに設定ができない場合があります。
