#はじめに
今回は、liquidの基本的な構文を学習していきます。
頑張っていきましょう。
今回はこちらを参考にしました。
#サイト上の表示とロジック
Ruby On Railsを触ったことがある人なら馴染み深いですが、liquidはHTMLの文章中に直接コードを書くことができます。
.html.erbファイルのようなものですね。
HTMLの中に直接コードを書く上で大切になってくるのは、表示とロジックです。
表示とは、HTMLのようにサイト上に表示される部分で、ロジックとはif文などのコードの制御を行う部分です。
ifやforなどのコードを制御する部分がHTMLファイル上に見えてしまったら、大変なことになりますよね。
そのため、liquidファイルでは表示とロジックを明確に区別しています。
##表示
liquidでサイト上に表示を行う場合は、{{}}でコードを囲います。
{% assign number = 100 %}
<h1>{{number}}</h1>
{{}}の中にはShopifyであらかじめ定義されている「オブジェクト」や、「オブジェクトのプロパティ」、または「文字列」が入ります。
簡単に書くと、liquid内で定義した変数を表示するときに用います。
##ロジック
{%%}は、liquidのロジックを用いるときに使います。
liquidのロジックとは、具体的にはfor文やif文、変数宣言などが当てはまります。
{{}}との違いは、サイト上に出力されないということです。
{% if 5 > 3 %}
<h2>5は3より大きい</h2>
{% else %}
<h2>5は3より小さい</h2>
{% endif %}
それでは、liquidの具体的な構文を見てみましょう。
#変数の定義（assign）
既に一度出てきていますが、liquidにおいて変数の定義はassignを用いて行います。
変数の定義はロジックなので{%%}を用います。
{% assign number = 100 %}
<h1>{{number}}</h1>
#条件分岐（if）
これも既に出てきていますが、条件分岐はifを使って表現します。
ifもロジックなので{%%}を使います。
{% if 5 > 3 %}
<h2>5は3より大きい</h2>
{% else %}
<h2>5は3より小さい</h2>
{% endif %}
ifとendifで挟むことで、条件分岐を実装できます。他のプログラミング言語と同じように、elseも使えます。
#ループ（for）
残念なお知らせですが、liquidではwhileループが使えません。
forループを頑張って使いましょう。
{% for i in (1..5) %}
<h1>{{i}}</h1>
{% endfor %}
pythonなどで使うrangeの代わりに、(1..5)とることで、1から5までのイテレーターを作成することができます。
####break
breakは使えます。
他の言語と同じで、break文が走ると処理が終了します。
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
<h1>{{ i }}</h1>
{% endif %}
{% endfor %}
####continue
ついでに、continueも使えます。
{% for i in (1..5) %}
{% if i == 4 %}
{% continue %}
{% else %}
<h1>{{ i }}</h1>
{% endif %}
{% endfor %}
#フィルター
こちらを参照しています。
liquid特有の書き方ですが、変数をパイプで繋ぐことでフィルターをかけることができます。
イメージとしては、変換器のようなものだと思って下さい。
assetsファイルを渡したら、そのassetsファイルのURLを返すasset_urlというフィルターや、配列を渡すと一番最初の値を返すfirstというフィルターがあります。
以下のコードで、具体的な挙動を見てみましょう。
##asset_url
テーマの「assets」フォルダにあるファイルのURLを返します。
{{ 'shop.css' | asset_url }}
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253
asset_urlを用いることで、タグのsrc属性にurlを渡すことができます。
応用として、スタイルシートの読み込みタグの出力をするフィルターを連結させることができます。
{{ 'shop.css' | asset_url | stylesheet_tag}}
上記のように書くと、shop.cssのurlがstylesheetタグに渡された状態の、stylesheetタグを出力することができます。
##asset_img_url
テーマの「assets」フォルダにある画像のアセットURLを返します。 また、asset_img_urlは画像サイズパラメータを受け取ります。
{{ 'logo.png' | asset_img_url: '300x' }}
//cdn.shopify.com/s/files/1/0000/0001/t/1/assets/logo_300x.png?42
上記のように、asset_img_urlは画像サイズをパラメータとして受け取ります。
##img_url
戻り値として、画像のURLを返します。また、画像のサイズをパラメーターとして受け取ります。
また、以下のオブジェクトでimg_urlを用いることができます。
- product
- variant
- line item
- collection
- article
- image
img_urlフィルターの後には、使用する画像のサイズを入力して下さい。また、もとの画像のサイズよりも小さいサイズを指定した場合は、Shopifyは画像を拡大縮小して表示します。
画像サイズを指定しない場合は、フィルターは（100 x 100）の画像を返します。
{{ product | img_url: '100x100' }}
{{ variant | img_url: '720x720' }}
{{ line_item | img_url: '1024x' }}
{{ product | img_url }}
上記のようにすると、オブジェクトの画像のURLを取得することができます。
このように、フィルターはかなり多くあるので、詳しくは別の記事で解説したいと思います。
#終わりに
今回の記事を最後まで読んで頂きありがとうございました。
Shopifyで重要なのはフィルターをどう使うのかということと、オブジェクトをどう使うのかという部分です。
その辺りは、また別の記事にまとめるので、楽しみにして下さい。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。