1. TOP
  2. Shopify
  3. 【Shopify】独自言語「liquid」の基本的な書き方 - #04
詳しくはこちら
Shopify
 | 

【Shopify】独自言語「liquid」の基本的な書き方 - #04

これまでの記事ではShopify自体の解説を中心にしていました。

ここからは、より開発者向けの内容を解説していきます。

 

また、解説の中で、「変数」「配列」「関数」などいわゆるプログラミング用語が出てきます。

なんとなくJavaScriptやjQueryを使ったことがある方なら普通に理解できると思いますが、これらについての詳しい解説は特にしないので、あらかじめご了承ください。

 

Shopifyの日本語の解説記事は環境構築などが中心で、Shopify独自のプログラミング言語「liquid」についての解説記事はほとんどありませんでした。

なので、Shopifyでサイトを開発したいけど難しい...liquidが全然分からない...という方のお役に立てれば幸いです。

 

■バックナンバー

目次

はじめに

そもそも「liquid」とは何なのかについて解説します。

「liquid」とは、Shopifyのサイトを構築する独自のプログラミング言語で、Rubyをベースとして作られています。

 

Shopifyのサイトは、「HTML」「CSS」「JavaScript」「liquid」で作られているイメージです。

主にHTMLの中でliquidを用いた記述をします。

 

liquidはRubyベースの言語ですが、HTMLの中でRubyの構文は使えません。

公式ドキュメントとチートシート

liquidについて手軽に調べられる「Shopifyの公式ドキュメント」と「チートシート」が以下になります。

※チートシートとは、コードの仕様などを分かりやすくまとめたドキュメントのことです

 

公式ドキュメントは、左サイドバーメニューの「Shopify Themes」の項のみ（上記リンク先の配下のページ）を参考にすると良いでしょう。

他の項の「Admin API」などは、Shopifyでテーマをカスタマイズする際にはあまり使いません。

 

チートシートは「1」のほうが使いやすい印象でした。

「1」は公式ドキュメントにリンクしているが使いやすかった理由になります。

基本的なliquidの使い方

liquidは主にHTMLファイルで使用します。

<h3>{{ product.title }}</h3>

このようなイメージです。
ちなみに、上記のコードだと、以下のようにサイト上で表示されます。

<h3>商品名</h3>

このように、liquidで書かれた箇所が、サイト上では変換されて表示されます。
liquidには主に2種類の使い方があります。
先程の例のようなサイト上に出力される{{ ○○ }}と、ロジック（if文など）として使用する{% ○○ %}の2つです。

{{ ○○ }}

{{ ○○ }}の○○の中には、Shopifyであらかじめ定義されている「オブジェクト」、「オブジェクトのプロパティ」、「文字列」のいずれかを記述します。

 

オブジェクトとプロパティに関しては今後詳しく解説します。

オブジェクトとは、商品名などの「情報」を持っている箱のようなものという認識で今は大丈夫です。

 

{{ ○○ }}の記述で書かれた箇所は、サイト上で表示される時に「変換」されます。

 

主に商品の名前や金額、カテゴリーなど動的に出力したい内容を{{ ○○ }}で記述します。

 

Shopifyの公式ドキュメントでは{{ ○○ }}のことをObjectsと呼んでいます。

 

また、{{ '○○' }}のようにクォーテーションで囲うことで、「文字列」として出力できます。

{% ○○ %}

{% ○○ %}はロジックを使いたい時に使用します。

ここで指すロジックとは、if文やfor文、変数の定義などのことです。

 

これらは、先程の{{ ○○ }}と違い、サイト上には出力されません。

Shopifyの公式ドキュメントでは{% ○○ %}のことをTagsと呼んでいます。

 

if文やfor文などは、PHPのif 〜 endifのような書き方をします。

{% if 5 > 3 %}
// 処理
{% endif %}

 

Tagsの一部を紹介します。

変数の定義

JavaScriptではvarやconstですが、liquidではassignで変数を定義します。

{% assign hoge = 'piyo' %}

上記では、変数「hoge」に対して、文字列の「piyo」が格納されています。

if文

elseifを含んだif文の書き方は以下の通りですが...

{% if customer.name == 'kevin' %}
Hey Kevin!
{% elsif customer.name == 'anonymous' %}
Hey Anonymous!
{% else %}
Hi Stranger!
{% endif %}

このelseifのスペルがliquidでは、elsifになります。

elseifの4文字目のeがliquidでは不要です。

JavaScriptを書いている方だと間違いやすいので気をつけてください。

Filters（フィルター）

Filtersはオブジェクトの出力結果を変更する機能です。

{{ ○○ }}の中で|で区切って記述します。

このように使います。

{{ ○○ | フィルター }}

 

言葉で説明してもイメージが湧きにくいと思うので、フィルターを使ったサンプルをいくつか用意しました。

 

文字列の「sales」を出力するには、通常以下のように書きます。

{{ 'sales' }}
↓
sales

この「sales」の文字列の末尾に「.jpg」を付けたい時は、appendというフィルターを使います。

{{ 'sales' | append: '.jpg' }}
↓
sales.jpg

appendフィルターは、文字列を結合させます。

 

こちらはよく使うフィルターです。

{{ 'shop.css' | asset_url }}
↓
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253

asset_urlフィルターは、assetsディレクトリのパスを返し、オブジェクトと結合させます。

 

フィルターは複数使うこともできます。

{{ 'smirking_gnome.gif' | asset_url | img_tag }}
↓
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />

この場合はまず、assets_urlフィルターが'smirking_gnome.gif'の文字列と結合させます。

 

その結果、//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871のような文字列が生成されます。

次に、img_tagフィルターが先程の文字列をもとにimgタグを生成します。

 

このように、フィルターを使うことで、様々な処理を行えます。

JavaScriptやPHPの変数と関数の組み合わせたものがフィルターというイメージです。

フィルターの種類

公式ドキュメントによると、フィルターは8種類に分けられます。

  • Array filters
  • Color filters
  • HTML filters
  • Math filters
  • Money filters
  • String filters
  • URL filters
  • Additional filters

Array filters

配列を操作するフィルターです。

配列の結合や任意の要素を出力したり並び替えたり...。

JavaScriptやPHPでの配列の操作が、Array Filtersでもできるイメージです。

 

Array Filtersには以下のようなフィルターがあります。

 

フィルター名 解説
join パラメータとして区切り文字を渡し、配列の要素を結合後、単一の文字列として出力します。

<!-- 使用例 -->
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | join: ', ' }}

<!-- 出力結果 -->
sale, mens, womens, awesome
first 配列の最初の要素を出力します。

<!-- 使用例 -->
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | first: ', ' }}

<!-- 出力結果 -->
sale
last 配列の最後の要素を出力します。

<!-- 使用例 -->
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | first }}

<!-- 出力結果 -->
awesome
index 配列の任意の要素を番号で指定して出力します。

<!-- 使用例 -->
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags[2] }}

<!-- 出力結果 -->
womens
sort 配列の要素を任意の条件で並び替えます。

<!-- 使用例 -->
<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
  {{ product.title }}
{% endfor %}

<!-- 出力結果 -->
A B a b

※上記で紹介したフィルターはあくまで一部なので、全部のフィルターを確認したい場合は公式ドキュメントなどをご覧ください

Color filters

カラーコード関係を操作するフィルターです。

RGBをHSLに変換したりなどができます。

正直あまり使いません...。

HTML filters

HTMLタグを生成するフィルターです。

先程のサンプルのように、imgタグやaタグなどを生成できます。

他にも、Shopify独自のテンプレートのタグを生成したりもできます。

 

HTML Filtersには以下のようなフィルターがあります。

 

フィルター名 解説
img_tag パスやファイル名を与えて、imgタグとして出力します。

<!-- 使用例 -->
{{ 'smirking_gnome.gif' | asset_url | img_tag }}

<!-- 出力結果 -->
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />
script_tag パスやファイル名を与えて、scriptタグとして出力します。

<!-- 使用例 -->
{{ 'shop.js' | asset_url | script_tag }}

<!-- 出力結果 -->
<script src="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.js?28178" type="text/javascript"></script>
stylesheet_tag パスやファイル名を与えて、linkタグとして出力します。

<!-- 使用例 -->
{{ 'shop.css' | asset_url | stylesheet_tag }}

<!-- 出力結果 -->
<link href="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28178" rel="stylesheet" type="text/css" media="all" />
time_tag 日時とフォーマット形式を与えて、timeタグとして出力します。

<!-- 使用例 -->
{{ article.published_at | time_tag: '%a, %b %d, %Y' }}

<!-- 出力結果 -->
<time datetime="2018-12-31T18:00:00Z">Mon, Dec 31, 2018</time>

