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

・Media filtersにはどんなのがあるの？
・Media filtersの種類と使い方が知りたい！

本記事の内容

Media filtersとは
Media filtersの使い方

[blog_parts id=“256”]

Shopifyにはテーマ開発をスムーズに進め、カスタマイズの幅を広げるために様々なフィルターが用意されています。

そのフィルターの一つ**「Media filters」は商品画像や動画などを表示する際に使える便利なフィルターで、マスターすれば商品の魅力を最大限伝えられる**ようになります。

ということで今回はShopifyで使えるMedia filtersの種類と使い方について解説していきます。

本記事を参考にすれば、Media filtersの使い方がわかりより商品の魅力が伝わるテーマカスタマイズができるようになります。

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

Media filtersとは

Media filtersとは、商品に設定している画像や動画などのメディアのURLを返却するフィルターのことです。

Media filtersの種類

Shopifyで使えるMedia filtersは以下の7つです。

Media filters全7種類

以下でそれぞれの使い方を解説していきます。

Media filtersの使い方

Media filters7つの使い方を解説していきます。

①external_video_tag

external_video_tagは、YouTubeやVimeoを含んだiframeを生成します。

external_video_tagを使用する場合、ビデオメディアにaltテキストが設定されている場合は、iframeのタイトル要素として出力されます。

反対にaltテキストを設定していない場合は、タイトル要素に商品名が入ります。

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

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | external_video_tag }}
{% endif %}

//出力：
<iframe 
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" 
  src="https://www.youtube.com/embed/neFK-pv2sKY?controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0"
>...</iframe>

HTML要素も付与できる

external_video_tagを使う場合、オプションでHTML要素の指定しiframeに適用することができます。

例えば以下のように「class:XXX」と指定した場合はCSSで指定しているクラスのスタイルがiframe適用されます。

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | external_video_tag: class: "youtube_video" }}
{% endif %}

//出力：
<iframe 
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" class="youtube_video" 
  src="https://www.youtube.com/embed/neFK-pv2sKY?controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0"
>...</iframe>

②external_video_url

external_video_urlは、上記のexternal_video_tagで描写されるビデオプレーヤーにパラメータをセットする際に用います。

YouTubeを埋め込み時に使えるパラメータはこちらをご覧ください。

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

{% if product.featured_media.media_type == "external_video" %}
  {{ product.featured_media | external_video_url: color: "white" |  external_video_tag }}
{% endif %}

//出力：
<iframe
　　frameborder="0"
　　allow="accelerometer;
　　autoplay; encrypted-media;
　　gyroscope; picture-in-picture"
　　allowfullscreen="allowfullscreen"
　　src="https://www.youtube.com/embed/neFK-pv2sKY?color=white&controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0"
>
  ...
</iframe>

上記の例であれば、「color: “white”」と指定しているためYouTubeプレーヤーの色が変化します。

③img_tag

img_tagは、modelやvideoオブジェクトと一緒に使うと、メディアのプレビュー画像タグを生成します。

modelオブジェクトについて詳しくは、こちらをご覧ください。

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

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | img_tag }}
{% endif %}

//出力：
<img src="//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_small.jpg?v=1560284062">

ちなみに、imageオブジェクトと一緒に使うと通常通りimageタグを生成します。

{% if product.featured_media.media_type == "image" %}
  {{ product.featured_media | asset_url | img_tag }}
{% endif %}

//出力：
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />

④img_url

img_urlは、mediaオブジェクトに使うとプレビュー画像の画像URLを生成します。

img_urlにはサイズパラメータを渡して大きさの指定などもできるので、img_urlなど画像フィルターについて詳しくは以下の記事をご覧ください。

関連記事 URL filtersの種類と使い方を解説

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

{% if product.featured_media.media_type == "video" %}
  {{ product.featured_media | img_url: 500x500 }}
  {{ product.featured_media | img_url }}
{% endif %}

//出力：
//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_500x500.jpg?v=1560284062
//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_small.jpg?v=1560284062

一つ注意なのは、img_urlは先ほどのimg_tagとは違いプレビュー画像URLを生成し返却していることです。

imgタグは返却されないので注意です！

またimg_urlをimageオブジェクトに付与した場合は、画像のURLが返却されます。

⑤media_tag

media_tagは、メディアに適したタグを生成します。

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

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | media_tag }}
{% endif %}

//出力：
<model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  ...
</model-viewer>

medita_tagにimage_sizeオプションを追加することで、表示されるメディアタグの大きさも任意のものに変更できます。

記載する場合は、以下の例をご参考ください。

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | media_tag: image_size: "1024x" }}
{% endif %}

//出力：
<model-viewer src="https://model3d.shopifycdn.com/models/o/af141f14d08f8d30/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/7874b0738a5c6c3f/stroller.usdz" camera-controls="true" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_1024x.jpg?v=1560875434"></model-viewer>

⑥model_viewer_tag

model_viewer_tagは、指定した3DモデルのGoogleモデルビューアーコンポーネントを生成します。

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

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | model_viewer_tag }}
{% endif %}

//出力：
<model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  ...
</model-viewer>

model viewerに渡せるオプション

model viewerコンポーネントには以下のオプション属性を付与できます。

付与できるオプションについては、こちらをご参考ください。

デフォルトでは、「alt」にはメディアのaltテキストが、「poster」にはプレビュー画像が、「camera-controls」はオンに設定されています。

以下の例は、モデルビューアーの背景を黒に変更している記述です。

{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | model_viewer_tag: background-color: "#000000" }}
{% endif %}

//出力：
<model-viewer background-color="#000000" src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
  ...
</model-viewer>

ちなみに、media_tagと同様にimage_sizeでプレビュー画像のサイズの指定も行えます。

⑦video_tag

video_tagは、videoタグを生成します。

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

{% if product.featured_media.media_type == "video" %}
  {{ product.featured_media | video_tag }}
{% endif %}

//出力：
<video playsinline="true" controls="">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/master.m3u8?Expires=1560458164&KeyName=core-signing-key-1&Signature=BIQQpuyEVnyt9HUw4o9QOmQ1z2c=" type="application/x-mpegURL">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-360p.mp4?Expires=1560458164&KeyName=core-signing-key-1&Signature=1kEi8GmNIssxVvjyzy7AOuGP-E0=" type="video/mp4">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-480p.mp4?Expires=1560458164&KeyName=core-signing-key-1&Signature=8Lt74XmFWP6hOF1WRdqNkDWRm2U=" type="video/mp4">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/HD-720p.mp4?Expires=1560458164&KeyName=core-signing-key-1&Signature=vlNXWpvgRT2bghrWovJPrN8w3mc=" type="video/mp4"><p>Sorry html5 video is not supported in this browser</p>
</video>

こちらもimage_sizeを指定すると、プレビュー画像のサイズが変更できます。

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

今回は、商品画像や動画を出力する際に欠かせないMedia filtersについて解説してきました。

種類は全部で7つと少なめですが、サイズの指定やCSSクラスの付与など色々とカスタマイズできそうですね！

ぜひマスターして、オシャレで売上の上がるストア構築に役立ててください。

関連カテゴリー Shopifyで使えるフィルターまとめ