【Shopify.dev和訳】Themes/Architecture/Overview
この記事について
この記事は、Themes/Architecture/Overviewの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Theme architecture
テーマは、マーチャントのオンラインストアの構成、機能、スタイルをコントロールします。テーマのコードは、Shopify テーマに固有のファイルと、画像、スタイルシート、スクリプトなどのサポート資産を含む標準的なディレクトリ構造で構成されています。
テーマのファイルは、大きく分けて以下のように分類されます。
- Markup and features (マークアップと機能) - これらのファイルは、テーマのレイアウトと機能を制御します。マーチャントのオンラインストアのページを構成する HTML マークアップの生成に Liquid を使用します。
- Supporting assets (サポートアセット) - これらのファイルは、テーマ内の他のファイルから呼び出されたり、消費されたりするアセット、スクリプト、またはロケールファイルです。
- Config files (設定ファイル) - これらのファイルは JSON を使用して設定データを保存し、マーチャントはテーマエディタを使用してカスタマイズすることができます。
マークアップと機能｜ Markup and features
次のコンポーネントは、各ページの構成を決定します。
| Number | Component | Description |
| ------ | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| 1 | Layout ファイル | テーマのベースとなるもの。レイアウトファイルは、ヘッダーやフッターなど、繰り返されるテーマ要素を格納するために使用します。 |
| 2 | テンプレート | ページに表示される内容をコントロールするテンプレートです。各テーマには、トップページや商品ページなど、異なるタイプのコンテンツを表示するために、さまざまなタイプのテンプレートを用意します。また、同じリソースタイプに複数のテンプレートを作成し、ストアのリソースと関連付けることで、バリエーションを増やすことができます。
| JSON テンプレートはセクションのラッパーとしてのみ機能し、Liquid テンプレートはコードを含みます。 |
| 3 | テンプレートによってレンダリングされた sections | マーチャントが JSON テンプレートに追加できる、再利用可能でカスタマイズ可能なコンテンツのモジュール。 |
| 4 | テンプレートによってレンダリングされた blocks | 再利用可能でカスタマイズ可能なコンテンツのモジュールで、セクションに追加したり、削除したり、順番を変えたりすることができます。 |
機能は、Liquid の templete ファイル、sections、blocks、snippets でテーマに導入することができます。テーマの機能は、Liquid、CSS、JavaScript を使って実装することができます。テーマの機能は、お客様がオンラインストアのコンテンツをどのように操作するかを決定します。例えば、お客様が商品をカートに入れるためには、product タイプを指定した Liquid form tag を提供する必要があります。
サポートアセット｜ Supporting assets
コンポーネントや機能の表示を制御したり、コンポーネント間で使用できる再利用可能なコードを保存したりするために、サポートするアセットをテーマに追加することができます。
例えば、テーマのスタイルを決めるためのアセットを追加する必要があります。これらのアセットは、オンラインストアの外観や、コンテンツセクションのスタイルを定義することで、マーチャントのブランドを表現するのに役立ちます。テーマのスタイルは、レイアウトファイル、テンプレートファイル、セクションファイルに適用される CSS と JavaScript によって定義されます。
テーマ全体で再利用したいリキッドや HTML は、snippets に格納することができます。テーマの CSS と JavaScript は、テーマの assets ディレクトリに格納します。
また、ロケールファイルを使って、テーマをさまざまな言語に翻訳することができます。ロケールファイルには、テーマ全体で使用される文字列の翻訳セットが含まれています。ロケールファイルは、テーマの locales ディレクトリに保存します。
テーマコンポーネントのカスタマイズを可能にする｜ Allowing for customization of theme components
マーチャントは Shopify テーマエディタを使って Shopify 管理画面からテーマをカスタマイズすることができます。テーマには様々なカスタマイズオプションがあり、マーチャントが希望するカスタマーエクスペリエンスを作り出すことができます。
- 複数のセクションやブロックを作成することで、テーマのテンプレートをモジュール化することができます。セクションとブロックのベストプラクティスを参照して、セクションとブロックを効果的にデザインする方法を学んでください。
- マーチャントがテーマの外観や動作をコントロールできるように設定を作成することができます。マーチャントは、ダイナミックソースを使用して、設定にダイナミックな値を設定することができます。
テーマディレクトリ｜ Theme directories
テーマには特定のファイル構造があり、次のディレクトリが含まれています。
Layout
layout ディレクトリには、テーマのLayout ファイルが格納されており、Templatesファイルがレンダリングされます。
Templates
templates ディレクトリには、テーマのTemplates ファイルが含まれています。
Sections
sections ディレクトリには、テーマのSectionsが含まれます。セクションは、マーチャントがカスタマイズできるコンテンツの再利用可能なモジュールです。セクションには、その中で使用できるブロックも定義されています。
Snippets
snippets ディレクトリには、再利用可能な小さなコードのスニペットを格納するリキッドファイルがあります。これらのスニペットは、Liquid render タグを使ってテーマ全体で参照することができます。
Assets
assets ディレクトリには、画像、CSS、JavaScript ファイルなど、テーマで使用されるすべてのアセットが含まれています。
asset_url Liquid の URL フィルターを使って、テーマ内のアセットを参照することができます。
拡張子を .liquid とすることで、バイナリではないアセットファイルでも Liquid の限定的な機能にアクセスできます。一般的な使用例としては、JavaScript（.js.liquid）や CSS（.css.liquid）ファイルがあります。この拡張子が付いたファイルは、以下の機能にアクセスできます。
Config
config ディレクトリには、テーマ設定に関連するテーマの設定ファイルが含まれています。
Locales
locales ディレクトリには、翻訳されたコンテンツを提供するためのテーマの locale ファイルが含まれます。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion