LoginSignup
19
15

More than 1 year has passed since last update.

@eijiSaito(eiji saito)in株式会社UnReact

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

Last updated at Posted at 2021-01-18

はじめに

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

こちらを参考にしました。

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>タグを生成します。

{% 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>

external_video_tag: class: "youtube_video"のように、HTML属性を渡すことで生成する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

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

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

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

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

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

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

Supported parameters Description
autoplay
プレーヤーを読み込んだときに表示される動画の自動再生設定ができます。

0 または 1 の値を設定することで、自動再生のOFF、ONを切り替えられます。

デフォルト値は 0に設定されており、値を1にしたときに自動再生されます。
cc_lang_pref
プレーヤーに表示する字幕のデフォルト言語設定ができます。

パラメータの値を、ISO 639-1 規格の2文字言語コードに設定すると字幕の言語を指定できます。

cc_load_policy
字幕の表示設定ができます。

パラメータの値を1にすると視聴者が字幕をOFFに設定していても、字幕がデフォルトで表示されるようになります。

省略したときは、視聴者の設定により字幕を表示するか否かが決まります。
color
プレーヤーの動画進行状況バーで使用される色を設定できます。

指定した色は、動画を視聴した部分を示す色として使用されます。

red と white の2種類のパラメータあり、デフォルトでは red が設定されています。

※colorパラメータを white に設定すると、modestbranding パラメータが無効化されます。
controls
音量調節ボタンや再生ボタンなど、動画プレーヤーのコントロールの表示を設定できます。

0 を設定するとプレーヤーコントロールが表示されません。
1 を設定するとプレーヤーコントロールを表示されます。

デフォルトでは 1 が設定されています。
disablekb
キーボード操作の応答設定ができます。

0 を設定すると、キーボード操作が可能になります。
1 を設定するとキーボード操作はできません。

デフォルトでは 0 が設定されています。

現在サポートされているキーボード操作は以下の通りです。

・スペースキーまたは K キー: 再生 / 一時停止
・左矢印キー: 現在の動画を 5 秒戻す　
・右矢印キー: 現在の動画を 5 秒進める　
・上矢印キー: 音量を上げる　
・下矢印キー: 音量を下げる　
・F キー: 全画面モードを切り替える　
・J キー: 現在の動画を 10 秒戻す　
・L キー: 現在の動画を 10 秒進める　
・M キー: ミュート / ミュート解除を切り替える　
・0～9 キー: 指定した位置に移動する。0 は動画の先頭へ、
　1 は全体の 10% の位置へ、2 は全体の 20% の位置へ移動します。
enablejsapi
IFrame を使ったプレイヤーの制御設定ができます。

0 を設定すると、制御できません。
1 を設定すると、制御が可能になります。

デフォルトでは 0 が設定されています。

IFrame APIとその使用方法については、IFrame APIのドキュメントを御覧ください。

※JavaScript Player APIのサポートは終了しています。

end
動画を特定の位置で停止させる場合に、再生を開始してからの時間（秒数）でその位置を設定できます。

パラメータの値は、正の整数に設定します。

時間は、start パラメータや startSeconds パラメータの値からではなく、動画の先頭から測定されます。
fs
全画面ボタンを表示するかの設定できます。

0 を設定すると、ボタンは表示されません。
1 を設定すると、ボタンは表示されます。

デフォルトでは 1 が設定されています。
hl
プレーヤーのインターフェースの言語設定ができます。

パラメータの値は、ISO 639-1 規格の2文字言語コードか、完全指定の言語設定となります。

たとえば、fr や fr-ca は有効な値となります。

IETF 言語タグ（BCP 47）などの他の言語入力コードも正しく処理されます。

インターフェースの言語はプレーヤーのツールチップで使用され、デフォルトの字幕トラックにも影響します。

なお、ユーザー個別の言語設定と利用可能な字幕トラックに基づいて、YouTube が特定のユーザーに対し異なる字幕トラックを選択することもあります。
iv_load_policy
動画アノテーション表示の設定ができます。

アノテーションとは、動画上に表示させることが出来るクリック可能なテキストやエリアのことで、視聴者の反応を促したり、動画だけでは伝えきれない補足説明をしたり、他コンテンツへリンクさせるなどの目的で用いられます。。

1 を設定すると、デフォルトで動画アノテーションが表示されます。
3 を設定すると、デフォルトで表示されなくなります。

デフォルトでは 1 が設定されています。

参考記事：【決定版】YouTubeアノテーションの使い方と出来ることまとめ
list
プレーヤーに読み込むコンテンツを識別するときに、listTypeパラメータと組み合わせて使用します。

listType パラメータの値によって、listパラメータの値に設定するものが変わります。

listパラメータの値は3パターンあります。

1. listType パラメータの値が search の場合、list パラメータの値には、検索クエリを指定します。

2. listType パラメータの値が user_uploads の場合、list パラメータの値には、読み込まれるアップロード動画の所有者のYouTubeチャンネルを指定します。

3. listType パラメータの値が playlist の場合、list パラメータの値には、YouTube 再生リストIDを指定します。
パラメータ値に含める再生リストIDには、下の例のように、PLという文字を先頭につける必要があります。

<例>
https://www.youtube.com/embed
listType=playlist
&list=PLC77007E23FF423C6

※ list パラメータと listType パラメータに値を指定する場合は、IFrame 埋め込み URL に動画 ID を指定する必要はありません。
listType
プレーヤーに読み込むコンテンツを識別するときに、list パラメータと組み合わせて使用します。

有効なパラメータは、playlist、search、user_uploads の3つです。

※ list パラメータと listType パラメータに値を指定する場合は、IFrame 埋め込み URL に動画 ID を指定する必要はありません。
loop
動画の繰り返し再生の設定ができます。

0 を設定すると、ループ再生されません。
1 を設定すると、ループ再生されます。

デフォルトでは 0 が設定されています。

単一動画プレイヤーの場合、最初の動画がループ再生されます。
再生リストプレイヤーとカスタムプレイヤーの場合、再生リスト全体を再生した後、最初の動画からもう一度再生が始まります。

※このパラメータは AS3 プレーヤーと埋め込み IFrame でのみサポートされており、AS3 または HTML5 プレーヤーのいずれかが読み込まれます。loop パラメータは、現時点では playlist pパラメータと組み合わせて AS3 プレーヤーで使用した場合のみ動作します。単一の動画をループさせる場合は、loop パラメータの値を 1 に設定し、すでに Player API URL に指定してある動画 ID と同じ値を playlist パラメータの値に設定します。

<例>
https://www.youtube.com/v/VIDEO_ID?
version=3
&loop=1
&playlist=VIDEO_ID
modestbranding
YouTubeプレイヤーへのYouTubeロゴの表示設定ができます。

0 を設定すると、ロゴが表示されます。
1 を設定すると、表示されません。

デフォルトでは 0 が設定されています。

ロゴの表示しない ( 1 ) と設定していても、動画を一時停止したときに視聴者がプレーヤーにカーソルを合わせると、動画の右上に引き続き小さい YouTube テキストラベルが表示されます。

origin
IFrame API のセキュリティを強化します。

埋め込み IFrame でのみ使用できます。

IFrame API を使用している場合、つまり enablejsapi パラメータの値を 1 に設定している場合は、常に自分のドメインを origin パラメータ値として指定する必要があります。

playlist
複数の動画を一つの再生リストにまとめ、その再生リストを動画プレーヤーとして埋め込むことができます。

パタメータの値は、再生する動画 ID をカンマ区切りのリスト形式で指定します。

URL パスの VIDEO_ID を指定した動画が最初に再生され、その後に、playlistパラメータの値に指定した動画が再生されます。

playsinline
iOS 上の HTML5 プレーヤーで動画を、インラインまたは全画面表示のどちらで再生するかを制御できます。

0 を設定すると、全画面表示で再生されます。
1 を設定すると、UIWebViews (allowsInlineMediaPlayback プロパティを TRUE に設定して作成したもの) がインライン再生されます。

デフォルトでは 0 が設定されています。
rel
関連動画の表示設定ができます。

0 を設定すると、再生した動画と同じチャンネルから関連動画を表示します。
1 を設定すると、違うチャンネルの動画からも関連動画が表示されます。

デフォルトでは 1 が設定されています。
start
動画の先頭から指定された秒数分進めた位置から動画の再生が開始されます。

パラメータ値は正の整数を指定します。

seekTo 関数と同様に、プレーヤーは指定された時間に最も近いキーフレームを探します。

そのため、リクエストされた時間の直前から再生が開始される場合もあり、ずれは最大で 2 秒程度です。

widget_referrer
プレーヤーが埋め込まれている URL を識別します。

widget_referrerの値は、YouTube プレーヤーがウィジェットに埋め込まれ、このウィジェットがウェブページやアプリケーションに埋め込まれた場合に、YouTube アナリティクスのレポートで使用されます。
このシナリオでは、origin パラメータはウィジェット プロバイダのドメインを識別します。

しかし、YouTube アナリティクスが実際のトラフィック ソースとしてウィジェット プロバイダを識別することはありません。
代わりに、YouTube アナリティクスは widget_referrer パラメータの値を使用して、トラフィック ソースに関連するドメインを識別します。

　

参考記事：YouTube 埋め込みプレーヤーとプレーヤーのパラメータ、YouTube動画の21のパラメータまとめ+αと埋め込みコードの実例

img_tag

imgタグを生成します。

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

{% 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>を生成します。

{% 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を生成します。

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

{% 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>タグを生成しています。

{% 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>

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

{% 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> タグを生成します。

{% 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>で指定できる他の属性については、こちらを御覧ください。

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

{% 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属性を指定して変更しています。

{% 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タグを生成します。

{% 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>

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

<video>タグの属性はこちらを御覧ください。

{% 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&KeyName=core-signing-key-1&Signature=JXwC7nPWBmTyTjI5_0i-HQCM9Ec=" type="application/x-mpegURL">
<source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/HD-720p.mp4?Expires=1561048057&KeyName=core-signing-key-1&Signature=UmSvwHVNWqsb9lX8-eOOK-3x4-g=" type="video/mp4">
<source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/SD-480p.mp4?Expires=1561048057&KeyName=core-signing-key-1&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 機能を実現することができます。

19
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
19
15