【Shopify】liquidのオブジェクトについてまとめてみた (metafield, model, model_source)

#はじめに
この記事では、Liquidオブジェクトについて日本語訳したものです。

`metafield`、`model`、`model_source`のオブジェクトをまとめていきます。

[こちら](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/objects)を参考にしました。

#metafieldオブジェクト
metafieldオブジェクトの概要について[ドキュメント](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/objects/metafield)からの引用です。

>`metafield`オブジェクトを使用すると、商品、コレクション、顧客、注文、ブログ、ページ、お店の追加情報を出力することが出来ます。
メタフィールドは、`namespace`、`key`、`value`、`description (optional)`、で構成されており、`namespace`を使用することで、異なるメタフィールドをグループ化することが出来ます。


メタフィールドには`value_type`があり、以下のいずれかになります。

+ integer（整数） 
+ string（文字）
+ json_string


例えば、以下の表のようにメタフィールドを作成したとします。

| Namespace     | Key   | Value   |
|:--------------|:------|:--------|
| instructions  | Wash  | Cold    |
| instructions  | Dry   | Tumble  |


メタフィールドは、以下に示す`namespace[key名が定義された変数]`、`namespace[key名]`、`instructions.key名`の **3パターン** で出力することが可能です。

```.liquid
{% assign instructions = product.metafields.instructions %}
{% assign key = 'Wash' %}
<ul>
  <li>Wash: {{ instructions[key] }}</li>
  <li>Wash: {{ instructions['Wash'] }}</li>
  <li>Wash: {{ instructions.Wash }}</li>
</ul>
```
>Wash: Cold
Wash: Cold
Wash: Cold


2つ目のメタフィールドを出力するには、`product.liquid`で以下のように`key`を指定します。

```.liquid
{% assign instructions = product.metafields.instructions %}
{% assign key = 'Dry' %}
<ul>
  <li>Dry: {{ instructions[key] }}</li>
  <li>Dry: {{ instructions['Dry'] }}</li>
  <li>Dry: {{ instructions.Dry }}</li>
</ul>
```

商品の中で`instructions（namespaceの値）`が付けられたすべてのメタフィールドを出力する場合は、次例のようにすることができます。

メタフィールドの`key`は`{{field | first}}`で、`value`は、`{{field | last}}`で出力することが出来ます。

```.liquid
<ul>
   {% for field in product.metafields.instructions %}
   <li>{{ field | first }}: {{ field | last }}</li>
   {% endfor %}
</ul>
```
>Wash: Cold
Dry: Tumble


`value_type`が、`json_string`の場合、メタフィールドは**反復可能なハッシュや配列**に変換されます。


```.liquid
Storage instructions:
<ul>
  {% for key_value in product.metafields.instructions['storage'] %}
    <li>{{ key_value[0] }}: {{ key_value[1] }}</li>
  {% endfor %}
</ul>
```
>Storage instructions:
min_temp: 0
max_temp: 50

##Liquidでの使用例
メタフィールドを使用すると、商品ページに追加コンテンツを追加することも出来ます。

###例1. タブや関連商品リンクの追加

```.liquid
{%- assign tabs = product.metafields.tabs -%}
<ul class="tabs">
    {% include 'product-description' %}
    {%- for field in tabs -%}
        <li><h2>{{ field | first }}</h2>{{ field | last }}</li>
    {%- endfor -%}
    {% include 'related-products' %}
</ul>
```

###例2. 条件分岐

例では、商品に洗濯の指示があるかどうかをチェックして、その指示を表示することが出来ます。

```.liquid
{% unless product.metafields.Acme134-instructions.Wash == blank %}
Wash: {{ product.metafields.Acme134-instructions.Wash }}
{% endunless %}
```

###例3. 商品属性の保存

メタフィールドを作成して、商品の色を保存して、商品ページの背景を同じ色に設定することが出来ます。

