OS 3.0 テーマエディターでの動的ソース（メタフィールド）の設定方法

動的ソース（メタフィールド）を使用すると、手動で入力した静的コンテンツを置き換え、ストアフロントにリアルタイムのストアデータを表示できます。パーツを動的ソースに接続することで、商品機能やカテゴリタグなどの固有の詳細情報がストア全体で一貫して最新の状態に保たれます。現在、この機能は主に商品、カテゴリ、および商品バリエーションのリソースメタフィールドをサポートしています。

このガイドでは、メタフィールドの定義方法、3つの動的データ取得の次元の理解、およびよくある質問を通じた一般的な設定問題の解決方法について説明します。

設定前のメタフィールドの作成

動的コンテンツを表示する前に、カスタムデータフィールド（メタフィールド）を定義し、商品やカテゴリに値を割り当てる必要があります。

1. SHOPLINE管理画面で、設定 > カスタムデータに移動します。
   
2. 作成したいリソースタイプ（例：商品、カテゴリ、または商品バリエーション）を選択します。
3. 新しいフィールドを作成するには、フィールドを追加をクリックします。
   
4. 特定のアイテム（例：商品ページ）に移動し、メタフィールドセクションでそのアイテムに必要なフィールドを入力します。次に、追加をクリックして設定を保存します。
   

3つの動的ソースの次元の説明

OS 3.0 エディターは3つのデータ取得の次元を提供します。それらのロジックを理解することで、異なるページで正確にコンテンツを表示できます：

テンプレートリソース（現在のページ）

• 仕組み： これは、顧客が現在訪れている「URL」に完全に依存する固定データロジックです。
• 最適な用途： 商品詳細ページまたはカテゴリページの固定位置に最適です。
• 効果： 顧客が商品Aを訪れると、システムはURLを識別し、商品Aのメタフィールドにロックします。「現在の商品」に連携されたブロックは、そのページ固有のデータを自動的に取得します。

パーツレベルのリソース（現在のパーツ）

• 仕組み： これは「パーツ自体」の設定に基づいており、配置されているページには依存しません。パーツレベルで割り当てられたデータをサブモジュールが読み取ります。
• 最適な用途： 任意のページ（例：トップページ）に配置できる独立したセクション、例えば「おすすめ商品」などに適しています。
• 効果： まずセクションのトップレベルでリソース（例：「サマーセール」カテゴリの選択）を手動で連携する必要があります。連携後、「現在のパーツ」に設定されたサブモジュールは、その特定のカテゴリから正確にデータを取得します。

最も近いリソース

• 仕組み： これは「上方向への検索」ロジックを使用します。ブロックは現在の位置から始まり、ページ構造を上に向かって検索し、最も近い利用可能なデータソースを見つけて適用します。
• 最適な用途： 商品リストや検索結果ページに適しています。
• 効果： リスト内の個々のカードが「単一商品」データを識別できない問題を解決します。カード内の任意の要素（例：タイトル、画像）が「最も近いリソース」に設定されている場合、そのループ内でカードに割り当てられた特定の商品データに自動的に一致します。

「最も近いリソース」の理解と使用方法

最も近いリソースの仕組みは、自動レイアウトにおける画期的な機能です。繰り返しリスト内の個々のブロック（商品カードなど）が「上方向を見て」そのアイテムに関連する特定のデータを見つけることを可能にします。

なぜ最も近いリソースを使うのか

• 自動化： 商品カードの各カードに手動でデータを割り当てる必要がなくなります。
• 詳細な表示： リストや検索結果の中で、商品カードに特定のアイテムの特徴（例：アルコール度数や生地の種類）を直接表示できます。

最も近いリソースの設定方法

1. OS 3.0 テーマエディターで、商品リストのあるページ（例：カテゴリページ）に移動します。
2. 商品テンプレート内のブロックを選択します（例：商品説明ブロック）。
   
3. コンテンツ入力フィールドの横にある動的ソースを追加アイコンをクリックします。
   
4. 現在のパーツセクションの下にある最も近い商品を選択します。
   
5. 表示したい特定のメタフィールドを選択し、保存をクリックします。

商品バリエーションメタフィールドの表示

商品およびカテゴリのメタフィールドに加え、OS 3.0 テーマエディターは商品バリエーションのメタフィールドからもデータを取得できます。これにより、顧客が選択した正確なバリエーション（SKU）に特有のコンテンツを表示でき、例えば同じ商品の色オプションごとに異なるケアラベルを表示することが可能です。

