はじめに

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

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

String filter

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

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

append

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

.liquid

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

sales.jpg

camelcase

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

.liquid

{{ 'coming-soon' | camelcase }}

ComingSoon

capitalize

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

.liquid

{{ 'capitalize me' | capitalize }}

Capitalize me

downcase

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

.liquid

{{ 'UPPERCASE' | downcase }}

uppercase

escape

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

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

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

.liquid

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

test

handle/handleize

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

.liquid

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

100-m-ms

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

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

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

.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 桁の文字列（ビット列）を返すハッシュ関数の一つです。

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

.liquid

{{ "UnReact" | md5 }}

f743c2b996711d1c89b264a25c0ffc2915284b1d

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

.liquid

<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 桁のハッシュ値を返すハッシュ関数です。

.liquid

{% 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 桁のハッシュ値を返すハッシュ関数です。

.liquid

{% 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とは、メッセージ認証符号（秘密鍵）、データ、ハッシュ関数を用いて、ハッシュ値を算出します。

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

.liquid

{% 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 ハッシュ値に変換します。

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

.liquid

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

My encoded string is: 30ab3459e46e7b209b45dba8378fcbba67297304

newline_to_br

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

.liquid

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

One 
Two 
Three

pluralize

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

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

.liquid

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

3 items

prepend

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

.liquid

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

Made a great sale

remove

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

.liquid

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

Hello, . Goodbye, .

remove_first

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

.liquid

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

Hello, . Goodbye, world.

replace

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

.liquid

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

Mega Shoes

replace_first

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

.liquid

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

Mega Awesome Shoes

slice

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

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

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

.liquid

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

h
e
ell

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

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

.liquid

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

ll

split

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

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

.liquid

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

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

Hi,
how
are
you
today?

strip

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

.liquid

{{ '   too many spaces      ' | strip }}

too many spaces

lstrip

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

.liquid

{{ '   too many spaces           ' | lstrip }}

too many spaces　　　　　　　

rstrip

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

.liquid

{{ '              too many spaces      ' | rstrip }}

　　　　　　　too many spaces

strip_html

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

.liquid

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

Hello World

strip_newlines

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

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

.liquid

{{ product.description | strip_newlines }}

truncate

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

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

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

.liquid

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

The cat ca...

Custom ellipsis

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

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

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

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

.liquid

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

ABCDEFG, and so on

No ellipsis

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

.liquid

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

I'm a little te

truncatewords

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

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

.liquid

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

The cat came back...

Custom ellipsis

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

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

.liquid

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

The cat came back--

No ellipsis

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

.liquid

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

The cat came back

upcase

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

.liquid

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

I WANT THIS TO BE UPPERCASE

url_encode

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

.liquid

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

john%40liquid.com

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

.liquid

{{ "Tetsuro Takara" | url_encode }}

Tetsuro+Takara

url_escape

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

.liquid

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

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

url_param_escape

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

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

.liquid

{{ "<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の一つで、パラメータとして渡された文字で配列の要素を結合し、単一の文字列を返します。

.liquid

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

.moT rojaM ot lortnoc dnuorG

終わりに

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

お疲れさまでした。

Shopify アプリのご紹介

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