しかし、 Shopify Liquidとは何でしょうか?
もう探す必要はありません。この記事では、Liquid について知っておく必要のあるすべての情報を、できるだけ簡単な方法で提供します。あなたのような初心者に最適です。
この記事の最後にはボーナスのヒントも用意されているので、今すぐコーディングを開始できます。
概要
Shopify Liquidの紹介
Shopify Liquid は、もともと Tobias Lutke (Shopify の共同設立者) によって作成されたオープンソースのテンプレート言語です。これは、すべての Shopify テーマが記述されているテンプレート言語です。
Liquid をテンプレート言語と呼ぶ人もいれば、テンプレート エンジンと呼ぶ人もいます。どちらもある意味では正しいのですが、Liquid コードは主に、データを抽出してブラウザーにレンダリングされるときにデザイン要素に置き換えるコマンドのプレースホルダーであるため、テンプレート言語と呼ぶ方が正確です。
機能がどれほど複雑であっても、すべてのShopify テーマが同じというわけではありません。
Shopify の特定のテーマの見た目や雰囲気は気に入っているものの、本当に気に入っている機能が 1 つ欠けている場合はどうしますか? 通常は、その機能を備えた他の代替テーマを探すことになります。
ただし、テンプレート言語の使い方がわかっている場合は、テーマの liquid ファイルにアクセスし、コードを編集してその機能を追加できます。
それがShopify Liquidの機能です。つまり、選択したテーマのコア部分を編集して希望する外観と雰囲気を実現する権限を与えることで、そのテーマを限定するのです。
Liquid Codeはテンプレートとデータの間の橋渡しとして機能します
この概念をよりよく理解するには、まず、Shopify が動的な Web サイトであることを理解する必要があります。
Shopify ストアの動的要素 (Liquid コードで記述) には、製品の表示、 コレクション ページ、チェックアウト ページなどがあり、顧客の場所、製品の選択、および Web サイトで実行されるその他のアクションに応じて変更できます。
同時に、Shopify ストアにはメニュー、ヘッダー、フッターなどの静的要素 (HTML、CSS、JavaScript で記述) があり、これらは Web サイトのどこにアクセスしてもまったく同じように読み込まれます。
仕組みは次のとおりです:
- ShopifyユーザーがブラウザにストアのURLを入力します
- Shopifyは、どのストアがリクエストされているか、クエリがどの特定のページに移動したいかを判断します。
- 次に、どのShopifyテーマがストアでアクティブに使用されているかを特定し、ブラウザにロードします。
- ページに流動的なプレースホルダー（商品コレクションなど）がある場合、Shopifyはそれを処理し、これらのプレースホルダーはストア内のリアルタイムデータに置き換えられます。
- リキッドコードが識別され、処理された後、HTMLに置き換えられ、ブラウザインターフェースに読み込まれます。
- これらのプロセスをすべて終えると、ブラウザは何を表示するかを認識し、そのデータをインタラクティブなディスプレイとして顧客の画面に視覚的に表示します。
Shopify ストアで Liquid ファイルにアクセスするにはどうすればいいですか?
Liquid ファイルは Shopify ダッシュボードで簡単に見つけることができます。
ステップ 1: Shopify ダッシュボードを開きます。左側のパネルで、オンライン ストアを見つけてクリックします。
ステップ 2 : オンラインストアメニュー項目の下にある「テーマ」をクリックします。すると、Shopify ストアで現在使用しているテーマが表示されます。3つのドットのアイコンをクリックし、 「複製」をクリックします。
Liquid テーマ ファイルにアクセスして確認するだけであれば、現在のテーマを複製する必要はありません。ただし、変更を加えたり、Liquid コードを自分で入力したりする場合は、コーディング エラーが発生したときにライブ ストアに影響を与えないようにするために、Shopify ストアを複製するのが最も安全な方法です。
ステップ 3 : 複製をクリックしてから数秒後、現在のテーマのコピーが下に作成されます。テーマ ライブラリセクションまで下にスクロールし、 3 つのドットのアイコンをクリックして、コードの編集 を選択します。その後、テーマ ファイルと Web サイト内のその他のコードを含む別のページにリダイレクトされます。
ステップ 4: Shopify コード エディターの左側のパネルに、liquid ファイルが表示されます。これらは「 .liquid 」拡張子を使用しているため、見つけて識別するのはかなり簡単です。
Liquid 構文と区切り文字
プログラミングにおいて、区切り文字は文字列の始まりと終わりを示す文字です。Liquid では 2 種類の区切り文字が使用されるため、単一のテンプレート ファイル内で Liquid コードを簡単に識別できます。
構文
プログラミングにおける構文とは、コンピューターが読み取りおよび実行可能なコードを作成するために、すべての文字の配置を制御する一連の規則です。
Shopify Liquid は、 100 を超えるオブジェクト、フィルター、タグの組み合わせで構成されています。これらの意味を知ることは重要ですが、Liquid コードの書き方を学ぶことはそれだけではありません。これらの単語を中括弧、パーセンテージ、ドット、ハイフンなどの他の文字と一緒に配置する方法も知っておく必要があります。
一部のプログラミング言語では大文字と小文字の区別やスペースが重要ですが、他のプログラミング言語では重要ではありません。
コンピューターは文字を0と1の組み合わせ (バイナリ システムとも呼ばれます) として解釈して動作することを覚えておいてください。コード エディターに入力するすべての文字は 0 と 1 として解釈され、コンピューターの解釈に基づいてアクションが実行されます。
したがって、コード ブロックは視覚的には正しく見えても、ドットの位置が間違っていたり、大文字になっている文字が間違っていたりすると、出力に影響します。
構文を英語として考えてみましょう。単語の意味を知るだけでは十分ではありません。本当に言いたいことを伝えるためには、適切な文脈で単語を使用する方法も学ぶ必要があります。プログラミングでも同じことが言えます。
区切り文字
二重中括弧 - {{ … }}
- オブジェクトとフィルターを定義するために使用
- これらの区切り文字は、データベースからの動的なコンテンツを配置するために使用されます。
- リキッドコード内の二重中括弧は出力を表す
中括弧とパーセンテージ - {% … %}
- タグを定義するために使用
- これらの区切り文字は、Shopify ストア内の論理アクションのプレースホルダーです。
- これらの中括弧付きパーセント記号はロジックを表し、次のような機能を担います。
さて、上記の Shopify ストアの例に戻り、どのコードが出力とロジックを表しているかを見てみましょう。
このコード ブロックでは、区切り文字が実際に使用されているのがわかります。したがって、liquid を分析すると、特定のコードが出力を引き出したり、使用されている区切り文字に基づいてロジックを実装したりするタイミングがわかります。
このコードブロックを解釈してみましょう
{{ page_title }}
つまり、コードは現在表示されている製品、コレクション、またはページのタイトルを取得して表示します。
コードには{% … %}区切り文字があるため、ロジックも存在します。
{%- unless page_title contains shop.name %} – {{ shop,name }} {% endunless -%}
{%- … -%}が使用されていることに気づくでしょう{% … %}パーセント記号の横にあるダッシュはハイフントリム演算子と呼ばれ、レンダリングされた出力の “unless” ステートメントの周囲の不要な空白を削除します。
until は、特定の条件が満たされない場合にのみデータを引き出す制御フロー タグです。これは、条件が満たされた場合にデータを引き出すif制御フロー タグの逆です。
page_title はページタイトルを参照するオブジェクトです。
実行される演算子はcontains であり、文字列または配列内に部分文字列が存在するかどうかをチェックします。
shop.nameはショップの名前を取り出す別のオブジェクトです。
&ndash はハイフン ( – ) を表す HTML コードであり、実際の Web ページでは水平線として表示されます。
簡単に言うと、ページタイトルにショップ名が含まれていない場合、ウェブページにはショップ名が表示されます。一方、ページタイトルにショップ名が含まれている場合は何も表示されません。
オブジェクト、フィルター、タグについてお話しましょう
区切り文字と構文について説明したので、次はShopify Liquidの 3 つの主要部分について説明します。
Liquid コードの動作をより深く理解するには、コードを入力するときにオブジェクト、フィルター、タグが何を行うかを知ることが重要です。
しかし、これらは一体何なのでしょうか? 一つずつ説明していきましょう。
注: 以下のスクリーンショットは、 Liquid Cheat Sheetから取得したものです。個々のオブジェクト、フィルター、タグの詳細な定義については、リンクをクリックしてください。
液体オブジェクト
Liquid オブジェクト (Liquid 変数とも呼ばれます) は、テーマを構築する際の変数を表します。コードで何をするにしても、Liquid オブジェクトとやり取りすることになります。したがって、これが何を表しているかを知っておくことは非常に重要です。
Liquid を図書館として考えてみましょう。オブジェクトは本棚で、本はプロパティです。たとえば、 page.titleを見つける必要がある場合は、まずpageというラベルの本棚を見つけて、 title というタイトルの本を取り出す必要があります。
簡単に言えば、オブジェクトは Shopify テーマのデータにアクセスするために使用され、取り出したいデータはすべて出力されます。
液体フィルター
フィルターは、データから取得した出力（オブジェクト）に対してどのようなアクションを実行するかを決定します。これらは、数値、文字列、変数、およびオブジェクトの出力を変更するために使用されるメソッドです。Liquid コード内のフィルターは{{ … | join: ", " }}や{{ … | first }}のように、先頭にパイプ文字列 ( | ) が付いているため、簡単に見つけることができます。
上記のライブラリの例では、 page.titleを取り出し、フィルターを追加することで、それをどうするかを決定できます。特定のページで本を開くか、逆さまにするか、空中に投げるかなどです。
液体タグ
{% … %}で囲まれた Liquid タグは、Liquid テンプレートにロジックを実装するために使用されます。タグは条件付きで機能するため、Liquid コードの非表示部分です。
Shopify ストアの例から抽出したこのコード チャンクに戻ります。
{%- unless page_title contains shop.name %} – {{ shop,name }} {% endunless -%}
これで、このコード行では条件が満たされない場合にのみ実行される、 unlessタグが使用されていることがわかりました。ページ タイトルが Yankee Caps、ショップ名が Caps 4 Less だとします。
このコード行の条件は、「ページ タイトル (Yankee Caps) にショップ名 (Caps 4 Less)が含まれていない場合は、「Caps 4 Less」と表示する」と解釈されます。
しかし、次のようなifタグを使用してコードが記述されている場合は、
{%- if page_title contains shop.name %} – {{ shop,name }} {% endif -%}
ロジック タグが変更されたため、解釈も変更されました。このコードの意味は、「ページ タイトル (Yankee Caps) にショップ名 (Caps 4 Less)が含まれている場合は、「Caps 4 Less」と表示する」です。
さらなる学習のためのリソース
これで完了です。これで、 Shopify Liquid の用途、機能、3 つの主要部分がどのように連携して目的のデザイン要素を作成するかがわかり、Shopify Liquidの概要がわかりました。また、サンプル コード ブロックを解釈して、区切り文字がどのように機能し、テンプレート言語で何を表すかを理解しました。
問題は、ここからどこへ進むかということです。Shopify Liquidについてさらに詳しく知りたいときに使える、事実に基づいたリソースをいくつか紹介します。
まずは、David Martin - UXHACKS による Shopify クラッシュ コースから始めましょう。
この短期集中コースは、フィルター、演算子、タグの基本を取り扱う、中上級レベルの Liquid コースです。また、実用的なコードを書く上で非常に重要な Liquid 構文についても説明します。
さらに重要なのは、David Martin が Liquid テンプレートの作成プロセスを順を追って説明してくれることです。ぜひ一緒に進めてください。
あまりにも大変であれば、休憩を取り、吸収できるものだけを吸収するようにしてください。
Liquid で使用される何百ものコードをメモする必要はありません。Liquid コードの能力を高めるのに役立つ追加の資料を以下に示します。
- Liquid コーディングで使用されるすべての基本コード、フィルター、タグ、オブジェクトの完全なリスト。学習プロセスで必要なコードを見つけるのに役立つので、手元に置いてください。
- Shopify 開発者によって書かれた、Liquid に関するすべての詳細なドキュメント。このホワイト ペーパーには、用語と定義、および各コードの使用例が記載されています。
- 学習プロセスを補完する Liquid 関連ブログのライブラリ。これらのブログは、Liquid コードをより深く理解し、よりよく理解するのに役立ちます。
- テンプレート作成のニーズに迅速に対応する必要がある場合に、適切な構文で記述されたコードの例を Liquid ファイルにコピーして貼り付けることができます。これらの例には、コレクション、ブログ、ナビゲーションなどのコードが含まれています。
ChatGPTを使用して今すぐコーディングを始めましょう
ChatGPT（またはChat Generative Pre-Trained Transformer）は、OpenAIが開発した人工知能（AI）ツールです。ユーザーがプロンプト（質問、コマンド、その他の種類のクエリ）を入力すると、学習したデータに基づいて応答が生成されます。ChatGPTのユニークな点は、これまでのチャットボットとは異なり、人間のような会話を作成できることです。
ChatGPT は適切に使用すれば、電子メール、ブログ、記事、スクリプト、またはあらゆる形式の文書を生成できる強力なツールになります。もちろん、Liquid Code も含まれます。
このビデオでは、 Coding with Robby がChatGPT を使用して liquid コードを生成し、それを liquid ファイルに貼り付けて、実際にコードの書き方を知っているかどうかを確認します。
このビデオ実験は、ChatGPT によって記述されたコードを使用して Shopify セクションを作成することを目的としています。最初に追加されたセクションはアナウンス バーで、AI はデザインを表示するコードを作成することができました。
この実験では、AI に製品のセクションを生成するよう依頼しました。ChatGPT は製品セクションを表示するコードを生成できましたが、望ましい結果を得るにはユーザーがコードをもう少し調整する必要がありました。
まとめ
ChatGPT は、Liquid コードの生成に優れた機能を発揮しました。ただし、望ましい視覚的結果を得るには、追加のプロンプトと手動の調整がまだ必要でした。
AI は確かに液体コードに関する知識が豊富ですが、限界もあります。そのいくつかは次のとおりです。
- ChatGPT は、Shopify ストアで使用できるように調整する必要がある一般的な liquid コードを生成します。
- AI は Web サイト内の既存のコードの相関関係を認識していないため、生成したコードはユースケースに適用できる場合とできない場合があります。
- 生成されるコードの有用性は、入力するプロンプトの正確さに依存します。
- 残念ながら、プログラミングの知識がほとんどない場合、ChatGPT を使用して完全に機能する Shopify ストアを生成することはできません。したがって、ChatGPT を便利にするには、適切なプロンプトを入力できるように、コードの動作も学習する必要があります。
- ChatGPT は Web 開発者の仕事を行うことはできませんが、小さなセクションのコードを書くなどの小さなタスクを完了するための優れたアシスタントになります。
ChatGPTを使用してLiquidコードを解釈する
ChatGPT にこのような制限がある場合、Liquid Code で AI をどのように活用できるのか疑問に思うかもしれません。
学習プロセスのアシスタントとして使用できます。実際、ChatGPT はコード ブロックを解釈し、基本的なレベルで説明するのに優れています。
私たち自身もこれを試してみましたが、反応は非常に満足のいくものでした。また、Shopify Liquid についてまったく知識のない人にとって、 ChatGPT はインターネット上で見つかる豊富な情報を簡素化する優れた方法です。
ChatGPTにコードの解釈を依頼する
まず、 OpenAIにアクセスし、メールアドレスを使用してログインします。その後、チャット インターフェイスにリダイレクトされ、プロンプトの入力を開始できます。
このブログで以前使用した Shopify ストアの例に戻りましょう。今回は、別のコード チャンクを使用します。
次のコードブロックの意味を理解したいとします。
次に、次のプロンプトを入力します: (どのような種類の情報を探しているのかを具体的に指定します)
このLiquidコードを解釈し、非常に簡単な言葉で説明してください。使用されているすべてのオブジェクト、タグ、フィルターを特定し、個別に説明してください。
{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href=" {{ settings.favicon | image_url: width: 32, height: 32 }} ">
{%- endif -%}
ChatGPT が返す応答は次のとおりです。
ご覧のとおり、ChatGPT はプロンプトに従うのが非常に得意です。コードを 1 行ずつ解釈し、コード (およびその小さな要素) がどのように機能し、Web ページでどのような結果になるかを説明しました。
別のプロンプトで別のコードを試してみましょう。
プロンプト: (ここでは、プロンプトをあまり具体的にしすぎないようにします)
このコードが何をするのか説明してください。
{%- unless settings.type_header_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" クロスオリジン>
{%- endunless -%}
そして、その返答は次の通りです。
ご覧のとおり、Liquid コードを使用していることを指定していませんでしたが、ChatGPT はそれがテンプレート言語であることを識別できました。また、コードを 1 行ずつ説明し、有意義な洞察を提供することもできます。これは、AI ツールがプロンプトを超えて理解できるほど賢いことを示しています。
最初のプロンプトで使用したプロンプトを使用して、プロンプトをより具体的にしてみましょう。
このリキッドコードを解釈し、非常に簡単な言葉で説明してください。使用されているすべてのオブジェクト、タグ、フィルターを特定し、個別に説明してください。
{%- unless settings.type_header_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" クロスオリジン>
{%- endunless -%}
ChatGPTの回答:
より具体的なプロンプトにより、ChatGPT はより確実な回答とより正確な解釈を提供できるようになりました。
まとめ
この演習から、私たちは多くのことを学びました。
- ChatGPTはShopify Liquidを深く理解しています
- 得られる回答の正確さは、プロンプトがどれだけ具体的であるかに依存します。
- 正確な回答を得るには、どのような質問をすればよいかを知る必要があるため、Liquid Code に関する知識が少し必要です。
ChatGPT が返す応答に満足できない場合は、「応答を再生成」をクリックすると、同じ質問に対して別の回答が得られます。また、上で使用したのと同じプロンプトを入力すると、ChatGPT が提供した回答と似たエッセンスが含まれているにもかかわらず、異なる回答が返される可能性があることにも注意してください。
読む: プログラミングのためのチャット GPT: チャット GPT 用の 100 以上のコーディング プロンプト
結論
経験豊富な Web 開発者にとって、 Shopify Liquid は、変更をより迅速かつ安全に実行し、設計エラーのリスクを最小限に抑えることができるシンプルなコードです。
しかし、正直に言うと、コーディングの経験がまったくない人にとって、Liquid を学ぶのは大変なことです。特に、CSS、HTML、JSON などのコードは Shopify ストアのバックエンドで調和して使用されるため、これらのコードがどのように機能するかについても基本的な理解が必要です。
これがあまりにも手間とストレスがかかりすぎるように思われる場合、また間違いを犯したときに不安が生じる可能性がある場合は、 PageFly のようなコード不要のページビルダーを使用して、コードを必要とせずに Web サイトに変更を加えることができます。
読んでください: PageFly の使い方: 6 分以内に開始
Shopify Liquid の学習は一夜にして完了するものではありません。すべてを理解するには、大量の情報を一貫して吸収する体系的なプロセスが必要です。ChatGPT を学習アシスタントとして使用することで、コード エディターに表示されるコードのコンテキストを簡単に理解できるため、学習段階がより迅速かつ容易になります。
正しいプロンプトを使用することを忘れないでください。
