本記事は私達の会社で作ったShopifyテーマ開発入門書『Hello Shopify Themes Shopifyテーマ開発ガイド』からの抜粋です。

本節では、セクションファイルの {% schema %} タグおよび、コンフィグファイルの config/settings_schema.json で記述するJSONスキーマの詳細を紹介します。

スキーマ：テーマエディタとの関連づけを定義するJSON記述

本書では既に何度か触れてきましたが、スキーマとは、テーマエディタとの関連づけを定義するJSON記述のことです。
スキーマの内容に基づいて、テーマエディタ上で操作可能な設定項目が定義されています。次に示すのは、セクションファイル内のスキーマ記述サンプルです。

{% schema %}
{
  "name": "Sample",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Sample",
      "label": "Sample Txt"
    }
  ]
}
{% endschema %}

スキーマは、次のファイルで記述できます。
　

1. セクションファイル内の {% schema %} タグ
2. config/settings_schema.json ファイル

セクションファイルのセクションスキーマと、 config/settings_schema.json のスキーマは、相違点もあるものの、多くの共通点を持ちます。
個々の特徴を見ていきましょう。

settings_schema.jsonスキーマの特徴

settings_schema.json の特徴については前節「4-4. テーマファイル解説」のコンフィグファイル解説パートでも言及しましたね。
settings_schema.json は、テーマ名称などのテーマのメタデータの他に、テーマ設定を定義するスキーマを記述できます。サンプルコードは次のとおりです。

config/settings_schema.json

[
  {
    "name": "theme_info",
    "theme_name": "テーマの名称",
    //メタデータ定義のため省略
  },
  {
    "name": "SNSアカウント情報",
    "settings": [
      {
        "type": "text",
        "id": "social_facebook_link",
        "label": "Facebook"
      }
    ]
  }
]

settings_schema.jsonスキーマで記述可能な属性

settings_schema.json スキーマは、テーマ設定を定義し、テーマエディタから編集可能なテーマ全体に関わる設定を作成できます。
スキーマ内部には name と settings の2属性が必ず必要です。

Dawnの settings_schema.json を見てみると、 name と settings 属性で定義された設定項目がたくさん記述されているのが分かるかと思います。

ここでキーとなるのが settings 属性です。
settings 属性はセクションスキーマでも記述でき、そちらではテーマ設定ではなくセクション設定とブロック設定を定義することになります。
settings 属性の記法は、 settings_schema.json スキーマとセクションスキーマ間で共通です。本節で詳しく後述します。

セクションスキーマの特徴

一方のセクションスキーマは、セクション設定とブロック設定、テーマエディタ上のセクションの挙動を定義するスキーマです。
セクションファイルの {% schema %} タグ内に記述します。セクションスキーマを記述しなければ、セクションをテーマエディタから操作することはできません。
サンプルコードは次のとおりです（「3-2. 動的セクションとブロックの作成」で作成したコードから一部抜粋）。 settings_schema.json スキーマよりも明らかに記述できる属性が多いのが分かりますね。

sections/faq.liquid

{% schema %}
{
  "name": "FAQ",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "FAQ"
    }
  ],
  "blocks": [
    {
      "type": "faq_item",
      "name": "FAQ項目",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "質問を入力してください"
        }
        //略
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ"
    }
  ]
}
{% endschema %}

セクションスキーマで記述可能な属性

セクションスキーマ内に含められる属性は次のとおりです。

先程 settings_schema.json スキーマの解説で述べた settings 属性に注目してください。セクションスキーマの settings 属性はセクション設定を定義します。
さらに、上記の表の blocks 属性もまた、内部に settings 属性を持つことができ、そちらはブロック設定を表します。
　
本書では、テーマ設定・セクション設定・ブロック設定を定義する settings 属性と、オリジナルテーマの開発で頻繁に扱う blocks 、 presets属性の詳細を解説します。
その他の属性の詳細は、公式ドキュメントを参照してください。

settings属性：テーマ設定・セクション設定・ブロック設定の定義

