こんにちは、たかぼー(@taka_forward)です。
この記事では、Shopifyのテンプレート言語:Liquidを紹介します。

Shopifyのテーマ開発に必要な知識をこれから紹介していきます〜!
<この記事を読むことのメリット>
① Liquidについて知れる
② Liquidの3大要素:Object, Filter, Tagについて知れる
② Shopifyのテーマ開発のイメージがわく
目次
Liquidとは?
Shopifyのテンプレート言語で、サイトを動的に出力するために使用する言語になります。

あるページ(写真ではトップページ)を表示しようとした場合、デバイスからのアクセスをサーバーが感知し、theme.liquidをはじめとしたファイルを読み込み、それらをhtml/CSS/javascriptとして出力してサイトに表示させているという仕組みになります。
theme.liquidに各ファイルを読み込むよう指示が書いてあり、それに基づいてファイルが読み込まれ、表示されます。
それぞれのファイル内には、商品名であれば、 {{ product.title }}・ページタイトルであれば {{ page.title }}などと決まっているルールに基づいて記載すれば、1つのテンプレートで、違う文字が出力されます。
(例){{ product.title }}を記載すれば、同じ商品ページでも、表示する商品によって「青のTシャツ」・「赤のスニーカー」・「黄色の時計」などと別の商品名が出力されます。
コード例
article.template.liquid(ブログ一覧ページ)をみてみましょう。
<div class="section-header text-center">
<h1 class="article__title">{{ article.title }}</h1>
{% if section.settings.blog_show_author %}
<span class="article__author">
{{ 'blogs.article.by_author' | t: author: article.author }}</span>
{% endif %}
{% if section.settings.blog_show_date %}
<span class="article__date">
{{ article.published_at | time_tag: format: 'date' }}
</span>
{% endif %}
</div>
<div class="rte">
{{ article.content }}
</div>
{% if section.settings.show_share_buttons %}
{% include 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
{% endif %}
Liquidファイルでできているのですが、コードを見ると、
・基本的にhtmlファイル
・{{ }} , {% %}がある。
・ifで条件分岐ができる
・動的にする部分をLiquidコードで置き換えている
(上の例だとブログのタイトル名→{{ article.title }}にしている)
などがわかります。
Liquidで使われる {{ … }}, {% … %}はそれぞれこのような意味があります。
{{ … }} :データを出力する際
{% … %}:ファイルを呼び出す、true/falseなどのロジックを作る際
ここで、どのように置き換えていくのか?どんな特徴があるのかという疑問があると思いますので、ここからLiquidコードで書き換える時に必要な3大要素について紹介していきます。
Liquidの3大要素:Object, Filter, Tag
Object, Filter, Tagを使ってhtmlファイルに記載のコードをliquidに変更していきます
Object
オブジェクトは、
- Global Object
- Content Object
- Other Object
の3つに分類されます。
Global Objects
全てのテーマファイルで使用ができるオブジェクトです。ほぼ全てのオブジェクトがこれに分類されます。
オブジェクトは「Shopifyで決められた変数.(ドット)プロパティ」で記載するのですが、誰でもコードをみればなんとなくわかるのがliquidだと思っているので難しく考えなくてOKです。
例えば、製品価格は
{{ product.price }}
と記載し、ストアのURLは
{{ shop.url }}
となります。
Content Objects
テンプレートやセクションファイル、Shopifyアプリを表示させるのに必要なものです。
content_for_header, content_for_layout, content_for_indexの3つです。
Other Objects
Apple PayやGoogle Payで決済する場合、外部ページに飛ぶ必要があるので、その際に記述するものです。
additional_checkout_buttons, content_for_additional_checkout_buttons 2つしかありません。
Filter
フィルターは出力されようするオブジェクトに対し、色のフィルターを当てたり、htmlファイルに追記したり、表示方法を変えたりするものです。
代表例を見てみましょう。写真サイズの出力を調整する場合です。
{{ product | img_url: '500x500' }}
フィルターは「|」を用いて記載します。この場合だと500×500を出力します。500xと書けば横が500pxの画像が出力、x500と書けば縦500pxの画像が出力されます。
Tag
条件分岐や繰り返しなどのロジックを使う際、また、別のファイルデータを読み込む際に使用するものです。
Liquidでは{% %}で囲い記載をし、{% if %}{% for %}{% include %}{% section %}{% form %}などをよく使用します。ここでは代表的なifとforを紹介しようと思います。
{% if %} ー {% endif %}:条件分岐
条件分岐の文章になります。
(例)Shopifyで会員限定サイトを作る場合
{% comment %}会員にコンテンツ表示{% endcomment %}
{% if customer %}
<section class="section-header">
<h2>ようこそ!{{ customer.first_name }}さん</h2>
</section>
{% comment %}非会員の場合{% endcomment %}
{%else%}
<section class="section-header">
<h2>このコンテンツは会員限定ページです。</h2>
</section>
{%endif%}
のようにできます。
{% for %} ー {% endfor %}:繰り返しの動作
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
これをかくと、商品名が羅列されるようになります。(最大50件までの制限があります。)
{% include ‘ファイル名’ %}, {% section ‘ファイル名’ %}:別ファイルの呼び出し
これらを記載すると、別のフォルダのファイルを呼び出すことができます。
includeはスニペット(セクションより小さな共通素材)を呼び出すことに使い、sectionはスニペットよりも大きい部材に使用します。
例えば、
{% include 'breadcrumb' %}
とかくと、breadcrumbというファイル名のスニペットを読み込んでくれます。
※ただ読み込んでくれるだけなので、breadcrumb=パンくずリスト(ページ位置の把握のためにページのヘッダーしたに使われる、「ホーム > カテゴリー > 商品」のようなもの)を表示させたい場合は、コーディングしましょう。
まとめ
ここまでLiquidの3大要素をLiquidコードの例にあげて紹介してきました。
プログラミング言語というと、「とっつきにくい」「コードを読むのも勉強しないと難しい」と思いがちですが、liquidは日本人が開発したことで知られるRubyベースに作られているので、直感的にわかるものが多く、楽しくコーディングすることができます。
「もう少し詳しいことを知りたい!」という方はこちらも合わせてご覧ください。
ご不明点・サイト構築のご相談などありましたらお気軽にお問い合わせください!