【Shopifyテンプレート言語】Liquidってなに?【Liquid】

こんにちは、たかぼー(@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

オブジェクトは、

  1. Global Object 
  2. Content Object
  3. 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ベースに作られているので、直感的にわかるものが多く、楽しくコーディングすることができます。

「もう少し詳しいことを知りたい!」という方はこちらも合わせてご覧ください。

Shopify公式

この記事を書いた人

たかぼー

1993年、東京都生まれ。大学卒業後、メーカーの海外営業を経験し、「日本製のものが1人でも多くの人に使われて欲しい」という思いを形にするためにShopifyを使ったECサイト制作から運用までのサポートをしています。これからECサイト制作を始める人が「楽しく」作ってお客様の売り上げに貢献できるよう、知識のシェアをしているブログです。