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

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

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

#Media filter
Mediaフィルタを使うことで、**商品のメディアのURLの取得や、タグを生成できます**。

フィルタは、Mediaのタイプによって使い分けます。

Mediaのタイプには以下の4種類あります。

+ external_video：Shopify以外でホストされている動画
+ image：Shopifyがホストする画像
+ model：Shopifyがホストする3Dモデル
+ video：Shopifyがホストする動画


Shopifyがホストする動画や3DモデルのURLは著名されているため、**有効期限が切れたり変更されたりします**。

そのため、**Shopifyがホストする動画や3DモデルのURLはキャッシュしてはいけません**。

##external_video_tag

``YouTubeの動画プレイヤーを含むIFrameの<iframe>タグを生成します。``

```.liquid
{% 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&amp;enablejsapi=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0">
  ...
\</iframe>


`external_video_tag: class: "youtube_video"`のように、HTML属性を渡すことで**生成するiframeタグに属性を追加することができます**。

```.liquid
{% 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&amp;enablejsapi=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0">
  ...
\</iframe>

##external_video_url

``YouTubeの動画プレイヤーを含むIFrameのURLを生成します。``

パラメータに属性を与えることで、URLに追加することができます。

以下の例では、``external_video_url: color: "white"``とすることで、YouTubeプレイヤーの色を変更してします。

```.liquid
{% 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&amp**;controls=1&amp;enablejsapi=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0">
  ...
\</iframe>

YouTubeのパラメータの一覧は以下の通りです。

以下のパラメータはすべて省略可能で、省略したときはそれぞれのデフォルト値が適用されます。

| Supported parameters | Description |
|:---------------------|:------------|
| ``autoplay`` | <br>**プレーヤーを読み込んだときに表示される動画の自動再生設定ができます。**<br><br>0 または 1 の値を設定することで、自動再生のOFF、ONを切り替えられます。<br><br>デフォルト値は 0に設定されており、値を1にしたときに自動再生されます。<br><br>|
| ``cc_lang_pref``| <br>**プレーヤーに表示する字幕のデフォルト言語設定ができます。** <br> <br> パラメータの値を、[ISO 639-1 規格の2文字言語コード](http://www.loc.gov/standards/iso639-2/php/code_list.php)に設定すると字幕の言語を指定できます。 <br><br>  |
|  ``cc_load_policy``| <br> **字幕の表示設定ができます。** <br> <br> パラメータの値を**1**にすると視聴者が字幕をOFFに設定していても、字幕がデフォルトで表示されるようになります。 <br><br>省略したときは、視聴者の設定により字幕を表示するか否かが決まります。<br><br>   |
| ``color``  | <br>**プレーヤーの動画進行状況バーで使用される色を設定できます。**  <br><br>指定した色は、動画を視聴した部分を示す色として使用されます。 <br><br>**red** と **white** の2種類のパラメータあり、デフォルトでは **red** が設定されています。<br><br>**※colorパラメータを white に設定すると、modestbranding パラメータが無効化されます。**<br><br>  |
| ``controls``  | <br>**音量調節ボタンや再生ボタンなど、動画プレーヤーのコントロールの表示を設定できます。**<br> <br>**0** を設定するとプレーヤーコントロールが表示されません。<br> **1** を設定するとプレーヤーコントロールを表示されます。<br><br>デフォルトでは **1** が設定されています。<br> <br> |
| ``disablekb``  | <br> **キーボード操作の応答設定ができます。** <br><br>**0** を設定すると、キーボード操作が可能になります。<br> **1** を設定するとキーボード操作はできません。<br><br>デフォルトでは **0** が設定されています。<br><br>現在サポートされているキーボード操作は以下の通りです。 <br><br>・スペースキーまたは K キー: 再生 / 一時停止<br>・左矢印キー: 現在の動画を 5 秒戻す　<br>・右矢印キー: 現在の動画を 5 秒進める　<br>・上矢印キー: 音量を上げる　<br>・下矢印キー: 音量を下げる　<br>・F キー: 全画面モードを切り替える　<br>・J キー: 現在の動画を 10 秒戻す　<br>・L キー: 現在の動画を 10 秒進める　<br>・M キー: ミュート / ミュート解除を切り替える　<br>・0～9 キー: 指定した位置に移動する。0 は動画の先頭へ、<br>　1 は全体の 10% の位置へ、2 は全体の 20% の位置へ移動します。<br><br>    |
| ``enablejsapi`` | <br>**IFrame を使ったプレイヤーの制御設定ができます。** <br><br>**0** を設定すると、制御できません。<br> **1** を設定すると、制御が可能になります。<br><br>デフォルトでは **0** が設定されています。<br><br>IFrame APIとその使用方法については、[IFrame APIのドキュメント](https://developers.google.com/youtube/iframe_api_reference)を御覧ください。  <br> <br>**※JavaScript Player APIのサポートは終了しています。**  <br><br>   |
| ``end``  | <br>**動画を特定の位置で停止させる場合に、再生を開始してからの時間（秒数）でその位置を設定できます。**  <br><br>パラメータの値は、正の整数に設定します。<br><br>時間は、start パラメータや startSeconds パラメータの値からではなく、動画の先頭から測定されます。<br><br>   |
| ``fs``  | <br> **全画面ボタンを表示するかの設定できます。** <br><br>**0** を設定すると、ボタンは表示されません。<br> **1** を設定すると、ボタンは表示されます。<br><br>デフォルトでは **1** が設定されています。<br><br>   |
| ``hl``  | <br>**プレーヤーのインターフェースの言語設定ができます。**  <br><br>パラメータの値は、[ISO 639-1 規格の2文字言語コード](http://www.loc.gov/standards/iso639-2/php/code_list.php)か、完全指定の言語設定となります。<br><br>たとえば、fr や fr-ca は有効な値となります。<br><br>IETF 言語タグ（BCP 47）などの他の言語入力コードも正しく処理されます。<br><br>インターフェースの言語はプレーヤーのツールチップで使用され、デフォルトの字幕トラックにも影響します。<br><br>なお、ユーザー個別の言語設定と利用可能な字幕トラックに基づいて、YouTube が特定のユーザーに対し異なる字幕トラックを選択することもあります。<br><br>   |
|``iv_load_policy``| <br>**動画アノテーション表示の設定ができます。** <br><br>**アノテーション**とは、**動画上に表示させることが出来るクリック可能なテキストやエリアのこと**で、視聴者の反応を促したり、動画だけでは伝えきれない補足説明をしたり、他コンテンツへリンクさせるなどの目的で用いられます。。<br><br>**1** を設定すると、デフォルトで動画アノテーションが表示されます。<br> **3** を設定すると、デフォルトで表示されなくなります。<br><br>デフォルトでは **1** が設定されています。<br><br>参考記事：[【決定版】YouTubeアノテーションの使い方と出来ることまとめ](https://www.movie-times.tv/study/how-to/5367/#:~:text=%E3%82%A2%E3%83%8E%E3%83%86%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E3%81%AF%E3%80%81YouTube%E3%81%AE,%E7%9B%AE%E7%9A%84%E3%81%A7%E7%94%A8%E3%81%84%E3%82%89%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82)<br><br>   |
| ``list``  | <br>**プレーヤーに読み込むコンテンツを識別するときに、listTypeパラメータと組み合わせて使用します。**  <br> <br>**listType** パラメータの値によって、listパラメータの値に設定するものが変わります。<br><br>listパラメータの値は3パターンあります。<br><br>1. listType パラメータの値が **search** の場合、list パラメータの値には、**検索クエリ**を指定します。<br><br>2. listType パラメータの値が **user_uploads** の場合、list パラメータの値には、**読み込まれるアップロード動画の所有者のYouTubeチャンネル**を指定します。<br><br>3. listType パラメータの値が **playlist** の場合、list パラメータの値には、**YouTube 再生リストID**を指定します。<br>パラメータ値に含める再生リストIDには、下の例のように、**PLという文字を先頭につける必要があります**。<br><br><例><br>https\://www\.youtube.com/embed<br>listType=playlist<br>&list=**PL**C77007E23FF423C6<br><br>**※ list パラメータと listType パラメータに値を指定する場合は、IFrame 埋め込み URL に動画 ID を指定する必要はありません。**<br><br> |
| ``listType``  |  <br>**プレーヤーに読み込むコンテンツを識別するときに、list パラメータと組み合わせて使用します。**  <br><br>有効なパラメータは、**playlist**、**search**、**user_uploads** の3つです。<br><br>**※ list パラメータと listType パラメータに値を指定する場合は、IFrame 埋め込み URL に動画 ID を指定する必要はありません。**<br><br> |
| ``loop``  | <br>**動画の繰り返し再生の設定ができます。**<br><br>**0** を設定すると、ループ再生されません。<br> **1** を設定すると、ループ再生されます。<br><br>デフォルトでは **0** が設定されています。<br><br>単一動画プレイヤーの場合、最初の動画がループ再生されます。<br>再生リストプレイヤーとカスタムプレイヤーの場合、再生リスト全体を再生した後、最初の動画からもう一度再生が始まります。 <br><br>**※このパラメータは AS3 プレーヤーと埋め込み IFrame でのみサポートされており、AS3 または HTML5 プレーヤーのいずれかが読み込まれます。loop パラメータは、現時点では playlist pパラメータと組み合わせて AS3 プレーヤーで使用した場合のみ動作します。単一の動画をループさせる場合は、loop パラメータの値を 1 に設定し、すでに Player API URL に指定してある動画 ID と同じ値を playlist パラメータの値に設定します。**<br><br><例><br>https\://www\.youtube.com/v/**VIDEO_ID**?<br>version=3<br>&loop=1<br>&playlist=**VIDEO_ID**<br><br>  |
| ``modestbranding``  |<br>**YouTubeプレイヤーへのYouTubeロゴの表示設定ができます。**  <br><br>**0** を設定すると、ロゴが表示されます。<br> **1** を設定すると、表示されません。<br><br>デフォルトでは **0** が設定されています。<br> <br>ロゴの表示しない ( 1 ) と設定していても、動画を一時停止したときに視聴者がプレーヤーにカーソルを合わせると、動画の右上に引き続き小さい YouTube テキストラベルが表示されます。  <br><br>   |
| ``origin``  |  <br>**IFrame API のセキュリティを強化します。**  <br> <br>埋め込み IFrame でのみ使用できます。  <br><br>IFrame API を使用している場合、つまり **enablejsapi パラメータの値を 1 に設定している場合は、常に自分のドメインを origin パラメータ値として指定する必要があります。** <br><br>|
| ``playlist``  |  <br>**複数の動画を一つの再生リストにまとめ、その再生リストを動画プレーヤーとして埋め込むことができます。**  <br><br>パタメータの値は、再生する動画 ID をカンマ区切りのリスト形式で指定します。<br><br>URL パスの VIDEO_ID を指定した動画が最初に再生され、その後に、playlistパラメータの値に指定した動画が再生されます。  <br><br> |
|  ``playsinline`` | <br>**iOS 上の HTML5 プレーヤーで動画を、インラインまたは全画面表示のどちらで再生するかを制御できます。**  <br><br>**0** を設定すると、全画面表示で再生されます。<br> **1** を設定すると、UIWebViews (allowsInlineMediaPlayback プロパティを TRUE に設定して作成したもの) がインライン再生されます。<br><br>デフォルトでは **0** が設定されています。<br> <br>  <br><br>  |
|  ``rel`` | <br>**関連動画の表示設定ができます。**  <br><br>**0** を設定すると、再生した動画と同じチャンネルから関連動画を表示します。<br> **1** を設定すると、違うチャンネルの動画からも関連動画が表示されます。<br><br>デフォルトでは **1** が設定されています。<br><br>  |
| ``start``  | <br>**動画の先頭から指定された秒数分進めた位置から動画の再生が開始されます。** <br><br>パラメータ値は**正の整数**を指定します。<br><br> seekTo 関数と同様に、プレーヤーは指定された時間に**最も近いキーフレームを探します**。<br><br>そのため、リクエストされた時間の直前から再生が開始される場合もあり、ずれは最大で **2 秒**程度です。  <br><br>  |
|``widget_referrer`` | <br>**プレーヤーが埋め込まれている URL を識別します。**  <br> <br> widget_referrerの値は、YouTube プレーヤーがウィジェットに埋め込まれ、このウィジェットがウェブページやアプリケーションに埋め込まれた場合に、YouTube アナリティクスのレポートで使用されます。<br>このシナリオでは、origin パラメータはウィジェット プロバイダのドメインを識別します。<br><br>しかし、YouTube アナリティクスが実際のトラフィック ソースとしてウィジェット プロバイダを識別することはありません。<br>代わりに、**YouTube アナリティクスは widget_referrer パラメータの値を使用して、トラフィック ソースに関連するドメインを識別します**。 <br><br>　|

参考記事：[YouTube 埋め込みプレーヤーとプレーヤーのパラメータ](https://developers.google.com/youtube/player_parameters#Parameters)、[YouTube動画の21のパラメータまとめ+αと埋め込みコードの実例
](https://wisdommingle.com/youtube-embedded-player-parameter-customize/)

##img_tag
``imgタグを生成します。``

**model タイプオブジェクト**や **video タイプオブジェクト**に使用すると、メディアのプレビュー画像（プレースホルダー）用の``<img>``を生成します。

```.liquid
{% 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">

**img タイプオブジェクト**に使用すると、画像の\<img>を生成します。

```.liquid
{% 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
`画像のURLを生成します。`

`img_url`フィルターの後には、使用する画像のサイズを指定することができます。

元の画像のサイズよりも小さいサイズを要求すると、Shopify が画像のサイズを調整します。

**画像サイズを指定していない場合、フィルタは 100x100 のサイズ（small）の画像を返します。**

**model タイプオブジェクト**や、**video タイプオブジェクト**に使用すると、メディアのプレビュー画像の画像URLを生成します。

```.liquid
{% 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を返します。

```.liquid
{% if product.featured_media.media_type == "image" %}
  {{ product.featured_media | img_url: '500x500' }}
  {{ product.featured_media | img_url }}
{% endif %}
```
>https\://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_500x500.jpeg?v=1459175177
https\://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_small.jpeg?v=1459175177


##media_tag
`メディアのタイプ応じて、適切なタグを生成します。`

Shopifyでは、3Dモデルは Google model viewr component でホストしています。

下の例では、メディアのタイプが`model`だったため、\<model-viewer>タグを生成しています。

```.liquid
{% 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>

パラメータに属性を与えることで、生成するタグに属性を追加できます。

```.liquid
{% 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
`3Dモデル（ Google model viewr component）の<model-viewer> タグを生成します。`

```.liquid
{% 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_tag: image_size: "1024x"`のように追加することで設定できます。**

デフォルトでは、`alt` 属性は**メディアの alt テキスト**、`poster` 属性は**メディアのプレビュー画像**、`camera_controls` 属性は**有効（true）**になっています。

`camera_contorols`属性が有効になっていると、マウスで3D画像を動かすことができます。

\<model-viewer>で指定できる他の属性については、[こちら](https://modelviewer.dev/docs/index.html)を御覧ください。


次の例では、model viewer コンポーネントに`background-color`属性を設定しています。

```.liquid
{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | model_viewer_tag: background-color: "#455A64" }}
{% endif %}
```
>\<model-viewer **background-color="#455A64"** 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>

以下の例では、3D画像のプレースホルダーの画像サイズを `image_size`属性を指定して変更しています。

```.liquid
{% if product.featured_media.media_type == "model" %}
  {{ product.featured_media | model_viewer_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" ar="true" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_**1024x**.jpg?v=1560875434">\</model-viewer>


##video_tag

`メディアタイプがvideoのとき、videoタグを生成します。`

```.liquid
{% 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&amp;KeyName=core-signing-key-1&amp;Signature=BIQQpuyEVnyt9HUw4o9QOmQ1z2c=" type="application/x-mpegURL">
    \<source src="https\://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-360p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=1kEi8GmNIssxVvjyzy7AOuGP-E0=" type="video/mp4">
    \<source src="https\://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-480p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=8Lt74XmFWP6hOF1WRdqNkDWRm2U=" type="video/mp4">
    \<source src="https\://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/HD-720p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=vlNXWpvgRT2bghrWovJPrN8w3mc=" type="video/mp4">\<p>Sorry html5 video is not supported in this browser\</p>
\</video>

以下のように、\<video>タグに属性を追加することもできます。

\<video>タグの属性は[こちら](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video)を御覧ください。

```.liquid
{% if product.featured_media.media_type == "video" %}
  {{ product.featured_media | video_tag: image_size: "1024x" }}
{% endif %}
```
>\<video playsinline="true" poster="//cdn.shopify.com/s/files/1/1425/8696/products/dc6b2518bec04c42a7a5239f563d8cb4_**1024x**.jpg?v=1560875163">
  \<source src="https\://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/master.m3u8?Expires=1561048057&amp;KeyName=core-signing-key-1&amp;Signature=JXwC7nPWBmTyTjI5_0i-HQCM9Ec=" type="application/x-mpegURL">
  \<source src="https\://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/HD-720p.mp4?Expires=1561048057&amp;KeyName=core-signing-key-1&amp;Signature=UmSvwHVNWqsb9lX8-eOOK-3x4-g=" type="video/mp4">
  \<source src="https\://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/SD-480p.mp4?Expires=1561048057&amp;KeyName=core-signing-key-1&amp;Signature=TCJ-rhKIFEwPt1lMXTIm8m-E8NE=" type="video/mp4">
  \<img src="//cdn.shopify.com/s/files/1/1425/8696/products/dc6b2518bec04c42a7a5239f563d8cb4_1024x.jpg?v=1560875163">
\</video>

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

お疲れさまでした。

# 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