参考資料・関連記事

Shopify Theme Blocksについて

1. 第一部：https://tech-direction.jp/news/blog/470/

2. 第二部：https://tech-direction.jp/news/blog/702/

1. はじめに

Shopifyテーマ開発に革命をもたらす可能性を秘めた「Theme Blocks」。第1部ではその概要を、そして前回の第2部では、テーマブロックの基本的な構成方法と、「テーマブロック専用セクション」という新しい考え方、さらに従来のセクション定義ブロックとは混在できないという非常に重要な制約について解説しました。

前回までの記事：(まだ読んでいない方は、ぜひご一読ください。)

1. 第一部：https://tech-direction.jp/news/blog/470/

2. 第二部：https://tech-direction.jp/news/blog/702/

1.1　記事について

今回の第3部では、テーマブロック専用セクションをより効果的に構築するための応用テクニックに焦点を当てます。具体的には、利用するテーマブロックを制御する「ブロックターゲティング（プライベートブロック含む）」と、テーマブロックの配置を固定・制御する「Static Blocks（静的ブロック）」です。これらを詳しく掘り下げ、より柔軟で管理しやすく、堅牢なテーマ開発を実現する方法を探ります。

1.2　記事の対象

この記事は、ShopifyのTheme開発者に向けて解説しております。

1.3　記事を読み終えるまでの時間

この記事を読み終えるまでに、約15分です。

2. Block TargetingとPrivate Blcok：セクションで使えるブロックを絞る

Shopifyのテーマブロックは非常に便利ですが、そのままではどのテーマブロックを使用するセクションでも全てのテーマブロックが追加できてしまい、かえって複雑になったり、意図しない組み合わせが生まれてしまう可能性があります。

ブロックターゲティングとは特定のセクションで利用できるテーマブロックの種類を、テーマ開発者が指定（コントロール）できる仕組みです。

これにより、テーマエディタのブロックピッカーに表示されるブロックをセクションごとに最適化し、テーマを使うマーチャントさんが迷わず、かつ意図した通りにコンテンツを構築できるようになります。

テーマブロックターゲティングには、主に3つの方法があります。

1. 全てのテーマブロックを受け入れる (@theme)

2. 特定のテーマブロックだけを受け入れる

3. ブロックを特定セクション専用にする（プライベートブロック）

2.1 全てのテーマブロックを受け入れる (@theme)：

先日書いた記事の中に上記のようなセクションの記述があったかと思うのですが、

{% schema %}
{
  "blocks": [
  {"type": "@theme"},
  {"type": "@app"}
  ]
}
{% endschema %}

以前の記事でも記載しましたが、上記の記述がブロックターゲティングに該当します。

このセクションでは、テーマエディタのブロックピッカーに、 blocks ディレクトリにある全ての（プライベートでない）テーマブロックが表示され、自由に追加できます。汎用的なセクションや、自由度の高いレイアウトを組みたい場合に便利です。

2.2 特定のテーマブロックだけを受け入れる：

セクションの用途が明確な場合、使えるブロックを限定することで、より分かりやすく、間違いのないコンテンツ作成を促せます。

例えば、「スライドショー」セクションでは「スライド」ブロックだけを使えるようにしたい、といったケース。

{% comment %} スライドのHTML（画像、テキストなど） {% endcomment %}

{% schema %}
  {
    "name": "スライド"
    // スライド用の設定項目 (settings) など
  }
{% endschema %}

blocks.slide.liquid

{% comment %} スライドショー全体のHTMLと、追加されたスライドをループ表示するLiquidコードなど {% endcomment %}

{% content_for 'blocks' %}

{% schema %}
  {
    "name": "スライドショー",
    "blocks": [
      { "type": "slide" } // "slide" という名前のテーマブロックのみ許可
    ]
    //「{"type": "slide"} のようにテーマブロックを指定した場合、
    //そのセクションはテーマブロック専用となり、
    //従来のセクション定義ブロック（schema 内で type, name, settings を持つブロック）を
    //混在させることはできません」
  }
{% endschema %}

sections/slideshow.liquid

2.3 Private Block – プライベートブロック：特定セクション専用にする

特定のテーマブロックを、本当に特定のセクションだけで使わせたい、他のセクションのブロックピッカーには一切表示させたくない、という場合に使うのが**「プライベートブロック」**です。

先ほどの「スライド」ブロックを「スライドショー」専用にしてみましょう。

手順:

1. ブロックファイル名の変更: slide.liquidのファイル名の先頭にアンダースコア _ を付けて、_slide.liquid にリネームします。 blocks/_slide.liquid (ファイル名を変更)

2. セクションスキーマでの明示的な指定: 「スライドショー」セクションのschemaで、typeにアンダースコアを含めた名前 _slide を指定します。

{% comment %} スライドショー全体のHTMLなど {% endcomment %}

{% content_for 'blocks' %}

{% schema %}
  {
    "name": "スライドショー",
    "blocks": [
      { "type": "_slide" } // アンダースコア付きでプライベートブロックを指定
    ]
  }
{% endschema %}

sections/slideshow.liquid

結果:

・ファイル名がアンダースコアで始まる _slide.liquid はプライベートブロックとして扱われます。

・プライベートブロックは、"type": "@theme" を指定したセクションのブロックピッカーには表示されません。

・プライベートブロックを利用したいセクションでは、上記のように schema 内でファイル名を明示的に指定する必要があります。

これにより、「スライド」ブロックは完全に「スライドショー」セクション専用となり、他のセクションで誤って使われることを防げます。

