【Shopify】オブジェクト出力で”〇〇Drop”と表示されたときのプロパティの確認方法

オブジェクト出力で"〇〇Drop"と表示されたときのプロパティの確認方法 liquid
オブジェクト出力で"〇〇Drop"と表示されたときのプロパティの確認方法
liquid Shopify

“〇〇Drop”と表示されたが、これは何?

Shopifyのオブジェクト出力で、

“〇〇Drop”と表示されるのを見たことがないだろうか。

例えば、一つ前の記事で紹介したvideoのtypeに登録したschemaをliquidのコードで出力したいとき、試しに以下のようにしてフロント画面にどう表示されるか見てみる。

{{ block.settings.video }}

↓出力結果

VideoDrop

このとき、”〇〇Drop”と表示されるが、

これはvideoオブジェクトの中にたくさんのプロパティがあるため、どのプロパティを表示するのかを指定する必要があるという意味である。liquidに限らずphpでもdumpという関数で同じことができる。

ポイント1・liquidの{{ }}の出力テンプレートタグで、オブジェクトがもつプロパティをすべて出力!

プログラミングの世界に出てくるオブジェクトとプロパティの概念をよく理解している方であれば、このあたりがすっと把握できるかと思う。

プロパティを調べるには、以下のように記述する。

{{ block.settings.video | json }}

↓出力結果

{"alt":null,"id":34463982813499,"position":null,"preview_image":{"aspect_ratio":1.508,"height":720,"width":1086,"src":"[//xxx-online.myshopify.com/cdn/shop/files/preview_images/7ab0cf9685324dd39b49f67ace0ba026.thumbnail.0000000000.jpg?v=1687518483"},"aspect_ratio":1.508,"duration":22500,"media_type":"video","sources":[{"format":"mp4","height":480,"mime_type":"video/mp4","url"......(このあとも延々と続くので省略)

ポイント2・JSON整形

この裸で無防備に出力されたJSONは改行もなく1行で出力されるため、

これを、以下のようなJSON整形ツールにかける。

JSON Editor Online: edit JSON, format JSON, query JSON
JSON Editor Online is the original and most copied JSON Editor on the web. Use it to view, edit, format, repair, compare, query, transform, validate, and share ...

表示が階層化され、明快になる。

{
  "alt": null,
  "id": 34463982813499,
  "position": null,
  "preview_image": {
    "aspect_ratio": 1.508,
    "height": 720,
    "width": 1086,
    "src": "//xxx-online.myshopify.com/cdn/shop/files/preview_images/7ab0cf9685324dd39b49f67ace0ba026.thumbnail.0000000000.jpg?v=1687518483"
  },
  "aspect_ratio": 1.508,
  "duration": 22500,
  "media_type": "video",
  "sources": [
    {
      "format": "mp4",
      "height": 480,
      "mime_type": "video/mp4",
      "url": "https://cdn.shopify.com/videos/c/vp/7ab0cf9685324dd39b49f67ace0ba026/xxx.SD-480p-0.9Mbps-15683024.mp4",
      "width": 724
    },
    {
      "format": "mp4",
      "height": 720,
      "mime_type": "video/mp4",
      "url": "https://cdn.shopify.com/videos/c/vp/7ab0cf9685324dd39b49f67ace0ba026/xxx.HD-720p-1.6Mbps-15683024.mp4",
      "width": 1086
    },
    {
      "format": "m3u8",
      "height": 720,
      "mime_type": "application/x-mpegURL",
      "url": "https://cdn.shopify.com/videos/c/vp/7ab0cf9685324dd39b49f67ace0ba026/xxx.m3u8",
      "width": 1086
    }
  ]
}

これにより、

オブジェクトの”sources”というプロパティが配列( [0]〜[2]までの3つの配列情報 )を持っていることがわかり、かつ、そのプロパティ内にも入れ子式にプロパティを持っている構造であるとわかった。

ポイント3・ふたたび{{ }}の出力テンプレートタグで、オブジェクトの狙ったプロパティ情報を出力!

なので、表示させたい動画がmp4ファイルで、横幅1086pxの大きさのプロパティを持っているプロパティを指定し、

{{ block.settings.video.sources[1].url }}

と記述すれば取得したい動画のURL情報を出力できた。

ので、このURL情報をフロントで出力できるということで、<video>タグと絡めて動画コンテンツを表示できることにもなる。

つまりこれが、テーマのカスタマイズでvideoのschema typeに登録した動画ファイル( =videoオブジェクト )の呼び出し方にもなる。

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

    ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

    社名合同会社PRYTHMWORKS
    事業内容EC/Webサイトの構築、管理保守
    CEO吉川直人
    法人事務所所在地〒150-0001
    東京都渋谷区神宮前六丁目23番4号桑野ビル2階
    設立日2023年(令和5年)7月3日
    沿革2020年(令和2年)10月
    個人事業主PRYTHMWORKS事業開始
    2023年(令和5年)7月
    合同会社PRYTHMWORKS設立

    会社に関するご連絡は以下よりお願いいたします。

    mail@prytymworks.tokyo


    お問い合わせ用LINEはこちらからどうぞ!

    お問い合わせ用LINEはこちらからどうぞ!

    LINE

    GoogleMeetの相談予約が可能になりました!

    以下の空いている日からサクッとGoogleMeet(ビデオ通話)の予約をどうぞ!

    タイトルとURLをコピーしました