まずは settings 属性の記法から掘り下げていきます。
本節で前述してきたとおり、 settings 属性は次の特徴を持ちます。

• settings_schema.json スキーマおよびセクションスキーマで記述する属性
• テーマ設定・セクション設定・ブロック設定を定義する
• 記述される箇所によって定義できる設定が異なる
• settings 属性の記法は、記述箇所が変わっても共通

settings 属性に基づいてテーマエディタ上のUIが定義され、入力された値をLiquidに出力できるようになります。
設定の振る舞いについては、公式ドキュメント上でも独立したページが用意されているので、併せて参考にしてください。

{{ settings.title_sample }}

{{ section.settings.title_sample }}

{% for block in section.blocks %}
  {{ block.settings.title_sample }}
{% endfor %}

設定カテゴリ：サイドバー設定と入力設定

settings 属性が定義できる設定には2つのカテゴリがあります。「サイドバー設定」と「入力設定」です。 入力設定はテーマエディタ上でマーチャントが入力可能なUIを作成します。サイドバー設定はこれらのUIに対する補足情報です。

次に示すのは、Dawnのおすすめ商品セクションsections/product-recommendations.liquidのテーマエディタ上キャプチャです。
サイドバー設定に当てはまるのは、「動的レコメンデーションでは〜」というサイドバー冒頭の文言と、「商品カード」の見出し文言です。その他の入力項目は入力設定として定義されています。
　

設定カテゴリの例

それぞれ、次のような形で表します。

"settings": [
  {
    "type": "サイドバー設定のタイプ",
    "content": "サイドバーに表示するヘッダー文言"
  },
  {
    "type": "入力設定のタイプ",
    "id": "入力設定のID",
    "label": "入力欄の名称ラベル",
    "info": "入力欄に関する説明文",
    "default": "デフォルトの入力値"
  }
]

サイドバー設定

標準属性として type と content 属性を持ちます。
テーマエディタ上に見出し・文言を表示させ、マーチャントに入力欄補足情報を提供できます。必要に応じて追加すると良いでしょう。

入力設定

標準属性として以下の5属性を持ちます。
※ type 属性の設定次第で一部変化します

id は任意の文言で指定し、Liquid内で {{ section.settings.設定したid値 }} と記述することで、該当設定に入力された値をレンダリングできるようになります（id値が title_sample であれば {{section.settings.title_sample}} という具合です）。
id値がひとつのファイル内で重複するとエラーになるため、一意の値を指定してください。
　
他の label 、 info 、 default 属性は任意文言を指定するだけなのでシンプルですが、入力設定の type 属性は少しややこしいです。

type属性について

本属性に設定する値によって、テーマエディタ上の入力欄UIが変わります。
自由な値が設定できる訳ではなく、Shopifyから提供されているタイプの中から選択する必要があります。
　
基本的な入力タイプは次の7点です。HTMLの <input> 要素における属性と対応しています。

上記以外の特殊な入力タイプも20点以上存在します。Shopify上のブログ記事や商品を受け付けられる入力欄の他、色情報の選択やURLを含められるものまでさまざまです。
利用頻度の高いものを以下に紹介します。

個々の入力タイプ詳細については、公式ドキュメントを参照してください。

blocks属性：テーマエディタから操作可能な配列の定義

セクションスキーマに固有の属性である blocks について掘り下げます。
ブロックは本書で何度か触れてきましたね。ブロックの概念にまだ慣れていない方は「3-2. 動的セクションとブロックの作成」も併せて参照してください。
　
blocks 属性はセクション内のブロック配列を定義します。
セクション設定を表す settings 属性の内部ではなく、外部に記述することに注意してください。
　
blocks属性は、次のような形で記述します。

{% schema %}
{
  "name": "セクションのタイトル文言",
  "settings": [
    {（省略）}
  ],
  "blocks": [
    {
      "name": "ブロックの任意名称",
      "type": "ブロックのタイプを表す任意文言",
      "settings": [
        {
          "type": "setting属性のtypeと同仕様",
          "id": "setting属性のidと同仕様",
          "label": "setting属性のlabelと同仕様"
        }
      ]
    }
  ]
}
{% endschema %}

