[Shopify] schemaタグの説明と簡単なliquidでの使用方法【概要を掴もう初級編】

今回はShopifyでのschemaタグとは何か、そして、そのschemaタグの簡単な使用方法についてまとめていきます。

Shopifyの何よりの魅力は管理画面が使いやすいこと！その管理画面から、ちゃちゃっとテキスト編集や画像差し替えができるのがSchemaタグの魅力です。

Schemaとは？という概要の説明から、schemaを使った簡単なliquidの使用方法まで一気に紹介していきます！

schemaタグとは？

まず最初にSchemaタグとは何かについて説明してみます。ざっくり言うと

Schemaタグを使用すると『Shopifyのカスタマイズ画面から画像や文言などを編集できる』ようになります！

上記のGIFではカスタマイズ画面から文章を変更できるようになっています。これがschemの最大の特徴です！

めちゃくちゃ便利なのです。普通画像差し替えやリンク差し替えって開発会社に依頼して「差し替えてください。」とかの流れになるのですが、クライアント側で全て対応できるので双方にとって大幅な時間削減・効率化になります。

しかもクライアント側がコードをいじらずに編集できてしまうのです！（重要）

ちなみに開発者の方向けにコード上はどんな感じになるかというと、、、

{% schema %}
{
	"name": "Penguin Schema",
	"settings": [
		{
			"type": "image_picker（typeの中から選択）",
			"id": "image（任意のID）",
			"label": "Background Image（カスタマイズ画面上表示されるもの）"
		}
	]
}
{% endschema %}

こんな感じで{% schema %}のタグで囲まれた部分に記述していきます。ちなみに、上のコードは、カスタマイズ画面から画像を選択できるタグになっています。（こんな感じだよってお伝えしたかっただけなので、さっとみるだけで大丈夫です。）

Shopifyのデフォルトで既に書いてあると思うので、もしもっと色々なSchemaタグみたい方は全体検索（VScodeならCommand+Shift+F）で上記タグ検索すると出てくると思います！

Schemaタグでできること

だいたいschemaタグがどんなものなのかが分かってきましたか？

そうです、Shopifyのカスタマイズ画面からコードをいじらずに直接テキストや画像を差し替え、編集できちゃう優れものですよね笑

それでは実際にSchemaタグではどのようなことができるかをまとめていきます！

エンジニアの実力次第でできることは、まだまだあると言えるでしょう。

ただ上記だけみても非常に魅力的な機能でShopifyを利用する大きなメリットとなっています。

Schemaが使えるファイル

こんな便利なSchemaタグならサイト全部に適用して、全部クライアント側で編集して貰っちゃえ〜。もしくは、自分で設定して、あとはコード触らなくて済むようにしちゃえ〜。と考える人もいるかも知れません。

しかし、実はSchemaタグは 一般的にsection内のファイルでしか使いません。（configフォルダ内など例外ありますが）

sectionとは何か。。

それは、Shopify管理画面のテーマ一覧からアクション→コードを編集するを選択

その中にsectionというフォルダがあります。

基本的には、このsectionフォルダの中にあるファイルしかschemaタグは使用しません。

逆に上記のsection内のほとんどのファイルでschemaタグが設定されているのではないでしょうか。もしShopifyストアを所持していて時間あればみてみると、これがschemaかなるほどね、とドヤれるかも知れません。

Liquidでの簡単な使用方法

そして最後にLiquidの簡単な使用方法です。

schemaタグを設定したとしても、それが勝手にページに反映されるわけではありません。ページ内のどこに反映するかを指定してあげる必要があります。

ちなみに、ここからはちょっとHTML/CSSわかるよくらいの人向けです。

先ほどのSchemaタグをテキストに変えてちょっと解説すると、、

{% schema %}
{
	"name": "Penguin Schema",
	"settings": [
		{
			"type": "text",
			"id": "text_id",
			"label": "テキスト入力です（カスタマイズ画面上表示されるもの）"
		}
	]
}
{% endschema %}

このtypeの部分をimage_pickerにしたら画像選択、urlにしたらurl選択など、編集する対象を変えることができます。今回はtextなのでテキスト入力です。

カスタマイズ画面での見え方はこんな感じ。

typeの種類を全て詳しく知りたい方は下記ブログに記述あります。

https://ec-penguin.com/blogs/shopify/schema-type-summary

そして、schemaタグを設定し、カスタマイズ画面からテキストを入力したら、section内ファイルのテキスト追加したい部分にliquidを記述します。

その記述方法は、、

{{ section.settings.text_id }}

と記載するだけです！

例えば、HTMLのpタグのなかにカスタマイズ画面から入力したテキストを出力させたい場合は

<p>{{ section.settings.text_id }}</p>

と記載します。普段開発している人にとってはイージーピージーでしたかね。

ShopifyでのSchemaタグの使い方 まとめ

以上、schemaタグの基本的な使い方でした！

ただ言いたいのは、schemaタグはまだまだこんなもんじゃない笑 まだまだたくさん使い方がありますし、応用方法もたくさんあり、日々開発している身としても、奥が深いなぁと感じています。

この使いやすさや機能の多さがShopifyの大きな魅力です。

またそのうち応用編も書いてみようかなぁ。