LoginSignup
31
24

More than 1 year has passed since last update.

@eijiSaito(eiji saito)in株式会社UnReact

【Shopify】LiquidのString filterを全てまとめてみた話

Last updated at Posted at 2021-01-23

はじめに

今回の記事では、ShopifyのString filterを全てまとめてみました。

こちらを参考にしました。

String filter

文字列型の出力や変数を操作できます。

それでは、String filtersを見てみましょう。

append

文字列に文字を追加します。

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

sales.jpg

camelcase

文字列をキャメルケースに変換します。

{{ 'coming-soon' | camelcase }}

ComingSoon

capitalize

文字列の最初の単語を大文字に変換します。

{{ 'capitalize me' | capitalize }}

Capitalize me

downcase

文字列を小文字に変換します。

{{ 'UPPERCASE' | downcase }}

uppercase

escape

文字列をエスケープ処理します。

エスケープ処理とは、HTML上で、>や、"、などの特殊文字を表示するための処理です。

例えば、<は、&lt;に変換されます。

{{ "<p>test</p>" | escape }}

&lt;p&gt;test&lt;/p&gt;
<!-- Note: a browser will visually display this as <p>test</p> -->

handle/handleize

文字列をハンドルに整形します。

{{ '100% M & Ms!!!' | handleize }}

100-m-ms

ハンドルは、Liquidオブジェクトの属性にアクセスするために使用されます。

Shopifyのほとんどのオブジェクト（商品、コレクション、ブログ、記事、メニュー）にはハンドルがあります。

例えば、「About Us」というタイトルのページは、そのハンドルabout-usを使ってLiquidでアクセスすることができます。

<!-- the content of the About Us page -->
{{ pages.about-us.content }}

デフォルトでは、ハンドルはオブジェクトのタイトルを小文字で表し、スペースや特殊文字はハイフン(-)で置き換えられます。

タイトルが "Shirt "の商品には、自動的にshirtというハンドルが与えられます。

すでに「Shirt」というハンドルを持つ商品がある場合、ハンドルは自動的にインクリメントされます。

具体的にいうと、最初の商品の後に作成された「Shirt」の商品はすべて、shirt-1、shirt-2などのようなハンドルを自動的に与えられます。

md5

文字列を MD5 ハッシュ値に変換します。

MD5（Message Digest Algorythm 5）とは、128 bit、32 桁の文字列（ビット列）を返すハッシュ関数の一つです。

ハッシュ関数とは、単語や文章を引数として受け取り、規則性のない一定の長さの文字列（ハッシュ値）を返す関数のことです。

{{ "UnReact" | md5 }}

f743c2b996711d1c89b264a25c0ffc2915284b1d

ブログコメントの投稿者に関連付けられた Gravatar 画像を表示する時などに使用されます。

<img src="https://www.gravatar.com/avatar/{{ comment.email | remove: ' ' | strip_newlines | downcase | md5 }}" />

<img src="https://www.gravatar.com/avatar/2a95ab7c950db9693c2ceb767784c201" />

sha1

文字列をSHA-1ハッシュ値に変換します。

SHA-1（Secure Hash Algorithm 1）とは、160 bit、40 桁のハッシュ値を返すハッシュ関数です。

{% assign my_secret_string = "ShopifyIsAwesome!" | sha1 %}
My encoded string is: {{ my_secret_string }}

My encoded string is: c7322e3812d3da7bc621300ca1797517c34f63b6

sha256

文字列を SHA-256 ハッシュ値に変換します。

SHA-256とは、256 bit、64 桁のハッシュ値を返すハッシュ関数です。

{% assign my_secret_string = "ShopifyIsAwesome!" | sha256 %}
My encoded string is: {{ my_secret_string }}

My encoded string is: c29cce758876791f34b8a1543f0ec3f8e886b5271004d473cfe75ac3148463cb

hmac_sha1