```.liquid
{%- if product.metafields.style.colour != blank -%}
  {%- assign mColour = product.metafields.style.colour -%}
  <style>
      .add-to-cart {
        background: {{ mColour }}
      }
  </style>
{%- endif -%}
```

###例4. 在庫の追跡

配送時間、パックオーダーの日付、チェックアウトページの販売数を表示することが出来ます。

```.liquid
{% if backorder != blank %}<div>This item is backordered, and will ship in {{ backorder }}</div>{% endif %}

<div class="stock-sold-bar">
<span data-start="{{ startCount }}" data-stock="{{ currentCount }}" data-percent="{{ soldPercent }}"></span>
</div>
```

###例5. 複数在庫の追跡

商品がどこの在庫にあるのかを追跡することが出来ます。

```.liquid
{%- assign locations = product.metafields.locations -%}
{%- assign items = locations | split: ';' -%}
<ul class="store-location">
    {%- for item in items -%}
        {% assign stock = item | split:',' %}
        <li>{{ stock | first }}: {{ stock | last }}</li>
    {%- endfor -%}
</ul>
```

###例6. 商品のグループ化

```.liquid
{%- assign r = product.metafields.related.items | split:"," -%}
<div class="related-products">
    {%- for p in r -%}
        {% assign relatedProduct = all_products[p] %}
        {%- include 'some-snippet' product: relatedProduct -%}
    {%- endfor -%}
</div>
```

###例7. 商品の入れ子化

```.liquid
{%- assign cParent = product.metafields.col.parent -%}
{%- assign cChild = product.metafields.col.child -%}
<div>
    {%- if collections[cChild].products.size > 0 -%}
       {%- include 'collection-loop' with collections[cChild] -%}
    {%- endif -%}
</div>
```

###例8. SEOデータの保存

商品ページに、`noindex`と`nofollow`のメタタグを追加するには、以下の属性を持つオブジェクトのメタフィールドを作成します。

```.liquid
"namespace" : "seo"
"key" : "hidden"
"value" : 1
"value_type" : "integer"
```






##Shopfiy ADMIN API


以下のリソースで、メタフィールドを変更することが出来ます。

\#{id}は、一意の値が入ります。

| Type of resource | Location of metafields |
|:-- |:-- |
| Article |  /admin/blogs/#{id}/articles/#{id}/metafields.json |
| Blog  |  /admin/blogs/#{id}/metafields.json |
| CustomCollection and SmartCollection  | /admin/collections/#{id}/metafields.json  |
| Customer  | /admin/customers/#{id}/metafields.json  |
| Draft Order  | /admin/draft_orders/#{id}/metafields.json  |
| Order  | /admin/orders/#{id}/metafields.json  |
| Page  | /admin/pages/#{id}/metafields.json  |
| Product  | /admin/products/#{id}/metafields.json  |
| Product Variant | /admin/products/#{id}/variants/#{id}/metafields.json  |
| Product image  | /admin/metafields.json?metafield[owner_id]=#{id}&metafield[owner_resource]=product_image <br><br>上のエンドポイントを使用すると商品画像のメタフィールドを表示できます。商品画像のメタフィールを追加または変更するには、商品画像エンドポイントを使用できます。 |
| Shop | /admin/metafields.json  |

<br>また、Shopify APIでは、以下の方法でメタフィールドを作成したり、更新したりすることができます。

+ GET /admin/api/2021-01/metafields.json：リソースに属するメタフィールドのリストを取得します。