バリエーションメタフィールドでサポートされるデータタイプ 

商品バリエーションのメタフィールドは、複数の値がサポートされるかどうかを含め、商品メタフィールドと同じデータタイプをサポートしています。メタフィールドのデータタイプの完全なリストについては、「メタフィールドを使ったストアコンテンツのカスタマイズ」をご覧ください。

バリエーションメタフィールドに適した動的ソースの選択

ブロックをバリエーションメタフィールドに接続する際は、現在のパーツカテゴリの下にある最も近い商品を選択してください。これは商品リストで使用されるのと同じ次元であり、商品ページ、商品リストカード内、または独立したセクションに配置されている場合でも、ブロックが正しく特定の商品とバリエーションに解決されることを保証します。

バリエーションメタフィールド用のバリエーションセレクターの有効化 

顧客がバリエーションを切り替えた際に表示される値を自動的に更新するには、ページまたはセクションにバリエーションセレクターパーツが含まれている必要があります。

ユースケース：商品一覧と独立パーツの使い分け

適切なソースの次元は、パーツの配置場所によって異なります：

シナリオ1：商品一覧ページ

カテゴリページや検索結果ページで商品カードを扱う場合は、最も近いリソースの次元を使用してください。

• 重要な操作：商品カード内のサブモジュールを最も近い商品に接続します。
• 期待される結果：これにより、システムがリストをループ処理する際に、各カードが自動的に固有の属性（その商品固有のメタフィールドなど）を一致させて表示します。

シナリオ2：独立／注目セクション

トップページやカスタムページに「注目商品」や「商品一覧」などのセクションを手動で追加する場合は、パーツレベルのリソース次元を使用してください。

• 重要な操作：まずサイドバーのメインセクションレベルでデータソース（例：特定の商品やカテゴリの選択）をバインドする必要があります。
• 期待される結果：これにより、テンプレート外の任意のページで特定の商品情報を柔軟に表示できます。

OS 3.0 テーマエディターにおけるメタフィールドに関するよくある質問

Q1 商品一覧ページで個別の商品メタフィールドをどのように表示しますか？

「最も近いリソース」次元を使用する必要があります。

• よくある落とし穴：カテゴリページでは、システムのデフォルト「テンプレートリソース」が「カテゴリ」全体のデータを取得します。これを商品カードに直接適用すると、個別の商品属性（アルコール度数や生地素材など）を取得できません。
• 正しい解決策：エディターで商品カード内の特定のブロック（例：テキストボックス）をクリックし、動的ソースを最も近いリソースカテゴリの中の最も近い商品に設定します。
• ロジック：システムがリストを生成する際、各カードに個別の商品データを割り当てます。「最も近いリソース」を選択することで、そのブロックは「上方検索」を行い、該当カードにマッピングされた特定の商品データを取得し、差別化された表示を実現します。

Q2 メタフィールドとメタオブジェクトの違いは何ですか？

メタフィールドは、商品やカテゴリなどのリソースに直接付随するカスタム属性です（例：スキンケア商品の「主要成分」や、保湿クリームの「適した肌タイプ」など）。

メタオブジェクトは、特定の商品やカテゴリに付随しない独立した再利用可能なデータレコードで、複数の商品、ページ、またはパーツで参照できます。例えば、ストアで複数のスキンケアラインを扱っている場合、「ラインのコンセプトや開発ストーリー」のようなコンテンツは同じライン内のすべての商品ページに表示する必要があるかもしれません。この場合、メタオブジェクトを使うことで、各商品に同じ情報を繰り返し入力することなく、コンテンツを一元管理できます。商品固有のデータにはメタフィールドを使用し、複数の商品やページで共有する必要があるコンテンツにはメタオブジェクトを使用してください。メタオブジェクトの詳細については、「OS 3.0 テーマエディターでのメタオブジェクトの接続」をご覧ください。

Q3 顧客がSKUを切り替えたときに更新されるバリエーション固有のメタフィールド値をどのように表示しますか？

ブロックを最も近い商品のディメンションを使って商品バリエーションのメタフィールドに接続し、ページまたはセクションにバリエーションセレクターパーツが有効になっていることを確認してください。詳細については、上記の「商品バリエーションのメタフィールドの表示」をご覧ください。現在、この用途では単一行および複数行テキストのメタフィールドのみがサポートされています。