Keyed-Hashing for Message Authentication code (HMAC) を使用して文字列を SHA-1 ハッシュ値に変換します。

HMACとは、メッセージ認証符号（秘密鍵）、データ、ハッシュ関数を用いて、ハッシュ値を算出します。

メッセージの秘密鍵は、パラメータとしてフィルタに渡します。

{% assign my_secret_string = "ShopifyIsAwesome!" | hmac_sha1: "secret_key" %}
My encoded string is: {{ my_secret_string }}

My encoded string is: 30ab3459e46e7b209b45dba8378fcbba67297304

hmac_sha256

HMAC を用いて文字列を SHA-256 ハッシュ値に変換します。

メッセージの秘密鍵は、パラメータとしてフィルタに渡します。

{% assign my_secret_string = "ShopifyIsAwesome!" | hmac_sha256: "secret_key" %}
My encoded string is: {{ my_secret_string }}

My encoded string is: 30ab3459e46e7b209b45dba8378fcbba67297304

newline_to_br

文字列の各改行の前に<br>タグを挿入します。

{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}

One<br>
Two<br>
Three<br>

pluralize

数値に基づいて、文字列の単数形または複数形を出力します。

最初のパラメータは単数形文字列、2番目のパラメータは複数形文字列です。

{{ cart.item_count }}
{{ cart.item_count | pluralize: 'item', 'items' }}

3 items

prepend

パラメータに設定した文字を、文字列（入力値）の前に置きます。

{{ 'sale' | prepend: 'Made a great ' }}

Made a great sale

remove

文字列（入力値）中から、パラメータに設定した文字をすべて削除します。

{{ "Hello, world. Goodbye, world." | remove: "world" }}

Hello, . Goodbye, .

remove_first

文字列（入力値）中から、パラメータに設定した文字をすべて削除します。

{{ "Hello, world. Goodbye, world." | remove_first: "world" }}

Hello, . Goodbye, world.

replace

文字列（入力値）中の、一番目のパラメータに設定した文字を、二番目のパラメータで設定した値にすべて置き換えます。

<!-- product.title = "Awesome Shoes" -->
{{ product.title | replace: 'Awesome', 'Mega' }}

Mega Shoes

replace_first

文字列（入力値）中の一番目のパラメータに設定した文字を、最初の一つだけ、二番目のパラメータで設定した値に置き換えます。

<!-- product.title = "Awesome Awesome Shoes" -->
{{ product.title | replace_first: 'Awesome', 'Mega' }}

Mega Awesome Shoes

slice

指定されたインデックス番号から始まる文字列を返します。

二番目のパラメータを渡すことで、部分文字列の長さを指定することができます。

二番目のパラメータが与えられなかった場合は、一文字の部分文字列が返されます。

{{ "hello" | slice: 0 }}
{{ "hello" | slice: 1 }}
{{ "hello" | slice: 1, 3 }}

h
e
ell

インデックスは負の値を取ることができます。

渡されたインデックスが負の場合は、文字列の末尾が-1となります。

{{ "hello" | slice: -3, 2  }}

ll

split

入力値の文字列を区切り文字（パラメータ）で分割して、一つの配列を生成します。

例では、["Hi", "how", "are", "you", "today?"]の配列が生成されます。

{% assign words = "Hi, how are you today?" | split: ' ' %}

{% for word in words %}
{{ word }}
{% endfor %}

Hi,
how
are
you
today?

strip

文字列の左右からタブ、スペース、改行（すべての空白）を削除します。

{{ '   too many spaces      ' | strip }}

too many spaces

lstrip

文字列の左側からタブ、スペース、改行（すべての空白）を削除します。

{{ '   too many spaces           ' | lstrip }}

too many spaces　　　　　　　

rstrip

文字列の右側からタブ、スペース、改行（すべての空白）を削除します。

{{ '              too many spaces      ' | rstrip }}

　　　　　　　too many spaces

