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

2021年5月11日

悩む人

・URL filtersって何？
・URL filtersの種類と使い方が知りたい！

こんな疑問と要望にお応えします。

本記事の内容

URL filtersとは
URL filtersの種類
URL filtersの使い方

URL filtersって、いまいちよく分からず、どれを使って良いのか分からない時ってよくありますよね。

トマトソース

私もShopifyテーマカスタマイズ中によく混乱します。笑

私のようにURL filtersをいまいち理解していない、どれを使って良いのかよく分からないという方のためにURL filtersについてまとめてみました。

ということで今回は、ShopifyのURL fitltersの種類とそれぞれの使い方について解説していきます。

URL filtersは数が多く一度で全て解説しきれないので、前編・後編に分けて解説していきたいと思います。

本記事を参考にすれば、もうどのURL filtersを使って良いのか迷わなくて済むようになるはずです。

URL filtersとは

URL filtersとはShopify CDNのアセットへのリンクを出力するフィルターです。

コレクションやブログなどのリンクのフィルタリングに使用されます。

トマトソース

URL filtersを使えばいちいちファイルパスやURLを入力しなくて済むので非常に開発効率が上がりますよ！

なので、数は多いもののぜひともマスターしておきたいフィルターの一つです。

URL filtersの種類

Shopifyの公式リファレンスに記載されてあるURL fitlersは全部で19種類あります。

Shopifyで利用可能なURL filters全19種類は以下の通りです。

URL filters全19種類

asset_url
asset_img_url
file_url
file_img_url
global_asset_url
img_url
payment_type_img_url
shopify_asset_url
customer_login_link
link_to
link_to_vendor
link_to_type
link_to_tag
link_to_add_tag
link_to_remove_tag
sort_by
url_for_type
url_for_vendor
within

今回はURL filtersの上記19種類の中から「xxx_url」という形の8種類（①〜⑧）を解説していきます。

URL filtersの使い方

ここからは以下の8種類のURL filtersの使い方について解説していきます。

解説するURL filters9つ

asset_url
asset_img_url
file_url
file_img_url
global_asset_url
img_url
payment_type_img_url
shopify_asset_url

①asset_url

asset_urlは、「assetsフォルダー」内のファイルURLを返却します。

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

{{ 'style.css' | asset_url }}
//出力：//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/style.css?12345

上記の？の後の「12345」という番号はバージョン番号と呼ばれ、バージョンを管理している番号となります。

トマトソース

バージョン番号は、こちらで特にいじることはないので気にしなくてOKです。

②asset_img_url

asset_img_urlは「assetsフォルダー」内の画像URLを返却します。

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

{{ 'logo.png' | asset_img_url: '250x' }}
//出力：//cdn.shopify.com/s/files/1/0000/0001/t/1/assets/logo_250x.png?11

ちなみに、asset_img_urlは上記の「’250x’」のような「サイズパラメータ」も渡すことができます。

トマトソース

asset_img_urlにおけるサイズパラメータの使い方は以下で解説しています。

関連記事画像がうまく表示されない時の対処法｜画像URLフィルターについて解説

③file_url

file_urlはストア管理画面の「設定＞ファイル」内のファイルURLを返却します。

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

{{ 'report2021.pdf' | file_url }}
//出力：//cdn.shopify.com/s/files/1/0087/0462/files/report2021.pdf?98123

④file_img_url

file_img_urlはストア管理画面の「設定＞ファイル」内の画像URLを返却します。

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

{{ 'background.png' | file_img_url: '1024x' }}
//出力：//cdn.shopify.com/s/files/1/0246/0527/files/background_1024x.png?58

⑤global_asset_url

global_asset_urlは、Shopifyのサーバーのglobalディレクトリ内にあるアセットURLを返却します。

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

{{ 'prototype.js' | global_asset_url | script_tag }}
//出力：<script src="//cdn.shopify.com/s/global/prototype.js?1" type="text/javascript"></script>

global_asset_urlは少し特殊で、Shopifyのサーバー内にあるアセットファイルを参照する場合にのみ使用します。

global_asset_urlを使用できるグローバルアセットは以下の通りです。

