【Shopify学習】Schemaを使った開発方法を解説
Shopify エンジニア
Shopifyの構築を請け負ってるけど、Schemaを使った開発方法をして、管理画面上のカスタマイズ編集をより便利にしたいな。どうやってコード書くか教えて欲しいなー。
こういった疑問に答えます。
この記事の内容
この記事を書いている僕は、2020年からShopifyエキスパートで働いている現役フロントエンドエンジニアです。
Liquidコードをゴリゴリ書いてShopifyのテーマ開発、編集をしているので、実務で習得したスキルをアウトプットしていきます。少しでもお役に立てればと。
手順① Schemaを使ったパーツの作成
パーツのベースとなるliquidファイルを作成
では、最初にパーツのベースとなるliquidファイルを作成していきましょう。
「テーマ」 > 「アクション」 > 「コードを編集する」
> 「新しいsectionを追加する」 > 「新しいセクションを追加する」 で parts.liquid を作成。
今回は、parts.liquidを作成するので、名前:のところに parts を記入します。
{% schema %}
{
"name": "Section name",
"settings": []
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
すると、上記のような形でコードが自動生成されると思います。
Shopify Schema の基本の型
Schemaは、下記の部分になります。
{% schema %} → 開始タグ
{
}
{% endschema %} → 終了タグ
そしてこの中の{ }に、JSONという記述方法で、今回設定したい内容を書いていきます。
JSONとは、JavaScript Object Notationの略で、JavaScriptのオブジェクトの書き方を元にした、データ定義方法のことを言います。
JavaScriptでオブジェクトを作成
むずかしい言い方ですが、要はこの部分です。
{% schema %}
{
"name": "Section name", →この部分
"settings":[] →この部分
}
{% endschema %}name
nameのところは、作成するセクションパーツの任意の名前をつけます。
カスタマイズ画面で表記される名前になるので、それにふさわしい名前をつけておくとクライアントさんはわかりやすいと思います。
今回は、〇〇〇〇としておきます。
settings
次に、settingsを記述します、
{% schema %}
{
"name": "〇〇〇〇",
"settings":[］ → この中にパーツで作成したい内容を記述していく
}
{% endschema %}例えば、こんな感じに[ ]の中を記述するとします。
{% schema %}
{
"name": "〇〇〇〇",
"settings":[
{
"type": "text",
"id": "parts",
"label":"ラベル",
"default": "最初に表示させたい文章",
"info":"使う人がわかりやすいように表記できる"
}
]
}
{% endschema %}順番に[ ]の中を説明していきます。
まずは、{ }を記入して、１つの設定を作成します。
- ① “type”
- ② “id”
- ③ “label”
- ④ “default”
- ⑤ “info”
5つを記入していきます。（最低①と②と③の３つでも大丈夫です。）
① type
作成するパーツのタイプ（種類）を書きます。
いろんなパーツのタイプがあるので、
公式ドキュメントを参考にいろいろと作成してみてください。
デイトラ独立サポートで、僕のメンターだったはにわまんさんの記事がめちゃめちゃわかりやすいです♪
② id
パーツをHTMLに出力する時に使用するものになります。
今回は、partsとしておきます。
③ label
パーツの上部にラベル（名前）をつけて表示するときに使う部分になります。
④ default
パーツを生成する時に初期値で設定されているものになります。特になくても大丈夫ですが、見本として書いておきたい場合に使います。
⑤ info
インフォは、ちょっとした説明や注意書きがある場合に使用するものになります。こおinfoも特になくても大丈夫です。
基本はこのワンセットになるので、何回も練習してみてください。
Shopify Schemaの内容をマークアップ
次に出力用のタグをマークアップ（コーディング）していきます。
出力用のタグは、Liquidで下記のような感じで書きます。
{{section.settngs.(ID名)}}そして、それをマークアップすると、こんな感じになります。
<h2>{{section.settngs.parts}}</h2>出力すると、
最初に表示させたい文章となります。
手順② Shopify Schemaの内容をページへ反映
では、作成したパーツ（セクション）をページへ反映させていきます。
作成したパーツ（セクション）を表示させたいテンプレートにタグで埋め込む感じです。
今回は、新しいテンプレートを用意して、page.parts.liquidを作成します。
「テーマ」 > 「アクション」 > 「コードを編集する」 > 「新しいtemplateを追加する」 > 「新しいテンプレートを追加する」 で page.parts.liquid を作成します。
そして、このページのコードに手順① Schemaを使ったパーツ（セクション）を加えます。
<div class="page-width">
<div class="">
<div class="">
<div class="">
<h1>{{ page.title }}</h1>
</div>
{% section 'parts' %} → 加える
<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>
ページを作成したテンプレートをカスタマイズできるうように、
「ページ」 > 右上の「ページを追加」 > Title に 「パーツ」 を記入して > テンプレート のところで、「page.parts」を選択します > 「保存する」
これで、新しい固定ページができたので、
「テーマ」 > 「カスタマイズ」 > 左上のセレクターで作成したページの「パーツ」を選択 > 左に設定したパーツ 「ラベル」を選択 > 反映を確認
これで、Schemaを使った開発が出来ました。
Schemaを使ったパーツをTOPページに反映
TOPページに反映する方法を紹介していきます。
今までご紹介した、
"settings":[
{
"type": "text",
"id": "parts",
"label":"ラベル",
"default": "最初に表示させたい文章",
"info":"使う人がわかりやすいように表記できる"
}
]この下にプリセッツというものを記述します。
"presets":[
{
"name":"TOPページの〇〇〇〇",
"category":"テキスト"
}
]加えるときは、コンマ「 , 」を入れるので、全体としてこんな感じになると思います。
{% schema %}
{
"name": "〇〇〇〇",
"settings":[
{
"type": "text",
"id": "parts",
"label":"ラベル",
"default": "最初に表示させたい文章",
"info":"使う人がわかりやすいように表記できる"
}
],
"presets":[
{
"name":"TOPページの〇〇〇〇",
"category":"テキスト"
}
]
}
{% endschema %}プリセッツの内容
- ① “name”
- ② “category”
このネームとカテゴリーを記述します。
name
ネームは、セクションを追加する際に表示される名前になります。
category
TOPページでは、いろんなカテゴリーが用意されているので
どのカテゴリーに入れるのかを決めるものになります。
もちろん新しいカテゴリーとして作成することも可能です。
このプリセッツを追加するだけで、TOPページ（ホームページ）で作成したパーツ（セクション）が使用できるので、ぜひ試してみてください。
Schema まとめ
この記事では、ShopifyのSchemaを使って、カスタマイズ項目を作成する方法を解説しました。
Shopifyのカスタマイズを極めることができれば、各ページを誰もが直感的に編集できるようになるので、ユーザーが管理画面からより更新しやすくするために、ぜひチャレンジして見てください！！
Shopifyを学んでいる方で、Liquidの学習方法を知りたい人は、下記に僕が独学で学習した方法を書いていますので、よかったらどうぞ。
【初心者用】Shopify Liquid 学習方法のまとめ | YOSUKE-BLOG
ShopifyのLiquidを学習する人が増えましたので、少しでもお役に立てればと。ここに学習したことのアウトプットをしていきます。Shopify Liquid学習 コードの基礎知識、Shopify Liquid学習 テーマのファイル構成、Shopify Liquid学習 テーマの開発の手順