3．Static Blocks (静的ブロック)：レイアウトを固定し、意図した構造を維持する

テーマブロックは柔軟ですが、時には「このブロックは絶対に動かしたり消したりしてほしくない」という場合があります。例えば、セクションのタイトル部分や、特定の機能に必要なボタンなどです。

そんな時に役立つのが「Static Blocks（静的ブロック）」です。これは、テーマブロックを特定の位置に固定してレンダリングする機能です。

Static Blocksの特徴:

・マーチャント（テーマ利用者）は、テーマエディタ上で並び替えたり、削除したり、複製したりできません。

・しかし、ブロック内の設定（文字の変更、色の選択など）をカスタマイズすることは可能です。

・テーマ開発者は、セクションや他のブロック内のレイアウト構造をより厳密に制御できます

3.1 動的ブロック (Dynamic Blocks) との違い

これまで見てきた {% content_for ‘blocks’ %} で呼び出される通常のブロックは「動的ブロック」と考えることができます。Static Blocks（静的ブロック）との主な違いは以下の通りです。

3.2 Static Blocks の使い方

セクションファイルやブロックファイル内で、以下のLiquidタグを使って静的ブロックをレンダリングします。

{% content_for "block", type: "<ブロック名>", id: "<ユニークID>" %}

・type: blocks ディレクトリにある、使用したいテーマブロックのファイル名（拡張子なし）を指定します。

・id : 必須項目です。この静的ブロックを識別するためのユニークなIDを文字列で指定します。開発者が自由に命名できますが、その親要素（セクションまたはブロック）内で一意である必要があります。同じ種類のブロックでもIDを変えれば複数配置できます。

IDのユニーク性について（重要ポイント）

この id は、その静的ブロックが直接含まれている親要素（それがセクションであれ、別のテーマブロックであれ）の中でユニークである必要があります。少し分かりにくいかもしれませんが、ポイントは「直接の親の中で重複しなければOK」ということです。

・以前: セクション全体で同じIDを使うことはできませんでした。

・現在: すぐ上の親要素の範囲内でIDが被らなければ問題ありません。

3.3 Static Blockはどんなときに便利？具体的なユースケース

1. レイアウトの一部を固定する:

マーチャントに動かされたくない、常に決まった位置に表示させたい要素に使います。例えば、アコーディオン（折りたたみ）UIの、常に表示されるタイトル部分や開閉アイコンなど、

レイアウト上の位置や存在が固定されているべき要素に適しています。マーチャントが誤って削除したり、順番を変えてレイアウトが崩れるのを防ぎます。

{% comment %} 例：折りたたみ行ブロック内 {% endcomment %}

{% comment %} タイトル部分は静的にレンダリング（動かせない） {% endcomment %}
{% content_for "block", type: "collapsible-row-summary", id: "summary-{{ block.id }}" %}

<div>
  {% comment %} 中身のコンテンツは動的にレンダリング（マーチャントが自由に追加/編集/並び替え可能） {% endcomment %}
  {% content_for "blocks" %}
</div>

静的ブロックには、テーマエディタで目印として点線の目のアイコンが表示される場合があり(↓の画像を参照)、分かりやすくなっています。

2. 条件付き表示

Liquidの {% if %} などを使って、特定の条件下でのみ静的ブロックを表示させることができます。これは動的ブロックではできません。

例：スライドが2枚以上ある場合のみ、スライドショーの操作ボタンを表示する

<div id="slideshow-{{ section.id }}">
  <div class="slideshow__slides">
    {% comment %} スライド自体は動的にレンダリング（マーチャントが追加/削除/並び替え可能） {% endcomment %}
    {% content_for "blocks" %}
  </div>

  {% comment %} スライドが2枚以上ある場合のみ、静的に操作ボタンブロックを表示 {% endcomment %}
  {% if section.blocks.size > 1 %}
    {% content_for "block", type: "_slideshow-controls", id: "static-controls-{{ section.id }}" %}
  {% endif %}
</div>

{% schema %}
  {
    "name": "Slideshow",
    "blocks": [
      { "type": "_slide" }, // スライドブロック（プライベート）
      { "type": "_slideshow-controls" } // 操作ボタンブロック（プライベート）
    ]
  }
{% endschema %}

まとめ

前回の第2部ではテーマブロックの基本構成をご紹介し、「次回は具体的な構築方法を」とお伝えしましたが、その前段階として非常に重要な応用機能がありましたので、予定を変更し今回の第3部ではその解説を中心にお届けしました。（具体的な構築ハンズオンは次回の番外編に持ち越させてください！）

今回解説したのは、テーマブロックのポテンシャルを最大限に引き出すための鍵となる「ブロックターゲティング（プライベートブロック含む）」と「Static Blocks（静的ブロック）」です。

・ブロックターゲティングは、テーマブロックの「汎用性」をコントロールし、適切なセクションで安全に使えるようにするための重要な仕組みです。

・Static Blocksは、レイアウトの固定や条件付き表示を可能にし、より意図した通りの構造を実現します。（そして、今後の記事で詳しく解説する予定の「ネスト」構造と組み合わせることで、テーマブロックの可能性はさらに大きく広がります）

これらの応用機能を理解し、基本と組み合わせることで、より柔軟でメンテナンス性が高く、かつマーチャントにも使いやすい、洗練されたテーマ構築が可能になります。

さて、これでテーマブロックの主要な機能についての理論は一通り網羅できました。あとは実践あるのみです！

著者：ショピ道 龍之