{{ 'prototype.js' | global_asset_url | script_tag }}
{{ 'controls.js' | global_asset_url | script_tag }}
{{ 'dragdrop.js' | global_asset_url | script_tag }}
{{ 'effects.js' | global_asset_url | script_tag }}
{{ 'prototype/1.5/prototype.js' | global_asset_url | script_tag }}
{{ 'prototype/1.6/prototype.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/scriptaculous.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/builder.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/controls.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/dragdrop.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/effects.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/slider.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/sound.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/unittest.js' | global_asset_url | script_tag }}
{{ 'ga.js' | global_asset_url | script_tag }}
{{ 'mootools.js' | global_asset_url | script_tag }}
{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox/v1/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v1/lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox/v2/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v2/lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox/v2/loading.gif' | global_asset_url }}
{{ 'lightbox/v2/close.gif' | global_asset_url }}
{{ 'lightbox/v2/overlay.png' | global_asset_url }}
{{ 'lightbox/v2/zoom-lg.gif' | global_asset_url }}
{{ 'lightbox/v204/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v204/lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox/v204/bullet.gif' | global_asset_url }}
{{ 'lightbox/v204/close.gif' | global_asset_url }}
{{ 'lightbox/v204/closelabel.gif' | global_asset_url }}
{{ 'lightbox/v204/donatebutton.gif' | global_asset_url }}
{{ 'lightbox/v204/downloadicon.gif' | global_asset_url }}
{{ 'lightbox/v204/loading.gif' | global_asset_url }}
{{ 'lightbox/v204/nextlabel.gif' | global_asset_url }}
{{ 'lightbox/v204/prevlabel.gif' | global_asset_url }}
{{ 'list_collection.css' | global_asset_url | stylesheet_tag }}
{{ 'search.css' | global_asset_url | stylesheet_tag }}
{{ 'textile.css' | global_asset_url | stylesheet_tag }}
{{ 'firebug/firebug.css' | global_asset_url | stylesheet_tag }}
{{ 'firebug/firebug.js' | global_asset_url | script_tag }}
{{ 'firebug/firebugx.js' | global_asset_url | script_tag }}
{{ 'firebug/firebug.html' | global_asset_url }}
{{ 'firebug/errorIcon.png' | global_asset_url }}
{{ 'firebug/infoIcon.png' | global_asset_url }}
{{ 'firebug/warningIcon.png' | global_asset_url }}

トマトソース

こんな感じで意外とグローバルアセットはたくさんあります。

それぞれのグローバルアセットの解説は、また今後行なっていきたいと思います。

⑥img_url

img_urlは、画像URLを返却します。

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

{{ product | img_url: '1024x' }}
//出力：https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_small.jpeg?v=11274

img_urlも他の画像URLを返却するフィルターと同様にサイズパラメータを返却します。

また、img_urlは使えるオブジェクトも決まっていたり、注意点もいくつかあるので、img_urlについて詳しくは以下の記事を参考にしてください。

関連記事画像がうまく表示されない時の対処法｜画像URLフィルターについて解説

⑦payment_type_img_url

payment_type_img_urlは、決済タイプのSVG画像URLを返却します。

payment_type_img_urlを使用する際は、shop.enabled_payment_typesと一緒に使います。

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

{% for type in shop.enabled_payment_types %}
  <img src="{{ type | payment_type_img_url }}" />
{% endfor %}

//出力：
<!-- ストアがアメリカンエクスプレス、マスターカード、Visaカードを受け入れている場合 -->
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_american_express.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_master.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_visa.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_small.jpeg?v=11274

ちなみに、これは「設定＞決済」からストアで利用できる決済方法を設定している場合にのみ利用できます。

トマトソース

決済方法を選択している場合は、以下のように利用可能な決済のアイコンが表示されます。

⑧shopify_asset_url

shopify_asset_urlは、Shopifyのサーバー内のグローバルアセットURLを返却します。

グローバルにアクセスできるアセットは以下の6つです。

グローバルにアクセスできるアセット6つ

option_selection.js
api.jquery.js
shopify_common.js
customer_area.js
currencies.js
customer.css

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

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

//出力：
<script src="//cdn.shopify.com/s/shopify/option_selection.js?20cf2ffc74856c1f49a46f6e0abc4acf6ae5bb34" type="text/javascript"></script>

上記でも出てきた「global_asset_url」との違いは、参照できるアセットファイルとディレクトリのパスです。

「global_asset_url」ではファイルパス名が「//cdn.shopify.com/s/global/ファイル名」となっていたと思いますが、shopify_asset_urlでは「//cdn.shopify.com/s/shopify/ファイル名」となっています。