blocks 内で定義できる属性は次のとおりです。

ややこしいことに、 settings 内の type 属性と、 blocks 内の type 属性は振る舞いが異なります。 blocks 内の type 属性は任意の文言で指定でき、テーマエディタ上のUIに関連しません。
ブロック設定は、 blocks 内の settings 属性で定義します。こちらの記法は、前述した settings 属性の解説パートを参照してください。
　
なお、ブロック配列はあくまでもセクションオブジェクトです。
配列内の個々のブロックオブジェクトにアクセスするためには、ループ出力を組み合わせる必要があります。
次に示すサンプルコードは、登録されたブロックの数だけループし、文言を出力します。

{% for block in section.blocks %}
  <p>{{ block.settings.title_sample}}</p>
{% endfor %}

section.blocks オブジェクトのループ内で、 {{block.settings.設定したid値}} と記述することで値がレンダリングされます。

補足：アプリブロックのスキーマ記述

Dawnテーマのセクションスキーマを見ていると、blocks属性内に、次のような "type": "@app" という記述が含まれていることがあります。

"blocks": [
  {
    "type": "@app"
  },
  {
    "name": "通常のブロック記述",
    "type": "ブロックのタイプを表す任意文言",
    "settings": [
      {
        //略
      }
    ]
  }
]

この @app ブロックタイプは、OS2.0に伴って追加された仕組み「アプリブロック」をサポートするための記述です。アプリブロックについては5章で詳しく紹介します。
JSONテンプレートによってレンダリングされるセクションには、この @app ブロックタイプの記述が必要です。
　
なお、アプリブロックのラップ要素として sections/app.liquid というセクションファイルが利用できます。
オリジナルテーマ開発の際は、Dawnの記述を参考に、 @app ブロックタイプと sections/app.liquid をテーマ内に含めるようにしましょう。

presets属性：動的セクションに対応させる定義

最後に、セクションスキーマの固有属性である presets 属性を紹介します。
presets 属性を記述したセクションは、動的セクションとして、テーマエディタから任意のJSONテンプレートへ自由に追加できるようになります。詳しくは「3-2. 動的セクションとブロックの作成」も参照してください。
　
presets 属性は、次のような形で記述します。

{% schema %}
{
  "name": "セクションのタイトル文言",
  "settings": [
    {
      "type": "text",
      "id": "title"
    }
  ],
  "blocks": [
    {（省略）}
  ],
  "presets": [
    {
      "name": "動的追加セクションの任意名称",
      "settings": {
        "title（※settings内のidで指定した値）": "デフォルトの入力内容"
      },
      "blocks": [
        {
          "type": "（※blocks属性内のtypeで設定した値）"
        }
      ]
    }
 ]
}
{% endschema %}

presets内で定義できる属性は次のとおりです。

必須属性はnameのみのため、次のようなシンプルな記述でも充分に成り立ちます。

{% schema %}
{
  "name": "FAQ",
  "presets": [
    {
      "name": "FAQ"
    }
  ]
}
{% endschema %}

任意属性である settings と blocks は、該当セクションをテーマエディタから動的追加した場合のデフォルト値を定義します。
名称は同じですが、 presets 内の settings と blocks 属性は、ここまで紹介してきたテーマ設定・セクション設定・ブロック設定を定義する settings 属性と、前述したブロック配列を表す blocks 属性とはまったく挙動が異なります。混同しないように注意してください。

私達の会社で制作したShopifyテーマ開発入門書のご購入はこちらから。
完売後の増刷予定は現時点ではございません。印刷書籍をご希望の方は、ぜひお早めにお迎えください。

• 著者：川島さやか
• 出版：non-standard world, Inc.
• 判型・ページ数：B5判・248ページ
• 価格：3,850円（税込）※PDF版同梱、送料無料

特集ページへ