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

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

[こちら](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/filters/string-filters)を参考にしました。

#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上で、`>`や、`"`、などの特殊文字を表示するための処理です。

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

```.liquid
{{ "<p>test</p>" | escape }}
```
>\&lt;p\&gt;test\&lt;/p\&gt;
 <!-- Note: a browser will visually display this as \<p>test\</p> -->


##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

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

```.liquid
{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}
```
>One\<br>
Two\<br>
Three\<br>


##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 }}
```
><!-- Highlight to see the empty spaces to the right of the string -->
too many spaces　　　　　　　           


##rstrip

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

```.liquid
{{ '              too many spaces      ' | rstrip }}
```
><!-- Notice the empty spaces to the left of the string -->
　　　　　　　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 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search