2024.1.10最新情報追記！）【Shopify】テーマの「カスタマイズ」に動画ファイル用のschema typeが追加されていた件！

Shopifyのストアを運用していた方なら、一度は話題に上がったことがあると思うのだが、

ページ内に動画コンテンツを表示させたいとき、これまではShopifyのテーマの仕様では、

“YouTube動画”か”Vimeo”の動画リンクを貼ることで表示することができた。

このような、テンプレート内に配置するセクションが持っている機能に「カスタマイズ」の画面からテキストや画像、リンク、数値スライダーなどで入力して設定できる機能のことを、Shopifyでは”Schema（スキーマ）”と呼んでいる。

セクションファイルの中では以下のようなコードで機能が記述されている。

{% for link in linklists[section.settings.main_linklist].links %}
	{% if link.links == blank %}
		<a class="nav-link" href="{{ link.url }}">{{link.title}}</a>
	{% endif %}
{% endfor %}
<!-- ここまでが、Shopifyの通常のliquidコード。[section.settings.main_linklist]に登録された「メニュー」のリンク一覧をforで回して出力するコードである -->
<!-- ここからが、上のliquidコードの{{ }}に囲まれた変数出力部分への定義をする部分（Schema） -->
{% schema %}
{
    "name": "Main Menu",
    "settings": [
        {
            "type": "link_list",
            "id": "main_linklist",
            "label": "Menu",
            "default": "main-menu"
        }
    ]
}
{% endschema %}

さて、それでは動画コンテンツファイルを表示させるためのschemaはどうしていたか。

従来の動画表示のセクション

こちらが従来の、”video_url”というtypeのschemaのコード。

{
  "type": "video_url",
  "id": "product_description_video",
  "label": "Product description video",
  "accept": [
    "youtube",
    "vimeo"
  ]
}

で、表示されたschemaで表示された「カスタマイズ」の画面

見覚えがあるのではないだろうか。

この従来のスキーマでは、困ったことに、この”video_url”で許可された動画コンテンツは、YouTubeにアップロードされた動画か、Vimeoにアップロードされた動画に限るのだ。

SNSにアップしないとここで動画を表示することができなかった。

これは商品ページの商品画像でも同じく、やはり動画ファイルを直で登録することができない。

この仕様に則って、動画はYouTubeやVimeo（Vimeo使ったことない。。）にアップすれば、それはそれで理にかなっていることがわかる。

現在のGoogleは、ページ上にTwitterやYouTubeの埋め込みコンテンツが、ページの内容とマッチしているとページ評価が高くなるようなので、SEO効率も高い上に、

動画をShopifyのCDNにアップロードせずとも、動画の再生に最適化したYouTubeのような優秀なエンジンを持ったサーバ上にアップして、それをShopifyのストア内で埋め込み動画として再生したほうが、データ転送効率もストレージ使用効率も、すべてがよいのだ。

だが、僕の経験的に、日本国内ではどうしてか、自社の動画コンテンツはYouTubeにアップ、は”２の次”で、動画はストアのサーバにアップするほうが正当だよね、という空気感があるように感じる。実際にそうしたいというストアが多い。

(単にストアアカウントでYouTubeチャンネルを作成していないから、そもそも動画をYouTubeにアップすること自体ができないからかもしれない)

2022年11月に追加されていた、「動画ファイルアップロード用のスキーマ」

こうした仕様の壁を払拭するかのように、2022年の11月に新仕様が登場していた。

Input settings

About input setting types.

shopify.dev

それが、”video”というschema typeである。

コードでは以下のように記述する。

{
  "type": "video",
  "id": "video",
  "label": "A Shopify-hosted video"
}

このスキーマで表示されるカスタマイズの画面はこれだ。

UIも圧倒的にシンプルになっているし、この”Select video”（ラベル名も変更可）のボタンを押したあとに、動画ファイルのアップロードをすることも可能だ。アップロードした動画ファイルは、ストアの「コンテンツ」の「ファイル」に格納されている。

これまではハック的に２段階方式で登録を実現していた

実は、僕の携わっているストアでは、この新仕様をもっと早くからハック的に実現していた。

どうやっていたかというと、