strip_html

文字列からすべてのHTMLタグを削除します。

{{ "<h1>Hello</h1> World" | strip_html }}

Hello World

strip_newlines

文字列から改行を削除します。

商品説明を出力する時などに使用します。

{{ product.description | strip_newlines }}

truncate

文字列を、最初のパラメータとして渡された文字数に省略します。

省略記号(...)は、切り捨てられた文字列の末尾に付加され、文字数に含まれます。

また、スペースも字数に含みます。

{{ "The cat came back the very next day" | truncate: 13 }}

The cat ca...

Custom ellipsis

truncate はオプションの 2 番目のパラメータを取り、切り捨てられた文字列に追加される文字を指定します。

デフォルトでは、これは省略記号 (...) ですが、別の文字列を指定することもできます。

2 番目のパラメータの長さは、1 番目のパラメータで指定した文字数にカウントされます。

例えば、文字列を正確に10文字に切り捨て、3文字の省略記号を使用したい場合、 省略記号は3文字としてカウントされるので、truncateの最初のパラメータに13を使用します。

{{ "ABCDEFGHIJKLMNOPQRSTUVWXYZ" | truncate: 18, ", and so on" }}

ABCDEFG, and so on

No ellipsis

2 番目のパラメータとして空の文字列を渡すことで、最初のパラメータで指定した文字数に正確に切り捨て、最後の文字を表示しないことができます。

{{ "I'm a little teapot, short and stout." | truncate: 15, "" }}

I'm a little te

truncatewords

最初のパラメータとして渡された単語数まで文字列を省略します。

省略された文字列の末尾には、省略記号(...)が付加されます。

{{ "The cat came back the very next day" | truncatewords: 4 }}

The cat came back...

Custom ellipsis

truncatewords は、省略された文字列の末尾に追加する文字列を指定する 2 番目のパラメータを取ります。

デフォルトでは省略記号 (....) ですが、別の文字列を指定することもできます。

{{ "The cat came back the very next day" | truncatewords: 4, "--" }}

The cat came back--

No ellipsis

2 番目のパラメータとして空の文字列" "を渡すことで、末尾の文字を表示しないようにすることもできます。

{{ "The cat came back the very next day" | truncatewords: 4, "" }}

The cat came back

upcase

文字列を大文字に変換します。

{{ 'i want this to be uppercase' | upcase }}

I WANT THIS TO BE UPPERCASE

url_encode

文字列内の URL-unsafe 文字をパーセントエンコードされた文字に変換します。

{{ "john@liquid.com" | url_encode }}

john%40liquid.com

url_encode は、スペースをパーセントエンコードされた文字ではなく + 記号に変換します。

{{ "Tetsuro Takara" | url_encode }}

Tetsuro+Takara

url_escape

URLs で許可されていない文字列内のすべての文字を識別し、その文字をエスケープされたバリアントで置き換えます。

{{ "<hello> & <shopify>" | url_escape }}

%3Chello%3E%20&%20%3Cshopify%3E

url_param_escape

アンパサンド (&) を含む URL で使用できない文字列内のすべての文字を、使用できる文字に変換（ URLエンコード ）します。

ひらがなや漢字なども変換されます。

{{ "<hello> & <shopify>" | url_param_escape }}

%3Chello%3E%20%26%20%3Cshopify%3E

Reversing strings

String filterの一つであるsplitと、Array filterであるreverseとjoinを使って文字列を反転させる事ができます。

recerseは、Array filterの一つで`文字列に対して直接使うことはできないが、文字列を配列に分割して配列を反転させ、他のフィルタを連結して再結合することができます。

joinも、Array filterの一つで、パラメータとして渡された文字で配列の要素を結合し、単一の文字列を返します。

{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}

.moT rojaM ot lortnoc dnuorG

終わりに

今回の記事はここまでになります。

お疲れさまでした。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

31
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
31
24