※上記で紹介したフィルターはあくまで一部なので、全部のフィルターを確認したい場合は公式ドキュメントなどをご覧ください

Math filters

数値を計算できるフィルターです。

四則演算や比較、四捨五入など...。

こちらも、JavaScriptやPHPの四則演算などが、Math Filtersでもできるイメージです。

Money filters

金額を出力するフィルターです。

Money filtersを使うことで、Shopifyのサイト言語に合わせた単位で金額を出力できます。

注意点

Shopify上で金額を表示する場合は必ずこのMoney filtersを使用してください。

でないと、金額が正しく表示されない場合があります。

String filters

文字列を操作するフィルターです。

文字列の結合や削除、検索などができます。

こちらも、JavaScriptやPHPの文字列操作が、String Filtersでもできるイメージです。

String Filtersには以下のようなフィルターがあります。

 

フィルター名 解説
append 結合させたい文字列を与えて、オブジェクトと結合させます。

<!-- 使用例 -->
{{ 'sales' | append: '.jpg' }}

<!-- 出力結果 -->
sales.jpg
escape オブジェクトをエスケープさせます。

<!-- 使用例 -->
{{ "<p>test</p>" | escape }}

<!-- 出力結果 -->
&lt;p&gt;test&lt;/p&gt;
remove 削除したい文字列を与えて、オブジェクトからその文字列を削除します。

<!-- 使用例 -->
{{ "Hello, world. Goodbye, world." | remove: "world" }}

<!-- 出力結果 -->
Hello, . Goodbye, .

※上記で紹介したフィルターはあくまで一部なので、全部のフィルターを確認したい場合は公式ドキュメントなどをご覧ください

URL filters

サイトで使用するURLを生成するフィルターです。

先程のサンプルのように、assetsディレクトリのパスを返したり、個々の商品の動的なURLを返したりできます。

 

URL Filtersには以下のようなフィルターがあります。

 

フィルター名 解説
asset_url テーマの「assets」フォルダー内のファイルのURLを返します。

<!-- 使用例 -->
{{ 'shop.css' | asset_url }}

<!-- 出力結果 -->
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253
link_to aタグを生成してhrefなどを設定します。

<!-- 使用例 -->
{{ 'Shopify' | link_to: 'https://www.shopify.com','A link to Shopify' }}

<!-- 出力結果 -->
<a href="https://www.shopify.com" title="A link to Shopify">Shopify</a>

※上記で紹介したフィルターはあくまで一部なので、全部のフィルターを確認したい場合は公式ドキュメントなどをご覧ください

Additional filters

このフィルターがどのようなくくりなのかが分かりませんでした。

公式ドキュメントのAdditional filtersの解説は以下の通りでした。

General filters serve many different purposes including formatting, converting, and applying CSS classes.
↓
一般的なフィルターは、CSSクラスのフォーマット、変換、適用など、さまざまな目的に使用できます。
（Google翻訳）

Tagsでフィルターを使用する場合

フィルターは、if文などのTagsの中で使用することもできます。

|の代わりに、.でオブジェクトと繋げて記述します。

以下サンプルです。

firstフィルターは配列の最初の要素を返します。
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | first }}
↓
sale

このfirstフィルターをif文の中で使用するには、以下のように記述します。

{% if product.tags.first == "sale" %}
// 処理
{% endif %}

おまけ（配列の作り方）

liquidで配列を作るには、splitフィルターを使います。

 

{% assign base = 'hoge,piyo,huga' %}

{% assign new_array = base | split: "," %}

// 出力結果
new_array = [
  "hoge",
  "piyo",
  "huga"
]

splitフィルターは任意の文字列を指定した文字列で区切り、それらを配列化させます。

上記の例では、変数baseを,で区切り、それらをnew_arrayに代入しています。

まとめ

以上で、liquidの基本的な書き方の解説は終わりです。

  • 商品名などの動的な情報を出力するObjects{{ ○○ }}
  • if文やfor文などのロジックを使う際に記述するTags{% ○○ %}
  • Objectsの出力結果を制御するFilters{{ ○○ | △△ }}

これら3つの書き方を理解すれば、liquidで書かれている内容の半分は理解できると思います。

 

もう半分を理解するには、オブジェクトとプロパティを理解しなければいけません。

なので、次回はこのオブジェクトとプロパティについて解説しようと思います。

 

■バックナンバー

関連記事