1. まず、ストアの「コンテンツ」の「ファイル」に動画ファイルを格納
2. アップロードした動画のURL情報を取得
3. テーマの「カスタマイズ」の画面内で”url”というschemaを利用し、ここに2で取得したURLを入力する
4. フロント画面で、3で入力されたURLが<video>のhtmlコードで呼び出す動画のソースになって表示される

というように、ファイルをアップ→アップしたファイルのURLをカスタマイズの画面で設定してもらう、の２段階方式で、実現していた。

新仕様は、この２段階方式を１発で実施できるスキーマというわけです。

Shopifyの開発チームは、世界中のストアで、Shopifyストアがどう運用されているかをくまなく見ているのだと思います。

やはり、Shopifyの進化は日進月歩で、情報を得ていなければすぐに新仕様が出ています。

ともあれ、過去にはアプリを使用しなければ実現できなかったことが、標準仕様でできるようになっていたりしますので、新情報をゲットできる環境作り、情報源の確保が重要になっています。

2024/1/10 追記：どうやってこのvideoタイプのコンテンツをフロント画面に出力するか！？

この記事を書いてから、実際にvideoタイプで登録した動画コンテンツをフロント画面で表示する必要が出たので、

「あれっ、そういえばどうやって表示するんだろう？」とわからなくなった。

単純に<video src=”{% section.settings.hoge_video %}”>みたいな感じでいいのか？と思っていたら、それではダメでした！じゃあどうやるのか？？

正直すごくトライアンドエラーをさせられ、ようやくわかりました。

以下のようなliquidコードで可能です。

{% if section.settings.video %}
<video width="320" height="240" controls>
  {% for source in section.settings.hoge_video.sources %}
    <source src="{{ source.url }}" type="video/{{ source.format }}">
  {% endfor %}
</video>
{% endif %}

キモはここです。

{% for source in section.settings.hoge_video.sources %}
<source src=”{{ source.url }}” type=”video/{{ source.format }}”>
{% endfor %}

このvideoタイプで登録すると、なんと「videoオブジェクト」というShopify仕様のオブジェクトが生成されます。
ここでの例では、”hoge_video”というオブジェクトです。

その”hoge_video”が持つプロパティとして、”source”という配列の変数がある、ということです。
（オブジェクト、プロパティ、配列、変数、このへんはプログラミングでおなじみの用語です。ちょっと今そこ深掘りしなくていいという方は、そういうものがあるんだというくらいで、大事なのはとにかく出力の際のお約束の型がある、ということで大丈夫です！）

{% for source in section.settings.hoge_video.sources %}

というところで、”source”という配列の変数の中身を巡回するよ、とループを宣言しています。

そして、ループの中で、

<source src=”{{ source.url }}” type=”video/{{ source.format }}”>

と、ここも型です！

“source”プロパティの中に、さらに入れ子で、”url”という情報を持っているということです。これこそが、ようやくShopify CDN上の動画ファイルのurlです。

そのあとに、type=”video/{{ source.format }}”

ここで、”video/mp4″になるのか？それとも”video/m3u8″が、動画ファイルの容量によって変わってきます。
なので、この型を使っていないとどっちで来るのかわかりません。

Shopifyのファイルアップロード処理は賢く、静止画ならjpgやpngでアップしてもwebpのバージョンも作成してくれて、webpを表示できる環境でのみwebpを表示する、なんてことをデフォルトでやってくれるのですが、これは動画においても同じで、mp4で動画をアップしてもmp4にならず、この”m3u8″に生まれ変わることがあります。

ちょっ、、m3u8ってなんすか？？

.m3u8ファイル形式は、HTTP Live Streaming (HLS) の一部として使用されるファイル形式です。

HLSは、特にAppleによって開発されたストリーミングプロトコルであり、ビデオやオーディオコンテンツをリアルタイムで配信するのに適しています。

.m3u8ファイルは、ストリーミングセッションの中で異なるビットレートのビデオデータを含むプレイリストを参照するマニフェストファイルです。これにより、ユーザーの接続速度やデバイスの能力に応じて、最適なビデオ品質を動的に提供することができます。

Shopifyはビデオファイルを自動的に複数の解像度の.mp4ファイルと.m3u8プレイリストファイルに変換していることがわかります。これにより、様々なデバイスやネットワーク環境においてビデオコンテンツのアクセスを最適化しています。

すごいねShopify！