+ GET /admin/api/2021-01/metafields.json**?metafield[owner_id]=850703190&metafield[owner_resource]=product_image**：商品画像のリソースに関するメタフィールドのリストを取得します。
+ GET /admin/api/2021-01/metafields/**count**.json：リソースのメタフィールドの数を取得します。
+ GET /admin/api/2021-01/metafields/**{metafield_id}**.json：単一のメタフィールドをIDで返します。
+ POST /admin/api/2021-01/metafields.json：新しいメタフィールドを作成します。
+ PUT /admin/api/2021-01/metafields/**{metafield_id}**.json：メタフィールドを更新します。
+ DELETE /admin/api/2021-01/metafields/**{metafield_id}**.json：メタフィールドをIDで削除します。



メタフィールドで使用できるプロパティーは以下の10種類です。

| properties | 説明 |
|:--|:--|
| created_at  | **"created_at"："2012-03-13T16:09:54-04:00"** <br>メタフィールドが作成された日時（ISO 8601 format） |
| updated_at  | **"updated_at"："2012-08-24T14:02:15-04:00"** <br>メタフィールドが最後に更新された日時（ISO 8601 format） |
| description  | **"description"：null** <br>メタフィールドに含まれる情報の説明 |
| id  | **"id"：915396206** <br>メタフィールドの一意のID  |
| key  | **"key"："warehouse"**　<br>メタフィールドの名前（3-30文字） |
| namespace | **"namespace"："inventory"** <br>メタフィールドのセットのためのコンテナ<br>他のアプリで使用されるメタフィールドと区別するために、メタフィールド用のカスタム名前空間を定義する必要があります（2-20文字） |
| owner_id  | **"owner_id"：690933842**<br>メタフィールドがアタッチされているリソースの一意のID  |
|  owner_resource | **"owner_resource"："product"**<br>メタフィールドがアタッチしているリソースの種類  |
| value  |  **"value"：25**<br>メタデータとして格納する情報（最大長512文字：メタフィールドのnamespaceが`tags`、keyが`alt`と等しい場合）<br><br>valueの最大長は以下の`value_type`によって異なります。<br><br>・string（文字）の場合：最大5,000,000文字<br>・integer（整数）の場合：最大100.000文字<br>・json_stringの場合：最大1000.000文字 |
| value_type  | **"value_type"："integer"**<br> メタフィールドの情報のタイプ：string、integer、json_string |



#modelオブジェクト
modelオブジェクトの概要について[ドキュメント](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/objects/model)からの引用です。

>`model`オブジェクトには、Shopify管理画面の商品詳細ページからアップロードされた3Dモデル（3D画像）の情報が入っています。
`model`オブジェクトは、`product`オブジェクトの`media`属性からアクセスできます。

`model`オブジェクトの属性について見ていきます。


##model.alt
Shopify管理画面の商品詳細ページに設定されている3Dモデルの`alt`タグを返します。

##model.id
3Dモデルのmedia_idを返します。

##model.media_type
オブジェクト（model）のタイプを返します。

`product`オブジェクトの media 配列をフィルタリングすることができます。

```.liquid
{% assign models = product.media | where: "media_type", "model" %}

{% for model in models %}
  {{ model.alt }}
{% endfor %}
```
>Model of the black stroller
Model of the grey stroller

##model.position
productオブジェクトのメディア配列内で`model`のインデックス番号を返します。

##model.preview_image
3Dモデルのプレビュー画像を返します。

##model.sources
`model_source`オブジェクトの配列を返します。

`model_source`オブジェクトについては、次で解説します。

#model_sourceオブジェクト
model_sourceオブジェクトの概要について[ドキュメント](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/objects/model-source)からの引用です。

>`model_source`オブジェクトには、商品の3Dモデルのソースファイルに関する情報が格納されています。
ソールファイルには、URLやフォーマットなどの情報が入っています。
`model_source`オブジェクトはモデルオブジェクトの`source`配列からアクセスできます。

##model_source.mime_type
モデルソースファイルのMIMEタイプ（ audio/webmやvideo/ogg等 ）を返します。

MIMEタイプとは、Multipurpose Internet Mail Extensionsのことで、メディアタイプとも呼ばれます。

文章やファイルの形式などを示す標準のことです。

##model_source.format
モデルソースファイルのフォーマット（ JPEGやPNG等 ）を返します。

##model_source.url
モデルソースファイルのURLを返します。


#終わりに
今回の記事はここまでになります。

お疲れさまでした。

# Shopify アプリのご紹介

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

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search