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

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

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

Deprecated filterとは、**公式が推奨していないフィルタ**です。

非推奨のフィルタなので普段使うことはないですが、テーマ内で使われいるときに書き直せるよう頭の片隅に入れておくと良いと思います。

`Color filters`、`URL fileters`、`Date formats`の３つで非推奨のフィルタがあり、それぞれのフィルタに**代替案**が用意されています。

それでは、非推奨のフィルタとその代替案を見ていきましょう！


##Color filters
Colorフィルタでは、**`hex_to_filter`が非推奨となっています。**

###hex_to_rgba
`16進数表記のCSS色の文字列を、RGBA表記に変換します。`

デフォルトでは、不透明度は1で、0から1の間で指定できます。 

入力値の16進数の値は、短縮しても処理されます（ 例. #812 ）。

```.liquid
.site-footer h1 {
  color: {{ settings.color_name }};
}

.site-footer p {
  color: {{ settings.color_name | hex_to_rgba: 0.5 }};
}
```

>.site-footer h1 {
  color: #812dd3;
}

>.site-footer p {
  color: rgba(129, 45, 211, 0.5);
}

####代替案：`color_to_rgb`、`color_modify`
代替案として、`color_to_rgb`と、`color_modify`が挙げられます。

`color_to_rgb`は、alpha 要素（透過度）があるCSS色の文字列の場合、`rgba()`形式に変換し、与えられていないCSS色の場合は、`rgb()`形式を返すフィルタです。

```.liquid
{{ '#7ab55c' | color_to_rgb }}
{{ 'hsla(100, 38%, 54%, 0.5)' | color_to_rgb }}
```

>rgb(122, 181, 92)
rgba(122, 181, 92, 0.5)

**16進数表記だけでなく、すべてのCSS色表記を、`rgb()`または、`rgba()`形式に出来る**ので、`hex_to_rgba`の上位互換と言えますね。


<br>次に、`color_modify`です。

`color_modify`は、入力値のCSS色の指定した要素の値を変更するフィルタです。

**alpha要素**を変更した場合、入力色が16進数表記であっても`rgba()`形式で返されます。

```.liquid
{{ '#7ab55c' | color_modify: 'red', 255 }}
{{ '#7ab55c' | color_modify: 'alpha', 0.85 }}
```

>\#ffb55c
rgba(122, 181, 92, 0.85)

**alpha要素だけでなく、rgb要素の値も変更できる**ので、`hex_to_rgba`の上位互換と言えますね。





##URL filters
URLフィルタでは、`collection_img_url`、`product_img_url`、`Named size parameters`の３つが非推奨となっています。

###collection_img_url
コレクション画像のURLを返します。

```.liquid
{{ collection.image | collection_img_url: 'medium' }}
```

>//cdn.shopify.com/s/files/1/0087/0462/collections/collection-image_medium.png?v=1337103726

####代替案：`img_url`
代替案として、`img_url`が挙げられます。

`img_url`は、コレクション画像だけでなく、product、variant、line item、article、image オブジェクトに対して使えるので、`collection_img_url`を使う理由が見当たらないですね。


###product_img_url
商品画像のURLを生成します。

```.liquid
{{ product.featured_image | product_img_url: "medium" }}
```

>//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311

####代替案：`img_url`
代替案として、`img_url`が挙げられます。

非推奨の理由は、`collection_img_url`と同様です。

###Named size parameters
特定の画像サイズに名前がついており、パラメータの値として使用できます。

古いテーマの中には、数値の画像サイズを使用する代わりに、img_url のパラメータとして名前付きサイズを使用しているものがあります。

以下の表に、Named size parameters 一覧を示しています。

| Name | Maximum image size |
|:--|:--|
| pico  | 16 x 16 pixels  |
| icon  | 32 x 32 pixels   |
| thumb  | 50 x 50 pixels   |
| small  | 100 x 100 pixels   |
|  compact | 160 x 160 pixels   |
| medium  | 240 x 240 pixels   |
| large  |  480 x 480 pixels  |
| grande  | 600 x 600 pixels    |
| original  | 1024 x 1024 pixels   |

####代替案：`numeric size parameters`
代替案として、`numeric size parameters`が挙げられます。

`numeric size parameters`は、画像の幅と高さのパラメータの値を数値で書く方法です。

```.liquid
{{ product | img_url: '450x450' }}
```

画像の幅や高さを正確に指定でき、最大で 5760 x 5760 px まで指定できる点が、`Named size image parameter`より良いとされる理由です
 

##Date formats
`Date formats`は、`time_tag`や`date`など、特定のフィルタで使用されます。

非推奨となったパラメータは、以下の2つです。

+ `short`
+ `long`

```.liquid
{{ article.published_at | time_tag: format: 'short' }}
```

>\<time datetime="2016-02-24T14:47:51Z">February 24, 2016\</time>

####代替案：`date format options`
代替案として、`date format options`が挙げられます。

`date format options`の一覧は、[【Shopify】LiquidのHTML filterを全てまとめてみた話](https://qiita.com/eijiSaito/items/2a30415457e32f34eb72#format) を御覧ください。


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

お疲れさまでした。

# 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