【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の進化は日進月歩で、情報を得ていなければすぐに新仕様が出ています。

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