【Shopify】String filtersの種類と使い方を解説①

悩む人

String filtersってどうやって使うの？

こんな疑問を解決します。

Shopifyには出力する値を加工できるフィルターがいくつも用意されています。

その中でも出力する文字列を加工できる『String filters』は全部で28種類とかなり量が多めで、どんなものがあってどうやって使って良いのかわからないという方も多いです。

ということで今回は、Shopifyで文字列の加工に使えて便利なString filtersの種類と使い方について解説していきます。

本記事を参考にすれば、文字を出力する際にどれを使えば良いのかが明確になり、テーマカスタマイズもスムーズになるはずです。

本記事はShopifyの公式リファレンスを参照して記述しています。

String filtersとは

String filtersとは、String（文字列）型の変数や出力を様々に加工できるフィルターのことです。

トマトソース

少し数は多いですが、非常に大切なところなのでぜひともマスターしておきたいフィルターの一つです。

String filtersの種類

Shopifyで使用できるString filtersは以下の28種類です。

トマトソース

かなり多いですね！

上記全てを一度に覚えるのは大変なので、今回は上記の1〜14のフィルターの使い方を解説していきます。

String filtersの使い方

それではそれぞれのフィルターの使い方を解説していきます。

1. append

appendは、文字列に指定した文字を加えます。

appendの記述例と出力結果は以下の通りです。

{{ 'Hello' | append: ' world!' }}

出力：
Hello world!

2. prepend

prependは、文字列の前に指定した文字を挿入します。

トマトソース

先ほどのappendとは逆ですね！

prependの記述例と出力結果は以下の通りです。

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

出力：
Made a great sale

3. camelcase

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

キャメルケースとは、HelloWorldのように単語の頭文字が大文字になってキャメル（ラクダ）のような形をしている文字列のことです。

camelcaseの記述例と出力結果は以下の通りです。

{{ 'coming-soon' | camelcase }}

出力：
ComingSoon

4. capitalize

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

capitalizeの記述例と出力結果は以下の通りです。

{{ 'capitalize me' | capitalize }}

出力：
Capitalize me

5. downcase

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

downcaseの記述例と出力結果は以下の通りです。

{{ 'HELLO' | downcase }}

出力：
hello

6. upcase

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

upcaseの記述例と出力結果は以下の通りです。

{{ 'hello' | upcase }}

出力：
HELLO

一つ注意なのは、「uppercase」ではなく「upcase」です。

トマトソース

英語に慣れ親しんでいる人は注意しておきましょう！

7. escape

escapeは、文字列のエスケープ処理を行います。

escapeの記述例と出力結果は以下の通りです。

{{ "<p>String filters</p>" | escape }}

出力：
<p>String filters</p>
 <!-- 注意: ブラウザーでは、<p>test></test>と表示されます -->

8. handle/handleize

handle/handleizeは、文字列をハンドル形式にフォーマットします。

handle/handleizeの記述例と出力結果は以下の通りです。

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

出力：
100-m-ms

9. md5

md5は、文字列をMD5ハッシュコードに変換します。

md5の記述例と出力結果は以下の通りです。

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

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

上記の例では、ブログコメントに紐づいたGravatar画像を出力しています。

トマトソース

ちなみに、上記の例で出ているstrip_newlinesやremoveなどのフィルターは次回の記事で解説します。

10. sha1

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

sha1の記述例と出力結果は以下の通りです。

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

出力：
My encoded string is: c7322e3812d3da7bc621300ca1797517c34f63b6

トマトソース

このように、sha1フィルターを使うと文字列がハッシュ化されて出力されます。

11. sha256

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

sha256の記述例と出力結果は以下の通りです。

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

出力：
My encoded string is: c29cce758876791f34b8a1543f0ec3f8e886b5271004d473cfe75ac3148463cb

トマトソース

このフィルターは上記のsha1と似ていますが、SHA-1ハッシュは脆弱性が見つかったことなどから現在はこちらのSHA-256が一般的となっているようです。（参照）

12. hmac_sha1

hmac_sha1は、文字列をSHA-1を使用したメッセージ認証コードに変換します。

また秘密鍵をフィルターのパラメータとして渡します。

HMACについて詳しくはこちらをご参考ください。

hmac_sha1の記述例と出力結果は以下の通りです。

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

出力：
My encoded string is: 30ab3459e46e7b209b45dba8378fcbba67297304

トマトソース

秘密鍵の記述は、上記の例だと「”secret_key”」の部分です。

13. hmac_sha256

hmac_sha256は、文字列をSHA-256を使用したメッセージ認証コードに変換します。

こちらもhmac_sha1と同様、秘密鍵をフィルターのパラメータとして渡します。

hmac_sha256の記述例と出力結果は以下の通りです。

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

出力：
My encoded string is: 30ab3459e46e7b209b45dba8378fcbba67297304

14. newline_to_br

newline_to_brは、文字列のなかのline breakの前にHTMLの<br>タグを挿入します。

newline_to_brの記述例と出力結果は以下の通りです。

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

出力：
One <br>
Two<br>
Three<br>

トマトソース

上記の例で使っている「capture」については、また後日詳しく解説していきます。

String filtersの種類と使い方を解説①：まとめ

今回はShopifyで文字列を加工する際に使えるString filtersを14種類を解説してきました。

文字列の加工が自在にできるとストアカスタマイズの幅も広がるのでぜひマスターしましょう！

残りのString filters14つは次回解説します。

関連記事 使えるとカスタマイズの幅が広がる！Shopifyで使えるフィルターまとめ